[react-table] Add support for Functional Rendering (#25347)

* Added type definitions for functional rendering

https://www.npmjs.com/package/react-table#functional-rendering

* fixed trailing whitespace

* add test for functional rendering

* add missing props to FinalState

* restricted some of the `any` types

* corrected semicolons

types/react-table/index.d.ts

@@ -177,6 +177,13 @@ export interface TableProps extends
 
     /** Server-side callbacks */
     onFetchData: (state: any, instance: any) => void;
+
+    /** Control callback for functional rendering */
+    children: (
+        state: FinalState,
+        makeTable: () => React.ReactElement<any>,
+        instance: Instance
+    ) => React.ReactNode;
 }
 
 export interface ControlledStateOverrideProps {
@@ -254,6 +261,14 @@ export interface ExpandedRows {
     [idx: number]: boolean | ExpandedRows;
 }
 
+export interface DerivedDataObject {
+    _index: number;
+    _nestingLevel: number;
+    _subRows: any;
+    _original: any;
+    [p: string]: any;
+}
+
 export interface ControlledStateCallbackProps {
     /** Called when the page index is changed by the user */
     onPageChange: PageChangeFunction;
@@ -648,15 +663,46 @@ export interface RowInfo {
 }
 
 export interface FinalState extends TableProps {
+    frozen: boolean;
     startRow: number;
     endRow: number;
     pageRows: number;
     padRows: number;
     hasColumnFooter: boolean;
+    hasHeaderGroups: boolean;
     canPrevious: boolean;
     canNext: boolean;
     rowMinWidth: number;
+
+    allVisibleColumns: Column[];
+    allDecoratedColumns: Column[];
+    resolvedData: DerivedDataObject[];
+    sortedData: DerivedDataObject[];
+    headerGroups: any[];
 }
 
 export const ReactTableDefaults: TableProps;
 export default class ReactTable extends React.Component<Partial<TableProps>> { }
+
+export interface Instance extends ReactTable {
+    context: any;
+    props: Partial<TableProps>;
+    refs: any;
+    state: FinalState;
+    filterColumn(...props: any[]): any;
+    filterData(...props: any[]): any;
+    fireFetchData(...props: any[]): any;
+    getDataModel(...props: any[]): any;
+    getMinRows(...props: any[]): any;
+    getPropOrState(...props: any[]): any;
+    getResolvedState(...props: any[]): any;
+    getSortedData(...props: any[]): any;
+    getStateOrProp(...props: any[]): any;
+    onPageChange: PageChangeFunction;
+    onPageSizeChange: PageSizeChangeFunction;
+    resizeColumnEnd(...props: any[]): any;
+    resizeColumnMoving(...props: any[]): any;
+    resizeColumnStart(...props: any[]): any;
+    sortColumn(...props: any[]): any;
+    sortData(...props: any[]): any;
+}

types/react-table/react-table-tests.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 // Import React Table
-import ReactTable, { Column } from "react-table";
+import ReactTable, { Column, FinalState, Instance } from "react-table";
 import "react-table/react-table.css";
 
 const columns: Column[] = [
@@ -154,7 +154,32 @@ const Component = (props: {}) => {
             console.log(newSorted);
           }
         }}
-      />
+      >
+        {(
+          state: FinalState,
+          makeTable: () => React.ReactChild,
+          instance: Instance
+        ) => {
+          return (
+            <div
+              style={{
+                background: "#ffcf00",
+                borderRadius: "5px",
+                overflow: "hidden",
+                padding: "5px"
+              }}
+            >
+              <pre>
+                <code>
+                  state.allVisibleColumns ==={" "}
+                  {JSON.stringify(state.allVisibleColumns, null, 4)}
+                </code>
+              </pre>
+              {makeTable()}
+            </div>
+          );
+        }}
+      </ReactTable>
       <br />
     </div>
   );