// Type definitions for react-table 7.0 // Project: https://github.com/tannerlinsley/react-table // Definitions by: Guy Gascoigne-Piggford , // Michael Stramel // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 3.5 // reflects react-table@7.0.0-rc.15 // tslint:disable:no-empty-interface // no-empty-interface is disabled to allow easy extension with declaration merging // tslint:disable:no-unnecessary-generics // no-unnecessary-generics is disabled because many of these definitions are either used in a generic // context or the signatures are required to match for declaration merging import { ComponentType, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactNode, ReactText, ReactFragment } from 'react'; export {}; /** * 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 * extends * UseExpandedOptions, * UseFiltersOptions {} * see https://gist.github.com/ggascoigne/646e14c9d54258e40588a13aabf0102d for more details */ export interface TableOptions extends UseTableOptions {} export interface TableInstance extends Omit, 'columns' | 'pageCount'>, UseTableInstanceProps {} export interface TableState { hiddenColumns?: Array>; } export interface Hooks extends UseTableHooks {} export interface Cell extends UseTableCellProps {} export interface Column extends UseTableColumnOptions {} export interface ColumnInstance extends Omit, 'id' | 'columns'>, UseTableColumnProps {} export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} export interface Row extends UseTableRowProps {} export interface TableCommonProps { style?: React.CSSProperties; } export interface TableProps extends TableCommonProps {} export interface TableBodyProps extends TableCommonProps {} export interface TableKeyedProps extends TableCommonProps { key: React.Key; } export interface TableHeaderGroupProps extends TableKeyedProps {} export interface TableFooterGroupProps extends TableKeyedProps {} export interface TableHeaderProps extends TableKeyedProps {} export interface TableFooterProps extends TableKeyedProps {} export interface TableRowProps extends TableKeyedProps {} export interface TableCellProps extends TableKeyedProps {} export interface TableToggleCommonProps { onChange?: () => void; style?: { cursor: string }; checked?: boolean; title?: string; indeterminate?: boolean; } export interface MetaBase { instance: TableInstance; userProps: any; } // inspired by ExtendState in https://github.com/reduxjs/redux/blob/master/src/types/store.ts export type Meta> = [Extension] extends [never] ? M : M & Extension; //#region useTable export function useTable( options: TableOptions, ...plugins: Array> ): TableInstance; /** * NOTE: To use custom options, use "Interface Merging" to add the custom options */ export type UseTableOptions = { columns: Array>; data: D[]; } & Partial<{ initialState: Partial>; reducer: (newState: TableState, action: ActionType, previousState: TableState) => TableState; useControlledState: (state: TableState, meta: Meta) => TableState; defaultColumn: Partial>; initialRowStateKey: IdType; getSubRows: (originalRow: D, relativeIndex: number) => D[]; getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; }>; export type PropGetter> = | ((props: P, meta: Meta) => P | P[]) | P | P[]; export type TablePropGetter = PropGetter; export type TableBodyPropGetter = PropGetter; export type HeaderPropGetter = PropGetter }>; export type FooterGroupPropGetter = PropGetter }>; export type HeaderGroupPropGetter = PropGetter }>; export type FooterPropGetter = PropGetter }>; export type RowPropGetter = PropGetter }>; export type CellPropGetter = PropGetter }>; export interface ReducerTableState extends TableState, Record {} export interface UseTableHooks extends Record { useOptions: Array<(options: TableOptions, args: TableOptions) => TableOptions>; stateReducers: Array< ( newState: TableState, action: ActionType, previousState?: TableState, instance?: TableInstance, ) => ReducerTableState | undefined >; columns: Array<(columns: Array>, meta: Meta) => Array>>; columnsDeps: Array<(deps: any[], meta: Meta) => any[]>; flatColumns: Array<(flatColumns: Array>, meta: Meta) => Array>>; flatColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; headerGroups: Array<(flatColumns: Array>, meta: Meta) => Array>>; headerGroupDeps: Array<(deps: any[], meta: Meta) => any[]>; useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; useInstance: Array<(instance: TableInstance) => void>; useRows: Array<(rows: Array>, meta: Meta) => Array>>; prepareRow: Array<(row: Row, meta: Meta) => void>; useControlledState: Array<(state: TableState, meta: Meta) => TableState>; getTableProps: Array>; getTableBodyProps: Array>; getHeaderGroupProps: Array>; getFooterGroupProps: Array>; getHeaderProps: Array>; getFooterProps: Array>; getRowProps: Array>; getCellProps: Array>; useFinalInstance: Array<(instance: TableInstance) => void>; } export interface UseTableColumnOptions extends Accessor, Partial<{ columns: Array>; show: boolean | ((instance: TableInstance) => boolean); Header: Renderer>; Cell: Renderer>; width?: number | string; minWidth?: number; maxWidth?: number; }> {} type UpdateHiddenColumns = (oldHidden: Array>) => Array>; export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} export interface UseTableInstanceProps { state: TableState; hooks: Hooks; plugins: Array>; dispatch: TableDispatch; columns: Array>; flatColumns: Array>; headerGroups: Array>; footerGroups: Array>; headers: Array>; flatHeaders: Array>; rows: Array>; getTableProps: (propGetter?: TablePropGetter) => TableProps; getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; prepareRow: (row: Row) => void; flatRows: Array>; totalColumnsWidth: number; toggleHideColumn: (columnId: IdType, value?: boolean) => void; setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; toggleHideAllColumns: (value?: boolean) => void; getToggleHideAllColumnsProps: (props?: Partial) => TableToggleHideAllColumnProps; } export interface UseTableHeaderGroupProps { headers: Array>; getHeaderGroupProps: (propGetter?: HeaderGroupPropGetter) => TableHeaderProps; getFooterGroupProps: (propGetter?: FooterGroupPropGetter) => TableFooterProps; totalHeaderCount: number; // not documented } export interface UseTableColumnProps { id: IdType; columns: Array>; isVisible: boolean; render: (type: 'Header' | 'Footer' | string, props?: object) => ReactNode; totalLeft: number; totalWidth: number; getHeaderProps: (propGetter?: HeaderPropGetter) => TableHeaderProps; getFooterProps: (propGetter?: FooterPropGetter) => TableFooterProps; toggleHidden: (value?: boolean) => void; parent: ColumnInstance; // not documented getToggleHiddenProps: (userProps?: any) => any; depth: number; // not documented index: number; // not documented placeholderOf?: ColumnInstance; } export interface UseTableRowProps { cells: Array>; values: Record, CellValue>; getRowProps: (propGetter?: RowPropGetter) => TableRowProps; index: number; original: D; id: string; subRows: Array>; state: object; } export interface UseTableCellProps { column: ColumnInstance; row: Row; value: CellValue; getCellProps: (propGetter?: CellPropGetter) => TableCellProps; render: (type: 'Cell' | string, userProps?: object) => ReactNode; } export type HeaderProps = TableInstance & { column: ColumnInstance; }; export type CellProps = TableInstance & { column: ColumnInstance; row: Row; cell: Cell; }; // NOTE: At least one of (id | accessor | Header as string) required export interface Accessor { accessor?: | IdType | (( originalRow: D, index: number, sub: { subRows: D[]; depth: number; data: D[]; }, ) => CellValue); id?: IdType; } //#endregion // Plugins //#region useAbsoluteLayout export function useAbsoluteLayout(hooks: Hooks): void; export namespace useAbsoluteLayout { const pluginName = 'useAbsoluteLayout'; } //#endregion //#region useBlockLayout export function useBlockLayout(hooks: Hooks): void; export namespace useBlockLayout { const pluginName = 'useBlockLayout'; } //#endregion //#region useColumnOrder export function useColumnOrder(hooks: Hooks): void; export namespace useColumnOrder { const pluginName = 'useColumnOrder'; } export interface UseColumnOrderState { columnOrder: Array>; } export interface UseColumnOrderInstanceProps { setColumnOrder: (updater: ((columnOrder: Array>) => Array>) | Array>) => void; } //#endregion //#region useExpanded export function useExpanded(hooks: Hooks): void; export namespace useExpanded { const pluginName = 'useExpanded'; } export interface TableExpandedToggleProps extends TableKeyedProps {} export type UseExpandedOptions = Partial<{ manualExpandedKey: IdType; paginateExpandedRows: boolean; expandSubRows: boolean; autoResetExpanded?: boolean; }>; export interface UseExpandedHooks { getExpandedToggleProps: Array<(row: Row, instance: TableInstance) => object>; } export interface UseExpandedState { expanded: Record, boolean>; } export interface UseExpandedInstanceProps { rows: Array>; toggleExpanded: (id: Array>, isExpanded: boolean) => void; expandedDepth: number; } export interface UseExpandedRowProps { isExpanded: boolean; canExpand: boolean; subRows: Array>; toggleExpanded: (isExpanded?: boolean) => void; getExpandedToggleProps: (props?: Partial) => TableExpandedToggleProps; } //#endregion //#region useFilters export function useFilters(hooks: Hooks): void; export namespace useFilters { const pluginName = 'useFilters'; } export type UseFiltersOptions = Partial<{ manualFilters: boolean; disableFilters: boolean; defaultCanFilter: boolean; filterTypes: FilterTypes; autoResetFilters?: boolean; }>; export interface UseFiltersState { filters: Filters; } export type UseFiltersColumnOptions = Partial<{ Filter: Renderer>; disableFilters: boolean; defaultCanFilter: boolean; filter: FilterType | DefaultFilterTypes | string; }>; export interface UseFiltersInstanceProps { rows: Array>; preFilteredRows: Array>; setFilter: (columnId: IdType, updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; setAllFilters: (updater: Filters | ((filters: Filters) => Filters)) => void; } export interface UseFiltersColumnProps { canFilter: boolean; setFilter: (updater: ((filterValue: FilterValue) => FilterValue) | FilterValue) => void; filterValue: FilterValue; preFilteredRows: Array>; filteredRows: Array>; } export type FilterProps = HeaderProps; export type FilterValue = any; export type Filters = Array<{ id: IdType; value: FilterValue }>; export type FilterTypes = Record; export type DefaultFilterTypes = | 'text' | 'exactText' | 'exactTextCase' | 'includes' | 'includesAll' | 'exact' | 'equals' | 'between'; export interface FilterType { (rows: Array>, columnIds: Array>, filterValue: FilterValue): Array>; autoRemove?: (filterValue: FilterValue) => boolean; } //#endregion //#region useFlexLayout export function useFlexLayout(hooks: Hooks): void; export namespace useFlexLayout { const pluginName = 'useFlexLayout'; } //#endregion //#region useGlobalFilter export function useGlobalFilter(hooks: Hooks): void; export namespace useGlobalFilter { const pluginName = 'useGlobalFilter'; } export type UseGlobalFiltersOptions = Partial<{ globalFilter: ((rows: Array>, columnIds: Array>, filterValue: any) => Array>) | string; manualGlobalFilter: boolean; filterTypes: FilterTypes; autoResetGlobalFilter?: boolean; }>; export interface UseGlobalFiltersState { globalFilter: any; } export interface UseGlobalFiltersInstanceProps { rows: Array>; preGlobalFilteredRows: Array>; setGlobalFilter: (filterValue: FilterValue) => void; } //#endregion //#region useGroupBy export function useGroupBy(hooks: Hooks): void; export namespace useGroupBy { const pluginName = 'useGroupBy'; } export interface TableGroupByToggleProps {} export type UseGroupByOptions = Partial<{ manualGroupBy: boolean; disableGroupBy: boolean; defaultCanGroupBy: boolean; aggregations: Record>; groupByFn: (rows: Array>, columnId: IdType) => Record>; autoResetGroupBy?: boolean; }>; export interface UseGroupByHooks { getGroupByToggleProps: Array<(header: HeaderGroup, instance: TableInstance) => object>; } export interface UseGroupByState { groupBy: Array>; } export type UseGroupByColumnOptions = Partial<{ aggregate: Aggregator | Array>; Aggregated: Renderer>; disableGroupBy: boolean; defaultCanGroupBy: boolean; groupByBoundary: boolean; }>; export interface UseGroupByInstanceProps { rows: Array>; preGroupedRows: Array>; toggleGroupBy: (columnId: IdType, toggle: boolean) => void; } export interface UseGroupByColumnProps { canGroupBy: boolean; isGrouped: boolean; groupedIndex: number; toggleGroupBy: () => void; getGroupByToggleProps: (props?: Partial) => TableGroupByToggleProps; } export interface UseGroupByRowProps { isGrouped: boolean; groupById: IdType; groupByVal: string; values: Record, AggregatedValue>; subRows: Array>; depth: number; id: string; index: number; } export interface UseGroupByCellProps { isGrouped: boolean; isRepeatedValue: boolean; isAggregated: boolean; } export type DefaultAggregators = 'sum' | 'average' | 'median' | 'uniqueCount' | 'count'; export type AggregatorFn = ( columnValues: CellValue[], rows: Array>, isAggregated: boolean, ) => AggregatedValue; export type Aggregator = AggregatorFn | DefaultAggregators | string; export type AggregatedValue = any; //#endregion //#region usePagination export function usePagination(hooks: Hooks): void; export namespace usePagination { const pluginName = 'usePagination'; } export type UsePaginationOptions = Partial<{ pageCount: number; manualPagination: boolean; autoResetPage?: boolean; paginateExpandedRows: boolean; }>; export interface UsePaginationState { pageSize: number; pageIndex: number; } export interface UsePaginationInstanceProps { page: Array>; pageCount: number; pageOptions: number[]; canPreviousPage: boolean; canNextPage: boolean; gotoPage: (updater: ((pageIndex: number) => number) | number) => void; previousPage: () => void; nextPage: () => void; setPageSize: (pageSize: number) => void; } //#endregion //#region useResizeColumns export function useResizeColumns(hooks: Hooks): void; export namespace useResizeColumns { const pluginName = 'useResizeColumns'; } export interface UseResizeColumnsOptions { disableResizing?: boolean; } export interface UseResizeColumnsState { columnResizing: { startX?: number; columnWidth: number; headerIdWidths: Record; columnWidths: any; isResizingColumn?: string; }; } export interface UseResizeColumnsColumnOptions { disableResizing?: boolean; } export interface TableResizerProps {} export interface UseResizeColumnsColumnProps { getResizerProps: (props?: Partial) => TableResizerProps; canResize: boolean; isResizing: boolean; } //#endregion //#region useRowSelect export function useRowSelect(hooks: Hooks): void; export namespace useRowSelect { const pluginName = 'useRowSelect'; } export interface TableToggleAllRowsSelectedProps extends TableToggleCommonProps {} export interface TableToggleRowsSelectedProps extends TableToggleCommonProps {} export type UseRowSelectOptions = Partial<{ manualRowSelectedKey: IdType; autoResetSelectedRows: boolean; }>; export interface UseRowSelectHooks { getToggleRowSelectedProps: Array<(row: Row, instance: TableInstance) => object>; getToggleAllRowsSelectedProps: Array<(instance: TableInstance) => object>; } export interface UseRowSelectState { selectedRowIds: Record, boolean>; } export interface UseRowSelectInstanceProps { toggleRowSelected: (rowId: IdType, set?: boolean) => void; toggleAllRowsSelected: (set?: boolean) => void; getToggleAllRowsSelectedProps: ( props?: Partial, ) => TableToggleAllRowsSelectedProps; isAllRowsSelected: boolean; selectedFlatRows: Array>; } export interface UseRowSelectRowProps { isSelected: boolean; isSomeSelected: boolean; toggleRowSelected: (set?: boolean) => void; getToggleRowSelectedProps: (props?: Partial) => TableToggleRowsSelectedProps; } //#endregion //#region useRowState export function useRowState(hooks: Hooks): void; export namespace useRowState { const pluginName = 'useRowState'; } export type UseRowStateOptions = Partial<{ initialRowStateAccessor: (row: Row) => UseRowStateLocalState; getResetRowStateDeps: (instance: TableInstance) => any[]; autoResetRowState?: boolean; }>; export interface UseRowStateState { rowState: Record }>; } export interface UseRowStateInstanceProps { setRowState: (rowPath: string[], updater: UseRowUpdater) => void; setCellState: (rowPath: string[], columnId: IdType, updater: UseRowUpdater) => void; } export interface UseRowStateRowProps { state: UseRowStateLocalState; setState: (updater: UseRowUpdater) => void; } export interface UseRowStateCellProps { state: UseRowStateLocalState; setState: (updater: UseRowUpdater) => void; } export type UseRowUpdater = T | ((prev: T) => T); export type UseRowStateLocalState = Record, T>; //#endregion //#region useSortBy export function useSortBy(hooks: Hooks): void; export namespace useSortBy { const pluginName = 'useSortBy'; } export interface TableSortByToggleProps {} export type UseSortByOptions = Partial<{ manualSortBy: boolean; disableSortBy: boolean; defaultCanSort: boolean; disableMultiSort: boolean; isMultiSortEvent: (e: MouseEvent) => boolean; maxMultiSortColCount: number; disableSortRemove: boolean; disabledMultiRemove: boolean; orderByFn: (rows: Array>, sortFns: Array>, directions: boolean[]) => Array>; sortTypes: Record>; autoResetSortBy?: boolean; }>; export interface UseSortByHooks { getSortByToggleProps: Array<(column: Column, instance: TableInstance) => object>; } export interface UseSortByState { sortBy: Array>; } export type UseSortByColumnOptions = Partial<{ defaultCanSort: boolean; disableSortBy: boolean; sortDescFirst: boolean; sortInverted: boolean; sortType: SortByFn | DefaultSortTypes | string; }>; export interface UseSortByInstanceProps { rows: Array>; preSortedRows: Array>; toggleSortBy: (columnId: IdType, descending: boolean, isMulti: boolean) => void; } export interface UseSortByColumnProps { canSort: boolean; toggleSortBy: (descending: boolean, multi: boolean) => void; getSortByToggleProps: (props?: Partial) => TableSortByToggleProps; clearSortBy: () => void; isSorted: boolean; sortedIndex: number; isSortedDesc: boolean | undefined; } export type SortByFn = (rowA: Row, rowB: Row, columnId: IdType, desc?: boolean) => number; export type DefaultSortTypes = 'alphanumeric' | 'datetime' | 'basic'; export interface SortingRule { id: IdType; desc?: boolean; } //#endregion // Additional API export const actions: Record; export type ActionType = { type: string } & Record; export const defaultColumn: Partial & Record; // Helpers export type StringKey = Extract; export type IdType = StringKey | string; export type CellValue = any; export type Renderer = ComponentType | ReactElement | ReactText | ReactFragment; export interface PluginHook { (hooks: Hooks): void; pluginName?: string; } export type TableDispatch = (action: A) => void; // utils export function defaultOrderByFn( arr: Array>, funcs: Array>, dirs: boolean[], ): Array>; export function defaultGroupByFn( rows: Array>, columnId: IdType, ): Record>; export function makePropGetter(hooks: Hooks, ...meta: any[]): any; export function reduceHooks(hooks: Hooks, initial: T, ...args: any[]): T; export function loopHooks(hooks: Hooks, ...args: any[]): void; export function ensurePluginOrder( plugins: Array>, befores: string[], pluginName: string, afters: string[], ): void; export function functionalUpdate( updater: any, old: Partial>, ): Partial>; export function useGetLatest(obj: T): () => T; export function safeUseLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; export function useMountedLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; export function useAsyncDebounce any>(defaultFn: F, defaultWait?: number): F; export function useConsumeHookGetter(hooks: Hooks, hookName: string): any; export function makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement;