How to change Ant table header checkbox

Question

I have a table in my application, where I use select for each row.

When I click on and select row, on the top-left corner appears a checked checkbox. I don't want to display that checkbox, I want to display something else, a div with a text for example. That div should appear only when I click on a checkbox from a row.

How to do this? I tried to find the event that renders that checkbox, but I didn't manage. How to access that element and to change it in other else? link to sandbox: https://codesandbox.io/s/selection-ant-design-demo-vlftk?file=/index.js

Answer 1

We can set custom component to columnTitle inside props rowSelection of <Table />

Set the title of the selection column
Type: string|React.ReactNode

Refer: document of Antd Table rowSelection

const rowSelection = {
  columnTitle: selectedRowKeys.length > 0 ? <div>XXX</div> : <></>,
  ...
}

<Table rowSelection={rowSelection} />;