Заменить верхнюю левую ячейку таблицы antd

Question

Я пытаюсь переопределить или обновить ячейку в приведенном ниже примере (таблица с расширяемыми строками): https://codesandbox.io/s/laughing-breeze-fds1b

Я пытаюсь добавить значок в самую левую ячейку заголовка, чтобы развернуть / сжать все строки. Есть предложения, как это сделать? Я вижу документацию по переопределению компонента с помощью свойства компонента, но я не очень хорошо знаю, как можно обновить данную ячейку (в заголовке):

<Table
  components={...}
/>

Есть предложения?

Answer 1

Все, что вы хотите, возможно, хотя и немного утомительно. Для этого вам нужно будет включить ключи открытых строк как часть состояния React и напрямую управлять расширением строк. Примерно так (с использованием хуков):

const [expandedRowKeys, setExpandedRowKeys] = React.useState([]); // Collapse all rows by default

const onExpansion = (isExpanded, record) => {
   if (isExpanded)
     setExpandedRowKeys([ ...expandedRowKeys, record.key]);
   else
     setExpandedRowKeys(expandedRowKeys.filter(key !== record.key));
}

const collapseAllRows = () => setExpandedRowKeys([])

const expandAllRows = () => setExpandedRowKeys(yourTableRecords.map(record => record.key));

return (
  <Table
    ...
    expandedRowRender={record => getExpansionContent()}
    expandedRowKeys={expandedRowKeys}
    onExpand={onExpansion}
  />
  <button onClick={expandAllRows}>Expand All</button>
  <button onClick={collapseAllRows}>Collpse All</button>

РЕДАКТИРОВАТЬ: Что касается размещения кнопки (-ей) для разворачивания / сворачивания всех строк в «столбце значков расширения» в верхнем левом углу, antd не поддерживает для этого, он поддерживается только для выбора строки. Если вам действительно нужна такая реализация, она должна быть вне antd. вам придется создать <Checkbox /> вручную, использовать CSS, чтобы разместить его в этой верхней левой строке (возможно, придется использовать отрицательные поля) и назначить обработчики для развертывания / свертывания всех строк.

Это взлом, но на данный момент это единственный способ добиться этого

Answer 2

Вы можете использовать метод рендеринга в столбце и вернуть значок. Также вы можете использовать фиксированный для отображения столбца в фиксированной позиции.

const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
    render: text => <Icon/>,
  },
];