javascripthtmlreactjsantd

How to change Ant table header checkbox


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


Solution

  • 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} />;
    

    enter image description here