Disable selectAll checkbox in antd table conditionally

Viewed 4161

I am looking to disable selectAll checkbox in antd table conditionally (after a limit of select/unselect is reached, we have to show the checkbox disabled) Antd does have a prop hideSelectAll, however, I have a specific requirement to disable, not hide the checkbox.

3 Answers

However one way to disabled all the checkbox in antd table row is to return {disabled: true} on getCheckboxProps function on each cycle. If you have a unique key or item, you can use that to disable specific row, just return {disabled: true} if meet a condition. Here's sample on enabling the first two rows checkbox:

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Bon Jov",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "5",
    name: "User 5",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "6",
    name: "User 6",
    age: 99,
    address: "Sidney No. 1 Lake Park"
  }
];

const rowSelection = {
  getCheckboxProps: (record) => {
    const rowIndex = data.findIndex((item) => item.key === record.key);
    return {
      disabled: rowIndex > 1 //enable first 2 rows only
    };
  }
};

Here is a sample of disabling the first 4 rows:

const rowSelection = {
  getCheckboxProps: (record) => {
    const rowIndex = data.findIndex((item) => item.key === record.key);
    return {
      disabled: rowIndex < 4 //disable the first 4 rows only
    };
  }
};

Here's a working sample:

Edit

further to Akhil Raghav's answer

if you want to only disable certain rows based on a test like for example if your data had some kind of status and you only want to disable on those specific statuses.

const badStatuses = ["broken", "error"];

you could do something like

const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,

getCheckboxProps: (record) => {
  if (badStatuses.includes(record.status))
    return {
      disabled: true,
    };
  },
};
Related