This commit is contained in:
Tanner Linsley 2019-10-09 15:42:24 -06:00
commit 409c050cbf
5 changed files with 100 additions and 11554 deletions

1
.gitignore vendored
View File

@ -10,3 +10,4 @@ react-table.css
.idea
.DS_Store
.history
package-lock.json

1
.npmrc Normal file
View File

@ -0,0 +1 @@
package-lock=false

39
TYPESCRIPT.md Normal file
View File

@ -0,0 +1,39 @@
# Using TypeScript with React-Table
React-table is a very flexible library, because of this, the shape of data at almost every contact point is defined by the specific set of plugins that you choose to pass to `useTable`.
Tto get started, copy the file `react-table-config.d.ts` into 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.
You can stop here if you like, but while this is simple, it's a bit misleading. Out of the box, these types will suggest that you have access to values that come from plugins that you aren't using, i.e. the error checking is weakened.
To bring the resulting types into better alignment with your plugins, you should edit your local copy of `react-table-config.d.ts` and comment out all of the interfaces that don't apply to your chosen set of plugins.
e.g.
if you are only using `useSortBy` and `usePagination` then you would take this:
```tsx
extends UseExpandedOptions<D>,
UseFiltersOptions<D>,
UseGroupByOptions<D>,
UsePaginationOptions<D>,
UseRowSelectOptions<D>,
UseSortByOptions<D>,
UseFiltersOptions<D>,
UseResizeColumnsOptions<D>,
Record<string, any> {}
```
and convert it to this:
```tsx
export interface TableOptions<D extends object>
extends UsePaginationOptions<D>,
UseSortByOptions<D> {}
```
Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extends all of the top level interfaces.
## Caveat
The interfaces are all global. If you have several different configurations for the table, you should create interfaces using the union of all of the plugins that you are using.

11554
package-lock.json generated

File diff suppressed because it is too large Load Diff

59
react-table-config.d.ts vendored Normal file
View File

@ -0,0 +1,59 @@
declare module 'react-table' {
// take this file as-is, or comment out the sections that don't apply to your plugin configuration
export interface TableOptions<D extends object>
extends UseExpandedOptions<D>,
UseFiltersOptions<D>,
UseGroupByOptions<D>,
UsePaginationOptions<D>,
UseRowSelectOptions<D>,
UseSortByOptions<D>,
UseFiltersOptions<D>,
UseResizeColumnsOptions<D>,
// note that having Record here allows you to add anything to the options, this matches the spirit of the
// underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
// feature set, this is a safe default.
Record<string, any> {}
export interface TableInstance<D extends object = {}>
extends UseColumnOrderInstanceProps<D>,
UseExpandedInstanceProps<D>,
UseFiltersInstanceProps<D>,
UseGroupByInstanceProps<D>,
UsePaginationInstanceProps<D>,
UseRowSelectInstanceProps<D>,
UseRowStateInstanceProps<D>,
UseSortByInstanceProps<D> {}
export interface TableState<D extends object = {}>
extends UseColumnOrderState<D>,
UseExpandedState<D>,
UseFiltersState<D>,
UseGroupByState<D>,
UsePaginationState<D>,
UseRowSelectState<D>,
UseSortByState<D> {}
export interface Column<D extends object = {}>
extends UseFiltersColumnOptions<D>,
UseGroupByColumnOptions<D>,
UseSortByColumnOptions<D>,
UseResizeColumnsColumnOptions<D> {}
export interface ColumnInstance<D extends object = {}>
extends UseFiltersColumnProps<D>,
UseGroupByColumnProps<D>,
UseSortByColumnProps<D>,
UseResizeColumnsHeaderProps<D> {}
export interface Cell<D extends object = {}>
extends UseTableCellProps<D>,
UseGroupByCellProps<D>,
UseRowStateCellProps<D> {}
export interface Row<D extends object = {}>
extends UseExpandedRowProps<D>,
UseGroupByRowProps<D>,
UseRowSelectRowProps<D>,
UseRowStateRowProps<D> {}
}