diff --git a/types/react-table/Readme.md b/types/react-table/Readme.md index 6f99dbf5b4..6f9b8d11e6 100644 --- a/types/react-table/Readme.md +++ b/types/react-table/Readme.md @@ -1,5 +1,13 @@ # Types for react-table v7 +## Changelog + +### 2020-04-09 (@types/react-table 7.0.14, react-table 7.0.4) + +A number of breaking changes related to changing `Column` from `interface` to `type` and making the columns types stricter overall. For more information and migration guide see [the Pull Request for these changes](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/43714). + +## Configuration Using Declaration Merging + These types depend upon declaration merging to work well. To get started, create a file `react-table-config.d.ts` using the example further down this readme, place it in 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. @@ -140,7 +148,7 @@ declare module 'react-table' { UseRowStateState, UseSortByState {} - export interface Column + export interface ColumnInterface extends UseFiltersColumnOptions, UseGlobalFiltersColumnOptions, UseGroupByColumnOptions, @@ -153,7 +161,7 @@ declare module 'react-table' { UseResizeColumnsColumnProps, UseSortByColumnProps {} - export interface Cell + export interface Cell extends UseGroupByCellProps, UseRowStateCellProps {} diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts index d98b4cd773..1f63e82a19 100644 --- a/types/react-table/index.d.ts +++ b/types/react-table/index.d.ts @@ -6,7 +6,7 @@ // Jason Clark // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 3.5 -// reflects react-table@7.0.0 +// reflects react-table@7.0.4 // tslint:disable:no-empty-interface // no-empty-interface is disabled to allow easy extension with declaration merging @@ -15,6 +15,8 @@ // 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 { ComponentType, DependencyList, @@ -51,12 +53,59 @@ export interface TableState { export interface Hooks extends UseTableHooks {} -export interface Cell extends UseTableCellProps {} +export interface Cell extends UseTableCellProps {} -export interface Column extends UseTableColumnOptions {} +export interface ColumnInterface extends UseTableColumnOptions {} + +export interface ColumnInterfaceBasedOnValue { + Cell?: Renderer>; +} + +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; }; + +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; }; + +export type Column = + | ColumnGroup + | ColumnWithLooseAccessor + | ColumnWithStrictAccessor; export interface ColumnInstance - extends Omit, 'id' | 'columns'>, + extends Omit, 'id'>, + ColumnInterfaceBasedOnValue, UseTableColumnProps {} export interface HeaderGroup extends ColumnInstance, UseTableHeaderGroupProps {} @@ -184,16 +233,13 @@ export interface UseTableHooks extends Record { useFinalInstance: Array<(instance: TableInstance) => void>; } -export interface UseTableColumnOptions - extends Accessor, - Partial<{ - columns: Array>; - Header: Renderer>; - Cell: Renderer>; - width?: number | string; - minWidth?: number; - maxWidth?: number; - }> {} +export interface UseTableColumnOptions { + id?: IdType; + Header?: Renderer>; + width?: number | string; + minWidth?: number; + maxWidth?: number; +} type UpdateHiddenColumns = (oldHidden: Array>) => Array>; @@ -259,10 +305,10 @@ export interface UseTableRowProps { subRows: Array>; } -export interface UseTableCellProps { +export interface UseTableCellProps { column: ColumnInstance; row: Row; - value: CellValue; + value: CellValue; getCellProps: (propGetter?: CellPropGetter) => TableCellProps; render: (type: 'Cell' | string, userProps?: object) => ReactNode; } @@ -271,27 +317,22 @@ export type HeaderProps = TableInstance & { column: ColumnInstance; }; -export type CellProps = TableInstance & { +export type CellProps = TableInstance & { column: ColumnInstance; row: Row; - cell: Cell; + cell: Cell; + value: CellValue; }; -// 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; -} +export type Accessor = ( + originalRow: D, + index: number, + sub: { + subRows: D[]; + depth: number; + data: D[]; + }, +) => CellValue; //#endregion @@ -802,7 +843,7 @@ export const defaultColumn: Partial & Record; // Helpers export type StringKey = Extract; export type IdType = StringKey | string; -export type CellValue = any; +export type CellValue = V; export type Renderer = ComponentType | ReactElement | ReactText | ReactFragment; diff --git a/types/react-table/react-table-tests.tsx b/types/react-table/react-table-tests.tsx index 0a41b94d72..4cb4b691fc 100644 --- a/types/react-table/react-table-tests.tsx +++ b/types/react-table/react-table-tests.tsx @@ -107,7 +107,7 @@ declare module 'react-table' { UseRowStateState, UseSortByState {} - interface Column + interface ColumnInterface extends UseFiltersColumnOptions, UseGlobalFiltersColumnOptions, UseGroupByColumnOptions,