Skip to content

Commit 409c050

Browse files
committed
2 parents 2a39d5a + cee24c7 commit 409c050

File tree

5 files changed

+100
-11554
lines changed

5 files changed

+100
-11554
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ react-table.css
1010
.idea
1111
.DS_Store
1212
.history
13+
package-lock.json

.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock=false

TYPESCRIPT.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Using TypeScript with React-Table
2+
3+
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`.
4+
5+
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.
6+
7+
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.
8+
9+
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.
10+
11+
e.g.
12+
13+
if you are only using `useSortBy` and `usePagination` then you would take this:
14+
15+
```tsx
16+
extends UseExpandedOptions<D>,
17+
UseFiltersOptions<D>,
18+
UseGroupByOptions<D>,
19+
UsePaginationOptions<D>,
20+
UseRowSelectOptions<D>,
21+
UseSortByOptions<D>,
22+
UseFiltersOptions<D>,
23+
UseResizeColumnsOptions<D>,
24+
Record<string, any> {}
25+
```
26+
27+
and convert it to this:
28+
29+
```tsx
30+
export interface TableOptions<D extends object>
31+
extends UsePaginationOptions<D>,
32+
UseSortByOptions<D> {}
33+
```
34+
35+
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.
36+
37+
## Caveat
38+
39+
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.

0 commit comments

Comments
 (0)