Compare commits

..
44 Commits
Author SHA1 Message Date
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
Tanner Linsley b6bd5b25f5 v7.0.0-alpha.0 2019-02-04 18:56:10 -07:00
Tanner Linsley 4d59f163c0 Merge branch 'master' of https://github.com/react-tools/react-table 2019-02-01 09:36:17 -07:00
Tanner Linsley 1f877a9c4d Update README.md 2019-02-01 09:36:13 -07:00
Tanner LinsleyandGitHub 6c46ea8a07 Update bug_report.md 2019-02-01 09:01:33 -07:00
Tanner LinsleyandGitHub 796a3cbc48 Update questions--support---help.md 2019-02-01 08:56:40 -07:00
Tanner LinsleyandGitHub c0c78d5de7 Update feature_request.md 2019-02-01 08:55:36 -07:00
Tanner Linsley 2a6dfb6ebd Init v7 src 2019-01-31 12:54:56 -07:00
Tanner Linsley a99ecbd567 Update README.md 2019-01-31 12:51:24 -07:00
Tanner Linsley 1ed45d2635 Update README.md 2019-01-31 12:49:14 -07:00
Tanner Linsley 96ab761367 Update README.md 2019-01-31 12:48:12 -07:00
Tanner Linsley d2f1563cd5 Update README.md 2019-01-31 12:46:22 -07:00
Tanner Linsley 73b4869329 Update README.md 2019-01-31 12:33:23 -07:00
Tanner Linsley 3190047284 Update README.md 2019-01-31 12:18:45 -07:00
Tanner Linsley 00efc98779 Fix linting, update Readme 2019-01-31 12:13:34 -07:00
315 changed files with 50482 additions and 23691 deletions
+11
View File
@@ -0,0 +1,11 @@
{
"presets": [
[
"@babel/env",
{
"modules": false
}
],
"@babel/react"
]
}
+14
View File
@@ -0,0 +1,14 @@
{
"parser": "babel-eslint",
"extends": ["react-app", "prettier"],
"env": {
"es6": true
},
"parserOptions": {
"sourceType": "module"
},
"rules": {
"space-before-function-paren": 0,
"react/jsx-boolean-value": 0
}
}
-3
View File
@@ -1,3 +0,0 @@
module.exports = {
extends: 'react-tools',
}
+9 -1
View File
@@ -4,6 +4,14 @@ about: Create a report to help us improve
---
# Using v6?
v6 is now considered feature complete to its current abilities and limitations. We are not actively working to fix any issues for v6 any more. We will, however, merge any non-breaking pull requests submitted to fix anything in v6.
# Using v7?
Thanks for using the alpha version of React Table v7! We're very excited about it.
**Describe the bug**
A clear and concise description of what the bug is.
@@ -18,7 +26,7 @@ Steps to reproduce the behavior:
A clear and concise description of what you expected to happen.
**Codesandbox!**
Use a new [react-table codesandbox](codesandbox.io/s/X6npLXPRW) to reproduce the issue.
Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to reproduce the issue.
**Screenshots**
If applicable, add screenshots to help explain your problem.
+2 -10
View File
@@ -4,14 +4,6 @@ about: Suggest an idea for this project
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
# STOP
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
We do not track feature requests through Github. Please use the [Spectrum React Table Forum](https://spectrum.chat/react-table) to talk about new ideas and features.
@@ -4,8 +4,8 @@ about: Looking for help? Need a question answered?
---
STOP!!!
# STOP
Github issues is no place for general support. We encourage you to use our public support forum at https://spectrum.chat/react-table.
We do not use Github to track general support. Please use our public support forum at https://spectrum.chat/react-table.
NOTE: If a support/help/question issue is opened, it will be closed immediately and be redirected to the forum. Thanks for helping us keep our issues clean and productive!
+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
+4 -1
View File
@@ -1,4 +1,7 @@
language: node_js
node_js:
- "6"
- "10"
cache: yarn
script: npm test
+97 -1001
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"
}
}

Before

Width:  |  Height:  |  Size: 24 KiB

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"
}
@@ -1,4 +1,6 @@
import React from "react";
import namor from "namor";
import "./index.css";
const range = len => {
const arr = [];
@@ -19,9 +21,7 @@ const newPerson = () => {
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33
? "complicated"
: "single"
: statusChance > 0.33 ? "complicated" : "single"
};
};
@@ -33,3 +33,20 @@ export function makeData(len = 5553) {
};
});
}
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