react-table och TypeScript: hur fungerar anpassade egenskaper på kolumner?

Jag bygger en tabell med react-table, men TypeScript klagar på de egenskaper jag har lagt till i columns. Mina columns är uppsatta på följande sätt:

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

och jag återger tabellen så här:

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

Med andra ord, vissa av mina kolumner kan sorteras, och för de kolumnerna renderar jag en anpassad SortIcon-komponent i rubriken. Vissa av kolumnerna har klasser kopplade till sig, och jag lägger till dem i getHeaderProps tillsammans med instruktionen att göra kolumnen sorteringsbar eller inte.

TypeScript klagar på dessa två egenskaper som jag har lagt till i columns:

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

Finns det ett bra sätt att lägga till dessa typer? Eller närmar jag mig detta på fel sätt?

Svar #1

Jag använde inte det inbyggda stödet för sorteringsbara kolumner. Istället för att lägga till en egen isSortable-egenskap, använd disableSortBy: true. För klasserna fungerade denna enklare version:

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

Relaterade artiklar