// tslint:disable:no-empty-interface // no-empty-interface is disabled to allow easy extension with declaration merging /* eslint-disable @definitelytyped/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 // The changelog for the important changes is located in the Readme.md import { ChangeEvent, ComponentType, CSSProperties, DependencyList, EffectCallback, MouseEvent, ReactElement, ReactNode, } 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> | undefined; } export interface Hooks extends UseTableHooks {} export interface Cell extends UseTableCellProps {} export interface ColumnInterface extends UseTableColumnOptions {} export interface ColumnInterfaceBasedOnValue { Cell?: Renderer> | undefined; } export interface ColumnGroupInterface { columns: Array>; } export type ColumnGroup = & ColumnInterface & ColumnGroupInterface & ( | { Header: string } | ({ id: IdType } & { Header: Renderer>; }) ) // Not used, but needed for backwards compatibility & { accessor?: Accessor | undefined }; type ValueOf = T[keyof T]; // The accessors like `foo.bar` are not supported, use functions instead export type ColumnWithStrictAccessor = & ColumnInterface & ValueOf< { [K in keyof D]: { accessor: K; } & ColumnInterfaceBasedOnValue; } >; export type ColumnWithLooseAccessor = & ColumnInterface & ColumnInterfaceBasedOnValue & ( | { Header: string } | { id: IdType } | { accessor: keyof D extends never ? IdType : never } ) & { accessor?: (keyof D extends never ? IdType | Accessor : Accessor) | undefined }; export type Column = | ColumnGroup | ColumnWithLooseAccessor | ColumnWithStrictAccessor; export interface ColumnInstance extends Omit, "id">, ColumnInterfaceBasedOnValue, UseTableColumnProps {} export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} export interface Row extends UseTableRowProps {} export interface TableCommonProps { style?: CSSProperties | undefined; className?: string | undefined; role?: string | undefined; } 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 extends TableCommonProps { onChange?: ((e: ChangeEvent) => void) | undefined; checked?: boolean | undefined; title?: string | undefined; indeterminate?: boolean | undefined; } 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: ReadonlyArray>; data: readonly D[]; } & Partial<{ initialState: Partial>; stateReducer: ( newState: TableState, action: ActionType, previousState: TableState, instance?: TableInstance, ) => TableState; useControlledState: (state: TableState, meta: Meta) => TableState; defaultColumn: Partial>; getSubRows: (originalRow: D, relativeIndex: number) => D[]; getRowId: (originalRow: D, relativeIndex: number, parent?: Row) => string; autoResetHiddenColumns: boolean; }>; 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[]>; allColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; allColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; visibleColumns: Array<(allColumns: Array>, meta: Meta) => Array>>; visibleColumnsDeps: Array<(deps: any[], meta: Meta) => any[]>; headerGroups: Array<(allColumns: Array>, meta: Meta) => Array>>; headerGroupsDeps: Array<(deps: any[], meta: Meta) => any[]>; useInstanceBeforeDimensions: Array<(instance: TableInstance) => void>; useInstance: Array<(instance: TableInstance) => void>; 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 { id?: IdType | undefined; Header?: Renderer> | undefined; Footer?: Renderer> | undefined; width?: number | string | undefined; minWidth?: number | undefined; maxWidth?: number | undefined; } type UpdateHiddenColumns = (oldHidden: Array>) => Array>; export interface TableToggleHideAllColumnProps extends TableToggleCommonProps {} export interface UseTableInstanceProps { state: TableState; plugins: Array>; dispatch: TableDispatch; columns: Array>; allColumns: Array>; visibleColumns: Array>; headerGroups: Array>; footerGroups: Array>; headers: Array>; flatHeaders: Array>; rows: Array>; rowsById: Record>; getTableProps: (propGetter?: TablePropGetter) => TableProps; getTableBodyProps: (propGetter?: TableBodyPropGetter) => TableBodyProps; prepareRow: (row: Row) => void; flatRows: Array>; totalColumnsWidth: number; allColumnsHidden: boolean; toggleHideColumn: (columnId: IdType, value?: boolean) => void; setHiddenColumns: (param: Array> | UpdateHiddenColumns) => void; toggleHideAllColumns: (value?: boolean) => void; getToggleHideAllColumnsProps: (props?: Partial) => TableToggleHideAllColumnProps; getHooks: () => Hooks; } export interface UseTableHeaderGroupProps { headers: Array>; getHeaderGroupProps: (propGetter?: HeaderGroupPropGetter) => TableHeaderProps; getFooterGroupProps: (propGetter?: FooterGroupPropGetter) => TableFooterProps; totalHeaderCount: number; // not documented } export interface UseTableColumnProps { id: IdType; columns?: Array> | undefined; 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 | undefined; // not documented getToggleHiddenProps: (userProps?: any) => any; depth: number; // not documented placeholderOf?: ColumnInstance | undefined; } export interface UseTableRowProps { cells: Array>; allCells: Array>; values: Record, CellValue>; getRowProps: (propGetter?: RowPropGetter) => TableRowProps; index: number; original: D; id: string; subRows: Array>; } 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 FooterProps = TableInstance & { column: ColumnInstance; }; export type CellProps = TableInstance & { column: ColumnInstance; row: Row; cell: Cell; value: CellValue; }; export type Accessor = ( originalRow: D, index: number, sub: { subRows: D[]; depth: number; data: D[]; }, ) => CellValue; // #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 | undefined; }>; export interface UseExpandedHooks { getToggleRowsExpandedProps: Array>; getToggleAllRowsExpandedProps: Array>; } export interface UseExpandedState { expanded: Record, boolean>; } export interface UseExpandedInstanceProps { preExpandedRows: Array>; expandedRows: Array>; rows: Array>; expandedDepth: number; isAllRowsExpanded: boolean; toggleRowExpanded: (id: Array>, value?: boolean) => void; toggleAllRowsExpanded: (value?: boolean) => void; } export interface UseExpandedRowProps { isExpanded: boolean; canExpand: boolean; subRows: Array>; toggleRowExpanded: (value?: boolean) => void; getToggleRowExpandedProps: (props?: Partial) => TableExpandedToggleProps; depth: number; } // #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 | undefined; }>; export interface UseFiltersState { filters: Filters; } export type UseFiltersColumnOptions = Partial<{ Filter: Renderer>; disableFilters: boolean; defaultCanFilter: boolean; filter: FilterType | DefaultFilterTypes | string; }>; export interface UseFiltersInstanceProps { preFilteredRows: Array>; preFilteredFlatRows: Array>; preFilteredRowsById: Record>; filteredRows: Array>; filteredFlatRows: Array>; filteredRowsById: Record>; rows: Array>; flatRows: Array>; rowsById: Record>; 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) | undefined; } // #endregion // #region useFlexLayout export function useFlexLayout(hooks: Hooks): void; export namespace useFlexLayout { const pluginName = "useFlexLayout"; } // #endregion // #region useGridLayout export function useGridLayout(hooks: Hooks): void; export namespace useGridLayout { const pluginName = "useGridLayout"; } // #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 | undefined; disableGlobalFilter?: boolean | undefined; }>; export interface UseGlobalFiltersState { globalFilter: any; } export type UseGlobalFiltersColumnOptions = Partial<{ disableGlobalFilter?: boolean | undefined; }>; export interface UseGlobalFiltersInstanceProps { preGlobalFilteredRows: Array>; preGlobalFilteredFlatRows: Array>; preGlobalFilteredRowsById: Record>; globalFilteredRows: Array>; globalFilteredFlatRows: Array>; globalFilteredRowsById: Record>; rows: Array>; flatRows: Array>; rowsById: Record>; setGlobalFilter: (filterValue: FilterValue) => void; } // #endregion // #region useGroupBy export function useGroupBy(hooks: Hooks): void; export namespace useGroupBy { const pluginName = "useGroupBy"; } export interface TableGroupByToggleProps { title?: string | undefined; style?: CSSProperties | undefined; onClick?: ((e: MouseEvent) => void) | undefined; } export type UseGroupByOptions = Partial<{ manualGroupBy: boolean; disableGroupBy: boolean; defaultCanGroupBy: boolean; aggregations: Record>; groupByFn: (rows: Array>, columnId: IdType) => Record>>; autoResetGroupBy?: boolean | undefined; }>; export interface UseGroupByHooks { getGroupByToggleProps: Array>; } export interface UseGroupByState { groupBy: Array>; } export type UseGroupByColumnOptions = Partial<{ aggregate: Aggregator; Aggregated: Renderer>; disableGroupBy: boolean; defaultCanGroupBy: boolean; }>; export interface UseGroupByInstanceProps { preGroupedRows: Array>; preGroupedFlatRows: Array>; preGroupedRowsById: Record>; groupedRows: Array>; groupedFlatRows: Array>; groupedRowsById: Record>; onlyGroupedFlatRows: Array>; onlyGroupedRowsById: Record>; nonGroupedFlatRows: Array>; nonGroupedRowsById: Record>; rows: Array>; flatRows: Array>; rowsById: Record>; toggleGroupBy: (columnId: IdType, value?: 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>; leafRows: Array>; depth: number; id: string; index: number; } export interface UseGroupByCellProps { isGrouped: boolean; isPlaceholder: 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 | undefined; 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 | undefined; autoResetResize?: boolean | undefined; } export interface UseResizeColumnsState { columnResizing: { startX?: number | undefined; columnWidth: number; headerIdWidths: Record; columnWidths: any; isResizingColumn?: string | undefined; }; } export interface UseResizeColumnsColumnOptions { disableResizing?: boolean | undefined; } 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; selectSubRows: boolean; }>; export interface UseRowSelectHooks { getToggleRowSelectedProps: Array>; getToggleAllRowsSelectedProps: Array>; getToggleAllPageRowsSelectedProps: Array>; } export interface UseRowSelectState { selectedRowIds: Record, boolean>; } export interface UseRowSelectInstanceProps { toggleRowSelected: (rowId: IdType, set?: boolean) => void; toggleAllRowsSelected: (value?: boolean) => void; getToggleAllRowsSelectedProps: ( props?: Partial, ) => TableToggleAllRowsSelectedProps; getToggleAllPageRowsSelectedProps: ( 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 | undefined; }>; 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 { title?: string | undefined; style?: CSSProperties | undefined; onClick?: ((e: MouseEvent) => void) | undefined; } 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 | undefined; }>; export interface UseSortByHooks { getSortByToggleProps: Array>; } 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>; setSortBy: (sortBy: Array>) => void; 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 OrderByFn = (rowA: Row, rowB: Row) => number; export type SortByFn = (rowA: Row, rowB: Row, columnId: IdType, desc?: boolean) => number; export type DefaultSortTypes = "alphanumeric" | "datetime" | "basic" | "string" | "number"; export interface SortingRule { id: IdType; desc?: boolean | undefined; } // #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 = V; export type Renderer = ComponentType | ReactElement | string | number | readonly ReactNode[]; export interface PluginHook { (hooks: Hooks): void; pluginName?: string | undefined; } 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, ): 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 makeRenderer(instance: TableInstance, column: ColumnInstance, meta?: any): ReactElement;