diff --git a/types/react-table/index.d.ts b/types/react-table/index.d.ts index ca7981a6f8..0d03604ae9 100644 --- a/types/react-table/index.d.ts +++ b/types/react-table/index.d.ts @@ -1,13 +1,13 @@ // Type definitions for react-table 6.7 // Project: https://github.com/react-tools/react-table -// Definitions by: Roy Xue , Pavel Sakalo , Krzysztof Porębski +// Definitions by: Roy Xue , Pavel Sakalo , Krzysztof Porębski , Andy S // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 import * as React from 'react'; export type ReactTableFunction = (value?: any) => void; -export type AccessorFunction = (row: object) => any; -export type Accessor = string | string[] | object | AccessorFunction; +export type AccessorFunction = (row: D) => any; +export type Accessor = string | string[] | AccessorFunction; export type Aggregator = (values: any, rows: any) => any; export type TableCellRenderer = ((data: any, column: any) => React.ReactNode) | React.ReactNode; export type FilterRender = (params: { column: Column, filter: any, onChange: ReactTableFunction, key?: string }) => React.ReactElement; @@ -46,7 +46,7 @@ export interface SortingRule { desc?: true; } -export interface TableProps extends +export interface TableProps extends Partial, Partial, Partial, @@ -54,7 +54,7 @@ export interface TableProps extends Partial, Partial { /** Default: [] */ - data: any[]; + data: D[]; /** Default: false */ loading: boolean; @@ -164,7 +164,7 @@ export interface TableProps extends column: Partial; /** Array of all Available Columns */ - columns?: Column[]; + columns?: Array>; /** Expander defaults. */ expanderDefaults: Partial; @@ -180,9 +180,9 @@ export interface TableProps extends /** Control callback for functional rendering */ children: ( - state: FinalState, + state: FinalState, makeTable: () => React.ReactElement, - instance: Instance + instance: Instance ) => React.ReactNode; } @@ -548,7 +548,7 @@ export interface PivotDefaults { render: TableCellRenderer; } -export interface Column extends +export interface Column extends Partial, Partial, Partial, @@ -562,7 +562,7 @@ export interface Column extends * @example {"a": {"b": {"c": $}}} * @example (row) => row.propertyName */ - accessor?: Accessor; + accessor?: Accessor; /** * Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls @@ -598,7 +598,7 @@ export interface Column extends expander?: boolean; /** Header Groups only */ - columns?: any[]; + columns?: Array>; /** * Turns this column into a special column for specifying pivot position in your column definitions. @@ -608,12 +608,12 @@ export interface Column extends pivot?: boolean; } -export interface ColumnRenderProps { +export interface ColumnRenderProps { /** Sorted data. */ - data: any[]; + data: D[]; /** The column. */ - column: Column; + column: Column; } export interface RowRenderProps extends Partial { @@ -662,7 +662,7 @@ export interface RowInfo { original: any; } -export interface FinalState extends TableProps { +export interface FinalState extends TableProps { frozen: boolean; startRow: number; endRow: number; @@ -674,21 +674,21 @@ export interface FinalState extends TableProps { canNext: boolean; rowMinWidth: number; - allVisibleColumns: Column[]; - allDecoratedColumns: Column[]; + allVisibleColumns: Array>; + allDecoratedColumns: Array>; resolvedData: DerivedDataObject[]; sortedData: DerivedDataObject[]; headerGroups: any[]; } export const ReactTableDefaults: TableProps; -export default class ReactTable extends React.Component> { } +export default class ReactTable extends React.Component>> { } -export interface Instance extends ReactTable { +export interface Instance extends ReactTable { context: any; - props: Partial; + props: Partial>; refs: any; - state: FinalState; + state: FinalState; filterColumn(...props: any[]): any; filterData(...props: any[]): any; fireFetchData(...props: any[]): any; diff --git a/types/react-table/react-table-tests.tsx b/types/react-table/react-table-tests.tsx index b8380125b3..ca63bdd67c 100644 --- a/types/react-table/react-table-tests.tsx +++ b/types/react-table/react-table-tests.tsx @@ -5,7 +5,15 @@ import * as ReactDOM from 'react-dom'; import ReactTable, { Column, FinalState, Instance } from "react-table"; import "react-table/react-table.css"; -const columns: Column[] = [ +interface Data { + firstName: string; + lastName: string; + age: number; + visits: number; + progress: number; +} + +const columns: Array> = [ { Header: "Name", columns: [ @@ -16,7 +24,7 @@ const columns: Column[] = [ { Header: "Info", columns: [ - { Header: "Age", accessor: "age" }, + { Header: "Age", accessor: (data: Data) => data.age }, { Header: "Status", accessor: "status" } ] }, @@ -29,7 +37,7 @@ const columns: Column[] = [ ]; const Component = (props: {}) => { - const data = [ + const data: Data[] = [ { firstName: "plastic", lastName: "leather", age: 1, visits: 87, progress: 53 }, { firstName: "eggs", lastName: "quartz", age: 13, visits: 78, progress: 82 }, { firstName: "wash", lastName: "wrench", age: 29, visits: 75, progress: 49 }, @@ -156,9 +164,9 @@ const Component = (props: {}) => { }} > {( - state: FinalState, + state: FinalState, makeTable: () => React.ReactChild, - instance: Instance + instance: Instance ) => { return (