'sticky' does not exist in type 'Column<T>'

[Newbie012]

I have a basic Table component:

import React from "react";
import { useTable, UseTableOptions } from "react-table";
import { useSticky } from "react-table-sticky";

export type TableProps<D extends object = {}> = UseTableOptions<D>;

const Table = <D extends object>(props: TableProps<D>) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(props, useSticky);

  return (
    <table {...getTableProps()}>
      ...
    </table>
  );
};

export default Table;

And this is how I call the component:

<Table columns={columns} data={data}></Table>

The thing is, when I try to statically declare the columns, I get the following error:

type '{ id: string; Header: string; sticky: string; columns: ({ Header: string; accessor: "name"; } | { Header: string; accessor: "status"; } | { Header: string; accessor: "createdAt"; })[]; }' is not assignable to type 'Column<AdvertiserColumns>'.
  Object literal may only specify known properties, and 'sticky' does not exist in type 'Column<AdvertiserColumns>'.ts(2322)

Which is correct, because in the end it points to this interface:

export interface UseTableColumnOptions<D extends object> {
    id?: IdType<D>;
    Header?: Renderer<HeaderProps<D>>;
    width?: number | string;
    minWidth?: number;
    maxWidth?: number;
}

I know I can simply remove the typing Column<AdvertiserColumns>[], but then it might lead to some bugs (e.g write header instead of Header). Any ideas?

[franklinharvey]

How about Column<AdvertiserColumns & { sticky: "right" | "left" }>[]

[monoppa]

solved this by updating the react-table-config.d.ts file from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table

declare module 'react-table' {
  export type UseStickyOptions = Partial<{
    sticky: 'left' | 'right';
  }>;

  ...

  export interface ColumnInterface<
    D extends Record<string, unknown> = Record<string, unknown>
  > extends UseFiltersColumnOptions<D>,
      UseGlobalFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D>,
      UseSortByColumnOptions<D>,
      UseStickyOptions {} // add this line

  ...
}