Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
932f529105 | ||
|
|
bc35e3262d | ||
|
|
1a6056859a | ||
|
|
834ab4b4a7 | ||
|
|
8c81a31aa6 | ||
|
|
8e4601fa83 | ||
|
|
7c6076908d | ||
|
|
ab3252bc32 | ||
|
|
085957f3c4 | ||
|
|
fd5d9ddecd | ||
|
|
4e3fa751dc | ||
|
|
3453ac5a76 | ||
|
|
a9971e66af | ||
|
|
33f30c7b7f | ||
|
|
91d758711d | ||
|
|
b2498b0430 | ||
|
|
d599952e89 | ||
|
|
3ee410bd05 | ||
|
|
8b07b2c84e | ||
|
|
a0495f6858 | ||
|
|
2d31d3bac9 | ||
|
|
8d269b95c7 | ||
|
|
b6bd5b25f5 | ||
|
|
4d59f163c0 | ||
|
|
1f877a9c4d | ||
|
|
6c46ea8a07 | ||
|
|
796a3cbc48 | ||
|
|
c0c78d5de7 | ||
|
|
2a6dfb6ebd | ||
|
|
a99ecbd567 | ||
|
|
1ed45d2635 | ||
|
|
96ab761367 | ||
|
|
d2f1563cd5 | ||
|
|
73b4869329 | ||
|
|
3190047284 | ||
|
|
00efc98779 | ||
|
|
379d9e11d5 | ||
|
|
3fff682578 |
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
[
|
||||||
|
"@babel/env",
|
||||||
|
{
|
||||||
|
"modules": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@babel/react"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"parser": "babel-eslint",
|
||||||
|
"extends": ["standard", "standard-react"],
|
||||||
|
"env": {
|
||||||
|
"es6": true
|
||||||
|
},
|
||||||
|
"plugins": ["react"],
|
||||||
|
"parserOptions": {
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"space-before-function-paren": 0,
|
||||||
|
"react/jsx-boolean-value": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
extends: 'react-tools',
|
|
||||||
}
|
|
||||||
@@ -4,6 +4,14 @@ about: Create a report to help us improve
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
# Using v6?
|
||||||
|
|
||||||
|
v6 is now considered feature complete to its current abilities and limitations. We are not actively working to fix any issues for v6 any more. We will, however, merge any non-breaking pull requests submitted to fix anything in v6.
|
||||||
|
|
||||||
|
# Using v7?
|
||||||
|
|
||||||
|
Thanks for using the alpha version of React Table v7! We're very excited about it.
|
||||||
|
|
||||||
**Describe the bug**
|
**Describe the bug**
|
||||||
A clear and concise description of what the bug is.
|
A clear and concise description of what the bug is.
|
||||||
|
|
||||||
@@ -18,7 +26,7 @@ Steps to reproduce the behavior:
|
|||||||
A clear and concise description of what you expected to happen.
|
A clear and concise description of what you expected to happen.
|
||||||
|
|
||||||
**Codesandbox!**
|
**Codesandbox!**
|
||||||
Use a new [react-table codesandbox](codesandbox.io/s/X6npLXPRW) to reproduce the issue.
|
Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to reproduce the issue.
|
||||||
|
|
||||||
**Screenshots**
|
**Screenshots**
|
||||||
If applicable, add screenshots to help explain your problem.
|
If applicable, add screenshots to help explain your problem.
|
||||||
|
|||||||
@@ -4,14 +4,6 @@ about: Suggest an idea for this project
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Is your feature request related to a problem? Please describe.**
|
# STOP
|
||||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
|
||||||
|
|
||||||
**Describe the solution you'd like**
|
We do not track feature requests through Github. Please use the [Spectrum React Table Forum](https://spectrum.chat/react-table) to talk about new ideas and features.
|
||||||
A clear and concise description of what you want to happen.
|
|
||||||
|
|
||||||
**Describe alternatives you've considered**
|
|
||||||
A clear and concise description of any alternative solutions or features you've considered.
|
|
||||||
|
|
||||||
**Additional context**
|
|
||||||
Add any other context or screenshots about the feature request here.
|
|
||||||
|
|||||||
@@ -4,8 +4,8 @@ about: Looking for help? Need a question answered?
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
STOP!!!
|
# STOP
|
||||||
|
|
||||||
Github issues is no place for general support. We encourage you to use our public support forum at https://spectrum.chat/react-table.
|
We do not use Github to track general support. Please use our public support forum at https://spectrum.chat/react-table.
|
||||||
|
|
||||||
NOTE: If a support/help/question issue is opened, it will be closed immediately and be redirected to the forum. Thanks for helping us keep our issues clean and productive!
|
NOTE: If a support/help/question issue is opened, it will be closed immediately and be redirected to the forum. Thanks for helping us keep our issues clean and productive!
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
lib/
|
lib/
|
||||||
|
dist/
|
||||||
es/
|
es/
|
||||||
docs/build
|
docs/build
|
||||||
react-table.js
|
react-table.js
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- "6"
|
- "10"
|
||||||
|
|
||||||
|
cache: yarn
|
||||||
|
|
||||||
script: npm test
|
script: npm test
|
||||||
|
|||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -5,83 +5,88 @@ You can find the most recent version of this guide [here](https://github.com/fac
|
|||||||
|
|
||||||
## Table of Contents
|
## Table of Contents
|
||||||
|
|
||||||
* [Updating to New Releases](#updating-to-new-releases)
|
- [Updating to New Releases](#updating-to-new-releases)
|
||||||
* [Sending Feedback](#sending-feedback)
|
- [Sending Feedback](#sending-feedback)
|
||||||
* [Folder Structure](#folder-structure)
|
- [Folder Structure](#folder-structure)
|
||||||
* [Available Scripts](#available-scripts)
|
- [Available Scripts](#available-scripts)
|
||||||
* [npm start](#npm-start)
|
- [npm start](#npm-start)
|
||||||
* [npm test](#npm-test)
|
- [npm test](#npm-test)
|
||||||
* [npm run build](#npm-run-build)
|
- [npm run build](#npm-run-build)
|
||||||
* [npm run eject](#npm-run-eject)
|
- [npm run eject](#npm-run-eject)
|
||||||
* [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
|
- [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
|
||||||
* [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
|
- [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
|
||||||
* [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
|
- [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
|
||||||
* [Debugging in the Editor](#debugging-in-the-editor)
|
- [Debugging in the Editor](#debugging-in-the-editor)
|
||||||
* [Changing the Page `<title>`](#changing-the-page-title)
|
- [Changing the Page `<title>`](#changing-the-page-title)
|
||||||
* [Installing a Dependency](#installing-a-dependency)
|
- [Installing a Dependency](#installing-a-dependency)
|
||||||
* [Importing a Component](#importing-a-component)
|
- [Importing a Component](#importing-a-component)
|
||||||
* [Adding a Stylesheet](#adding-a-stylesheet)
|
- [Code Splitting](#code-splitting)
|
||||||
* [Post-Processing CSS](#post-processing-css)
|
- [Adding a Stylesheet](#adding-a-stylesheet)
|
||||||
* [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
|
- [Post-Processing CSS](#post-processing-css)
|
||||||
* [Adding Images and Fonts](#adding-images-and-fonts)
|
- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
|
||||||
* [Using the `public` Folder](#using-the-public-folder)
|
- [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
|
||||||
* [Changing the HTML](#changing-the-html)
|
- [Using the `public` Folder](#using-the-public-folder)
|
||||||
* [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system)
|
- [Changing the HTML](#changing-the-html)
|
||||||
* [When to Use the `public` Folder](#when-to-use-the-public-folder)
|
- [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system)
|
||||||
* [Using Global Variables](#using-global-variables)
|
- [When to Use the `public` Folder](#when-to-use-the-public-folder)
|
||||||
* [Adding Bootstrap](#adding-bootstrap)
|
- [Using Global Variables](#using-global-variables)
|
||||||
* [Using a Custom Theme](#using-a-custom-theme)
|
- [Adding Bootstrap](#adding-bootstrap)
|
||||||
* [Adding Flow](#adding-flow)
|
- [Using a Custom Theme](#using-a-custom-theme)
|
||||||
* [Adding Custom Environment Variables](#adding-custom-environment-variables)
|
- [Adding Flow](#adding-flow)
|
||||||
* [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
|
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
|
||||||
* [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)
|
- [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
|
||||||
* [Adding Development Environment Variables In `.env`](#adding-development-environment-variables-in-env)
|
- [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)
|
||||||
* [Can I Use Decorators?](#can-i-use-decorators)
|
- [Adding Development Environment Variables In `.env`](#adding-development-environment-variables-in-env)
|
||||||
* [Integrating with an API Backend](#integrating-with-an-api-backend)
|
- [Can I Use Decorators?](#can-i-use-decorators)
|
||||||
* [Node](#node)
|
- [Integrating with an API Backend](#integrating-with-an-api-backend)
|
||||||
* [Ruby on Rails](#ruby-on-rails)
|
- [Node](#node)
|
||||||
* [Proxying API Requests in Development](#proxying-api-requests-in-development)
|
- [Ruby on Rails](#ruby-on-rails)
|
||||||
* [Using HTTPS in Development](#using-https-in-development)
|
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
|
||||||
* [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
|
- [Configuring the Proxy Manually](#configuring-the-proxy-manually)
|
||||||
* [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files)
|
- [Using HTTPS in Development](#using-https-in-development)
|
||||||
* [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page)
|
- [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
|
||||||
* [Running Tests](#running-tests)
|
- [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files)
|
||||||
* [Filename Conventions](#filename-conventions)
|
- [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page)
|
||||||
* [Command Line Interface](#command-line-interface)
|
- [Running Tests](#running-tests)
|
||||||
* [Version Control Integration](#version-control-integration)
|
- [Filename Conventions](#filename-conventions)
|
||||||
* [Writing Tests](#writing-tests)
|
- [Command Line Interface](#command-line-interface)
|
||||||
* [Testing Components](#testing-components)
|
- [Version Control Integration](#version-control-integration)
|
||||||
* [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
|
- [Writing Tests](#writing-tests)
|
||||||
* [Initializing Test Environment](#initializing-test-environment)
|
- [Testing Components](#testing-components)
|
||||||
* [Focusing and Excluding Tests](#focusing-and-excluding-tests)
|
- [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
|
||||||
* [Coverage Reporting](#coverage-reporting)
|
- [Initializing Test Environment](#initializing-test-environment)
|
||||||
* [Continuous Integration](#continuous-integration)
|
- [Focusing and Excluding Tests](#focusing-and-excluding-tests)
|
||||||
* [Disabling jsdom](#disabling-jsdom)
|
- [Coverage Reporting](#coverage-reporting)
|
||||||
* [Snapshot Testing](#snapshot-testing)
|
- [Continuous Integration](#continuous-integration)
|
||||||
* [Editor Integration](#editor-integration)
|
- [Disabling jsdom](#disabling-jsdom)
|
||||||
* [Developing Components in Isolation](#developing-components-in-isolation)
|
- [Snapshot Testing](#snapshot-testing)
|
||||||
* [Making a Progressive Web App](#making-a-progressive-web-app)
|
- [Editor Integration](#editor-integration)
|
||||||
* [Deployment](#deployment)
|
- [Developing Components in Isolation](#developing-components-in-isolation)
|
||||||
* [Static Server](#static-server)
|
- [Making a Progressive Web App](#making-a-progressive-web-app)
|
||||||
* [Other Solutions](#other-solutions)
|
- [Offline-First Considerations](#offline-first-considerations)
|
||||||
* [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
|
- [Progressive Web App Metadata](#progressive-web-app-metadata)
|
||||||
* [Building for Relative Paths](#building-for-relative-paths)
|
- [Deployment](#deployment)
|
||||||
* [Azure](#azure)
|
- [Static Server](#static-server)
|
||||||
* [Firebase](#firebase)
|
- [Other Solutions](#other-solutions)
|
||||||
* [GitHub Pages](#github-pages)
|
- [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
|
||||||
* [Heroku](#heroku)
|
- [Building for Relative Paths](#building-for-relative-paths)
|
||||||
* [Modulus](#modulus)
|
- [Azure](#azure)
|
||||||
* [Netlify](#netlify)
|
- [Firebase](#firebase)
|
||||||
* [Now](#now)
|
- [GitHub Pages](#github-pages)
|
||||||
* [S3 and CloudFront](#s3-and-cloudfront)
|
- [Heroku](#heroku)
|
||||||
* [Surge](#surge)
|
- [Modulus](#modulus)
|
||||||
* [Advanced Configuration](#advanced-configuration)
|
- [Netlify](#netlify)
|
||||||
* [Troubleshooting](#troubleshooting)
|
- [Now](#now)
|
||||||
* [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes)
|
- [S3 and CloudFront](#s3-and-cloudfront)
|
||||||
* [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
|
- [Surge](#surge)
|
||||||
* [`npm run build` silently fails](#npm-run-build-silently-fails)
|
- [Advanced Configuration](#advanced-configuration)
|
||||||
* [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
|
- [Troubleshooting](#troubleshooting)
|
||||||
* [Something Missing?](#something-missing)
|
- [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes)
|
||||||
|
- [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
|
||||||
|
- [`npm run build` silently fails](#npm-run-build-silently-fails)
|
||||||
|
- [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
|
||||||
|
- [Moment.js locales are missing](#momentjs-locales-are-missing)
|
||||||
|
- [Something Missing?](#something-missing)
|
||||||
|
|
||||||
## Updating to New Releases
|
## Updating to New Releases
|
||||||
|
|
||||||
@@ -186,6 +191,7 @@ In addition to [ES6](https://github.com/lukehoban/es6features) syntax features,
|
|||||||
* [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
|
* [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
|
||||||
* [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
|
* [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
|
||||||
* [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
|
* [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
|
||||||
|
* [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
|
||||||
* [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal).
|
* [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal).
|
||||||
* [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
|
* [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
|
||||||
|
|
||||||
@@ -207,56 +213,32 @@ To configure the syntax highlighting in your favorite text editor, head to the [
|
|||||||
|
|
||||||
## Displaying Lint Output in the Editor
|
## Displaying Lint Output in the Editor
|
||||||
|
|
||||||
> Note: this feature is available with `react-scripts@0.2.0` and higher.
|
>Note: this feature is available with `react-scripts@0.2.0` and higher.<br>
|
||||||
|
>It also only works with npm 3 or higher.
|
||||||
|
|
||||||
Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
|
Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
|
||||||
|
|
||||||
They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.
|
They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.
|
||||||
|
|
||||||
You would need to install an ESLint plugin for your editor first.
|
You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root:
|
||||||
|
|
||||||
> **A note for Atom `linter-eslint` users**
|
|
||||||
|
|
||||||
> If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked:
|
|
||||||
|
|
||||||
> <img src="http://i.imgur.com/yVNNHJM.png" width="300">
|
|
||||||
|
|
||||||
> **For Visual Studio Code users**
|
|
||||||
|
|
||||||
> VS Code ESLint plugin automatically detects Create React App's configuration file. So you do not need to create `eslintrc.json` at the root directory, except when you want to add your own rules. In that case, you should include CRA's config by adding this line:
|
|
||||||
|
|
||||||
> ```js
|
|
||||||
> {
|
|
||||||
> // ...
|
|
||||||
> "extends": "react-app"
|
|
||||||
> }
|
|
||||||
> ```
|
|
||||||
|
|
||||||
````
|
|
||||||
Then add this block to the `package.json` file of your project:
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
{
|
{
|
||||||
// ...
|
|
||||||
"eslintConfig": {
|
|
||||||
"extends": "react-app"
|
"extends": "react-app"
|
||||||
}
|
}
|
||||||
}
|
|
||||||
````
|
|
||||||
|
|
||||||
Finally, you will need to install some packages _globally_:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0
|
|
||||||
```
|
```
|
||||||
|
|
||||||
We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.
|
Now your editor should report the linting warnings.
|
||||||
|
|
||||||
|
Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
|
||||||
|
|
||||||
|
If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules.
|
||||||
|
|
||||||
## Debugging in the Editor
|
## Debugging in the Editor
|
||||||
|
|
||||||
**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) editor.**
|
**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) editor.**
|
||||||
|
|
||||||
Visual Studio Code supports live-editing and debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.
|
Visual Studio Code supports debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.
|
||||||
|
|
||||||
You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed.
|
You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed.
|
||||||
|
|
||||||
@@ -265,8 +247,7 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
|
|||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"configurations": [
|
"configurations": [{
|
||||||
{
|
|
||||||
"name": "Chrome",
|
"name": "Chrome",
|
||||||
"type": "chrome",
|
"type": "chrome",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
@@ -276,8 +257,7 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
|
|||||||
"sourceMapPathOverrides": {
|
"sourceMapPathOverrides": {
|
||||||
"webpack:///src/*": "${webRoot}/*"
|
"webpack:///src/*": "${webRoot}/*"
|
||||||
}
|
}
|
||||||
}
|
}]
|
||||||
]
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -311,7 +291,7 @@ For example:
|
|||||||
### `Button.js`
|
### `Button.js`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React, { Component } from "react";
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
class Button extends Component {
|
class Button extends Component {
|
||||||
render() {
|
render() {
|
||||||
@@ -324,9 +304,10 @@ export default Button; // Don’t forget to use export default!
|
|||||||
|
|
||||||
### `DangerButton.js`
|
### `DangerButton.js`
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React, { Component } from "react";
|
import React, { Component } from 'react';
|
||||||
import Button from "./Button"; // Import a component from another file
|
import Button from './Button'; // Import a component from another file
|
||||||
|
|
||||||
class DangerButton extends Component {
|
class DangerButton extends Component {
|
||||||
render() {
|
render() {
|
||||||
@@ -349,9 +330,56 @@ Learn more about ES6 modules:
|
|||||||
* [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
|
* [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
|
||||||
* [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
|
* [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
|
||||||
|
|
||||||
|
## Code Splitting
|
||||||
|
|
||||||
|
Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.
|
||||||
|
|
||||||
|
This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
|
||||||
|
|
||||||
|
Here is an example:
|
||||||
|
|
||||||
|
### `moduleA.js`
|
||||||
|
|
||||||
|
```js
|
||||||
|
const moduleA = 'Hello';
|
||||||
|
|
||||||
|
export { moduleA };
|
||||||
|
```
|
||||||
|
### `App.js`
|
||||||
|
|
||||||
|
```js
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
handleClick = () => {
|
||||||
|
import('./moduleA')
|
||||||
|
.then(({ moduleA }) => {
|
||||||
|
// Use moduleA
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
// Handle failure
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick={this.handleClick}>Load</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
```
|
||||||
|
|
||||||
|
This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.
|
||||||
|
|
||||||
|
You can also use it with `async` / `await` syntax if you prefer it.
|
||||||
|
|
||||||
## Adding a Stylesheet
|
## Adding a Stylesheet
|
||||||
|
|
||||||
This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
|
This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
|
||||||
|
|
||||||
### `Button.css`
|
### `Button.css`
|
||||||
|
|
||||||
@@ -364,8 +392,8 @@ This project setup uses [Webpack](https://webpack.github.io/) for handling all a
|
|||||||
### `Button.js`
|
### `Button.js`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React, { Component } from "react";
|
import React, { Component } from 'react';
|
||||||
import "./Button.css"; // Tell Webpack that Button.js uses these styles
|
import './Button.css'; // Tell Webpack that Button.js uses these styles
|
||||||
|
|
||||||
class Button extends Component {
|
class Button extends Component {
|
||||||
render() {
|
render() {
|
||||||
@@ -423,15 +451,14 @@ Following this rule often makes CSS preprocessors less useful, as features like
|
|||||||
First, let’s install the command-line interface for Sass:
|
First, let’s install the command-line interface for Sass:
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install node-sass --save-dev
|
npm install node-sass-chokidar --save-dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Then in `package.json`, add the following lines to `scripts`:
|
Then in `package.json`, add the following lines to `scripts`:
|
||||||
|
|
||||||
```diff
|
```diff
|
||||||
"scripts": {
|
"scripts": {
|
||||||
+ "build-css": "node-sass src/ -o src/",
|
+ "build-css": "node-sass-chokidar src/ -o src/",
|
||||||
+ "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
|
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test --env=jsdom",
|
"test": "react-scripts test --env=jsdom",
|
||||||
@@ -455,8 +482,8 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
|
|||||||
|
|
||||||
```diff
|
```diff
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build-css": "node-sass src/ -o src/",
|
"build-css": "node-sass-chokidar src/ -o src/",
|
||||||
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
|
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
|
||||||
- "start": "react-scripts start",
|
- "start": "react-scripts start",
|
||||||
- "build": "react-scripts build",
|
- "build": "react-scripts build",
|
||||||
+ "start-js": "react-scripts start",
|
+ "start-js": "react-scripts start",
|
||||||
@@ -467,19 +494,33 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Now running `npm start` and `npm run build` also builds Sass files. Note that `node-sass` seems to have an [issue recognizing newly created files on some systems](https://github.com/sass/node-sass/issues/1891) so you might need to restart the watcher when you create a file until it’s resolved.
|
Now running `npm start` and `npm run build` also builds Sass files.
|
||||||
|
|
||||||
## Adding Images and Fonts
|
**Why `node-sass-chokidar`?**
|
||||||
|
|
||||||
|
`node-sass` has been reported as having the following issues:
|
||||||
|
|
||||||
|
- `node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker.
|
||||||
|
|
||||||
|
- Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939)
|
||||||
|
|
||||||
|
- `node-sass` has been reported as having issues with detecting new files in a directory [#1891](https://github.com/sass/node-sass/issues/1891)
|
||||||
|
|
||||||
|
`node-sass-chokidar` is used here as it addresses these issues.
|
||||||
|
|
||||||
|
## Adding Images, Fonts, and Files
|
||||||
|
|
||||||
With Webpack, using static assets like images and fonts works similarly to CSS.
|
With Webpack, using static assets like images and fonts works similarly to CSS.
|
||||||
|
|
||||||
You can **`import` an image right in a JavaScript module**. This tells Webpack to include that image in the bundle. Unlike CSS imports, importing an image or a font gives you a string value. This value is the final image path you can reference in your code.
|
You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF.
|
||||||
|
|
||||||
|
To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebookincubator/create-react-app/issues/1153).
|
||||||
|
|
||||||
Here is an example:
|
Here is an example:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React from "react";
|
import React from 'react';
|
||||||
import logo from "./logo.png"; // Tell Webpack this JS file uses this image
|
import logo from './logo.png'; // Tell Webpack this JS file uses this image
|
||||||
|
|
||||||
console.log(logo); // /logo.84287d09.png
|
console.log(logo); // /logo.84287d09.png
|
||||||
|
|
||||||
@@ -597,19 +638,19 @@ npm install react-bootstrap --save
|
|||||||
npm install bootstrap@3 --save
|
npm install bootstrap@3 --save
|
||||||
```
|
```
|
||||||
|
|
||||||
Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file:
|
Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your ```src/index.js``` file:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import "bootstrap/dist/css/bootstrap.css";
|
import 'bootstrap/dist/css/bootstrap.css';
|
||||||
import "bootstrap/dist/css/bootstrap-theme.css";
|
import 'bootstrap/dist/css/bootstrap-theme.css';
|
||||||
// Put any other imports below so that CSS from your
|
// Put any other imports below so that CSS from your
|
||||||
// components takes precedence over default styles.
|
// components takes precedence over default styles.
|
||||||
```
|
```
|
||||||
|
|
||||||
Import required React Bootstrap components within `src/App.js` file or your custom component files:
|
Import required React Bootstrap components within ```src/App.js``` file or your custom component files:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Navbar, Jumbotron, Button } from "react-bootstrap";
|
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
|
||||||
```
|
```
|
||||||
|
|
||||||
Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
|
Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
|
||||||
@@ -700,7 +741,7 @@ a `.env` file. Both of these ways are described in the next few sections.
|
|||||||
Having access to the `NODE_ENV` is also useful for performing actions conditionally:
|
Having access to the `NODE_ENV` is also useful for performing actions conditionally:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
if (process.env.NODE_ENV !== "production") {
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
analytics.disable();
|
analytics.disable();
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@@ -751,11 +792,28 @@ To define permanent environment variables, create a file called `.env` in the ro
|
|||||||
REACT_APP_SECRET_CODE=abcdef
|
REACT_APP_SECRET_CODE=abcdef
|
||||||
```
|
```
|
||||||
|
|
||||||
|
`.env` files **should be** checked into source control (with the exclusion of `.env*.local`).
|
||||||
|
|
||||||
|
What other `.env` files are can be used?
|
||||||
|
|
||||||
|
>Note: this feature is available with `react-scripts@1.0.0` and higher.
|
||||||
|
|
||||||
|
* `.env` - Default
|
||||||
|
* `.env.development`, `.env.test`, `.env.production` - Environment-specific settings.
|
||||||
|
* `.env.local` - Local overrides. This file is loaded for all environments except test.
|
||||||
|
* `.env.development.local`, `.env.test.local`, `.env.production.local` - Local overrides of environment-specific settings.
|
||||||
|
|
||||||
|
File priority, from left to right:
|
||||||
|
|
||||||
|
* npm test - `.env.test.local`, `env.test`, `.env.local`, `.env`
|
||||||
|
* npm run build - `.env.production.local`, `env.production`, `.env.local`, `.env`
|
||||||
|
* npm start - `.env.development.local`, `env.development`, `.env.local`, `.env`
|
||||||
|
|
||||||
These variables will act as the defaults if the machine does not explicitly set them.<br>
|
These variables will act as the defaults if the machine does not explicitly set them.<br>
|
||||||
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
|
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
|
||||||
|
|
||||||
>Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
|
>Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
|
||||||
> these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
|
these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
|
||||||
|
|
||||||
## Can I Use Decorators?
|
## Can I Use Decorators?
|
||||||
|
|
||||||
@@ -780,7 +838,6 @@ These tutorials will help you to integrate your app with an API backend running
|
|||||||
using `fetch()` to access it.
|
using `fetch()` to access it.
|
||||||
|
|
||||||
### Node
|
### Node
|
||||||
|
|
||||||
Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/).
|
Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/).
|
||||||
You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
|
You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
|
||||||
|
|
||||||
@@ -823,9 +880,68 @@ Keep in mind that `proxy` only has effect in development (with `npm start`), and
|
|||||||
The `proxy` option supports HTTP, HTTPS and WebSocket connections.<br>
|
The `proxy` option supports HTTP, HTTPS and WebSocket connections.<br>
|
||||||
If the `proxy` option is **not** flexible enough for you, alternatively you can:
|
If the `proxy` option is **not** flexible enough for you, alternatively you can:
|
||||||
|
|
||||||
|
* [Configure the proxy yourself](#configuring-the-proxy-manually)
|
||||||
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
|
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
|
||||||
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
|
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
|
||||||
|
|
||||||
|
### Configuring the Proxy Manually
|
||||||
|
|
||||||
|
>Note: this feature is available with `react-scripts@1.0.0` and higher.
|
||||||
|
|
||||||
|
If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form (in `package.json`).<br>
|
||||||
|
You may also specify any configuration value [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) or [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports.
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
// ...
|
||||||
|
"proxy": {
|
||||||
|
"/api": {
|
||||||
|
"target": "<url>",
|
||||||
|
"ws": true
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
All requests matching this path will be proxies, no exceptions. This includes requests for `text/html`, which the standard `proxy` option does not proxy.
|
||||||
|
|
||||||
|
If you need to specify multiple proxies, you may do so by specifying additional entries.
|
||||||
|
You may also narrow down matches using `*` and/or `**`, to match the path exactly or any subpath.
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
// ...
|
||||||
|
"proxy": {
|
||||||
|
// Matches any request starting with /api
|
||||||
|
"/api": {
|
||||||
|
"target": "<url_1>",
|
||||||
|
"ws": true
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
// Matches any request starting with /foo
|
||||||
|
"/foo": {
|
||||||
|
"target": "<url_2>",
|
||||||
|
"ssl": true,
|
||||||
|
"pathRewrite": {
|
||||||
|
"^/foo": "/foo/beta"
|
||||||
|
}
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
// Matches /bar/abc.html but not /bar/sub/def.html
|
||||||
|
"/bar/*.html": {
|
||||||
|
"target": "<url_3>",
|
||||||
|
// ...
|
||||||
|
},
|
||||||
|
// Matches /bar/abc.html and /bar/sub/def.html
|
||||||
|
"/baz/**/*.html": {
|
||||||
|
"target": "<url_4>"
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Using HTTPS in Development
|
## Using HTTPS in Development
|
||||||
|
|
||||||
>Note: this feature is available with `react-scripts@0.4.0` and higher.
|
>Note: this feature is available with `react-scripts@0.4.0` and higher.
|
||||||
@@ -893,7 +1009,8 @@ Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data
|
|||||||
|
|
||||||
## Running Tests
|
## Running Tests
|
||||||
|
|
||||||
> Note: this feature is available with `react-scripts@0.3.0` and higher.<br> >[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
|
>Note: this feature is available with `react-scripts@0.3.0` and higher.<br>
|
||||||
|
>[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
|
||||||
|
|
||||||
Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try.
|
Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try.
|
||||||
|
|
||||||
@@ -938,9 +1055,9 @@ To create tests, add `it()` (or `test()`) blocks with the name of the test and i
|
|||||||
Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this:
|
Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import sum from "./sum";
|
import sum from './sum';
|
||||||
|
|
||||||
it("sums numbers", () => {
|
it('sums numbers', () => {
|
||||||
expect(sum(1, 2)).toEqual(3);
|
expect(sum(1, 2)).toEqual(3);
|
||||||
expect(sum(2, 2)).toEqual(4);
|
expect(sum(2, 2)).toEqual(4);
|
||||||
});
|
});
|
||||||
@@ -956,12 +1073,12 @@ There is a broad spectrum of component testing techniques. They range from a “
|
|||||||
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
|
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React from "react";
|
import React from 'react';
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from 'react-dom';
|
||||||
import App from "./App";
|
import App from './App';
|
||||||
|
|
||||||
it("renders without crashing", () => {
|
it('renders without crashing', () => {
|
||||||
const div = document.createElement("div");
|
const div = document.createElement('div');
|
||||||
ReactDOM.render(<App />, div);
|
ReactDOM.render(<App />, div);
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
@@ -973,15 +1090,15 @@ When you encounter bugs caused by changing components, you will gain a deeper in
|
|||||||
If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). You can write a smoke test with it too:
|
If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). You can write a smoke test with it too:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install --save-dev enzyme react-addons-test-utils
|
npm install --save-dev enzyme react-test-renderer
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React from "react";
|
import React from 'react';
|
||||||
import { shallow } from "enzyme";
|
import { shallow } from 'enzyme';
|
||||||
import App from "./App";
|
import App from './App';
|
||||||
|
|
||||||
it("renders without crashing", () => {
|
it('renders without crashing', () => {
|
||||||
shallow(<App />);
|
shallow(<App />);
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
@@ -993,11 +1110,11 @@ You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testi
|
|||||||
Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
|
Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React from "react";
|
import React from 'react';
|
||||||
import { shallow } from "enzyme";
|
import { shallow } from 'enzyme';
|
||||||
import App from "./App";
|
import App from './App';
|
||||||
|
|
||||||
it("renders welcome message", () => {
|
it('renders welcome message', () => {
|
||||||
const wrapper = shallow(<App />);
|
const wrapper = shallow(<App />);
|
||||||
const welcome = <h2>Welcome to React</h2>;
|
const welcome = <h2>Welcome to React</h2>;
|
||||||
// expect(wrapper.contains(welcome)).to.equal(true);
|
// expect(wrapper.contains(welcome)).to.equal(true);
|
||||||
@@ -1011,20 +1128,21 @@ Nevertheless you can use a third-party assertion library like [Chai](http://chai
|
|||||||
Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme.
|
Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
expect(wrapper).toContainReact(welcome);
|
expect(wrapper).toContainReact(welcome)
|
||||||
```
|
```
|
||||||
|
|
||||||
To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`.
|
To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. **Note that currently only version 2.x is compatible with Create React App.**
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install --save-dev jest-enzyme
|
npm install --save-dev jest-enzyme@2.x
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// src/setupTests.js
|
// src/setupTests.js
|
||||||
import "jest-enzyme";
|
import 'jest-enzyme';
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Using Third Party Assertion Libraries
|
### Using Third Party Assertion Libraries
|
||||||
|
|
||||||
We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566).
|
We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566).
|
||||||
@@ -1032,8 +1150,8 @@ We recommend that you use `expect()` for assertions and `jest.fn()` for spies. I
|
|||||||
However, if you are used to other libraries, such as [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this:
|
However, if you are used to other libraries, such as [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import sinon from "sinon";
|
import sinon from 'sinon';
|
||||||
import { expect } from "chai";
|
import { expect } from 'chai';
|
||||||
```
|
```
|
||||||
|
|
||||||
and then use them in your tests like you normally do.
|
and then use them in your tests like you normally do.
|
||||||
@@ -1047,14 +1165,13 @@ If your app uses a browser API that you need to mock in your tests or if you jus
|
|||||||
For example:
|
For example:
|
||||||
|
|
||||||
#### `src/setupTests.js`
|
#### `src/setupTests.js`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const localStorageMock = {
|
const localStorageMock = {
|
||||||
getItem: jest.fn(),
|
getItem: jest.fn(),
|
||||||
setItem: jest.fn(),
|
setItem: jest.fn(),
|
||||||
clear: jest.fn()
|
clear: jest.fn()
|
||||||
};
|
};
|
||||||
global.localStorage = localStorageMock;
|
global.localStorage = localStorageMock
|
||||||
```
|
```
|
||||||
|
|
||||||
### Focusing and Excluding Tests
|
### Focusing and Excluding Tests
|
||||||
@@ -1080,12 +1197,10 @@ When creating a build of your application with `npm run build` linter warnings a
|
|||||||
Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
|
Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
|
||||||
|
|
||||||
### On CI servers
|
### On CI servers
|
||||||
|
|
||||||
#### Travis CI
|
#### Travis CI
|
||||||
|
|
||||||
1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
|
1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
|
||||||
1. Add a `.travis.yml` file to your git repository.
|
1. Add a `.travis.yml` file to your git repository.
|
||||||
|
|
||||||
```
|
```
|
||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
@@ -1098,12 +1213,10 @@ script:
|
|||||||
- npm test
|
- npm test
|
||||||
- npm run build
|
- npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
1. Trigger your first build with a git push.
|
1. Trigger your first build with a git push.
|
||||||
1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
|
1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
|
||||||
|
|
||||||
### On your own environment
|
### On your own environment
|
||||||
|
|
||||||
##### Windows (cmd.exe)
|
##### Windows (cmd.exe)
|
||||||
|
|
||||||
```cmd
|
```cmd
|
||||||
@@ -1206,12 +1319,108 @@ Learn more about React Storybook:
|
|||||||
|
|
||||||
* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
|
* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
|
||||||
* [GitHub Repo](https://github.com/kadirahq/react-storybook)
|
* [GitHub Repo](https://github.com/kadirahq/react-storybook)
|
||||||
* [Documentation](https://getstorybook.io/docs)
|
* [Documentation](https://storybooks.js.org/docs/react-storybook/basics/introduction/)
|
||||||
* [Snapshot Testing](https://github.com/kadirahq/storyshots) with React Storybook
|
* [Snapshot Testing](https://github.com/kadirahq/storyshots) with React Storybook
|
||||||
|
|
||||||
## Making a Progressive Web App
|
## Making a Progressive Web App
|
||||||
|
|
||||||
You can turn your React app into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) by following the steps in [this repository](https://github.com/jeffposnick/create-react-pwa).
|
By default, the production build is a fully functional, offline-first
|
||||||
|
[Progressive Web App](https://developers.google.com/web/progressive-web-apps/).
|
||||||
|
|
||||||
|
Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience:
|
||||||
|
|
||||||
|
* All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background.
|
||||||
|
* Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the Subway.
|
||||||
|
* On mobile devices, your app can be added directly to the user's home screen, app icon and all. You can also re-engage users using web **push notifications**. This eliminates the need for the app store.
|
||||||
|
|
||||||
|
The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin)
|
||||||
|
is integrated into production configuration,
|
||||||
|
and it will take care of generating a service worker file that will automatically
|
||||||
|
precache all of your local assets and keep them up to date as you deploy updates.
|
||||||
|
The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network)
|
||||||
|
for handling all requests for local assets, including the initial HTML, ensuring
|
||||||
|
that you web app is reliably fast, even on a slow or unreliable network.
|
||||||
|
|
||||||
|
If you would prefer not to enable service workers prior to your initial
|
||||||
|
production deployment, then remove the call to `serviceWorkerRegistration.register()`
|
||||||
|
from [`src/index.js`](src/index.js).
|
||||||
|
|
||||||
|
If you had previously enabled service workers in your production deployment and
|
||||||
|
have decided that you would like to disable them for all your existing users,
|
||||||
|
you can swap out the call to `serviceWorkerRegistration.register()` in
|
||||||
|
[`src/index.js`](src/index.js) with a call to `serviceWorkerRegistration.unregister()`.
|
||||||
|
After the user visits a page that has `serviceWorkerRegistration.unregister()`,
|
||||||
|
the service worker will be uninstalled.
|
||||||
|
|
||||||
|
### Offline-First Considerations
|
||||||
|
|
||||||
|
1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https),
|
||||||
|
although to facilitate local testing, that policy
|
||||||
|
[does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385).
|
||||||
|
If your production web server does not support HTTPS, then the service worker
|
||||||
|
registration will fail, but the rest of your web app will remain functional.
|
||||||
|
|
||||||
|
1. Service workers are [not currently supported](https://jakearchibald.github.io/isserviceworkerready/)
|
||||||
|
in all web browsers. Service worker registration [won't be attempted](src/service-worker-registration.js)
|
||||||
|
on browsers that lack support.
|
||||||
|
|
||||||
|
1. The service worker is only enabled in the [production environment](#deployment),
|
||||||
|
e.g. the output of `npm run build`. It's recommended that you do not enable an
|
||||||
|
offline-first service worker in a development environment, as it can lead to
|
||||||
|
frustration when previously cached assets are used and do not include the latest
|
||||||
|
changes you've made locally.
|
||||||
|
|
||||||
|
1. If you *need* to test your offline-first service worker locally, build
|
||||||
|
the application (using `npm run build`) and run a simple http server from your
|
||||||
|
build directory. After running the build script, `create-react-app` will give
|
||||||
|
instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
|
||||||
|
instructions for using other methods. *Be sure to always use an
|
||||||
|
incognito window to avoid complications with your browser cache.*
|
||||||
|
|
||||||
|
1. If possible,configure your production environment to serve the generated
|
||||||
|
`service-worker.js` [with HTTP caching disabled](http://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours).
|
||||||
|
If that's not possible—[GitHub Pages](#github-pages), for instance, does not
|
||||||
|
allow you to change the default 10 minute HTTP cache lifetime—then be aware
|
||||||
|
that if you visit your production site, and then revisit again before
|
||||||
|
`service-worker.js` has expired from your HTTP cache, you'll continue to get
|
||||||
|
the previously cached assets from the service worker. If you have an immediate
|
||||||
|
need to view your updated production deployment, performing a shift-refresh
|
||||||
|
will temporarily disable the service worker and retrieve all assets from the
|
||||||
|
network.
|
||||||
|
|
||||||
|
1. Users aren't always familiar with offline-first web apps. It can be useful to
|
||||||
|
[let the user know](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux#inform_the_user_when_the_app_is_ready_for_offline_consumption)
|
||||||
|
when the service worker has finished populating your caches (showing a "This web
|
||||||
|
app works offline!" message) and also let them know when the service worker has
|
||||||
|
fetched the latest updates that will be available the next time they load the
|
||||||
|
page (showing a "New content is available; please refresh." message). Showing
|
||||||
|
this messages is currently left as an exercise to the developer, but as a
|
||||||
|
starting point, you can make use of the logic included in [`src/service-worker-registration.js`](src/service-worker-registration.js), which
|
||||||
|
demonstrates which service worker lifecycle events to listen for to detect each
|
||||||
|
scenario, and which as a default, just logs appropriate messages to the
|
||||||
|
JavaScript console.
|
||||||
|
|
||||||
|
1. By default, the generated service worker file will not intercept or cache any
|
||||||
|
cross-origin traffic, like HTTP [API requests](#integrating-with-an-api-backend),
|
||||||
|
images, or embeds loaded from a different domain. If you would like to use a
|
||||||
|
runtime caching strategy for those requests, you can [`eject`](#npm-run-eject)
|
||||||
|
and then configure the
|
||||||
|
[`runtimeCaching`](https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject)
|
||||||
|
option in the `SWPrecacheWebpackPlugin` section of
|
||||||
|
[`webpack.config.prod.js`](../config/webpack.config.prod.js).
|
||||||
|
|
||||||
|
### Progressive Web App Metadata
|
||||||
|
|
||||||
|
The default configuration includes a web app manifest located at
|
||||||
|
[`public/manifest.json`](public/manifest.json), that you can customize with
|
||||||
|
details specific to your web application.
|
||||||
|
|
||||||
|
When a user adds a web app to their homescreen using Chrome or Firefox on
|
||||||
|
Android, the metadata in [`manifest.json`](public/manifest.json) determines what
|
||||||
|
icons, names, and branding colors to use when the web app is displayed.
|
||||||
|
[The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
|
||||||
|
provides more context about what each field means, and how your customizations
|
||||||
|
will affect your users' experience.
|
||||||
|
|
||||||
## Deployment
|
## Deployment
|
||||||
|
|
||||||
@@ -1241,14 +1450,14 @@ You don’t necessarily need a static server in order to run a Create React App
|
|||||||
Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
|
Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const express = require("express");
|
const express = require('express');
|
||||||
const path = require("path");
|
const path = require('path');
|
||||||
const app = express();
|
const app = express();
|
||||||
|
|
||||||
app.use(express.static("./build"));
|
app.use(express.static(path.join(__dirname, 'build')));
|
||||||
|
|
||||||
app.get("/", function(req, res) {
|
app.get('/', function (req, res) {
|
||||||
res.sendFile(path.join(__dirname, "./build", "index.html"));
|
res.sendFile(path.join(__dirname, 'build', 'index.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
app.listen(9000);
|
app.listen(9000);
|
||||||
@@ -1267,11 +1476,11 @@ If you use routers that use the HTML5 [`pushState` history API](https://develope
|
|||||||
This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
|
This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
|
||||||
|
|
||||||
```diff
|
```diff
|
||||||
app.use(express.static('./build'));
|
app.use(express.static(path.join(__dirname, 'build')));
|
||||||
|
|
||||||
-app.get('/', function (req, res) {
|
-app.get('/', function (req, res) {
|
||||||
+app.get('/*', function (req, res) {
|
+app.get('/*', function (req, res) {
|
||||||
res.sendFile(path.join(__dirname, './build', 'index.html'));
|
res.sendFile(path.join(__dirname, 'build', 'index.html'));
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -1288,6 +1497,15 @@ It will get copied to the `build` folder when you run `npm run build`.
|
|||||||
|
|
||||||
Now requests to `/todos/42` will be handled correctly both in development and in production.
|
Now requests to `/todos/42` will be handled correctly both in development and in production.
|
||||||
|
|
||||||
|
On a production build, and in a browser that supports [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers),
|
||||||
|
the service worker will automatically handle all navigation requests, like for
|
||||||
|
`/todos/42`, by serving the cached copy of your `index.html`. This
|
||||||
|
service worker navigation routing can be configured or disabled by
|
||||||
|
[`eject`ing](#npm-run-eject) and then modifying the
|
||||||
|
[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
|
||||||
|
and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
|
||||||
|
options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js).
|
||||||
|
|
||||||
### Building for Relative Paths
|
### Building for Relative Paths
|
||||||
|
|
||||||
By default, Create React App produces a build assuming your app is hosted at the server root.<br>
|
By default, Create React App produces a build assuming your app is hosted at the server root.<br>
|
||||||
@@ -1483,7 +1701,7 @@ In this case, ensure that the file is there with the proper lettercase and that
|
|||||||
|
|
||||||
See the [Modulus blog post](http://blog.modulus.io/deploying-react-apps-on-modulus) on how to deploy your react app to Modulus.
|
See the [Modulus blog post](http://blog.modulus.io/deploying-react-apps-on-modulus) on how to deploy your react app to Modulus.
|
||||||
|
|
||||||
## Netlify
|
### Netlify
|
||||||
|
|
||||||
**To do a manual deploy to Netlify’s CDN:**
|
**To do a manual deploy to Netlify’s CDN:**
|
||||||
|
|
||||||
@@ -1523,7 +1741,7 @@ When you build the project, Create React App will place the `public` folder cont
|
|||||||
3. Add this line to `scripts` in `package.json`:
|
3. Add this line to `scripts` in `package.json`:
|
||||||
|
|
||||||
```
|
```
|
||||||
"now-start": "serve build/",
|
"now-start": "serve -s build/",
|
||||||
```
|
```
|
||||||
|
|
||||||
4. Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
|
4. Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
|
||||||
@@ -1542,21 +1760,12 @@ See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-t
|
|||||||
|
|
||||||
### Surge
|
### Surge
|
||||||
|
|
||||||
Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the _build_ folder and your custom domain, and you are done.
|
Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account.
|
||||||
|
|
||||||
|
When asked about the project path, make sure to specify the `build` folder, for example:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
email: email@domain.com
|
|
||||||
password: ********
|
|
||||||
project path: /path/to/project/build
|
project path: /path/to/project/build
|
||||||
size: 7 files, 1.8 MB
|
|
||||||
domain: create-react-app.surge.sh
|
|
||||||
upload: [====================] 100%, eta: 0.0s
|
|
||||||
propagate on CDN: [====================] 100%
|
|
||||||
plan: Free
|
|
||||||
users: email@domain.com
|
|
||||||
IP Address: X.X.X.X
|
|
||||||
|
|
||||||
Success! Project is published and running at create-react-app.surge.sh
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
|
Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
|
||||||
@@ -1565,14 +1774,14 @@ Note that in order to support routers that use HTML5 `pushState` API, you may wa
|
|||||||
|
|
||||||
You can adjust various development and production settings by setting environment variables in your shell or with [.env](#adding-development-environment-variables-in-env).
|
You can adjust various development and production settings by setting environment variables in your shell or with [.env](#adding-development-environment-variables-in-env).
|
||||||
|
|
||||||
| Variable | Development | Production | Usage |
|
Variable | Development | Production | Usage
|
||||||
| :--------- | :--------------------: | :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
:--- | :---: | :---: | :---
|
||||||
| BROWSER | :white_check_mark: | :x: | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. |
|
BROWSER | :white_check_mark: | :x: | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension.
|
||||||
| HOST | :white_check_mark: | :x: | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. |
|
HOST | :white_check_mark: | :x: | By default, the development web server binds to `localhost`. You may use this variable to specify a different host.
|
||||||
| PORT | :white_check_mark: | :x: | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
|
PORT | :white_check_mark: | :x: | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.
|
||||||
| HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode. |
|
HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode.
|
||||||
| PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
|
PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.
|
||||||
| CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
|
CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
@@ -1583,7 +1792,7 @@ If this doesn’t happen, try one of the following workarounds:
|
|||||||
|
|
||||||
* If your project is in a Dropbox folder, try moving it out.
|
* If your project is in a Dropbox folder, try moving it out.
|
||||||
* If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebookincubator/create-react-app/issues/1164) due to a Webpack bug.
|
* If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebookincubator/create-react-app/issues/1164) due to a Webpack bug.
|
||||||
* Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Working with editors supporting safe write”](https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write).
|
* Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Adjusting Your Text Editor”](https://webpack.js.org/guides/development/#adjusting-your-text-editor).
|
||||||
* If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42).
|
* If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42).
|
||||||
* On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers.
|
* On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers.
|
||||||
* If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM.
|
* If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM.
|
||||||
@@ -1612,7 +1821,7 @@ You can find [other installation methods](https://facebook.github.io/watchman/do
|
|||||||
|
|
||||||
If this still doesn’t help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
|
If this still doesn’t help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
|
||||||
|
|
||||||
There are also reports that _uninstalling_ Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
|
There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
|
||||||
|
|
||||||
### `npm run build` silently fails
|
### `npm run build` silently fails
|
||||||
|
|
||||||
@@ -1623,6 +1832,32 @@ It is reported that `npm run build` can fail on machines with no swap space, whi
|
|||||||
This may be a problem with case sensitive filenames.
|
This may be a problem with case sensitive filenames.
|
||||||
Please refer to [this section](#resolving-heroku-deployment-errors).
|
Please refer to [this section](#resolving-heroku-deployment-errors).
|
||||||
|
|
||||||
|
### Moment.js locales are missing
|
||||||
|
|
||||||
|
If you use a [Moment.js](https://momentjs.com/), you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of [all the locales provided by Moment.js](https://momentjs.com/#multiple-locale-support).
|
||||||
|
|
||||||
|
To add a specific Moment.js locale to your bundle, you need to import it explicitly.<br>
|
||||||
|
For example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
import moment from 'moment';
|
||||||
|
import 'moment/locale/fr';
|
||||||
|
```
|
||||||
|
|
||||||
|
If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the locale name:
|
||||||
|
|
||||||
|
```js
|
||||||
|
import moment from 'moment';
|
||||||
|
import 'moment/locale/fr';
|
||||||
|
import 'moment/locale/es';
|
||||||
|
|
||||||
|
// ...
|
||||||
|
|
||||||
|
moment.locale('fr');
|
||||||
|
```
|
||||||
|
|
||||||
|
This will only work for locales that have been explicitly imported before.
|
||||||
|
|
||||||
## Something Missing?
|
## Something Missing?
|
||||||
|
|
||||||
If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md)
|
If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md)
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-100k-rows-aggregation",
|
||||||
|
"version": "0.0.7",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1",
|
||||||
|
"lodash": "4.17.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"infiniteLoopProtection": false,
|
||||||
|
"hardReloadOnChange": false,
|
||||||
|
"view": "browser"
|
||||||
|
}
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
|
import React from "react";
|
||||||
import namor from "namor";
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
const range = len => {
|
const range = len => {
|
||||||
const arr = [];
|
const arr = [];
|
||||||
@@ -19,9 +21,7 @@ const newPerson = () => {
|
|||||||
status:
|
status:
|
||||||
statusChance > 0.66
|
statusChance > 0.66
|
||||||
? "relationship"
|
? "relationship"
|
||||||
: statusChance > 0.33
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
? "complicated"
|
|
||||||
: "single"
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -33,3 +33,20 @@ export function makeData(len = 5553) {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { makeData, Logo, Tips } from "./Utils";
|
||||||
|
import _ from "lodash";
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: makeData(100000)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { data } = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<br />
|
||||||
|
<strong>Note: Having the console open will slow performance</strong>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<ReactTable
|
||||||
|
data={data}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
Header: "Name",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "First Name",
|
||||||
|
accessor: "firstName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Last Name",
|
||||||
|
id: "lastName",
|
||||||
|
accessor: d => d.lastName
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Info",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Age",
|
||||||
|
accessor: "age",
|
||||||
|
aggregate: vals => _.round(_.mean(vals)),
|
||||||
|
Aggregated: row => {
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{row.value} (avg)
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Visits",
|
||||||
|
accessor: "visits",
|
||||||
|
aggregate: vals => _.sum(vals)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
pivotBy={["firstName", "lastName"]}
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
SubComponent={row => {
|
||||||
|
return (
|
||||||
|
<div style={{ padding: "20px" }}>
|
||||||
|
<em>Sub Component!</em>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-100k-rows-aggregation",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1",
|
||||||
|
"lodash": "4.17.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-cell-renderers",
|
||||||
|
"version": "0.0.12",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [
|
||||||
|
"react",
|
||||||
|
"react-table",
|
||||||
|
"datagrid",
|
||||||
|
"grid",
|
||||||
|
"table"
|
||||||
|
],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from "react";
|
||||||
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const range = len => {
|
||||||
|
const arr = [];
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
arr.push(i);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
const newPerson = () => {
|
||||||
|
const statusChance = Math.random();
|
||||||
|
return {
|
||||||
|
firstName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
lastName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
age: Math.floor(Math.random() * 30),
|
||||||
|
visits: Math.floor(Math.random() * 100),
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
status:
|
||||||
|
statusChance > 0.66
|
||||||
|
? "relationship"
|
||||||
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function makeData(len = 5553) {
|
||||||
|
return range(len).map(d => {
|
||||||
|
return {
|
||||||
|
...newPerson(),
|
||||||
|
children: range(10).map(newPerson)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { makeData, Logo, Tips } from "./Utils";
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: makeData()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { data } = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ReactTable
|
||||||
|
data={data}
|
||||||
|
columns={[{
|
||||||
|
Header: 'Name',
|
||||||
|
columns: [{
|
||||||
|
Header: 'First Name',
|
||||||
|
accessor: 'firstName'
|
||||||
|
}, {
|
||||||
|
Header: 'Last Name',
|
||||||
|
id: 'lastName',
|
||||||
|
accessor: d => d.lastName
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
Header: 'Info',
|
||||||
|
columns: [{
|
||||||
|
Header: 'Profile Progress',
|
||||||
|
accessor: 'progress',
|
||||||
|
Cell: row => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: '#dadada',
|
||||||
|
borderRadius: '2px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: `${row.value}%`,
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: row.value > 66 ? '#85cc00'
|
||||||
|
: row.value > 33 ? '#ffbf00'
|
||||||
|
: '#ff2e00',
|
||||||
|
borderRadius: '2px',
|
||||||
|
transition: 'all .2s ease-out'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, {
|
||||||
|
Header: 'Status',
|
||||||
|
accessor: 'status',
|
||||||
|
Cell: row => (
|
||||||
|
<span>
|
||||||
|
<span style={{
|
||||||
|
color: row.value === 'relationship' ? '#ff2e00'
|
||||||
|
: row.value === 'complicated' ? '#ffbf00'
|
||||||
|
: '#57d500',
|
||||||
|
transition: 'all .3s ease'
|
||||||
|
}}>
|
||||||
|
●
|
||||||
|
</span> {
|
||||||
|
row.value === 'relationship' ? 'In a relationship'
|
||||||
|
: row.value === 'complicated' ? `It's complicated`
|
||||||
|
: 'Single'
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}]
|
||||||
|
}]}
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-cell-renderers",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [
|
||||||
|
"react",
|
||||||
|
"react-table",
|
||||||
|
"datagrid",
|
||||||
|
"grid",
|
||||||
|
"table"
|
||||||
|
],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-controlled-table",
|
||||||
|
"version": "0.0.2",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from "react";
|
||||||
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const range = len => {
|
||||||
|
const arr = [];
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
arr.push(i);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
const newPerson = () => {
|
||||||
|
const statusChance = Math.random();
|
||||||
|
return {
|
||||||
|
firstName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
lastName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
age: Math.floor(Math.random() * 30),
|
||||||
|
visits: Math.floor(Math.random() * 100),
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
status:
|
||||||
|
statusChance > 0.66
|
||||||
|
? "relationship"
|
||||||
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function makeData(len = 5553) {
|
||||||
|
return range(len).map(d => {
|
||||||
|
return {
|
||||||
|
...newPerson(),
|
||||||
|
children: range(10).map(newPerson)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { makeData, Logo, Tips } from "./Utils";
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
const data = makeData()
|
||||||
|
|
||||||
|
const makeDefaultState = () => ({
|
||||||
|
sorted: [],
|
||||||
|
page: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
expanded: {},
|
||||||
|
resized: [],
|
||||||
|
filtered: []
|
||||||
|
});
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = makeDefaultState();
|
||||||
|
this.resetState = this.resetState.bind(this);
|
||||||
|
}
|
||||||
|
resetState() {
|
||||||
|
this.setState(makeDefaultState());
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<button onClick={this.resetState}>Reset State</button>
|
||||||
|
</div>
|
||||||
|
<pre>
|
||||||
|
<code>
|
||||||
|
<strong>this.state ===</strong>{" "}
|
||||||
|
{JSON.stringify(this.state, null, 2)}
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
<ReactTable
|
||||||
|
data={data}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
Header: "Name",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "First Name",
|
||||||
|
accessor: "firstName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Last Name",
|
||||||
|
id: "lastName",
|
||||||
|
accessor: d => d.lastName,
|
||||||
|
width: 170
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Info",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Age",
|
||||||
|
accessor: "age"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
pivotBy={["lastName"]}
|
||||||
|
filterable
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
// Controlled props
|
||||||
|
sorted={this.state.sorted}
|
||||||
|
page={this.state.page}
|
||||||
|
pageSize={this.state.pageSize}
|
||||||
|
expanded={this.state.expanded}
|
||||||
|
resized={this.state.resized}
|
||||||
|
filtered={this.state.filtered}
|
||||||
|
// Callbacks
|
||||||
|
onSortedChange={sorted => this.setState({ sorted })}
|
||||||
|
onPageChange={page => this.setState({ page })}
|
||||||
|
onPageSizeChange={(pageSize, page) =>
|
||||||
|
this.setState({ page, pageSize })}
|
||||||
|
onExpandedChange={expanded => this.setState({ expanded })}
|
||||||
|
onResizedChange={resized => this.setState({ resized })}
|
||||||
|
onFilteredChange={filtered => this.setState({ filtered })}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-controlled-table",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-column-widths",
|
||||||
|
"version": "0.0.2",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from "react";
|
||||||
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const range = len => {
|
||||||
|
const arr = [];
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
arr.push(i);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
const newPerson = () => {
|
||||||
|
const statusChance = Math.random();
|
||||||
|
return {
|
||||||
|
firstName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
lastName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
age: Math.floor(Math.random() * 30),
|
||||||
|
visits: Math.floor(Math.random() * 100),
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
status:
|
||||||
|
statusChance > 0.66
|
||||||
|
? "relationship"
|
||||||
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function makeData(len = 5553) {
|
||||||
|
return range(len).map(d => {
|
||||||
|
return {
|
||||||
|
...newPerson(),
|
||||||
|
children: range(10).map(newPerson)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { makeData, Logo, Tips } from "./Utils";
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: makeData()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { data } = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ReactTable
|
||||||
|
data={data}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
Header: "Name",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "First Name",
|
||||||
|
accessor: "firstName",
|
||||||
|
maxWidth: 200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Last Name",
|
||||||
|
id: "lastName",
|
||||||
|
accessor: d => d.lastName,
|
||||||
|
width: 300
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Info",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Age",
|
||||||
|
accessor: "age",
|
||||||
|
minWidth: 400
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-column-widths",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-component-props",
|
||||||
|
"version": "0.0.3",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from "react";
|
||||||
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const range = len => {
|
||||||
|
const arr = [];
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
arr.push(i);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
const newPerson = () => {
|
||||||
|
const statusChance = Math.random();
|
||||||
|
return {
|
||||||
|
firstName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
lastName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
age: Math.floor(Math.random() * 30),
|
||||||
|
visits: Math.floor(Math.random() * 100),
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
status:
|
||||||
|
statusChance > 0.66
|
||||||
|
? "relationship"
|
||||||
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function makeData(len = 5553) {
|
||||||
|
return range(len).map(d => {
|
||||||
|
return {
|
||||||
|
...newPerson(),
|
||||||
|
children: range(10).map(newPerson)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { makeData, Logo, Tips } from "./Utils";
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: makeData()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { data } = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<br />
|
||||||
|
<strong>Open your console and hover over some cells!</strong>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<ReactTable
|
||||||
|
data={data}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
Header: "Name",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "First Name",
|
||||||
|
accessor: "firstName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Last Name",
|
||||||
|
id: "lastName",
|
||||||
|
accessor: d => d.lastName
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Info",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Age",
|
||||||
|
accessor: "age"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Status",
|
||||||
|
accessor: "status"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Stats",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Visits",
|
||||||
|
accessor: "visits"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
getTdProps={(state, rowInfo, column, instance) => {
|
||||||
|
return {
|
||||||
|
onMouseEnter: e =>
|
||||||
|
console.log("Cell - onMouseEnter", {
|
||||||
|
state,
|
||||||
|
rowInfo,
|
||||||
|
column,
|
||||||
|
instance,
|
||||||
|
event: e
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-component-props",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-expander-position",
|
||||||
|
"version": "0.0.2",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from "react";
|
||||||
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const range = len => {
|
||||||
|
const arr = [];
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
arr.push(i);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
const newPerson = () => {
|
||||||
|
const statusChance = Math.random();
|
||||||
|
return {
|
||||||
|
firstName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
lastName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
age: Math.floor(Math.random() * 30),
|
||||||
|
visits: Math.floor(Math.random() * 100),
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
status:
|
||||||
|
statusChance > 0.66
|
||||||
|
? "relationship"
|
||||||
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function makeData(len = 5553) {
|
||||||
|
return range(len).map(d => {
|
||||||
|
return {
|
||||||
|
...newPerson(),
|
||||||
|
children: range(10).map(newPerson)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { makeData, Logo, Tips } from "./Utils";
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: makeData()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { data } = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ReactTable
|
||||||
|
data={data}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
Header: "Name",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "First Name",
|
||||||
|
accessor: "firstName",
|
||||||
|
Footer: () =>
|
||||||
|
<div style={{ textAlign: "center" }}>First Name</div>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Last Name",
|
||||||
|
accessor: "lastName",
|
||||||
|
Footer: () =>
|
||||||
|
<div style={{ textAlign: "center" }}>Last Name</div>
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Info",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Age",
|
||||||
|
accessor: "age",
|
||||||
|
Footer: () => <div style={{ textAlign: "center" }}>Age</div>
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Expand",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
expander: true,
|
||||||
|
Header: () => <strong>More</strong>,
|
||||||
|
width: 65,
|
||||||
|
Expander: ({ isExpanded, ...rest }) =>
|
||||||
|
<div>
|
||||||
|
{isExpanded
|
||||||
|
? <span>⊙</span>
|
||||||
|
: <span>⊕</span>}
|
||||||
|
</div>,
|
||||||
|
style: {
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: 25,
|
||||||
|
padding: "0",
|
||||||
|
textAlign: "center",
|
||||||
|
userSelect: "none"
|
||||||
|
},
|
||||||
|
Footer: () => <span>♥</span>
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
SubComponent={() => <div style={{padding: '10px'}}>Hello</div>}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-expander-position",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-filtering",
|
||||||
|
"version": "0.0.7",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1",
|
||||||
|
"match-sorter": "1.8.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from "react";
|
||||||
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const range = len => {
|
||||||
|
const arr = [];
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
arr.push(i);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
const newPerson = () => {
|
||||||
|
const statusChance = Math.random();
|
||||||
|
return {
|
||||||
|
firstName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
lastName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
age: Math.floor(Math.random() * 30),
|
||||||
|
visits: Math.floor(Math.random() * 100),
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
status:
|
||||||
|
statusChance > 0.66
|
||||||
|
? "relationship"
|
||||||
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function makeData(len = 5553) {
|
||||||
|
return range(len).map(d => {
|
||||||
|
return {
|
||||||
|
...newPerson(),
|
||||||
|
children: range(10).map(newPerson)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { makeData, Logo, Tips } from "./Utils";
|
||||||
|
import matchSorter from 'match-sorter'
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.state = {
|
||||||
|
data: makeData()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
const { data } = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ReactTable
|
||||||
|
data={data}
|
||||||
|
filterable
|
||||||
|
defaultFilterMethod={(filter, row) =>
|
||||||
|
String(row[filter.id]) === filter.value}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
Header: "Name",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "First Name",
|
||||||
|
accessor: "firstName",
|
||||||
|
filterMethod: (filter, row) =>
|
||||||
|
row[filter.id].startsWith(filter.value) &&
|
||||||
|
row[filter.id].endsWith(filter.value)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Last Name",
|
||||||
|
id: "lastName",
|
||||||
|
accessor: d => d.lastName,
|
||||||
|
filterMethod: (filter, rows) =>
|
||||||
|
matchSorter(rows, filter.value, { keys: ["lastName"] }),
|
||||||
|
filterAll: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Info",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Age",
|
||||||
|
accessor: "age"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Over 21",
|
||||||
|
accessor: "age",
|
||||||
|
id: "over",
|
||||||
|
Cell: ({ value }) => (value >= 21 ? "Yes" : "No"),
|
||||||
|
filterMethod: (filter, row) => {
|
||||||
|
if (filter.value === "all") {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (filter.value === "true") {
|
||||||
|
return row[filter.id] >= 21;
|
||||||
|
}
|
||||||
|
return row[filter.id] < 21;
|
||||||
|
},
|
||||||
|
Filter: ({ filter, onChange }) =>
|
||||||
|
<select
|
||||||
|
onChange={event => onChange(event.target.value)}
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
value={filter ? filter.value : "all"}
|
||||||
|
>
|
||||||
|
<option value="all">Show All</option>
|
||||||
|
<option value="true">Can Drink</option>
|
||||||
|
<option value="false">Can't Drink</option>
|
||||||
|
</select>
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-filtering",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1",
|
||||||
|
"match-sorter": "1.8.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-no-data-text",
|
||||||
|
"version": "0.0.3",
|
||||||
|
"description": null,
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"react-scripts": "1.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test --env=jsdom",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import React from "react";
|
||||||
|
import namor from "namor";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const range = len => {
|
||||||
|
const arr = [];
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
arr.push(i);
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
|
||||||
|
const newPerson = () => {
|
||||||
|
const statusChance = Math.random();
|
||||||
|
return {
|
||||||
|
firstName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
lastName: namor.generate({ words: 1, numbers: 0 }),
|
||||||
|
age: Math.floor(Math.random() * 30),
|
||||||
|
visits: Math.floor(Math.random() * 100),
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
status:
|
||||||
|
statusChance > 0.66
|
||||||
|
? "relationship"
|
||||||
|
: statusChance > 0.33 ? "complicated" : "single"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function makeData(len = 5553) {
|
||||||
|
return range(len).map(d => {
|
||||||
|
return {
|
||||||
|
...newPerson(),
|
||||||
|
children: range(10).map(newPerson)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Logo = () =>
|
||||||
|
<div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
|
||||||
|
For more examples, visit {''}
|
||||||
|
<br />
|
||||||
|
<a href="https://github.com/react-tools/react-table" target="_blank">
|
||||||
|
<img
|
||||||
|
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
|
||||||
|
style={{ width: `150px`, margin: ".5em auto .3em" }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
export const Tips = () =>
|
||||||
|
<div style={{ textAlign: "center" }}>
|
||||||
|
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||||
|
</div>;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
// In production, we register a service worker to serve assets from local cache.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||||
|
// cached resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||||
|
// This link also includes instructions on opting out of this behavior.
|
||||||
|
|
||||||
|
export default function register() {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
// eslint-disable-next-line no-param-reassign
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the old content will have been purged and
|
||||||
|
// the fresh content will have been added to the cache.
|
||||||
|
// It's the perfect time to display a "New content is
|
||||||
|
// available; please refresh." message in your web app.
|
||||||
|
console.log('New content is available; please refresh.'); // eslint-disable-line no-console
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.'); // eslint-disable-line no-console
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
body {
|
||||||
|
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { render } from "react-dom";
|
||||||
|
import { Logo, Tips } from "./Utils";
|
||||||
|
|
||||||
|
// Import React Table
|
||||||
|
import ReactTable from "react-table";
|
||||||
|
import "react-table/react-table.css";
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ReactTable
|
||||||
|
data={[]}
|
||||||
|
noDataText="Oh Noes!"
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
Header: "Name",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "First Name",
|
||||||
|
accessor: "firstName"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Last Name",
|
||||||
|
id: "lastName",
|
||||||
|
accessor: d => d.lastName
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Info",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Age",
|
||||||
|
accessor: "age"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Status",
|
||||||
|
accessor: "status"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Header: "Stats",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
Header: "Visits",
|
||||||
|
accessor: "visits"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
defaultPageSize={10}
|
||||||
|
className="-striped -highlight"
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<Tips />
|
||||||
|
<Logo />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(<App />, document.getElementById("root"));
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "react-table-custom-no-data-text",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"keywords": [],
|
||||||
|
"main": "index.js",
|
||||||
|
"dependencies": {
|
||||||
|
"react-table": "6.5.3",
|
||||||
|
"react-dom": "15.5.3",
|
||||||
|
"react": "15.5.3",
|
||||||
|
"namor": "1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||