react-table and TypeScript: how do custom properties on columns work?

Question

I'm building a table using react-table, but TypeScript complains about properties I've added to the columns. My columns are set up like so:

const columns = useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
        className: '[some classes here]',
        isSortable: true,
      },
    ...

and I render the table like so:

<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>
    );

In other words, some of my columns are sortable, and for those columns I render a custom SortIcon component in the header. Some of the columns have classes associated with them, and I add those to getHeaderProps along with the instruction to make the column sortable or not.

TypeScript complains about these two properties that I've added to columns:

Property 'className' does not exist on type 'ColumnInstance<object>'.
Property 'isSortable' does not exist on type 'ColumnInstance<object>'.

Is there a good way to add these types? Or am I approaching this the wrong way?

score 1 · Accepted Answer · answered Apr 20 '21 at 16:41

I wasn't using the built-in support for sortable columns. Instead of adding a custom isSortable property, use disableSortBy: true. For the classes, this simpler version worked:

return (
  <th
    {...column.getHeaderProps([
      { className: column.className },
      column.getSortByToggleProps(),
    ])}
  >

react-table and TypeScript: how do custom properties on columns work?

1 Answers1