Trying to pass columns created by ColumnDef is not possible without explicit any.

[Tenkir]

I'm working on the very delayed transition from V7 to V8 at the moment. Everything for the most part has been fairly smooth, but we're encountering substantial difficulty getting the types to conform for the columns field.

We have a React component, SortableTable, which takes columns as a prop. This is them passed to useReactTable to initialize the table.

We define columns as a Discriminated Union like:

type ContentInstanceColumnDef =
  | ColumnDef<ContentInstance, string>
  | ColumnDef<ContentInstance, ContentInstanceStatus>;

const columnHelper = createColumnHelper<ContentInstance>();
const columns: ContentInstanceColumnDef[] = [
  columnHelper.accessor('name', {
    header: 'Name',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('status', {
    header: 'Status',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('createdAt', {
    header: 'Date Created',
    cell: (info) => (
      <span>
        {formatDate(info.getValue())}
      </span>
    ),
  }),
];

Then pass it to the SortableTable component with a generic argument:

        <SortableTable<ContentInstance, ContentInstanceColumnDef>
          columns={columns}
       />

SortableTable however seems to require us to use an any field due to the way the types are set up internally in ReactTable:

export type ExtendedData = {id: string};

interface SortableCollectionTableProps<TItem extends ExtendedData, TColumn> {
  columns: TColumn[];
  items: TItem[];
}

export function SortableTable<
  TItem extends ExtendedData,
  // biome-ignore lint/suspicious/noExplicitAny: react-table seems to require this any
  TColumn extends ColumnDef<TItem, any>,
>({
  columns,
  items,
  onRowSelect,
}: SortableTable<TItem, TColumn>): JSX.Element {
  const table = useReactTable({
    columns: columns,
    data: items,
  });
  ...
}

Is there a suggested way to pass this type that doesn't require us to utilize an explicit any here? We try to avoid explicit any in our code base whenever possible.

A similar issue is posted here, but this is a more expansive explanation of the issue.