How to toggle a checkbox in a row of a antd table?

Question

I have a checkbox in the first column of each row in the table. I can toggle the checkbox by clicking it.

How do I properly, "antd way", make it toggle by clicking in any area of the whole row?

Answer 1

It is there in antd documentation, but you need to take a state to handle it.

Rows can be selectable by making first column as a selectable column.

You can use

onRow={record => ({
  onClick: () => {
    this.selectRow(record);
  }
})}

and in selectRow

selectRow = record => {
  const selectedRowKeys = [...this.state.selectedRowKeys];
  if (selectedRowKeys.indexOf(record.key) >= 0) {
    selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
  } else {
    selectedRowKeys.push(record.key);
  }
  this.setState({ selectedRowKeys });
}

Demo and Source

Answer 2

There is an onRow property that you can use. See the example from the official documentation:

class App extends React.Component {
  state = {
    selectedRowKeys: [],
  };

  selectRow = (record) => {
    const selectedRowKeys = [...this.state.selectedRowKeys];
    if (selectedRowKeys.indexOf(record.key) >= 0) {
      selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
    } else {
      selectedRowKeys.push(record.key);
    }
    this.setState({ selectedRowKeys });
  }

  onSelectedRowKeysChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  }

  render() {
    const { selectedRowKeys } = this.state;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectedRowKeysChange,
    };

    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        onRow={(record) => ({
          onClick: () => {
            this.selectRow(record);
          },
        })}
      />
    );
  }
}

Source