Compare commits

...
Author SHA1 Message Date
tannerlinsley 02b2671f5c v7.0.0-alpha.16 2019-07-30 17:01:59 -06:00
tannerlinsley 2c5610d885 test(usegroupby/useexpanded): improved tests for useGroupBy/useExpanded 2019-07-30 17:00:59 -06:00
tannerlinsley 12e7b3220d test: snapshots for useFilters, useGroupBy, useSortBy 2019-07-30 15:57:11 -06:00
tannerlinsley bcefe5d6e8 v7.0.0-alpha.15 2019-07-30 14:10:19 -06:00
tannerlinsley df827d76e2 test(usefilters): added useFilters test placeholder 2019-07-30 14:09:48 -06:00
tannerlinsley 0ae8693444 fix(global): fix npm dist, update docs 2019-07-30 14:07:31 -06:00
tannerlinsley 56f3dc9fe6 docs(example): removed page options from the pagination example state 2019-07-30 12:54:19 -06:00
tannerlinsley 5f58786e94 docs(examples): added pagination example 2019-07-30 12:51:14 -06:00
tannerlinsley 48f992fa0c v7.0.0-alpha.14 2019-07-30 11:44:21 -06:00
tannerlinsley 0b868fe8c4 chore(husky): added yarn test:ci 2019-07-30 11:43:22 -06:00
tannerlinsley a7a95b2ce6 fix(usepagination): pageOptions calculate correctly, added pagination ex 2019-07-30 11:41:11 -06:00
tannerlinsley 116f5cdeba docs(grouping example): better annotations and more data 2019-07-30 11:09:20 -06:00
tannerlinsley 0187fcfc2c fix(example): fixed css issues in codesandbox (no css prop) 2019-07-30 10:33:06 -06:00
tannerlinsley ab32339bfa v7.0.0-alpha.13 2019-07-30 10:23:42 -06:00
tannerlinsley 7fd8fa1dfc docs: adding grouping example 2019-07-30 10:21:05 -06:00
tannerlinsley bc89ae3027 Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-30 09:57:04 -06:00
tannerlinsley af739d91d0 fix(usegroupby): fix useGroupBy, add grouping example and fix some tests 2019-07-30 09:56:44 -06:00
Cyril SimanandTanner Linsley 35f78132f6 Avoid react error if the data source doesn't have the property. (#1420)
* Fix : Avoid react error if the data source doesn't have the property.

* Update fix with tannerlinsley's better solution
2019-07-30 09:51:17 -06:00
Larry BothaandTanner Linsley d7a4db0979 chore(commitlint): add deps, config, and git hook (#1419) 2019-07-29 23:45:46 -06:00
tannerlinsley 11167e5635 Refactor useTable, sorting, and filtering to use new hook layer 2019-07-29 14:51:07 -06:00
Larry BothaandTanner Linsley 14a43b1a68 Update test configs (#1417)
* chore(package.json): use latest babel core, remove bridge

* test(.babelrc): add test environment so that Jest can use ES6 imports

* test(usetable): fix import
2019-07-29 14:34:33 -06:00
tannerlinsley 0375a7e7d5 Set up some failing tests 2019-07-29 12:05:19 -06:00
tannerlinsley 6b70309f42 Add prettier format 2019-07-29 11:33:47 -06:00
tannerlinsley 9b262676be Fix hook defaults 2019-07-29 11:14:41 -06:00
tannerlinsley 1caad4cd8c Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-29 11:00:11 -06:00
tannerlinsley dc73347003 Relocate columns and row logic, fix columns and useGroupBy to be more pure
Since useColumns was relying on groupBy logic, this was code smell. I wanted useGroupBy to be able to add that logic all by itself and not have to have dependencies in the core of the table.

To fix that, I've moved the core column and row logic to the useTable hook and added a new hook 'columnsBeforeHeaderGroups' to allow useGroupBy to do what i needs in a more pure way.
2019-07-29 11:00:07 -06:00
gargrohandTanner Linsley 66bfec34a8 [minor] Readme update (#1415)
* correcting typos

* [minor ] Readme update
2019-07-29 09:37:48 -06:00
gargrohandTanner Linsley 6347157f80 correcting typos (#1413) 2019-07-29 08:46:56 -06:00
jaapjanfransandTanner Linsley b6db8775ad Small readme example update (#1412)
in commit ea79cd8388 the`getRowProps` member of the headerGroup object changed into `getHeaderGroupProps`
2019-07-29 07:51:01 -06:00
tannerlinsley cadd8bf62a Rename examples and their directories 2019-07-26 16:03:54 -06:00
tannerlinsley 9f4746a7ac Add sorting guide 2019-07-26 15:54:50 -06:00
tannerlinsley a0ca841287 Update App.js 2019-07-26 11:27:10 -06:00
tannerlinsley 52ee923675 Update package.json 2019-07-26 11:22:58 -06:00
tannerlinsley 24f6a2750d fix(usefilters): fix filter type fallback and autoRemove functionality AGAIN 2019-07-26 11:22:23 -06:00
tannerlinsley 8988660618 fix(usefilters): fixed filtering fallback logic and autoRemove bug 2019-07-26 10:58:35 -06:00
tannerlinsley a3e5cac298 fix(usefilters): fixed the default filter to be 'text' 2019-07-26 10:52:27 -06:00
tannerlinsley 47d2651b8d docs: updated contribution documentation 2019-07-26 10:45:33 -06:00
tannerlinsley 412f64cece chore: released version 7.0.0-alpha.9 2019-07-26 10:39:19 -06:00
tannerlinsley 933cc27e33 Update README.md 2019-07-26 10:30:59 -06:00
tannerlinsley 54be978268 Update App.js 2019-07-26 10:30:20 -06:00
tannerlinsley 90922f8637 Upgrade filter types to support configurable autoRemoval 2019-07-26 10:19:38 -06:00
tannerlinsley fd8a686b30 Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-26 07:14:06 -06:00
Larry BothaandTanner Linsley a361a372ee chore(packages): add husky and lint-staged (#1409) 2019-07-26 07:13:58 -06:00
Larry BothaandTanner Linsley 563e809d05 docs(package.json): add commitizen dep, config, and npm script (#1408)
use `npm run commit` to use commitizen for better commit messages

re #1383
2019-07-25 22:39:25 -06:00
tannerlinsley 7d267b3442 v7.0.0-alpha.8 2019-07-25 13:39:37 -06:00
tannerlinsley 388b3ec2b9 Update README.md 2019-07-25 13:39:13 -06:00
tannerlinsley b2abd82350 Use useEffect in dev, not layoutEffect 2019-07-25 13:39:10 -06:00
tannerlinsley 06a6d6fcc3 Rename getHeaderRowProps to getHeaderGroupProps 2019-07-25 13:38:52 -06:00
tannerlinsley d8599817ad Fix immutability issue with pagination and sortBy 2019-07-25 13:38:33 -06:00
tannerlinsley e1060db327 Satisfy exhuastive-deps in useTableState 2019-07-25 13:38:15 -06:00
tannerlinsley ea79cd8388 Fix renderer functions for blank headers 2019-07-25 13:37:58 -06:00
tannerlinsley b2ed18696f Add defaultColumn option 2019-07-25 13:37:31 -06:00
tannerlinsley 9f8eab5777 Update README.md 2019-07-25 10:27:49 -06:00
tannerlinsley 4f13f32023 Update rendering API and column/header model 2019-07-25 10:24:30 -06:00
tannerlinsley 5bb2e49764 Fix useTableState setState memoization 2019-07-25 07:04:52 -06:00
tannerlinsley d1f26fe7bc Fix action type detection 2019-07-24 07:21:26 -06:00
tannerlinsley c7d6562d04 Change actions and addActions to be simpler to use 2019-07-23 12:30:15 -06:00
tannerlinsley e82d2d4b36 Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-23 12:22:01 -06:00
tannerlinsley 0716e234a1 Add sortBy example 2019-07-23 12:21:57 -06:00
tannerlinsley 824ee34ba9 Refactor sortBy logic 2019-07-23 12:20:32 -06:00
tannerlinsley 514fbabb88 Fix type action forcing 2019-07-23 12:12:46 -06:00
Maksim HorbachevskyandTanner Linsley 2ecf40518e Export utils to create custom hooks (#1403) 2019-07-23 12:03:17 -06:00
tannerlinsley fd64486286 Fix usePagination to work during SSR 2019-07-23 10:55:49 -06:00
tannerlinsley 34909305af Force action types in state reducer 2019-07-23 10:41:27 -06:00
tannerlinsley 5043af5071 Move useColumns and useRows into useTable (but allow overrides) 2019-07-23 10:22:46 -06:00
tannerlinsley 2ca7f78d72 Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-21 15:41:28 -06:00
tannerlinsley 811cd015c2 Update README.md 2019-07-21 15:41:21 -06:00
AresMegaGlobalandTanner Linsley 9e37846a21 Update README.md (#1400) 2019-07-20 07:32:30 -06:00
tannerlinsley 723720c8b1 Update README.md 2019-07-18 15:07:41 -06:00
tannerlinsley 2a20ad3ba4 Update App.js 2019-07-18 15:06:10 -06:00
tannerlinsley c6d37e4834 Update basic example 2019-07-18 15:03:21 -06:00
tannerlinsley a1a192052d Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-18 14:56:06 -06:00
tannerlinsley 455e0730bf Bare bones basic example 2019-07-18 14:56:03 -06:00
Tanner LinsleyandGitHub 1d4867fa2f Update FUNDING.yml 2019-07-18 13:53:38 -06:00
Tanner LinsleyandGitHub c3da2a7c41 Update FUNDING.yml 2019-07-18 13:52:48 -06:00
Tanner LinsleyandGitHub c3a52c5845 Update FUNDING.yml 2019-07-18 13:51:26 -06:00
Tanner LinsleyandGitHub 6dea8103d3 Update FUNDING.yml 2019-07-18 13:51:09 -06:00
Tanner LinsleyandGitHub 3bab8372d1 Update FUNDING.yml 2019-07-18 13:50:29 -06:00
Tanner LinsleyandGitHub b85f457e62 Update FUNDING.yml 2019-07-18 13:41:35 -06:00
Tanner LinsleyandGitHub c6871084d6 Create FUNDING.yml 2019-07-18 13:40:43 -06:00
tannerlinsley 8946771563 Update README.md 2019-07-18 12:08:57 -06:00
tannerlinsley fbc8032d29 Fix disableMultiSort, change from sortByFn to sortTypes 2019-07-18 12:08:55 -06:00
tannerlinsley 6a3bc5559e Add pageCount to instance via usePagination hook 2019-07-18 12:08:04 -06:00
tannerlinsley 91e28b93bf Clean up useTokenPagination 2019-07-18 12:07:48 -06:00
tannerlinsley a6345dbe2b Add sortTypes 2019-07-18 12:07:39 -06:00
tannerlinsley 0b0de317ee Clean up useFlexLayout 2019-07-18 12:07:21 -06:00
tannerlinsley 0ed0c78286 Change expandedKey to manualExpandedKey, fix expanded index to use the original row index 2019-07-18 12:06:57 -06:00
tannerlinsley fad6ac4014 Update README.md 2019-07-17 12:40:54 -06:00
tannerlinsley 8f142b3788 Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-17 12:39:40 -06:00
tannerlinsley daff1f9ca3 Documentation Checkpoint 2019-07-17 12:39:35 -06:00
DomenuchandTanner Linsley 96900f645a returned row inside row hook subscription (#1393) 2019-07-16 13:22:13 -06:00
tannerlinsley 272a99fcd8 Update README.md 2019-07-15 11:36:30 -06:00
tannerlinsley 07fb9529e4 v7.0.0-alpha.7 2019-07-15 11:29:50 -06:00
DomenuchandTanner Linsley b5d399efd6 Fixed grouped column Header that were not adjusting based on hidden child columns (#1381)
* added assertion to check for show property inside column

* reverted previous change

* added a filter to weed out non-visible columns when calculating the size for grouped Headers

* added another case to the previous filter to factor in blank grouped Headers
2019-07-15 11:28:22 -06:00
DomenuchandTanner Linsley 14e931548a added undefined to the unspecific getRowProps fn to retain the param order (#1392) 2019-07-15 11:27:13 -06:00
Larry BothaandTanner Linsley bc3ea07c3e Feature/add jest configs ref: #1383 (#1385)
* add deps for testing

* feat(tests): add jest configs

* uncomment module directories path
2019-07-15 11:25:32 -06:00
tannerlinsley 4a3929cd50 Merge branch 'master' of https://github.com/react-tools/react-table 2019-07-15 09:33:04 -06:00
Larry BothaandTanner Linsley e2bb09d8b2 Feature/add prettier config, ref #1383 (#1384)
* add prettier config

* write files with prettier

* install and configure lint-staged and husky - ref 1.2 in #1383

* feat(style): add prettier configs, ref 1.1 & 1.2 in #1383
2019-07-01 21:03:57 -06:00
ggascoigneandTanner Linsley 18f2dea247 Fix lint errors from react-hooks/exhaustive-deps (#1371)
They all seemed like reasonable warnings, this squashes them.
2019-07-01 09:43:46 -06:00
ggascoigneandTanner Linsley ead3599378 Fix pagination resetting to page zero with manualPagination (#1369)
* Fix pagination resetting to page zero with manualPagination

To be honest I'm not sure what this useLayoutEffect is there to do.
It has no visible effect if you don't use manualPagination, and if you
do it, simply jumps you back to the first page, defeating the point of
you having control of the pagination.

* Conditionally reset page on data change

Rather disable the whole page reset when filters, groupBy or sortBy
change, just because I wanted to disable the page reset on data change,
make that bit be conditional.

With that in mind, usePagination now accepts a
disablePageResetOnDataChange parameter.
2019-07-01 09:36:42 -06:00
Adrien DenatandTanner Linsley addf28a011 Fix useExpanded wrongly flattening subRows (#1372)
* Fix useExpanded wrongly flattening subRows

* Add new paginateSubRows option defaulting to true
2019-06-21 10:00:59 -06:00
Adrien DenatandTanner Linsley e4429b7143 Add support for es module build (#1374) 2019-06-21 09:43:05 -06:00
tannerlinsley 4b2d0eb187 v7.0.0-alpha.6 2019-06-20 15:24:02 -06:00
ggascoigneandTanner Linsley 5369051b05 Provide option to toggle sort like V6 (#1370)
V7 adds the option to remove a sort option, so it goes from asc -> desc
-> unset, then repeats.  V6 just went from asc -> desc then repeated.

Personally I much preferred this, I think that there's a case to be made
that this is the more expected behavior.

I'm not sure if this is really the best way to fix this since it adds
yet another api option and I completely understand that that is less
than desirable, but I also would rather add an option than have to
duplicate the whole useSortBy hook.
2019-06-20 12:50:36 -06:00
DomenuchandTanner Linsley 58d38b668b changed applyHook to applyPropHooks inside getRowProps mergeProps fn (#1367) 2019-06-20 12:49:04 -06:00
tannerlinsley 9de149cf3c v7.0.0-alpha.5 2019-06-11 11:41:38 -06:00
tannerlinsley 289dca1caf Merge branch 'master' of https://github.com/react-tools/react-table 2019-06-11 11:41:07 -06:00
tannerlinsley f257a3496f v7.0.0-alpha.4 2019-06-11 11:41:03 -06:00
tannerlinsley 312a137f02 Add colspan prop support out of the box, fix useTableState to be immutable, fix sorting and pagination performance, 2019-06-11 11:40:39 -06:00
HellycatandTanner Linsley c6167566da Fix misspelled in propTypes (#1353) 2019-05-31 07:18:26 -06:00
Dmitrii GaidarjiandTanner Linsley 5b0e68aead Fix defaultSortDesc blocking toggle action (#1341)
* Fix defaultSortDesc blocking toggle action

* Revert "Fix defaultSortDesc blocking toggle action"

This reverts commit 15e05cefd820e3f63e80a8e9d31b9431f295b55a.

* Fix defaultSortDesc blocking toggle action
2019-05-31 07:17:58 -06:00
tannerlinsley 2f5ebe460f Move initial column visibility to useTable.
This change allows you to technically use React Table without a layout hook. Under that assumption, you would need to come up with your own styling mechanisms for display.

The useSimpleLayout merely adds a single `width` style to the prop getters for column headers and cells.

The useFlexLayout is much more robust. Personally though, I have moved away from both, and am just using raw `display: table-row/table-cell` styles to let my tables display naturally.
2019-05-16 10:52:16 -06:00
tannerlinsley 2ab4a65dcc Merge 2019-04-29 12:41:02 -06:00
tannerlinsley 94a6ee53f7 Update .gitignore 2019-04-29 12:39:48 -06:00
tannerlinsley ab32721453 Fix: usePagination now supplies both pageIndex and pageSize 2019-04-29 12:39:29 -06:00
Gary MenzelandTanner Linsley 98bee0a4a7 Feature/useSimpleLayout (#1322)
* Install useSimpleLayout and adjust useTable and useRows as required.

* useSimpleLayout integration

* Minor final fix - replace .filter with .forEach

* Used a spread on the path.
2019-04-28 09:53:34 -06:00
George MauerandTanner Linsley 882e5f6fcf Fix sandbox config to proper extension for codesandbox (#1323) 2019-04-28 09:52:16 -06:00
tannerlinsley 8c81a31aa6 Update README.md 2019-04-26 22:28:25 -06:00
tannerlinsley 8e4601fa83 Move row and cell generation to useTable. Add warnings for unprepared rows 2019-04-25 16:33:00 -06:00
tannerlinsley 7c6076908d Merge branch 'master' of https://github.com/react-tools/react-table 2019-04-23 15:47:26 -06:00
tannerlinsley ab3252bc32 Remove unnecessary flex layout inline styles 2019-04-23 15:47:22 -06:00
Jose Manuel Vergara FlorezandTanner Linsley 085957f3c4 Fix Example link on ReadMe (#1308) 2019-04-23 15:26:43 -06:00
Bojan BedracandTanner Linsley fd5d9ddecd Broken 100k rows aggregation (#1283)
* Broken codesandbox example

* Delete file in wrong location
2019-04-23 15:22:36 -06:00
Paul VogelandTanner Linsley 4e3fa751dc TravisCI: Cache yarn files (#1289)
Like it is recommended by https://docs.travis-ci.com/user/caching/#yarn-cache
2019-03-12 11:08:24 -06:00
Paul VogelandTanner Linsley 3453ac5a76 TravisCI: Use node version 10 (#1288)
Since it's the active LTS according to https://nodejs.org/en/about/releases/
2019-03-12 09:00:46 -06:00
Gary MenzelandTanner Linsley a9971e66af Fixes for useExtended in useTable plus small bug (#1279)
* undefined error in GroupBy
row specific hooks and correct pathing for nested rows

* Ensuring correct git user
2019-02-27 08:06:47 -08:00
Tanner LinsleyandGitHub 33f30c7b7f Update README.md 2019-02-18 10:13:41 -07:00
Tanner LinsleyandGitHub 91d758711d Update README.md 2019-02-14 15:06:47 -07:00
Tanner LinsleyandGitHub b2498b0430 Update README.md 2019-02-14 14:51:07 -07:00
Tanner LinsleyandGitHub d599952e89 Update README.md 2019-02-14 14:48:57 -07:00
Tanner Linsley 3ee410bd05 Create _redirects 2019-02-11 13:19:27 -07:00
Tanner Linsley 8b07b2c84e Unzip old react-table examples in archives 2019-02-11 13:14:36 -07:00
Tanner Linsley a0495f6858 Rename hook files 2019-02-11 09:33:34 -07:00
Tanner Linsley 2d31d3bac9 v7.0.0-alpha.2 2019-02-06 16:23:02 -07:00
Tanner Linsley 8d269b95c7 v7.0.0-alpha.1 2019-02-06 16:20:07 -07:00
406 changed files with 132349 additions and 8864 deletions
+16
View File
@@ -0,0 +1,16 @@
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
],
"@babel/react"
],
"env": {
"test": {
"presets": ["@babel/preset-env", "@babel/react"]
}
}
}
+3
View File
@@ -0,0 +1,3 @@
{
"extends": ["react-app", "prettier"]
}
-3
View File
@@ -1,3 +0,0 @@
module.exports = {
extends: 'react-tools',
}
+5
View File
@@ -0,0 +1,5 @@
# These are supported funding model platforms
github: tannerlinsley
patreon: tannerlinsley
custom: https://youtube.com/tannerlinsley
+4 -3
View File
@@ -1,6 +1,7 @@
node_modules/
lib/
es/
node_modules
lib
dist
es
docs/build
react-table.js
react-table.min.js
+6
View File
@@ -0,0 +1,6 @@
module.exports = {
hooks: {
'pre-commit': 'lint-staged && yarn test:ci',
'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
},
}
+4 -1
View File
@@ -1,4 +1,7 @@
language: node_js
node_js:
- "6"
- "10"
cache: yarn
script: npm test
+73 -73
View File
@@ -2,58 +2,58 @@
#### Fixes & Optimizations
* Since `resolveData` is now capable of materializing data on it's own, the `data` prop is no longer required as a prop-type.
- Since `resolveData` is now capable of materializing data on it's own, the `data` prop is no longer required as a prop-type.
## 6.8.4
#### Fixes & Optimizations
* Only run `resolveData` prop when `data` prop has changed, not any others.
- Only run `resolveData` prop when `data` prop has changed, not any others.
## 6.8.3
#### Fixes & Optimizations
* Allow the `resolveData` prop to alter or materialize new data when the `data` prop changes.
- Allow the `resolveData` prop to alter or materialize new data when the `data` prop changes.
## 6.8.1
#### Fixes & Optimizations
* Updated eslint and code formatting
- Updated eslint and code formatting
## 6.7.5
#### Fixes & Optimizations
* Now passes `column` to `getResizerProps` (#667)
* NOTE: `getResizerProps` is now only called if the column is resizable
* Fixes the `className` ordering in defaultProps for ThComponent (#673)
* NOTE: user supplied classNames now come at the end so they can extend the defaults
- Now passes `column` to `getResizerProps` (#667)
- NOTE: `getResizerProps` is now only called if the column is resizable
- Fixes the `className` ordering in defaultProps for ThComponent (#673)
- NOTE: user supplied classNames now come at the end so they can extend the defaults
## 6.7.4
#### Fixes & Optimizations
* Fix Prop types for columns
- Fix Prop types for columns
## 6.7.3
#### Fixes & Optimizations
* Fix the rest of the proptypes
- Fix the rest of the proptypes
## 6.7.2
#### Fixes & Optimizations
* `getPropTypes` proptype check
- `getPropTypes` proptype check
## 6.7.1
#### Fixes & Optimizations
* `eslint-config` moved to dev deps
- `eslint-config` moved to dev deps
## 6.7.0
@@ -61,113 +61,113 @@
#### New Features
* Expose page/pageSize to rows/cells
* Supply sort direction to custom sort methods
- Expose page/pageSize to rows/cells
- Supply sort direction to custom sort methods
#### Fixes & Optimizations
* README updates
* Linter cleanup
* Added PropTypes node module
* Deps, linting and style upgrades
- README updates
- Linter cleanup
- Added PropTypes node module
- Deps, linting and style upgrades
## 6.6.0
#### Fixes & Optimizations
* moved repo to react-tools
* Doc examples moved to codesandbox.io
* README updates
* CSS refacting for rt-tfoot to match rt-thead
* CSS more specific for input and select
- moved repo to react-tools
- Doc examples moved to codesandbox.io
- README updates
- CSS refacting for rt-tfoot to match rt-thead
- CSS more specific for input and select
## 6.5.3
#### Fixes & Optimizations
* `onClick` proxying and eslint
- `onClick` proxying and eslint
## 6.5.2
#### New Features
* Provide onClick handleOriginal function - #406
- Provide onClick handleOriginal function - #406
#### Fixes & Optimizations
* README updates
* `makePathArray` in utils - #326
* Various fixes: #294, #376, #398, #415,
- README updates
- `makePathArray` in utils - #326
- Various fixes: #294, #376, #398, #415,
## 6.5.1
#### Fixes & Optimizations
* `defaultExpanded` now works correctly - #372
* `column.getProps().rest` props are now applied correctly
* `makeTemplateComponent` now supports `displayName` - #289
- `defaultExpanded` now works correctly - #372
- `column.getProps().rest` props are now applied correctly
- `makeTemplateComponent` now supports `displayName` - #289
## 6.5.0
##### New Features
* `column.filterAll` - defaults to `false`, but when set to `true` will provide the entire array of rows to `filterMethod` as opposed to one row at a time. This allows for more fine-grained filtering using any method you can dream up. See the [Custom Filtering example](https://react-table.js.org/#/story/custom-filtering) for more info.
- `column.filterAll` - defaults to `false`, but when set to `true` will provide the entire array of rows to `filterMethod` as opposed to one row at a time. This allows for more fine-grained filtering using any method you can dream up. See the [Custom Filtering example](https://react-table.js.org/#/story/custom-filtering) for more info.
## 6.4.0
##### New Features
* `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders ` `
- `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders ` `
## 6.3.0
##### New Features
* `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
* `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
- `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
- `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
## 6.0.0
##### New Features
* New Renderers:
* `Aggregated` - Custom renderer for aggregated cells
* `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
* `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
* `Expander` - Custom renderer for Pivot cell Expander
* Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
* Pivot columns are now visibly separate and sorted/filtered independently.
* Added `column.resizable` to override global table `resizable` option for specific columns.
* Added `column.sortable` to override global table `sortable` option for specific columns.
* Added `column.filterable` to override global table `filterable` option for specific columns.
* Added `defaultExpanded` table option.
* All callbacks can now be utilized without needing to hoist and manage the piece of state they export. That is what their prop counterparts are for, so now the corresponding prop is used instead of the callback to detect a "fully controlled" state.
* Prevent transitions while column resizing for a smoother resize effect.
* Disable text selection while resizing columns.
- New Renderers:
- `Aggregated` - Custom renderer for aggregated cells
- `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
- `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
- `Expander` - Custom renderer for Pivot cell Expander
- Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
- Pivot columns are now visibly separate and sorted/filtered independently.
- Added `column.resizable` to override global table `resizable` option for specific columns.
- Added `column.sortable` to override global table `sortable` option for specific columns.
- Added `column.filterable` to override global table `filterable` option for specific columns.
- Added `defaultExpanded` table option.
- All callbacks can now be utilized without needing to hoist and manage the piece of state they export. That is what their prop counterparts are for, so now the corresponding prop is used instead of the callback to detect a "fully controlled" state.
- Prevent transitions while column resizing for a smoother resize effect.
- Disable text selection while resizing columns.
##### Breaking API Changes
* New Renderers:
* `Cell` - deprecates and replaces `render`
* `Header` - deprecates and replaces `header`
* `Footer` - deprecates and replaces `footer`
* `Filter`- deprecates and replaces `filterRender`
* Callbacks now provide the destination state as the primary parameter(s). This makes hoisting and controlling the state in redux or component state much easier. eg.
* `onSorting` no longer requires you to build your own toggle logic
* `onResize` no longer requires you to build your own resize logic
* Renamed `onChange` callback -> `onFetchData` which will always fire when a new data model needs to be fetched (or if not using `manual`, when new data is materialized internally).
* Renamed `filtering` -> `filtered`
* Renamed `sorting` -> `sorted`
* Renamed `expandedRows` -> `expanded`
* Renamed `resizing` -> `resized`
* Renamed `defaultResizing` -> `defaultResized`
* Renamed `defaultFiltering` -> `defaultFiltered`
* Renamed `defaultSorting` -> `defaultSorted`
* Renamed `onSortingChange` -> `onSortedChange`
* Renamed `onFilteringChange` -> `onFilteredChange`
* Renamed `onResize` -> `onResizedChange`
* Renamed `onExpandRow` -> `onExpandedChange`
* Renamed `showFilters` -> `filterable`
* Renamed `hideFilter` -> `filterable` (Column option. Note the true/false value is now flipped.)
* `cellInfo.row` and `rowInfo.row` now reference the materialize data for the table. To reference the original row, use `cellInfo.original` and `rowInfo.original`
* Removed `pivotRender` column option. You can now control how the value is displayed by overriding the `PivotValueComponent` or the individual column's `PivotValue` renderer. See [Pivoting Options Story](https://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Pivoting%20Options&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for a reference on how to customize pivot column rendering.
- New Renderers:
- `Cell` - deprecates and replaces `render`
- `Header` - deprecates and replaces `header`
- `Footer` - deprecates and replaces `footer`
- `Filter`- deprecates and replaces `filterRender`
- Callbacks now provide the destination state as the primary parameter(s). This makes hoisting and controlling the state in redux or component state much easier. eg.
- `onSorting` no longer requires you to build your own toggle logic
- `onResize` no longer requires you to build your own resize logic
- Renamed `onChange` callback -> `onFetchData` which will always fire when a new data model needs to be fetched (or if not using `manual`, when new data is materialized internally).
- Renamed `filtering` -> `filtered`
- Renamed `sorting` -> `sorted`
- Renamed `expandedRows` -> `expanded`
- Renamed `resizing` -> `resized`
- Renamed `defaultResizing` -> `defaultResized`
- Renamed `defaultFiltering` -> `defaultFiltered`
- Renamed `defaultSorting` -> `defaultSorted`
- Renamed `onSortingChange` -> `onSortedChange`
- Renamed `onFilteringChange` -> `onFilteredChange`
- Renamed `onResize` -> `onResizedChange`
- Renamed `onExpandRow` -> `onExpandedChange`
- Renamed `showFilters` -> `filterable`
- Renamed `hideFilter` -> `filterable` (Column option. Note the true/false value is now flipped.)
- `cellInfo.row` and `rowInfo.row` now reference the materialize data for the table. To reference the original row, use `cellInfo.original` and `rowInfo.original`
- Removed `pivotRender` column option. You can now control how the value is displayed by overriding the `PivotValueComponent` or the individual column's `PivotValue` renderer. See [Pivoting Options Story](https://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Pivoting%20Options&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for a reference on how to customize pivot column rendering.
+1567 -51
View File
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,23 @@
{
"name": "react-table-100k-rows-aggregation",
"version": "0.0.7",
"description": null,
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1",
"lodash": "4.17.4"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
@@ -0,0 +1,5 @@
{
"infiniteLoopProtection": false,
"hardReloadOnChange": false,
"view": "browser"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+85
View File
@@ -0,0 +1,85 @@
import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";
import _ from "lodash";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData(100000)
};
}
render() {
const { data } = this.state;
return (
<div>
<br />
<strong>Note: Having the console open will slow performance</strong>
<br />
<br />
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age",
aggregate: vals => _.round(_.mean(vals)),
Aggregated: row => {
return (
<span>
{row.value} (avg)
</span>
);
}
},
{
Header: "Visits",
accessor: "visits",
aggregate: vals => _.sum(vals)
}
]
}
]}
pivotBy={["firstName", "lastName"]}
defaultPageSize={10}
className="-striped -highlight"
SubComponent={row => {
return (
<div style={{ padding: "20px" }}>
<em>Sub Component!</em>
</div>
);
}}
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,14 @@
{
"name": "react-table-100k-rows-aggregation",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1",
"lodash": "4.17.4"
}
}
+21
View File
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,28 @@
{
"name": "react-table-cell-renderers",
"version": "0.0.12",
"description": null,
"keywords": [
"react",
"react-table",
"datagrid",
"grid",
"table"
],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+91
View File
@@ -0,0 +1,91 @@
import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData()
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[{
Header: 'Name',
columns: [{
Header: 'First Name',
accessor: 'firstName'
}, {
Header: 'Last Name',
id: 'lastName',
accessor: d => d.lastName
}]
}, {
Header: 'Info',
columns: [{
Header: 'Profile Progress',
accessor: 'progress',
Cell: row => (
<div
style={{
width: '100%',
height: '100%',
backgroundColor: '#dadada',
borderRadius: '2px'
}}
>
<div
style={{
width: `${row.value}%`,
height: '100%',
backgroundColor: row.value > 66 ? '#85cc00'
: row.value > 33 ? '#ffbf00'
: '#ff2e00',
borderRadius: '2px',
transition: 'all .2s ease-out'
}}
/>
</div>
)
}, {
Header: 'Status',
accessor: 'status',
Cell: row => (
<span>
<span style={{
color: row.value === 'relationship' ? '#ff2e00'
: row.value === 'complicated' ? '#ffbf00'
: '#57d500',
transition: 'all .3s ease'
}}>
&#x25cf;
</span> {
row.value === 'relationship' ? 'In a relationship'
: row.value === 'complicated' ? `It's complicated`
: 'Single'
}
</span>
)
}]
}]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,19 @@
{
"name": "react-table-cell-renderers",
"version": "1.0.0",
"description": "",
"keywords": [
"react",
"react-table",
"datagrid",
"grid",
"table"
],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
}
}
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,22 @@
{
"name": "react-table-controlled-table",
"version": "0.0.2",
"description": null,
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+97
View File
@@ -0,0 +1,97 @@
import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
const data = makeData()
const makeDefaultState = () => ({
sorted: [],
page: 0,
pageSize: 10,
expanded: {},
resized: [],
filtered: []
});
class App extends React.Component {
constructor() {
super();
this.state = makeDefaultState();
this.resetState = this.resetState.bind(this);
}
resetState() {
this.setState(makeDefaultState());
}
render() {
return (
<div>
<div>
<button onClick={this.resetState}>Reset State</button>
</div>
<pre>
<code>
<strong>this.state ===</strong>{" "}
{JSON.stringify(this.state, null, 2)}
</code>
</pre>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName,
width: 170
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
}
]
}
]}
pivotBy={["lastName"]}
filterable
defaultPageSize={10}
className="-striped -highlight"
// Controlled props
sorted={this.state.sorted}
page={this.state.page}
pageSize={this.state.pageSize}
expanded={this.state.expanded}
resized={this.state.resized}
filtered={this.state.filtered}
// Callbacks
onSortedChange={sorted => this.setState({ sorted })}
onPageChange={page => this.setState({ page })}
onPageSizeChange={(pageSize, page) =>
this.setState({ page, pageSize })}
onExpandedChange={expanded => this.setState({ expanded })}
onResizedChange={resized => this.setState({ resized })}
onFilteredChange={filtered => this.setState({ filtered })}
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
{
"name": "react-table-controlled-table",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
}
}
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,22 @@
{
"name": "react-table-custom-column-widths",
"version": "0.0.2",
"description": null,
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+61
View File
@@ -0,0 +1,61 @@
import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData()
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName",
maxWidth: 200
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName,
width: 300
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age",
minWidth: 400
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
{
"name": "react-table-custom-column-widths",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
}
}
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,22 @@
{
"name": "react-table-custom-component-props",
"version": "0.0.3",
"description": null,
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+87
View File
@@ -0,0 +1,87 @@
import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData()
};
}
render() {
const { data } = this.state;
return (
<div>
<br />
<strong>Open your console and hover over some cells!</strong>
<br />
<br />
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
{
Header: "Status",
accessor: "status"
}
]
},
{
Header: "Stats",
columns: [
{
Header: "Visits",
accessor: "visits"
}
]
}
]}
getTdProps={(state, rowInfo, column, instance) => {
return {
onMouseEnter: e =>
console.log("Cell - onMouseEnter", {
state,
rowInfo,
column,
instance,
event: e
})
};
}}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
{
"name": "react-table-custom-component-props",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
}
}
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,22 @@
{
"name": "react-table-custom-expander-position",
"version": "0.0.2",
"description": null,
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+87
View File
@@ -0,0 +1,87 @@
import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData()
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName",
Footer: () =>
<div style={{ textAlign: "center" }}>First Name</div>
},
{
Header: "Last Name",
accessor: "lastName",
Footer: () =>
<div style={{ textAlign: "center" }}>Last Name</div>
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age",
Footer: () => <div style={{ textAlign: "center" }}>Age</div>
}
]
},
{
Header: "Expand",
columns: [
{
expander: true,
Header: () => <strong>More</strong>,
width: 65,
Expander: ({ isExpanded, ...rest }) =>
<div>
{isExpanded
? <span>&#x2299;</span>
: <span>&#x2295;</span>}
</div>,
style: {
cursor: "pointer",
fontSize: 25,
padding: "0",
textAlign: "center",
userSelect: "none"
},
Footer: () => <span>&hearts;</span>
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
SubComponent={() => <div style={{padding: '10px'}}>Hello</div>}
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
{
"name": "react-table-custom-expander-position",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
}
}
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,23 @@
{
"name": "react-table-custom-filtering",
"version": "0.0.7",
"description": null,
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1",
"match-sorter": "1.8.1"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+93
View File
@@ -0,0 +1,93 @@
import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";
import matchSorter from 'match-sorter'
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData()
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
filterable
defaultFilterMethod={(filter, row) =>
String(row[filter.id]) === filter.value}
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName",
filterMethod: (filter, row) =>
row[filter.id].startsWith(filter.value) &&
row[filter.id].endsWith(filter.value)
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName,
filterMethod: (filter, rows) =>
matchSorter(rows, filter.value, { keys: ["lastName"] }),
filterAll: true
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
{
Header: "Over 21",
accessor: "age",
id: "over",
Cell: ({ value }) => (value >= 21 ? "Yes" : "No"),
filterMethod: (filter, row) => {
if (filter.value === "all") {
return true;
}
if (filter.value === "true") {
return row[filter.id] >= 21;
}
return row[filter.id] < 21;
},
Filter: ({ filter, onChange }) =>
<select
onChange={event => onChange(event.target.value)}
style={{ width: "100%" }}
value={filter ? filter.value : "all"}
>
<option value="all">Show All</option>
<option value="true">Can Drink</option>
<option value="false">Can't Drink</option>
</select>
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,14 @@
{
"name": "react-table-custom-filtering",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1",
"match-sorter": "1.8.1"
}
}
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,22 @@
{
"name": "react-table-custom-no-data-text",
"version": "0.0.3",
"description": null,
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
const newPerson = () => {
const statusChance = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
};
};
export function makeData(len = 5553) {
return range(len).map(d => {
return {
...newPerson(),
children: range(10).map(newPerson)
};
});
}
export const Logo = () =>
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
For more examples, visit {''}
<br />
<a href="https://github.com/react-tools/react-table" target="_blank">
<img
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
style={{ width: `150px`, margin: ".5em auto .3em" }}
/>
</a>
</div>;
export const Tips = () =>
<div style={{ textAlign: "center" }}>
<em>Tip: Hold shift when sorting to multi-sort!</em>
</div>;
@@ -0,0 +1,52 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// eslint-disable-next-line no-param-reassign
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
@@ -0,0 +1,5 @@
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 14px;
}
+65
View File
@@ -0,0 +1,65 @@
import React from "react";
import { render } from "react-dom";
import { Logo, Tips } from "./Utils";
// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends React.Component {
render() {
return (
<div>
<ReactTable
data={[]}
noDataText="Oh Noes!"
columns={[
{
Header: "Name",
columns: [
{
Header: "First Name",
accessor: "firstName"
},
{
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
Header: "Age",
accessor: "age"
},
{
Header: "Status",
accessor: "status"
}
]
},
{
Header: "Stats",
columns: [
{
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
<Tips />
<Logo />
</div>
);
}
}
render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
{
"name": "react-table-custom-no-data-text",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"react-table": "6.5.3",
"react-dom": "15.5.3",
"react": "15.5.3",
"namor": "1.0.1"
}
}
+21
View File
@@ -0,0 +1,21 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# 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*
File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More