Динамическое форматирование заголовков в таблице реакции с использованием TypeScript
Полный код можно найти здесь:
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.