Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
932f529105 | ||
|
|
bc35e3262d | ||
|
|
1a6056859a | ||
|
|
834ab4b4a7 | ||
|
|
8c81a31aa6 | ||
|
|
8e4601fa83 | ||
|
|
7c6076908d | ||
|
|
ab3252bc32 | ||
|
|
085957f3c4 | ||
|
|
fd5d9ddecd | ||
|
|
4e3fa751dc | ||
|
|
3453ac5a76 | ||
|
|
a9971e66af | ||
|
|
33f30c7b7f | ||
|
|
91d758711d | ||
|
|
b2498b0430 | ||
|
|
d599952e89 | ||
|
|
3ee410bd05 | ||
|
|
8b07b2c84e | ||
|
|
a0495f6858 | ||
|
|
2d31d3bac9 | ||
|
|
8d269b95c7 | ||
|
|
b6bd5b25f5 | ||
|
|
4d59f163c0 | ||
|
|
1f877a9c4d | ||
|
|
6c46ea8a07 | ||
|
|
796a3cbc48 | ||
|
|
c0c78d5de7 | ||
|
|
2a6dfb6ebd | ||
|
|
a99ecbd567 | ||
|
|
1ed45d2635 | ||
|
|
96ab761367 | ||
|
|
d2f1563cd5 | ||
|
|
73b4869329 | ||
|
|
3190047284 | ||
|
|
00efc98779 | ||
|
|
379d9e11d5 | ||
|
|
3fff682578 |
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
[
|
||||||
|
"@babel/env",
|
||||||
|
{
|
||||||
|
"modules": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@babel/react"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
"extends": ["standard", "standard-react"],
|
||||||
|
"env": {
|
||||||
|
"es6": true
|
||||||
|
},
|
||||||
|
"plugins": ["react"],
|
||||||
|
"parserOptions": {
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"space-before-function-paren": 0,
|
||||||
|
"react/jsx-boolean-value": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
extends: 'react-tools',
|
|
||||||
}
|
|
||||||
@@ -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**
|
**Describe the bug**
|
||||||
A clear and concise description of what the bug is.
|
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.
|
A clear and concise description of what you expected to happen.
|
||||||
|
|
||||||
**Codesandbox!**
|
**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**
|
**Screenshots**
|
||||||
If applicable, add screenshots to help explain your problem.
|
If applicable, add screenshots to help explain your problem.
|
||||||
|
|||||||
@@ -4,14 +4,6 @@ about: Suggest an idea for this project
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Is your feature request related to a problem? Please describe.**
|
# STOP
|
||||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
|
||||||
|
|
||||||
**Describe the solution you'd like**
|
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.
|
||||||
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.
|
|
||||||
|
|||||||
@@ -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!
|
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!
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
lib/
|
lib/
|
||||||
|
dist/
|
||||||
es/
|
es/
|
||||||
docs/build
|
docs/build
|
||||||
react-table.js
|
react-table.js
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- "6"
|
- "10"
|
||||||
|
|
||||||
|
cache: yarn
|
||||||
|
|
||||||
script: npm test
|
script: npm test
|
||||||
|
|||||||
@@ -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*
|
||||||
@@ -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 namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
const range = len => {
|
const range = len => {
|
||||||
const arr = [];
|
const arr = [];
|
||||||
@@ -19,9 +21,7 @@ const newPerson = () => {
|
|||||||
status:
|
status:
|
||||||
statusChance > 0.66
|
statusChance > 0.66
|
||||||
? "relationship"
|
? "relationship"
|
||||||
: statusChance > 0.33
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
? "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;
|
||||||
|
}
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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*
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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,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;
|
||||||
|
}
|
||||||
@@ -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'
|
||||||
|
}}>
|
||||||
|
●
|
||||||
|
</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*
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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,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;
|
||||||
|
}
|
||||||
@@ -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*
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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,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;
|
||||||
|
}
|
||||||
@@ -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*
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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,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;
|
||||||
|
}
|
||||||
@@ -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*
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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,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;
|
||||||
|
}
|
||||||
@@ -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>⊙</span>
|
||||||
|
: <span>⊕</span>}
|
||||||
|
</div>,
|
||||||
|
style: {
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: 25,
|
||||||
|
padding: "0",
|
||||||
|
textAlign: "center",
|
||||||
|
userSelect: "none"
|
||||||
|
},
|
||||||
|
Footer: () => <span>♥</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*
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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,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;
|
||||||
|
}
|
||||||
@@ -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*
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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,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;
|
||||||
|
}
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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*
|
||||||