Disable and uncheck checkboxes in table with And Design

Question

Issues and what I tried

I'm using Ant Design Table and CheckBox for frontend development.

I am newbie for frontend fields.

Here is my implementation to uncheck and disable all checkboxes in table with disable button.

I could somehow implement disable functionality but checkboxes cannot be checked by this approach.

import React, { useState } from 'react';
import { Table, Checkbox, Button } from 'antd';

const data = [
  {
    name: 'John Doe',
    age: 30,
    disabled: false,
  },
  {
    name: 'Jane Doe',
    age: 25,
    disabled: false,
  },
  {
    name: 'Peter Smith',
    age: 40,
    disabled: false,
  },
];

const App = () => {
  const [disableAll, setDisableAll] = useState(false);

  const [checked, setChecked] = useState(true);
  const [disabled, setDisabled] = useState(false);

  const toggleDisable = () => {
    setDisabled(!disabled);
    setChecked(false);
  };

  const onChange = (e) => {
    setDisableAll(e.target.checked);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Disable',
      dataIndex: 'disabled',
      render: (_, dataIndex) => (
        <Checkbox
          checked={checked}
          disabled={disabled}
          onChange={onChange}
        ></Checkbox>
      ),
    },
  ];

  return (
    <div>
      <Button
        style={{ margin: '0 10px' }}
        type="primary"
        size="small"
        onClick={toggleDisable}
      >
        {!disabled ? 'Disable' : 'Enable'}
      </Button>
      <Table columns={columns} dataSource={data} rowKey="name" />
    </div>
  );
};

export default App;

Expected behaviour

0. initial state
   

1. check checkboxes
   

2. uncheck and disable checkboxes
   

Answer 1

a key property for each data item, which is used as the rowKey for the Table. It also manages the checked and disabled states within each data item, allowing for individual control over each checkbox. The toggleDisable function now toggles the disabled state and unchecks the checkboxes if they are being disabled. The onChange function is updated to handle checkbox changes individually.

import React, { useState } from 'react';
import { Table, Checkbox, Button } from 'antd';

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 30,
    disabled: false,
    checked: false,
  },
  {
    key: '2',
    name: 'Jane Doe',
    age: 25,
    disabled: false,
    checked: false,
  },
  {
    key: '3',
    name: 'Peter Smith',
    age: 40,
    disabled: false,
    checked: false,
  },
];

const App = () => {
  const [dataSource, setDataSource] = useState(data);

  const toggleDisable = () => {
    const newData = dataSource.map(item => ({
      ...item,
      disabled: !item.disabled,
      checked: item.disabled ? item.checked : false,
    }));
    setDataSource(newData);
  };

  const onChange = (record, e) => {
    const newData = dataSource.map(item => {
      if (item.key === record.key) {
        return { ...item, checked: e.target.checked };
      }
      return item;
    });
    setDataSource(newData);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Disable',
      dataIndex: '',
      render: (text, record) => (
        <Checkbox
          checked={record.checked}
          disabled={record.disabled}
          onChange={(e) => onChange(record, e)}
        />
      ),
    },
  ];

  return (
    <div>
      <Button
        style={{ margin: '0 10px' }}
        type="primary"
        size="small"
        onClick={toggleDisable}
      >
        {dataSource.some(item => item.disabled) ? 'Enable' : 'Disable'} All
      </Button>
      <Table columns={columns} dataSource={dataSource} rowKey="key" />
    </div>
  );
};

export default App;