Skip to content
Permalink
Browse files

Mucho updates

  • Loading branch information
tannerlinsley committed Dec 13, 2019
1 parent 3109ca4 commit 9fa1396f26e79fa9984aeb1e4dbf839e57c428e7
Showing with 11,260 additions and 506 deletions.
  1. +2 −1 .babelrc
  2. +7 −7 .size-snapshot.json
  3. +21 −0 CHANGELOG.md
  4. +1 −3 docs/api/useColumnOrder.md
  5. +5 −7 docs/api/useExpanded.md
  6. +2 −4 docs/api/useFilters.md
  7. +1 −3 docs/api/useGroupBy.md
  8. +7 −11 docs/api/usePagination.md
  9. +4 −4 docs/api/useRowSelect.md
  10. +1 −3 docs/api/useRowState.md
  11. +1 −3 docs/api/useSortBy.md
  12. +11 −1 docs/api/useTable.md
  13. +11 −14 examples/expanding/src/App.js
  14. +4 −0 examples/grouping-column/.babelrc
  15. +1 −0 examples/grouping-column/.env
  16. +7 −0 examples/grouping-column/.eslintrc
  17. +23 −0 examples/grouping-column/.gitignore
  18. +29 −0 examples/grouping-column/.rescriptsrc.js
  19. +6 −0 examples/grouping-column/README.md
  20. +35 −0 examples/grouping-column/package.json
  21. BIN examples/grouping-column/public/favicon.ico
  22. +38 −0 examples/grouping-column/public/index.html
  23. +15 −0 examples/grouping-column/public/manifest.json
  24. +305 −0 examples/grouping-column/src/App.js
  25. +9 −0 examples/grouping-column/src/App.test.js
  26. +13 −0 examples/grouping-column/src/index.css
  27. +6 −0 examples/grouping-column/src/index.js
  28. +40 −0 examples/grouping-column/src/makeData.js
  29. +10,145 −0 examples/grouping-column/yarn.lock
  30. +2 −2 examples/kitchen-sink-controlled/src/App.js
  31. +2 −2 examples/kitchen-sink/src/App.js
  32. +2 −2 examples/row-selection/src/App.js
  33. +1 −1 examples/sub-components/src/App.js
  34. +9 −1 src/hooks/useColumnVisibility.js
  35. +127 −136 src/hooks/useTable.js
  36. +9 −6 src/makeDefaultPluginHooks.js
  37. +29 −29 src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap
  38. +109 −109 src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
  39. +1 −1 src/plugin-hooks/tests/useExpanded.test.js
  40. +2 −6 src/plugin-hooks/tests/useRowSelect.test.js
  41. +9 −1 src/plugin-hooks/useAbsoluteLayout.js
  42. +39 −22 src/plugin-hooks/useExpanded.js
  43. +46 −35 src/plugin-hooks/useFilters.js
  44. +22 −25 src/plugin-hooks/useGroupBy.js
  45. +2 −2 src/plugin-hooks/usePagination.js
  46. +5 −7 src/plugin-hooks/useResizeColumns.js
  47. +40 −24 src/plugin-hooks/useRowSelect.js
  48. +3 −3 src/plugin-hooks/useSortBy.js
  49. +49 −6 src/publicUtils.js
  50. +1 −1 src/utility-hooks/useTokenPagination.js
  51. +1 −24 src/utils.js
@@ -3,7 +3,8 @@
[
"@babel/preset-env",
{
"modules": false
"modules": false,
"loose": true
}
],
"@babel/react"
@@ -1,20 +1,20 @@
{
"dist/index.js": {
"bundled": 107809,
"minified": 51216,
"gzipped": 13492
"bundled": 104527,
"minified": 48274,
"gzipped": 12949
},
"dist/index.es.js": {
"bundled": 106966,
"minified": 50466,
"gzipped": 13339,
"bundled": 103640,
"minified": 47484,
"gzipped": 12791,
"treeshaked": {
"rollup": {
"code": 80,
"import_statements": 21
},
"webpack": {
"code": 8902
"code": 8227
}
}
},
@@ -1,3 +1,24 @@
## 7.0.0-rc.10

- Optimizations made to make accessors, prop getters and other internals much faster. 10x in some cases!
- Fixed docs for `usePagination` to have `pageIndex` and `pageSize` only available on the state object, not the instance
- Added a plugin order restriction to make sure `useResizeColumns` always comes before `useAbsoluteLayout`
- Fixed the `useFinalInstance` hook to not have an empty array as the first meta argument passed.
- Fixed an issue where memoized or ref-forwarded components could not be used as cell renderers
- The `toggleExpandedById` action has been renamed to `toggleExpanded`
- Added the `toggleAllExpanded` action
- Added the `setExpanded` action
- Changed `row.isAggregated` to `row.isGrouped`
- `state.expanded` and `state.selectedRowIds` are now objects (`{[rowId]: Bool}`), not arrays. This should help with mid-to-large size datasets while also being serializable (instead of a Set(), which is not as reliable)
- `state.filters` is now an array of objects (`{id, value}`). Since filters do have order and can be applied incrementally, it should be an array to ensure correct order.
- Moved the `flatColumns` and `flatColumnsDeps` hooks to be after row/data materialization. These hooks can then manipulate the `flatColumns` object after all data has been accessed without triggering row materialization again.
- Added the `row.allCells` property and the `cellColumns` reducer hook to determine which cells to create for each row. These cells are placed into `row.allCells`. The resulting cell array is not meant to be used for display in templating and is only made available for convenience and/or advanced templating.
- Added the `cells` reducer hook to determine which cells from the `row.allCells` array that should be placed into `row.cells`. The resulting cell array is the one that is intended for display in templating.
- Reducers are now passed the actual instance variable, not the instanceRef
- Added the `makeRenderer` utility (also exported)
- Removed `column.groupByBoundary` functionality. If needed, use the `flatColumns` hook to decorate, reorganize or re-order groupBy columns
- Fixed grouped row.id's to be truly unique

## 7.0.0-rc.9

- Fixed an issue where dependency hooks were not being reduced properly, thus the table would rerender unnecessarily
@@ -9,12 +9,10 @@

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

- `state.columnOrder: Array<ColumnId>`
- `initialState.columnOrder: Array<ColumnId>`
- Optional
- Defaults to `[]`
- Any column ID's not represented in this array will be naturally ordered based on their position in the original table's `column` structure
- `initialState.columnOrder`
- Identical to the `state.columnOrder` option above

### Instance Properties

@@ -9,15 +9,13 @@

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

- `state.expanded: Array<rowId: String>`
- `initialState.expanded: Object<rowId: String, expanded: Bool>`
- Optional
- Must be **memoized**
- An array of expanded row IDs.
- If a row's id is present in this array, that row will have an expanded state. For example, if `['3']` was passed as the `expanded` state, by default the **4th row in the original data array** would be expanded, since it would have that ID
- For nested expansion, you can **use nested IDs like `1.3`** to expand sub rows. For example, if `['3', '3.5']` was passed as the `expanded` state, then the **the 4th row would be expanded, along with the 6th subRow of the 4th row as well**.
- An `object` of expanded row IDs with boolean property values.
- If a row's id is set to true in this object, that row will have an expanded state. For example, if `{ '3': true }` was passed as the `expanded` state, by default the **4th row in the original data array** would be expanded, since it would have that ID
- For nested expansion, you can **use nested IDs like `1.3`** to expand sub rows. For example, if `{ '3': true, '3.5': true }` was passed as the `expanded` state, then the **the 4th row would be expanded, along with the 6th subRow of the 4th row as well**.
- This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `initialState.expanded`
- Identical to the `state.expanded` option above
- `getSubRows: Function(row, relativeIndex) => Rows[]`
- Optional
- See the [useTable hook](#table-options) for more details
@@ -42,7 +40,7 @@ The following options are supported via the main options object passed to `useTa
The following properties are available on the table instance returned from `useTable`

- `rows: Array<Row>`
- An array of **sorted** rows.
- An array of **expanded** rows.

### Row Properties

@@ -9,11 +9,9 @@

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

- `state.filters: Object<columnId: filterValue>`
- `initialState.filters: Array<Object<id: String, value: any>>`
- Must be **memoized**
- An object of columnId's and their corresponding filter values. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `initialState.filters`
- Identical to the `state.filters` option above
- An array of objects containing columnId's and their corresponding filter values. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `manualFilters: Bool`
- Enables filter detection functionality, but does not automatically perform row filtering.
- Turn this on if you wish to implement your own row filter outside of the table (eg. server-side or manual row grouping/nesting)
@@ -12,11 +12,9 @@

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

- `state.groupBy: Array<String>`
- `initialState.groupBy: Array<String>`
- Must be **memoized**
- An array of groupBy ID strings, controlling which columns are used to calculate row grouping and aggregation. This information is stored in state since the table is allowed to manipulate the groupBy through user interaction.
- `initialState.groupBy`
- Identical to the `state.groupBy` option above
- `manualGroupBy: Bool`
- Enables groupBy detection and functionality, but does not automatically perform row grouping.
- Turn this on if you wish to implement your own row grouping outside of the table (eg. server-side or manual row grouping/nesting)
@@ -11,18 +11,14 @@

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

- `state.pageSize: Int`
- `initialState.pageSize: Int`
- **Required**
- Defaults to `10`
- Determines the amount of rows on any given page
- `initialState.pageSize`
- Identical to the `state.pageSize` option above
- `state.pageIndex: Int`
- `initialState.pageIndex: Int`
- **Required**
- Defaults to `0`
- The index of the page that should be displayed via the `page` instance value
- `initialState.pageIndex`
- Identical to the `state.pageIndex` option above
- `pageCount: Int`
- **Required if `manualPagination` is set to `true`**
- If `manualPagination` is `true`, then this value used to determine the amount of pages available. This amount is then used to materialize the `pageOptions` and also compute the `canNextPage` values on the table instance.
@@ -31,7 +27,7 @@ The following options are supported via the main options object passed to `useTa
- Turn this on if you wish to implement your own pagination outside of the table (eg. server-side pagination or any other manual pagination technique)
- `autoResetPage: Boolean`
- Defaults to `true`
- When `true`, the `expanded` state will automatically reset if `manualPagination` is `false` and any of the following conditions are met:
- When `true`, the `pageIndex` state will automatically reset if `manualPagination` is `false` and any of the following conditions are met:
- `data` is changed
- `manualSortBy` is `false` and `state.sortBy` is changed
- `manualFilters` is `false` and `state.filters` is changed
@@ -49,6 +45,10 @@ The following options are supported via the main options object passed to `useTa

The following values are provided to the table `instance`:

- `state.pageIndex: Int`
- This is the current `pageIndex` value, located on the state.
- `state.pageSize: Int`
- This is the current `pageSize` value, located on the state.
- `page: Array<row>`
- An array of rows for the **current** page, determined by the current `pageIndex` value.
- `pageCount: Int`
@@ -73,10 +73,6 @@ The following values are provided to the table `instance`:
- `setPageSize: Function(pageSize)`
- This function sets `state.pageSize` to the new value.
- As a result of a pageSize change, a new `state.pageIndex` is also calculated. It is calculated via `Math.floor(currentTopRowIndex / newPageSize)`
- `pageIndex: Int`
- This is the resolved `state.pageIndex` value.
- `pageSize: Int`
- This is the resolved `state.pageSize` value.

### Example

@@ -9,17 +9,17 @@

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

- `initialState.selectedRowIds: Set<RowPathKey>`
- `initialState.selectedRowIds: Object<rowId: Boolean>`
- Optional
- Defaults to `new Set()`
- If a row's ID is found in this array, it will have a selected state.
- Defaults to `{}`
- If a row's ID is set to `true` in this object, it will have a selected state.
- `manualRowSelectedKey: String`
- Optional
- Defaults to `isSelected`
- If this key is found on the **original** data row, and it is true, this row will be manually selected
- `autoResetSelectedRows: Boolean`
- Defaults to `true`
- When `true`, the `expanded` state will automatically reset if any of the following conditions are met:
- When `true`, the `selectedRowIds` state will automatically reset if any of the following conditions are met:
- `data` is changed
- To disable, set to `false`
- For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](./faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
@@ -9,14 +9,12 @@

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

- `state.rowState: Object<RowPathKey:Object<any, cellState: {columnId: Object}>>`
- `initialState.rowState: Object<RowPathKey:Object<any, cellState: {columnId: Object}>>`
- Optional
- Defaults to `{}`
- If a row's ID is found in this array, it will have the state of the value corresponding to that key.
- Individual row states can contain anything, but they also contain a `cellState` key, which provides cell-level state based on column ID's to every
**prepared** cell in the table.
- `initialState.rowState`
- Identical to the `state.rowState` option above
- `initialRowStateAccessor: Function`
- Optional
- This function may optionally return the initial state for a row.
@@ -14,11 +14,9 @@

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

- `state.sortBy: Array<Object<id: columnId, desc: Bool>>`
- `initialState.sortBy: Array<Object<id: columnId, desc: Bool>>`
- Must be **memoized**
- An array of sorting objects. If there is more than one object in the array, multi-sorting will be enabled. Each sorting object should contain an `id` key with the corresponding column ID to sort by. An optional `desc` key may be set to true or false to indicated ascending or descending sorting for that column. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `initialState.sortBy`
- Identical to the `state.sortBy` option above
- `manualSorting: Bool`
- Enables sorting detection functionality, but does not automatically perform row sorting. Turn this on if you wish to implement your own sorting outside of the table (eg. server-side or manual row grouping/nesting)
- `disableSortBy: Bool`
@@ -93,6 +93,11 @@ The following options are supported on any column object you can pass to `column
- Receives the table instance and cell model as props
- Must return valid JSX
- This function (or component) is primarily used for formatting the column value, eg. If your column accessor returns a date object, you can use a `Cell` function to format that date to a readable format.
- `show: Bool`
- Optional
- Defaults to `undefined`
- If set to `true`, will take priority over any state in `hiddenColumns` and force this column to be visible at all times.
- If set to `false` will take priority over any state in `hiddenColumns` and force this column to be hidden at all times.
- `width: Int`
- Optional
- Defaults to `150`
@@ -240,7 +245,12 @@ The following properties are available on every `Column` object returned by the
The following additional properties are available on every `row` object returned by the table instance.

- `cells: Array<Cell>`
- An array of `Cell` objects containing properties and functions specific to the row and column it belongs to.
- An array of visible `Cell` objects containing properties and functions specific to the row and column it belongs to.
- These cells are normally intended for display
- See [Cell Properties](#cell-properties) for more information
- `allCells: Array<Cell>`
- An array of all `Cell` objects containing properties and functions specific to the row and column it belongs to.
- Not every cell contained here is guaranteed that it should be displayed and is made available here for convenience and advanced templating purposes.
- See [Cell Properties](#cell-properties) for more information
- `values: Object<columnId: any>`
- A map of this row's **resolved** values by columnId, eg. `{ firstName: 'Tanner', lastName: 'Linsley' }`
@@ -62,25 +62,22 @@ function Table({ columns: userColumns, data }) {
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)}
)}
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
<br />
<div>Showing the first 20 results of {rows.length} rows</div>
<pre>
<code>{JSON.stringify({ expanded }, null, 2)}</code>
<code>{JSON.stringify({ expanded: expanded }, null, 2)}</code>
</pre>
</>
)
@@ -0,0 +1,4 @@
{
"presets": ["react-app"],
"plugins": ["styled-components"]
}
@@ -0,0 +1 @@
SKIP_PREFLIGHT_CHECK=true
@@ -0,0 +1,7 @@
{
"extends": ["react-app", "prettier"],
"rules": {
// "eqeqeq": 0,
// "jsx-a11y/anchor-is-valid": 0
}
}
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
@@ -0,0 +1,29 @@
const path = require('path')
const resolveFrom = require('resolve-from')

const fixLinkedDependencies = config => {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
react$: resolveFrom(path.resolve('node_modules'), 'react'),
'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
},
}
return config
}

const includeSrcDirectory = config => {
config.resolve = {
...config.resolve,
modules: [path.resolve('src'), ...config.resolve.modules],
}
return config
}

module.exports = [
['use-babel-config', '.babelrc'],
['use-eslint-config', '.eslintrc'],
fixLinkedDependencies,
// includeSrcDirectory,
]
@@ -0,0 +1,6 @@
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.

You can:

- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping-column)
- `yarn` and `yarn start` to run and edit the example

0 comments on commit 9fa1396

Please sign in to comment.
You can’t perform that action at this time.