Merge pull request #31271 from Gelio/fix-react-table-hoc-refs

[react-table] allow using refs after applying HOCs

types/react-table/lib/hoc/selectTable.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { ComponentType, ComponentClass } from 'react';
 
 import { TableProps } from '../../index';
 
@@ -49,8 +49,8 @@ export interface SelectTableHOCOptions {
 }
 
 declare function selectTableHOC<Props extends Partial<TableProps>>(
-    Component: ComponentType<Props>,
+    WrappedComponent: ComponentType<Props>,
     options?: SelectTableHOCOptions
-): ComponentType<Props & SelectTableAdditionalProps>;
+): ComponentClass<Props & SelectTableAdditionalProps>;
 
 export default selectTableHOC;

types/react-table/lib/hoc/treeTable.d.ts

@@ -1,9 +1,9 @@
-import { ComponentType } from 'react';
+import { ComponentType, ComponentClass } from 'react';
 
 import { TableProps } from '../../index';
 
 declare function treeTableHOC<Props extends Partial<TableProps>>(
-    Component: ComponentType<Props>
-): ComponentType<Props>;
+    WrappedComponent: ComponentType<Props>
+): ComponentClass<Props>;
 
 export default treeTableHOC;

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

@@ -52,6 +52,7 @@ ReactDOM.render(
         {...selectTableAdditionalProps}
         data={data}
         columns={columns}
+        ref={React.createRef()}
     />,
     document.getElementById('root')
 );

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

@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
 import ReactTable, { Column } from 'react-table';
 import treeTableHOC from 'react-table/lib/hoc/treeTable';
 
-const SelectTable = treeTableHOC(ReactTable);
+const TreeTable = treeTableHOC(ReactTable);
 
 const data = [{ id: 1, name: 'Foo' }, { id: 2, name: 'Bar' }];
 
@@ -14,6 +14,6 @@ const columns: Column[] = [
 ];
 
 ReactDOM.render(
-    <SelectTable data={data} columns={columns} />,
+    <TreeTable data={data} columns={columns} ref={React.createRef()} />,
     document.getElementById('root')
 );