The renderer function for headers, columns, cells, aggregates, filters, etc used to mix properties
from all of those contexts, including rows. Now thow contexts are located on their own reserved
properties, eg. `Cell: ({ cell: { value}, row, column, ...instance }) => value`
BREAKING CHANGE: The renderer function for headers, columns, cells, aggregates, filters, etc used
in case of using construction like:
```
{
defaultColumn = {}
}
```
`defaultColumn` will get new instance each time, so as result it force to recalculation each of `React.useMemo`.
* [v7] useSort - Multisort functionality: Limit `multiSort` number and configurable shift key
1. Provide configuration for multisort that pressing shift key is not compulsory
2. Configurable limit on max number of columns for multisort, like configuration has been provided that `maxMultiSortColCount` is 3, suppose currenlty table is sorted by `[A, B, C]` and then clicking `D` for sorting should result in table sorted by `[B, C , D]`
* update readme for new multisort options
* Use `isMultiSortEvent` function
so as to make `shift` key optional or take decision based on other parameters for multisorting
* `isMultiSortEvent` updated readme
* chore(package.json): use latest babel core, remove bridge
* test(.babelrc): add test environment so that Jest can use ES6 imports
* test(usetable): fix import
Since useColumns was relying on groupBy logic, this was code smell. I wanted useGroupBy to be able to add that logic all by itself and not have to have dependencies in the core of the table.
To fix that, I've moved the core column and row logic to the useTable hook and added a new hook 'columnsBeforeHeaderGroups' to allow useGroupBy to do what i needs in a more pure way.
* added assertion to check for show property inside column
* reverted previous change
* added a filter to weed out non-visible columns when calculating the size for grouped Headers
* added another case to the previous filter to factor in blank grouped Headers
* Fix pagination resetting to page zero with manualPagination
To be honest I'm not sure what this useLayoutEffect is there to do.
It has no visible effect if you don't use manualPagination, and if you
do it, simply jumps you back to the first page, defeating the point of
you having control of the pagination.
* Conditionally reset page on data change
Rather disable the whole page reset when filters, groupBy or sortBy
change, just because I wanted to disable the page reset on data change,
make that bit be conditional.
With that in mind, usePagination now accepts a
disablePageResetOnDataChange parameter.
V7 adds the option to remove a sort option, so it goes from asc -> desc
-> unset, then repeats. V6 just went from asc -> desc then repeated.
Personally I much preferred this, I think that there's a case to be made
that this is the more expected behavior.
I'm not sure if this is really the best way to fix this since it adds
yet another api option and I completely understand that that is less
than desirable, but I also would rather add an option than have to
duplicate the whole useSortBy hook.
This change allows you to technically use React Table without a layout hook. Under that assumption, you would need to come up with your own styling mechanisms for display.
The useSimpleLayout merely adds a single `width` style to the prop getters for column headers and cells.
The useFlexLayout is much more robust. Personally though, I have moved away from both, and am just using raw `display: table-row/table-cell` styles to let my tables display naturally.
* Install useSimpleLayout and adjust useTable and useRows as required.
* useSimpleLayout integration
* Minor final fix - replace .filter with .forEach
* Used a spread on the path.
Pagination elements are now customizable without having
to create a new Pagination component, that would
mostly mimic the existing one in terms of functionality.
* Adds import instructions to the HOC README
Also fixes up some language and remove other import instructions. It's better to just have the import instructions in just one place.
* Better visualizes a list of functions
I found the added Props by looking into the defaultProps.js when I could not find a way change the styling of the filter row.
Custom Props
Built-in Components
Every single built-in component's props can be dynamically extended using any one of these prop-callbacks:
<ReactTable
getProps={fn}
getTableProps={fn}
getTheadGroupProps={fn}
getTheadGroupTrProps={fn}
getTheadGroupThProps={fn}
getTheadProps={fn}
getTheadTrProps={fn}
getTheadThProps={fn}
+getTheadFilterProps={fn}
+getTheadFilterTrProps={fn}
+getTheadFilterThProps={fn}
* Add aria-label attributes to pagination jump and row count selector with a new prop to specify different text.
* Add new text props for labels to README
When rendering a class component using the `class extends React.Component {}` syntax, you would get an error `TypeError: Cannot call a class as a function` because the check to determine whether a component was a class component was insufficient. It seems pointless to even have a check, however, because the JSX syntax can render both class and functional components.
* initial commit
* update readme
* update examples and src
* edit readme
* use single instance of advancedExpandTable
* add in hoc codesandbox to docs, run eslint on new source file
* Also check ID field when finding pivot col in treeTableHOC
* Pass the ID if you've got one on treeTableHOC
* An expandable cell should never be hidden
* Fix typo
* Edit link to working codesandbox
Fix '100k Rows w/ Pivoting & Sub Components' example
Closes#870
* Add cross-env to remove environment variable errors on Windows
I think this is the most common way of setting columns or expanderDefaults.
I had to find issue #565 and then follow it to issue #394 to see explanations on how to do this.
I have used this library to develop a big application for my company and had been required to make the columns are foldable. I saw that feature is useful and would like to share with everybody. Especially to all developers who developed this great component.
Let me know if any issues with My component. I will fix it accordingly.
* Merge fork from master (#6)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Fork Update (#7)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Update README.md (#584)
* Update README.md
Missing " on Features list,
Extra comma removed
* Update README.md
Added space for component uniformity.
* Update the devDependencies for the linter (#596)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix ThComponent classnames ordering (#673)
Allow for custom classname to overwrite base styles
* Add column to getResizerProps (#667)
* CHANGELOG update
* Doco updates
fixed a typo - ‘row’ to ‘original’
added minimal dock on ‘minRows’
* Merge from original (#9)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Update README.md (#584)
* Update README.md
Missing " on Features list,
Extra comma removed
* Update README.md
Added space for component uniformity.
* Update the devDependencies for the linter (#596)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix ThComponent classnames ordering (#673)
Allow for custom classname to overwrite base styles
* Add column to getResizerProps (#667)
* CHANGELOG update for 6.7.5 (#679)
* Merge fork from master (#6)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Fork Update (#7)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Update README.md (#584)
* Update README.md
Missing " on Features list,
Extra comma removed
* Update README.md
Added space for component uniformity.
* Update the devDependencies for the linter (#596)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix ThComponent classnames ordering (#673)
Allow for custom classname to overwrite base styles
* Add column to getResizerProps (#667)
* CHANGELOG update
* Use preset-env instead of preset-es2015
Remove preset-stage-2 and use individual required plugins.
* Expose es module build
* Update scripts in package.json
* Use rollup for faster and lighter umd builds
Add non minified version of the build.
* Merge fork from master (#6)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Fork Update (#7)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Update README.md (#584)
* Update README.md
Missing " on Features list,
Extra comma removed
* Update README.md
Added space for component uniformity.
* Update the devDependencies for the linter (#596)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix ThComponent classnames ordering (#673)
Allow for custom classname to overwrite base styles
* Add column to getResizerProps (#667)
* CHANGELOG update
* Header focus bug fix
Fixes#685
* Merge fork from master (#6)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Fork Update (#7)
* Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Docs testing cleanup (#645)
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Update README.md (#584)
* Update README.md
Missing " on Features list,
Extra comma removed
* Update README.md
Added space for component uniformity.
* Update the devDependencies for the linter (#596)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix ThComponent classnames ordering (#673)
Allow for custom classname to overwrite base styles
* Add column to getResizerProps (#667)
* CHANGELOG update
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Examples Refactor + multiSort flag (#619) (#4)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* Examples Refactor + multiSort flag (#619) (#5)
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
Still requires some basic sanity test to ensure ReactTable does
not have any fundamental coding errors.
Modified some of the /docs code to help with manual testing.
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
* Refactor HOCs to /src/hoc
Still have to write the HOCReadme.md (still just a placeholder for now)
* Refactor complete
May need to remove some redundant code
* Text change for the HOC samples
* Introduced a 'multiSort' flag
Defaults to 'true'
A 'false' value will turn multi-sort off.
* refactor: Fix defaultProps.js linter errors
* refactor: Fix lifecycle.js linter errors
* refactor: Fix pagination.js linter errors
* refactor: Fix propTypes.js linter errors
* refactor: Fix utils.js linter errors
* refactor: Fix methods.js linter errors
* refactor: Fix index.js linter errors
* Fix for linter changes + CHANGELOG update
* chore: Update the devDependencies for the linter
* A few HOC examples for react-table.
Not really integrated with the whole codesandbox.io approach.
* Missing dependency - shortid
We have found that with longer documentation files, the position of the sponsor link is more effective in helping fund the project when it's higher in the readme.
The current css selectors, eg. `.ReactTable input` cause conflicts with `input` elements inside Cells. So changed it to `.ReactTable .-pagination input`.
This brings `rt-tfoot` into line with `rt-thead` in terms of flex behaviour.
Without this, it's possible for an `rt-tr` to be taller than its containing
`rt-tfoot` without causing it to expand, which causes the outer `rt-table` to
scroll vertically.
v6 is now considered feature complete to its current abilities and limitations. We are not actively working to fix any issues for v6 any more. We will, however, merge any non-breaking pull requests submitted to fix anything in v6.
# Using v7?
Thanks for using the alpha version of React Table v7! We're very excited about it.
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Codesandbox!**
Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to reproduce the issue.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
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.
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!
- Since `resolveData` is now capable of materializing data on it's own, the `data` prop is no longer required as a prop-type.
## 6.8.4
#### Fixes & Optimizations
- Only run `resolveData` prop when `data` prop has changed, not any others.
## 6.8.3
#### Fixes & Optimizations
- Allow the `resolveData` prop to alter or materialize new data when the `data` prop changes.
## 6.8.1
#### Fixes & Optimizations
- Updated eslint and code formatting
## 6.7.5
#### Fixes & Optimizations
- Now passes `column` to `getResizerProps` (#667)
- NOTE: `getResizerProps` is now only called if the column is resizable
- Fixes the `className` ordering in defaultProps for ThComponent (#673)
- NOTE: user supplied classNames now come at the end so they can extend the defaults
## 6.7.4
#### Fixes & Optimizations
- Fix Prop types for columns
## 6.7.3
#### Fixes & Optimizations
- Fix the rest of the proptypes
## 6.7.2
#### Fixes & Optimizations
-`getPropTypes` proptype check
## 6.7.1
#### Fixes & Optimizations
-`eslint-config` moved to dev deps
## 6.7.0
## 6.7.0-alpha-0
#### New Features
- Expose page/pageSize to rows/cells
- Supply sort direction to custom sort methods
#### Fixes & Optimizations
- README updates
- Linter cleanup
- Added PropTypes node module
- Deps, linting and style upgrades
## 6.6.0
#### Fixes & Optimizations
- moved repo to react-tools
- Doc examples moved to codesandbox.io
- README updates
- CSS refacting for rt-tfoot to match rt-thead
- CSS more specific for input and select
## 6.5.3
#### Fixes & Optimizations
-`onClick` proxying and eslint
## 6.5.2
#### New Features
- Provide onClick handleOriginal function - #406
#### Fixes & Optimizations
- README updates
-`makePathArray` in utils - #326
- Various fixes: #294, #376, #398, #415,
## 6.5.1
#### Fixes & Optimizations
-`defaultExpanded` now works correctly - #372
-`column.getProps().rest` props are now applied correctly
-`makeTemplateComponent` now supports `displayName` - #289
## 6.5.0
##### New Features
-`column.filterAll` - defaults to `false`, but when set to `true` will provide the entire array of rows to `filterMethod` as opposed to one row at a time. This allows for more fine-grained filtering using any method you can dream up. See the [Custom Filtering example](https://react-table.js.org/#/story/custom-filtering) for more info.
## 6.4.0
##### New Features
-`PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders ` `
## 6.3.0
##### New Features
-`defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
-`column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
## 6.0.0
##### New Features
- New Renderers:
-`Aggregated` - Custom renderer for aggregated cells
-`Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
@@ -21,8 +145,8 @@
- Prevent transitions while column resizing for a smoother resize effect.
* [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.
@@ -207,56 +213,32 @@ To configure the syntax highlighting in your favorite text editor, head to the [
## 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.
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:
>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
```js
{
// ...
"extends": "react-app"
}
```
Then add this block to the `package.json` file of your project:
Now your editor should report the linting warnings.
```js
{
// ...
"eslintConfig": {
"extends": "react-app"
}
}
```
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.
Finally, you will need to install some packages *globally*:
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.
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
**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.
@@ -348,9 +330,56 @@ Learn more about ES6 modules:
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
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`
@@ -422,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:
```
npm install node-sass --save-dev
npm install node-sass-chokidar --save-dev
```
Then in `package.json`, add the following lines to `scripts`:
@@ -466,13 +494,27 @@ 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.
- `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.
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:
@@ -750,6 +792,23 @@ To define permanent environment variables, create a file called `.env` in the ro
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.
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.
@@ -821,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>
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)).
* 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
>Note: this feature is available with `react-scripts@0.4.0` and higher.
@@ -972,7 +1090,7 @@ 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:
@@ -1013,10 +1131,10 @@ Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzym
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
npm install --save-dev jest-enzyme
npm install --save-dev jest-enzyme@2.x
```
```js
@@ -1201,12 +1319,108 @@ Learn more about React Storybook:
* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
* [Snapshot Testing](https://github.com/kadirahq/storyshots) with React Storybook
## 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
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)
@@ -1262,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:
@@ -1283,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.
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
and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js).
### Building for Relative Paths
By default, Create React App produces a build assuming your app is hosted at the server root.<br>
@@ -1478,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.
## Netlify
### Netlify
**To do a manual deploy to Netlify’s CDN:**
@@ -1516,17 +1739,17 @@ When you build the project, Create React App will place the `public` folder cont
2. Install `serve` by running `npm install --save serve`.
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:
```
> Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
```
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in [this article.](https://zeit.co/blog/now-static)
@@ -1537,21 +1760,12 @@ See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-t
### 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
email: email@domain.com
password: ********
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).
@@ -1562,7 +1776,7 @@ You can adjust various development and production settings by setting environmen
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.
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.
@@ -1578,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 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).
* 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.
@@ -1618,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.
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?
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)
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.