How to customize Ant table rowselection

You can add checkbox columns and customize render and titleRender of it to checkbox and then handle the events. if you incounter performance issue you have to add some memoization on columns or evenet handlers.

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table, Button, Checkbox } from "antd";

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`
  });
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      allChecked: false
    };

    this.columns = [
      {
        title: "Name",
        dataIndex: "name"
      },
      {
        dataIndex: "checked",
        title: () => {
          return (
            <Checkbox
              checked={this.state.allChecked}
              onChange={(e) => this.selectAll(e)}
            ></Checkbox>
          );
        },
        render: (text, rec, index) => {
          return (
            <Checkbox
              checked={
                this.state.selectedRowKeys.includes(rec.key) ||
                this.state.allChecked
              }
              onChange={(e) => this.onChange(e, rec)}
            ></Checkbox>
          );
        }
      },
      {
        title: "Age",
        dataIndex: "age"
      },
      {
        title: "Address",
        dataIndex: "address"
      }
    ];
  }

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);
  };

  onChange = (e, rec) => {
    const checked = e.target.checked;
    if (checked) {
      this.setState((state) => ({
        ...state,
        selectedRowKeys: [...state.selectedRowKeys, rec.key]
      }));
    } else {
      this.setState((state) => ({
        ...state,
        selectedRowKeys: [
          ...state.selectedRowKeys.filter((item) => item !== rec.key)
        ]
      }));
    }
  };

  selectAll = (e) => {
    const checked = e.target.checked;
    if (checked) {
      this.setState((state) => ({
        ...state,
        allChecked: true
      }));
    } else {
      this.setState((state) => ({
        ...state,
        allChecked: false
      }));
    }
  };

  onSelectChange = (selectedRowKeys) => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

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

    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button
            type="primary"
            onClick={this.start}
            disabled={!hasSelected}
            loading={loading}
          >
            Reload
          </Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ""}
          </span>
        </div>
        <Table columns={this.columns} dataSource={data} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));