Как изменить флажок заголовка таблицы Ant

Question

В моем приложении есть таблица, где я использую select для каждой строки.

Когда я нажимаю и выбираю строку, в верхнем левом углу появляется флажок. Я не хочу отображать этот флажок, я хочу отобразить что-то еще , например, div с текстом. Этот div должен появляться только тогда, когда я нажимаю на флажок из строки.

Как это сделать? Я пытался найти событие, которое отображает этот флажок, но мне не удалось. Как получить доступ к этому элементу и изменить его в другом? ссылка на песочницу: https://codesandbox.io/s/selection-ant-design-demo-vlftk?file= / index. js

Answer 1

Мы можем установить пользовательский компонент на columnTitle внутри реквизита rowSelection из <Table />

Установить заголовок столбца выбора
Тип: string | React.ReactNode

См. документ Таблица строк Antd. Выбор

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

<Table rowSelection={rowSelection} />;