Skip to content

Instantly share code, notes, and snippets.

@ggascoigne

ggascoigne/react-table.d.ts

Created December 3, 2019 03:29
Show Gist options
  • Save ggascoigne/646e14c9d54258e40588a13aabf0102d to your computer and use it in GitHub Desktop.
Save ggascoigne/646e14c9d54258e40588a13aabf0102d to your computer and use it in GitHub Desktop.
Download ZIP
Typescript definitions for react-table 7.0.0-beta.23
Raw
react-table.d.ts
// TypeScript Version: 3.5
// reflects react-table@7.0.0-beta.23
// note that if you are using this you might well want to investigate the use of
// patch-package to delete the index.d.ts file in the react-table package
declare module 'react-table' {
import {
ComponentType,
DependencyList,
EffectCallback,
MouseEvent,
ReactElement,
ReactNode,
} from 'react'
/**
* The empty definitions of below provides a base definition for the parts used by useTable, that can then be extended in the users code.
*
* @example
* export interface TableOptions<D extends object = {}}>
* extends
* UseExpandedOptions<D>,
* UseFiltersOptions<D> {}
*/
export interface TableOptions<D extends object> extends UseTableOptions<D> {}
export interface TableInstance<D extends object = {}>
extends Omit<TableOptions<D>, 'columns'>,
UseTableInstanceProps<D> {}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface TableState<
D extends object = {}
> {} /* tslint:disable-line no-empty-interface */
export interface Hooks<D extends object = {}> extends UseTableHooks<D> {}
export interface Cell<D extends object = {}> extends UseTableCellProps<D> {}
export interface Column<D extends object = {}>
extends UseTableColumnOptions<D> {}
export interface ColumnInstance<D extends object = {}>
extends Omit<Column<D>, 'id'>,
UseTableColumnProps<D> {}
export interface HeaderGroup<D extends object = {}>
extends ColumnInstance<D>,
UseTableHeaderGroupProps<D> {}
export interface Row<D extends object = {}> extends UseTableRowProps<D> {}
/* #region useTable */
export function useTable<D extends object = {}>(
options: TableOptions<D>,
...plugins: Array<PluginHook<D>>
): TableInstance<D>
/**
* NOTE: To use custom options, use "Interface Merging" to add the custom options
*/
export type UseTableOptions<D extends object> = {
columns: Array<Column<D>>
data: Array<D>
} & Partial<{
initialState: Partial<TableState<D>>
reducer: (
newState: TableState<D>,
action: string,
prevState: TableState<D>
) => TableState<D>
defaultColumn: Partial<Column<D>>
initialRowStateKey: IdType<D>
getSubRows: (originalRow: D, relativeIndex: number) => Array<D>
getRowId: (originalRow: D, relativeIndex: number) => IdType<D>
debug: boolean
}>
export interface UseTableHooks<D extends object> {
columnsBeforeHeaderGroups: Array<
(
flatColumns: Array<Column<D>>,
instance: TableInstance<D>
) => Array<Column<D>>
>
columnsBeforeHeaderGroupsDeps: Array<
(deps: any[], instance: TableInstance<D>) => any[]
>
useInstanceBeforeDimensions: Array<
(instance: TableInstance<D>) => TableInstance<D>
>
useInstance: Array<(instance: TableInstance<D>) => TableInstance<D>>
useRows: Array<
(rows: Array<Row<D>>, instance: TableInstance<D>) => Array<Row<D>>
>
prepareRow: Array<(row: Row<D>, instance: TableInstance<D>) => Row<D>>
// Prop Hooks
getTableProps: Array<(instance: TableInstance<D>) => object>
getTableBodyProps: Array<(instance: TableInstance<D>) => object>
getRowProps: Array<(row: Row<D>, instance: TableInstance<D>) => object>
getHeaderGroupProps: Array<
(headerGroup: HeaderGroup<D>, instance: TableInstance<D>) => object
>
getHeaderProps: Array<
(column: Column<D>, instance: TableInstance<D>) => object
>
getCellProps: Array<(cell: Cell<D>, instance: TableInstance<D>) => object>
}
export interface UseTableColumnOptions<D extends object>
extends Accessor<D>,
Partial<{
columns: Array<Column<D>>
show: boolean | ((instance: TableInstance<D>) => boolean)
Header: Renderer<HeaderProps<D>>
Cell: Renderer<CellProps<D>>
width?: number
minWidth?: number
maxWidth?: number
}> {}
export interface UseTableInstanceProps<D extends object> {
columns: Array<ColumnInstance<D>>
flatColumns: Array<ColumnInstance<D>>
headerGroups: Array<HeaderGroup<D>>
headers: Array<ColumnInstance<D>>
flatHeaders: Array<ColumnInstance<D>>
rows: Array<Row<D>>
getTableProps: (props?: object) => object
getTableBodyProps: (props?: object) => object
prepareRow: (row: Row<D>) => void
rowPaths: string[]
flatRows: Array<Row<D>>
state: TableState<D>
dispatch: TableDispatch<D>
totalColumnsWidth: number
}
export interface UseTableHeaderGroupProps<D extends object> {
headers: Array<ColumnInstance<D>>
getHeaderGroupProps: (props?: object) => object
totalHeaderCount: number
}
export interface UseTableColumnProps<D extends object> {
id: IdType<D>
isVisible: boolean
render: (type: 'Header' | string, props?: object) => ReactNode
getHeaderProps: (props?: object) => object
parent: ColumnInstance<D>
depth: number
index: number
}
export interface UseTableRowProps<D extends object> {
cells: Array<Cell<D>>
values: Record<IdType<D>, CellValue>
getRowProps: (props?: object) => object
index: number
original: D
path: Array<IdType<D>>
subRows: Array<Row<D>>
}
export interface UseTableCellProps<D extends object> {
column: ColumnInstance<D>
row: Row<D>
value: CellValue
getCellProps: (props?: object) => object
render: (type: 'Cell' | string, userProps?: object) => ReactNode
}
export type HeaderProps<D extends object> = TableInstance<D> & {
column: ColumnInstance<D>
}
export type CellProps<D extends object> = TableInstance<D> & {
column: ColumnInstance<D>
row: Row<D>
cell: Cell<D>
}
// NOTE: At least one of (id | accessor | Header as string) required
export interface Accessor<D extends object> {
accessor?:
| IdType<D>
| ((
originalRow: D,
index: number,
sub: {
subRows: D[]
depth: number
data: D[]
}
) => CellValue)
id?: IdType<D>
}
/* #endregion */
// Plugins
/* #region useColumnOrder */
export function useColumnOrder<D extends object = {}>(hooks: Hooks<D>): void
export namespace useColumnOrder {
const pluginName = 'useColumnOrder'
}
export interface UseColumnOrderState<D extends object> {
columnOrder: Array<IdType<D>>
}
export interface UseColumnOrderInstanceProps<D extends object> {
setColumnOrder: (
updater: (columnOrder: Array<IdType<D>>) => Array<IdType<D>>
) => void
}
/* #endregion */
/* #region useExpanded */
export function useExpanded<D extends object = {}>(hooks: Hooks<D>): void
export namespace useExpanded {
const pluginName = 'useExpanded'
}
export type UseExpandedOptions<D extends object> = Partial<{
manualExpandedKey: IdType<D>
paginateExpandedRows: boolean
getResetExpandedDeps: (instance: TableInstance<D>) => Array<any>
}>
export interface UseExpandedHooks<D extends object> {
getExpandedToggleProps: Array<
(row: Row<D>, instance: TableInstance<D>) => object
>
}
export interface UseExpandedState<D extends object> {
expanded: Array<IdType<D>>
}
export interface UseExpandedInstanceProps<D extends object> {
rows: Array<Row<D>>
toggleExpandedByPath: (path: Array<IdType<D>>, isExpanded: boolean) => void
expandedDepth: number
}
export interface UseExpandedRowProps<D extends object> {
isExpanded: boolean
canExpand: boolean
subRows: Array<Row<D>>
toggleExpanded: (isExpanded?: boolean) => void
getExpandedToggleProps: (props?: object) => object
}
/* #endregion */
/* #region useFilters */
export function useFilters<D extends object = {}>(hooks: Hooks<D>): void
export namespace useFilters {
const pluginName = 'useFilters'
}
export type UseFiltersOptions<D extends object> = Partial<{
manualFilters: boolean
disableFilters: boolean
defaultCanFilter: boolean
filterTypes: Filters<D>
getResetFiltersDeps: (instance: TableInstance<D>) => Array<any>
}>
export interface UseFiltersState<D extends object> {
filters: Filters<D>
}
export type UseFiltersColumnOptions<D extends object> = Partial<{
Filter: Renderer<FilterProps<D>>
disableFilters: boolean
defaultCanFilter: boolean
filter: FilterType<D> | DefaultFilterTypes | keyof Filters<D>
}>
export interface UseFiltersInstanceProps<D extends object> {
rows: Array<Row<D>>
preFilteredRows: Array<Row<D>>
setFilter: (
columnId: IdType<D>,
updater: ((filterValue: FilterValue) => FilterValue) | FilterValue
) => void
setAllFilters: (
updater: Filters<D> | ((filters: Filters<D>) => Filters<D>)
) => void
}
export interface UseFiltersColumnProps<D extends object> {
canFilter: boolean
setFilter: (
updater: ((filterValue: FilterValue) => FilterValue) | FilterValue
) => void
filterValue: FilterValue
preFilteredRows: Array<Row<D>>
filteredRows: Array<Row<D>>
}
export type FilterProps<D extends object> = HeaderProps<D>
export type FilterValue = any
export type Filters<D extends object> = Record<IdType<D>, FilterValue>
export type DefaultFilterTypes =
| 'text'
| 'exactText'
| 'exactTextCase'
| 'includes'
| 'includesAll'
| 'exact'
| 'equals'
| 'between'
export interface FilterType<D extends object> {
(
rows: Array<Row<D>>,
columnId: IdType<D>,
filterValue: FilterValue,
column: ColumnInstance<D>
): Array<Row<D>>
autoRemove?: (filterValue: FilterValue) => boolean
}
/* #endregion */
/* #region useGroupBy */
export function useGroupBy<D extends object = {}>(hooks: Hooks<D>): void
export namespace useGroupBy {
const pluginName = 'useGroupBy'
}
export type UseGroupByOptions<D extends object> = Partial<{
manualGroupBy: boolean
disableGroupBy: boolean
defaultCanGroupBy: boolean
aggregations: Record<string, AggregatorFn<D>>
groupByFn: (
rows: Array<Row<D>>,
columnId: IdType<D>
) => Record<string, Row<D>>
getResetGroupByDeps: (instance: TableInstance<D>) => Array<any>
}>
export interface UseGroupByHooks<D extends object> {
getGroupByToggleProps: Array<
(header: HeaderGroup<D>, instance: TableInstance<D>) => object
>
}
export interface UseGroupByState<D extends object> {
groupBy: Array<IdType<D>>
}
export type UseGroupByColumnOptions<D extends object> = Partial<{
aggregate: Aggregator<D> | Array<Aggregator<D>>
Aggregated: Renderer<CellProps<D>>
disableGroupBy: boolean
defaultCanGroupBy: boolean
groupByBoundary: boolean
}>
export interface UseGroupByInstanceProps<D extends object> {
rows: Array<Row<D>>
preGroupedRows: Array<Row<D>>
toggleGroupBy: (columnId: IdType<D>, toggle: boolean) => void
}
export interface UseGroupByColumnProps<D extends object> {
canGroupBy: boolean
isGrouped: boolean
groupedIndex: number
toggleGroupBy: () => void
getGroupByToggleProps: (props?: object) => object
}
export interface UseGroupByRowProps<D extends object> {
isAggregated: boolean
groupByID: IdType<D>
groupByVal: string
values: Record<IdType<D>, AggregatedValue>
subRows: Array<Row<D>>
depth: number
path: Array<IdType<D>>
index: number
}
export interface UseGroupByCellProps<D extends object> {
isGrouped: boolean
isRepeatedValue: boolean
isAggregated: boolean
}
export type DefaultAggregators =
| 'sum'
| 'average'
| 'median'
| 'uniqueCount'
| 'count'
export type AggregatorFn<D extends object> = (
columnValues: CellValue[],
rows: Array<Row<D>>,
isAggregated: boolean
) => AggregatedValue
export type Aggregator<D extends object> =
| AggregatorFn<D>
| DefaultAggregators
| string
export type AggregatedValue = any
/* #endregion */
/* #region usePagination */
export function usePagination<D extends object = {}>(hooks: Hooks<D>): void
export namespace usePagination {
const pluginName = 'usePagination'
}
export type UsePaginationOptions<D extends object> = Partial<{
pageCount: number
manualPagination: boolean
getResetPageDeps: (instance: TableInstance<D>) => Array<any>
paginateExpandedRows: boolean
}>
export interface UsePaginationState<D extends object> {
pageSize: number
pageIndex: number
}
export interface UsePaginationInstanceProps<D extends object> {
page: Array<Row<D>>
pageCount: number
pageOptions: number[]
canPreviousPage: boolean
canNextPage: boolean
gotoPage: (updater: ((pageIndex: number) => number) | number) => void
previousPage: () => void
nextPage: () => void
setPageSize: (pageSize: number) => void
pageIndex: number
pageSize: number
}
/* #endregion */
/* #region useRowSelect */
export function useRowSelect<D extends object = {}>(hooks: Hooks<D>): void
export namespace useRowSelect {
const pluginName = 'useRowSelect'
}
export type UseRowSelectOptions<D extends object> = Partial<{
manualRowSelectedKey: IdType<D>
getResetSelectedRowPathsDeps: (instance: TableInstance<D>) => Array<any>
}>
export interface UseRowSelectHooks<D extends object> {
getToggleRowSelectedProps: Array<
(row: Row<D>, instance: TableInstance<D>) => object
>
getToggleAllRowsSelectedProps: Array<(instance: TableInstance<D>) => object>
}
export interface UseRowSelectState<D extends object> {
selectedRowPaths: Array<IdType<D>>
}
export interface UseRowSelectInstanceProps<D extends object> {
toggleRowSelected: (rowPath: IdType<D>, set?: boolean) => void
toggleRowSelectedAll: (set?: boolean) => void
getToggleAllRowsSelectedProps: (props?: object) => object
isAllRowsSelected: boolean
selectedFlatRows: Array<Row<D>>
}
export interface UseRowSelectRowProps<D extends object> {
isSelected: boolean
toggleRowSelected: (set?: boolean) => void
getToggleRowSelectedProps: (props?: object) => object
}
/* #endregion */
/* #region useRowState */
export function useRowState<D extends object = {}>(hooks: Hooks<D>): void
export namespace useRowState {
const pluginName = 'useRowState'
}
export type UseRowStateOptions<D extends object> = Partial<{
initialRowStateAccessor: (row: Row<D>) => UseRowStateLocalState<D>
}>
export interface UseRowStateState<D extends object> {
rowState: Partial<{
cellState: UseRowStateLocalState<D>
rowState: UseRowStateLocalState<D>
}>
}
export interface UseRowStateInstanceProps<D extends object> {
setRowState: (rowPath: string[], updater: UseRowUpdater) => void // Purposely not exposing action
setCellState: (
rowPath: string[],
columnId: IdType<D>,
updater: UseRowUpdater
) => void
}
export interface UseRowStateRowProps<D extends object> {
state: UseRowStateLocalState<D>
setState: (updater: UseRowUpdater) => void
}
export interface UseRowStateCellProps<D extends object> {
state: UseRowStateLocalState<D>
setState: (updater: UseRowUpdater) => void
}
export type UseRowUpdater<T = unknown> = T | ((prev: T) => T)
export type UseRowStateLocalState<D extends object, T = unknown> = Record<
IdType<D>,
T
>
/* #endregion */
/* #region useSortBy */
export function useSortBy<D extends object = {}>(hooks: Hooks<D>): void
export namespace useSortBy {
const pluginName = 'useSortBy'
}
export type UseSortByOptions<D extends object> = Partial<{
manualSorting: boolean
disableSortBy: boolean
defaultCanSort: boolean
disableMultiSort: boolean
isMultiSortEvent: (e: MouseEvent) => boolean
maxMultiSortColCount: number
disableSortRemove: boolean
disabledMultiRemove: boolean
orderByFn: (
rows: Array<Row<D>>,
sortFns: Array<SortByFn<D>>,
directions: boolean[]
) => Array<Row<D>>
sortTypes: Record<string, SortByFn<D>>
getResetSortByDeps: (instance: TableInstance<D>) => Array<any>
}>
export interface UseSortByHooks<D extends object> {
getSortByToggleProps: Array<
(column: Column<D>, instance: TableInstance<D>) => object
>
}
export interface UseSortByState<D extends object> {
sortBy: Array<SortingRule<D>>
}
export type UseSortByColumnOptions<D extends object> = Partial<{
defaultCanSort: boolean
disableSortBy: boolean
sortDescFirst: boolean
sortInverted: boolean
sortType: SortByFn<D> | DefaultSortTypes | string
}>
export interface UseSortByInstanceProps<D extends object> {
rows: Array<Row<D>>
preSortedRows: Array<Row<D>>
toggleSortBy: (
columnId: IdType<D>,
descending: boolean,
isMulti: boolean
) => void
}
export interface UseSortByColumnProps<D extends object> {
canSort: boolean
toggleSortBy: (descending: boolean, multi: boolean) => void
getSortByToggleProps: (props?: object) => object
clearSorting: () => void
isSorted: boolean
sortedIndex: number
isSortedDesc: boolean | undefined
}
export type SortByFn<D extends object> = (
rowA: Row<D>,
rowB: Row<D>,
columnId: IdType<D>
) => 0 | 1 | -1
export type DefaultSortTypes = 'alphanumeric' | 'datetime' | 'basic'
export interface SortingRule<D> {
id: IdType<D>
desc?: boolean
}
/* #endregion */
/* #region useAbsoluteLayout */
export function useAbsoluteLayout<D extends object = {}>(
hooks: Hooks<D>
): void
export namespace useAbsoluteLayout {
const pluginName = 'useAbsoluteLayout'
}
/* #endregion */
/* #region useBlockLayout */
export function useBlockLayout<D extends object = {}>(hooks: Hooks<D>): void
export namespace useBlockLayout {
const pluginName = 'useBlockLayout'
}
/* #endregion */
/* #region useResizeColumns */
export function useResizeColumns<D extends object = {}>(hooks: Hooks<D>): void
export namespace useResizeColumns {
const pluginName = 'useResizeColumns'
}
export interface UseResizeColumnsOptions<D extends object> {
disableResizing?: boolean
}
export interface UseResizeColumnsColumnOptions<D extends object> {
disableResizing?: boolean
}
export interface UseResizeColumnsHeaderProps<D extends object> {
getResizerProps: (props?: object) => object
canResize: boolean
isResizing: boolean
}
/* #endregion */
type ElementDimensions = {
left: number
width: number
outerWidth: number
marginLeft: number
marginRight: number
paddingLeft: number
paddingRight: number
scrollWidth: number
}
export type UtilsType<D extends object> = {
safeUseLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void
findMaxDepth: (columns: Columns<D>, depth?: number) => any // to check column.reduce() return value
decorateColumn: (
columns: Column<D>,
userDefaultColumn: Partial<Column<D>>,
parent: Column<D>,
depth: number,
index: number
) => Column<D>
decorateColumnTree: (
columns: Column<D>,
defaultColumn: Partial<Column<D>>,
parent: Column<D>,
depth: number
) => Array<Column<D>>
makeHeaderGroups: (
flatColumns: Array<ColumnInstance<D>>,
defaultColumn: Partial<Column<D>>
) => Array<HeaderGroup<D>>
determineHeaderVisibility: (instance: TableInstance<D>) => void
getBy: (obj: any, path: string, def: string) => string // guess
defaultOrderByFn: (
arr: Array<Row<D>>,
funcs: Array<SortByFn<D>>,
dirs: Array<boolean>
) => Array<Row<D>>
getFirstDefined: (...props: any) => any
defaultGroupByFn: (
rows: Array<Row<D>>,
columnId: IdType<D>
) => Record<string, Row<D>>
getElementDimensions: (element: ReactElement) => ElementDimensions
flexRender: (component: ComponentType, props: any) => ReactElement
mergeProps: (props: any) => any
applyHooks: (hooks, initial, props) => any // todo
applyPropHooks: (hooks, args) => any // todo
warnUnknownProps: (props: any) => void
sum: (arr: Array<any>) => number // todo
isFunction: (a: any) => boolean
flattenBy: (
columns: Array<ColumnInstance<D>>,
childKey: IdType<D>
) => Array<ColumnInstance<D>>
ensurePluginOrder: (
plugins: Array<PluginHook<D>>,
befores: Array<string>,
pluginName: string,
afters: Array<string>
) => void
expandRows: (
rows: Array<Row<D>>,
{
manualExpandedKey,
expanded,
expandSubRows = true,
}: {
manualExpandedKey: string
expanded: Array<string>
expandSubRows?: boolean
}
) => Array<string>
functionalUpdate: (
updater: any,
old: Partial<TableState<D>>
) => Partial<TableState<D>> // todo
}
// Additional API
export const utils: UtilsType
export const actions: Record<string, string>
export const defaultColumn: Partial<Column>
type TableReducer<S, A> = (prevState: S, action: A) => S | undefined
export const reducerHandlers: Record<string, TableReducer<TableState, any>>
// Helpers
export type StringKey<D> = Extract<keyof D, string>
export type IdType<D> = StringKey<D> | string
export type CellValue = any
export type Renderer<Props> = ComponentType<Props> | ReactNode
export interface PluginHook<D extends object> {
(hooks: Hooks<D>): void
pluginName: string
}
export type TableAction = {
type: keyof typeof actions | string
}
export type TableDispatch<D extends object, A extends TableAction> = (
action: A
) => void
}
@ggascoigne
Copy link
Author

To get started, copy the file react-table-config.d.ts into your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions.

You can stop here if you like, but while this is simple, it's a bit misleading. Out of the box, these types will suggest that you have access to values that come from plugins that you aren't using, i.e. the error checking is weakened.

To bring the resulting types into better alignment with your plugins, you should edit your local copy of react-table-config.d.ts and comment out all of the interfaces that don't apply to your chosen set of plugins.

e.g.

if you are only using useSortBy and usePagination then you would take this:

extends UseExpandedOptions<D>,
  UseFiltersOptions<D>,
  UseGroupByOptions<D>,
  UsePaginationOptions<D>,
  UseRowSelectOptions<D>,
  UseSortByOptions<D>,
  UseFiltersOptions<D>,
  UseResizeColumnsOptions<D>,
  Record<string, any> {}

and convert it to this:

export interface TableOptions<D extends object>
  extends UsePaginationOptions<D>,
    UseSortByOptions<D> {}

Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extend all of the top-level interfaces.

Caveat

The interfaces are all global. If you have several different configurations for the table, you should create interfaces using the union of all of the plugins that you are using.

react-table-config.d.ts

import {
  UseColumnOrderInstanceProps,
  UseColumnOrderState,
  UseExpandedInstanceProps,
  UseExpandedOptions,
  UseExpandedRowProps,
  UseExpandedState,
  UseFiltersColumnOptions,
  UseFiltersColumnProps,
  UseFiltersInstanceProps,
  UseFiltersOptions,
  UseFiltersState,
  UseGroupByCellProps,
  UseGroupByColumnOptions,
  UseGroupByColumnProps,
  UseGroupByInstanceProps,
  UseGroupByOptions,
  UseGroupByRowProps,
  UseGroupByState,
  UsePaginationInstanceProps,
  UsePaginationOptions,
  UsePaginationState,
  UseResizeColumnsColumnOptions,
  UseResizeColumnsHeaderProps,
  UseResizeColumnsOptions,
  UseRowSelectInstanceProps,
  UseRowSelectOptions,
  UseRowSelectRowProps,
  UseRowSelectState,
  UseRowStateCellProps,
  UseRowStateInstanceProps,
  UseRowStateRowProps,
  UseSortByColumnOptions,
  UseSortByColumnProps,
  UseSortByInstanceProps,
  UseSortByOptions,
  UseSortByState,
  UseTableCellProps,
} from 'react-table'

declare module 'react-table' {
  // take this file as-is, or comment out the sections that don't apply to your plugin configuration

  export interface TableOptions<D extends object>
    extends UseExpandedOptions<D>,
      UseFiltersOptions<D>,
      UseGroupByOptions<D>,
      UsePaginationOptions<D>,
      UseRowSelectOptions<D>,
      UseSortByOptions<D>,
      UseFiltersOptions<D>,
      UseResizeColumnsOptions<D>,
      // note that having Record here allows you to add anything to the options, this matches the spirit of the
      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
      // feature set, this is a safe default.
      Record<string, any> {}

  export interface TableInstance<D extends object = {}>
    extends UseColumnOrderInstanceProps<D>,
      UseExpandedInstanceProps<D>,
      UseFiltersInstanceProps<D>,
      UseGroupByInstanceProps<D>,
      UsePaginationInstanceProps<D>,
      UseRowSelectInstanceProps<D>,
      UseRowStateInstanceProps<D>,
      UseSortByInstanceProps<D> {}

  export interface TableState<D extends object = {}>
    extends UseColumnOrderState<D>,
      UseExpandedState<D>,
      UseFiltersState<D>,
      UseGroupByState<D>,
      UsePaginationState<D>,
      UseRowSelectState<D>,
      UseSortByState<D> {}

  export interface Column<D extends object = {}>
    extends UseFiltersColumnOptions<D>,
      UseGroupByColumnOptions<D>,
      UseSortByColumnOptions<D>,
      UseResizeColumnsColumnOptions<D> {}

  export interface ColumnInstance<D extends object = {}>
    extends UseFiltersColumnProps<D>,
      UseGroupByColumnProps<D>,
      UseSortByColumnProps<D>,
      UseResizeColumnsHeaderProps<D> {}

  export interface Cell<D extends object = {}>
    extends UseTableCellProps<D>,
      UseGroupByCellProps<D>,
      UseRowStateCellProps<D> {}

  export interface Row<D extends object = {}>
    extends UseExpandedRowProps<D>,
      UseGroupByRowProps<D>,
      UseRowSelectRowProps<D>,
      UseRowStateRowProps<D> {}
}

@burtyish
Copy link

burtyish commented Dec 8, 2019

Just wanted to say thanks for making this available.
By this time there have already been several changes, but this is helpful.

@ggascoigne
Copy link
Author

You're welcome. FYI there's a later version waiting to be approved and merged over at DefinitelyTyped/DefinitelyTyped#40816.

@harrylaou
Copy link

Hi Guy,

Thank you for this. Really appreciated.
Not sure if there is a better place to ask about this.
I am trying to get my head around D extends object = {}
What does D represent? What else can I use for example instead of TableOptions<{}> ?
I know I can use a more specific object. Does this mean only that or something else too?

Many thanks

@harrylaou
Copy link

Nevermind,
I found the answer in

export type UseTableOptions<D extends object> = {
    columns: Array<Column<D>>;
    data: D[];
...

D is the type of the data (single model)

@S-AbdulRahim
Copy link

You're welcome. FYI there's a later version waiting to be approved and merged over at DefinitelyTyped/DefinitelyTyped#40816.

Hello brother,

thanks for this module it saves a lot of time.

Select

but I am having a problem with filters, I want to use the filter with multiple select input.
if anyone has solved it can you please help me with the solution

@ggascoigne
Copy link
Author

ggascoigne commented Jan 2, 2023 •
edited
Loading

but I am having a problem with filters, I want to use the filter with multiple select input. if anyone has solved it can you please help me with the solution

This really isn't the best place to ask these sorts of questions. I'd suggest heading over to https://tanstack.com/table/v8 and either joining the TanStack Discord server or checking out the Discussions at https://github.com/TanStack/table/discussions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment