Merge pull request #29762 from andys8/react-table-accessor-typings

[react-table] type-safe accessor functions

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 <https://github.com/royxue>, Pavel Sakalo <https://github.com/psakalo>, Krzysztof Porębski <https://github.com/Havret>
+// Definitions by: Roy Xue <https://github.com/royxue>, Pavel Sakalo <https://github.com/psakalo>, Krzysztof Porębski <https://github.com/Havret>, Andy S <https://github.com/andys8>
 // 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<D = any> = (row: D) => any;
+export type Accessor<D = any> = string | string[] | AccessorFunction<D>;
 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<any>;
@@ -46,7 +46,7 @@ export interface SortingRule {
     desc?: true;
 }
 
-export interface TableProps extends
+export interface TableProps<D = any> extends
     Partial<TextProps>,
     Partial<ComponentDecoratorProps>,
     Partial<ControlledStateCallbackProps>,
@@ -54,7 +54,7 @@ export interface TableProps extends
     Partial<ControlledStateOverrideProps>,
     Partial<ComponentProps> {
     /** Default: [] */
-    data: any[];
+    data: D[];
 
     /** Default: false */
     loading: boolean;
@@ -164,7 +164,7 @@ export interface TableProps extends
     column: Partial<GlobalColumn>;
 
     /** Array of all Available Columns */
-    columns?: Column[];
+    columns?: Array<Column<D>>;
 
     /** Expander defaults. */
     expanderDefaults: Partial<ExpanderDefaults>;
@@ -180,9 +180,9 @@ export interface TableProps extends
 
     /** Control callback for functional rendering */
     children: (
-        state: FinalState,
+        state: FinalState<D>,
         makeTable: () => React.ReactElement<any>,
-        instance: Instance
+        instance: Instance<D>
     ) => React.ReactNode;
 }
 
@@ -548,7 +548,7 @@ export interface PivotDefaults {
     render: TableCellRenderer;
 }
 
-export interface Column extends
+export interface Column<D = any> extends
     Partial<Column.Basics>,
     Partial<Column.CellProps>,
     Partial<Column.FilterProps>,
@@ -562,7 +562,7 @@ export interface Column extends
      * @example {"a": {"b": {"c": $}}}
      * @example (row) => row.propertyName
      */
-    accessor?: Accessor;
+    accessor?: Accessor<D>;
 
     /**
      * 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<Column<D>>;
 
     /**
      * 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<D = any> {
     /** Sorted data. */
-    data: any[];
+    data: D[];
 
     /** The column. */
-    column: Column;
+    column: Column<D>;
 }
 
 export interface RowRenderProps extends Partial<RowInfo> {
@@ -662,7 +662,7 @@ export interface RowInfo {
     original: any;
 }
 
-export interface FinalState extends TableProps {
+export interface FinalState<D = any> extends TableProps<D> {
     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<Column<D>>;
+    allDecoratedColumns: Array<Column<D>>;
     resolvedData: DerivedDataObject[];
     sortedData: DerivedDataObject[];
     headerGroups: any[];
 }
 
 export const ReactTableDefaults: TableProps;
-export default class ReactTable extends React.Component<Partial<TableProps>> { }
+export default class ReactTable<D> extends React.Component<Partial<TableProps<D>>> { }
 
-export interface Instance extends ReactTable {
+export interface Instance<D = any> extends ReactTable<D> {
     context: any;
-    props: Partial<TableProps>;
+    props: Partial<TableProps<D>>;
     refs: any;
-    state: FinalState;
+    state: FinalState<D>;
     filterColumn(...props: any[]): any;
     filterData(...props: any[]): any;
     fireFetchData(...props: any[]): any;

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<Column<Data>> = [
   {
     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<Data>,
           makeTable: () => React.ReactChild,
-          instance: Instance
+          instance: Instance<Data>
         ) => {
           return (
             <div