Currently, I am constructing a table using react-table. However, TypeScript is throwing errors regarding the properties I have included in the columns. This is how my columns are structured:
const columns = useMemo(
() => [
{
Header: 'Name',
accessor: 'name',
className: '[some classes here]',
isSortable: true,
},
...
When it comes to rendering the table, it looks like this:
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => {
const getHeaderPropsArgs = [{ className: column.className }];
if (column.isSortable) getHeaderPropsArgs.push(column.getSortByToggleProps());
return (
<th {...column.getHeaderProps(getHeaderPropsArgs)}>
<div>
{column.render('Header')}
{column.isSortable ? <SortIcon isSorted={column.isSorted} isSortedDesc={column.isSortedDesc} /> : null}
</div>
</th>
);
To clarify, some of the columns can be sorted and for these columns, I display a custom SortIcon component in the header. Additionally, certain columns have specific classes associated with them, which I include in getHeaderProps alongside the instruction for sortable or non-sortable.
The issue arises when TypeScript flags these two added properties in columns:
Property 'className' does not exist on type 'ColumnInstance<object>'.
Property 'isSortable' does not exist on type 'ColumnInstance<object>'.
I am seeking advice on the best approach to define these types correctly. Any suggestions would be greatly appreciated!