mirror of
https://github.com/gosticks/react-table.git
synced 2025-10-16 11:55:36 +00:00
Add size-snapshot rollup plugin, upgrade node_modules, remove archives
This commit is contained in:
Tanner Linsley
parent
cdcf11b4b0
commit
354ee238e8
21
.size-snapshot.json
Normal file
21
.size-snapshot.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"dist/index.js": {
|
||||||
|
"bundled": 88238,
|
||||||
|
"minified": 42315,
|
||||||
|
"gzipped": 11281
|
||||||
|
},
|
||||||
|
"dist/index.es.js": {
|
||||||
|
"bundled": 87322,
|
||||||
|
"minified": 41477,
|
||||||
|
"gzipped": 11142,
|
||||||
|
"treeshaked": {
|
||||||
|
"rollup": {
|
||||||
|
"code": 428,
|
||||||
|
"import_statements": 21
|
||||||
|
},
|
||||||
|
"webpack": {
|
||||||
|
"code": 3690
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "react-table-100k-rows-aggregation",
|
|
||||||
"version": "0.0.7",
|
|
||||||
"description": null,
|
|
||||||
"keywords": [],
|
|
||||||
"main": "index.js",
|
|
||||||
"dependencies": {
|
|
||||||
"react-table": "6.5.3",
|
|
||||||
"react-dom": "15.5.3",
|
|
||||||
"react": "15.5.3",
|
|
||||||
"namor": "1.0.1",
|
|
||||||
"lodash": "4.17.4"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"react-scripts": "1.0.0"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "react-scripts start",
|
|
||||||
"build": "react-scripts build",
|
|
||||||
"test": "react-scripts test --env=jsdom",
|
|
||||||
"eject": "react-scripts eject"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"infiniteLoopProtection": false,
|
|
||||||
"hardReloadOnChange": false,
|
|
||||||
"view": "browser"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,28 +0,0 @@
|
|||||||
{
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
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"));
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# 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
@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "react-table-custom-sorting",
|
|
||||||
"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.
|
Before Width: | Height: | Size: 24 KiB |
@ -1,38 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
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>;
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
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 (Sorted by Length, A-Z)",
|
|
||||||
accessor: "firstName",
|
|
||||||
sortMethod: (a, b) => {
|
|
||||||
if (a.length === b.length) {
|
|
||||||
return a > b ? 1 : -1;
|
|
||||||
}
|
|
||||||
return a.length > b.length ? 1 : -1;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Header: "Last Name (Sorted in reverse, A-Z)",
|
|
||||||
id: "lastName",
|
|
||||||
accessor: d => d.lastName,
|
|
||||||
sortMethod: (a, b) => {
|
|
||||||
if (a === b) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
const aReverse = a.split("").reverse().join("");
|
|
||||||
const bReverse = b.split("").reverse().join("");
|
|
||||||
return aReverse > bReverse ? 1 : -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
Header: "Info",
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
Header: "Age",
|
|
||||||
accessor: "age"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
defaultPageSize={10}
|
|
||||||
className="-striped -highlight"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<Tips />
|
|
||||||
<Logo />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render(<App />, document.getElementById("root"));
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user