Полный код можно найти здесь:
https://codesandbox.io/s/peaceful-allen-sn6os?file= / src / App.tsx
Я пытаюсь визуализировать таблицу, используя react-table и хотели бы динамически сгенерировать массив столбцов, содержащий атрибуты Headers, accessors и Cell, и установить их динамически на основе типов значений, присутствующих в данном наборе данных.
Например, в примере кода выше , данные представляют собой массив задач, и я пытаюсь настроить текст заголовков столбцов и значений ячеек для выравнивания по правому краю, если их тип number, путем проверки типа значений ячеек, присутствующих в наборе данных.
Однако у меня возникают проблемы с отображением атрибута Headers.
В документации упоминается следующее, и я считаю, что возвращаю действительный JSX, но, возможно, я здесь что-то делаю неправильно, и любая помощь будет очень признателен за решение этой проблемы! Спасибо.
https://react-table.tanstack.com/docs/api/useTable
Header: String | Function | React.Component => JSX
- Optional
- Defaults to () => null
- Receives the table instance and column model as props
- Must either be a string or return valid JSX
- If a function/component is passed, it will be used for formatting the header value, eg. You can use a Header function to dynamically format the header using any table or column state.