Skip to content

Commit

Permalink
v7.0.0-beta.24
Browse files Browse the repository at this point in the history
  • Loading branch information
tannerlinsley committed Dec 3, 2019
1 parent f74e347 commit 92603b6
Show file tree
Hide file tree
Showing 13 changed files with 49 additions and 821 deletions.
14 changes: 7 additions & 7 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
{
"dist/index.js": {
"bundled": 96769,
"minified": 46778,
"gzipped": 12295
"bundled": 96773,
"minified": 46756,
"gzipped": 12302
},
"dist/index.es.js": {
"bundled": 96204,
"minified": 46286,
"gzipped": 12179,
"bundled": 96208,
"minified": 46264,
"gzipped": 12186,
"treeshaked": {
"rollup": {
"code": 78,
"import_statements": 21
},
"webpack": {
"code": 11136
"code": 11143
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## 7.0.0-beta.24

- Removed types and related files from the repo. The community will now maintain types externally on Definitely Typed
- Changed `selectedRowPaths` to use a `Set()` instead of an array for performance.

## 7.0.0-beta.23

- The internal `useMain` hook has been renamed to `useInstance`
Expand Down
38 changes: 2 additions & 36 deletions TYPESCRIPT.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,5 @@
# 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`.
Types for React Table are maintained externally by the Typescript community and are located at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table.

To 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 extend 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.
Because React Table is not written in Typescript and the types are not maintained by the core team, there are no guarantees around the types always being up to date or working perfectly. If this is an issue for you, please contribute to the community types and discuss solutions there.
4 changes: 2 additions & 2 deletions docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -847,9 +847,9 @@ The following values are provided to the table `instance`:

The following options are supported via the main options object passed to `useTable(options)`

- `state.selectedRowPaths: Array<RowPathKey>`
- `state.selectedRowPaths: Set<RowPathKey>`
- Optional
- Defaults to `[]`
- Defaults to `new Set()`
- If a row's path key (eg. a row path of `[1, 3, 2]` would have a path key of `1.3.2`) is found in this array, it will have a selected state.
- `initialState.selectedRowPaths`
- Identical to the `state.selectedRowPaths` option above
Expand Down
8 changes: 4 additions & 4 deletions examples/row-selection/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function Table({ columns, data }) {
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
{rows.slice(0, 10).map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
Expand All @@ -79,11 +79,11 @@ function Table({ columns, data }) {
</tbody>
</table>
<p>Selected Rows: {selectedRowPaths.length}</p>
<pre>
{/* <pre>
<code>
{JSON.stringify(
{
selectedRowPaths,
selectedRowPaths: [...selectedRowPaths.values()],
'selectedFlatRows[].original': selectedFlatRows.map(
d => d.original
),
Expand All @@ -92,7 +92,7 @@ function Table({ columns, data }) {
2
)}
</code>
</pre>
</pre> */}
</>
)
}
Expand Down
Loading

0 comments on commit 92603b6

Please sign in to comment.