mirror of
https://github.com/gosticks/react-table.git
synced 2025-10-16 11:55:36 +00:00
Merge branch 'master' of https://github.com/react-tools/react-table
This commit is contained in:
commit
409c050cbf
1
.gitignore
vendored
1
.gitignore
vendored
@ -10,3 +10,4 @@ react-table.css
|
||||
.idea
|
||||
.DS_Store
|
||||
.history
|
||||
package-lock.json
|
||||
|
||||
39
TYPESCRIPT.md
Normal file
39
TYPESCRIPT.md
Normal 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
11554
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
59
react-table-config.d.ts
vendored
Normal file
59
react-table-config.d.ts
vendored
Normal 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> {}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user