(this.wrappedInstance = r)} />
- );
- }
- };
-
- wrapper.displayName = "RTCheckboxTable";
- wrapper.defaultProps = {
- keyField: "_id",
- isSelected: key => {
- console.log("No isSelected handler provided:", { key });
- },
- selectAll: false,
- toggleSelection: (key, shift, row) => {
- console.log("No toggleSelection handler provided:", { key, shift, row });
- },
- toggleAll: () => {
- console.log("No toggleAll handler provided.");
- }
- };
-
- return wrapper;
-};
diff --git a/docs/src/examples/checkbox/index.js b/docs/src/examples/checkbox/index.js
deleted file mode 100644
index cf90bbe..0000000
--- a/docs/src/examples/checkbox/index.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React from "react";
-import shortid from "shortid";
-
-import ReactTable from "../../../../lib/index";
-import "../../../../react-table.css";
-
-import checkboxTableHOC from "./checkboxHOC";
-
-const CheckboxTable = checkboxTableHOC(ReactTable);
-
-async function getData() {
- const result = await (await fetch("/au_500_tree.json")).json();
- // we are adding a unique ID to the data for tracking the selected records
- return result.map(item => {
- const _id = shortid.generate();
- return {
- _id,
- ...item
- };
- });
-}
-
-function getColumns(data) {
- const columns = [];
- const sample = data[0];
- for (let key in sample) {
- if (key === "_id") continue;
- columns.push({
- accessor: key,
- Header: key
- });
- }
- return columns;
-}
-
-export class ComponentTest extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: null,
- columns: null,
- selection: [],
- selectAll: false
- };
- }
- componentDidMount() {
- getData().then(data => {
- const columns = getColumns(data);
- this.setState({ data, columns });
- });
- }
- toggleSelection = (key, shift, row) => {
- /*
- Implementation of how to manage the selection state is up to the developer.
- This implementation uses an array stored in the component state.
- Other implementations could use object keys, a Javascript Set, or Redux... etc.
- */
- // start off with the existing state
- let selection = [...this.state.selection];
- const keyIndex = selection.indexOf(key);
- // check to see if the key exists
- if (keyIndex >= 0) {
- // it does exist so we will remove it using destructing
- selection = [
- ...selection.slice(0, keyIndex),
- ...selection.slice(keyIndex + 1)
- ];
- } else {
- // it does not exist so add it
- selection.push(key);
- }
- // update the state
- this.setState({ selection });
- };
- toggleAll = () => {
- /*
- 'toggleAll' is a tricky concept with any filterable table
- do you just select ALL the records that are in your data?
- OR
- do you only select ALL the records that are in the current filtered data?
-
- The latter makes more sense because 'selection' is a visual thing for the user.
- This is especially true if you are going to implement a set of external functions
- that act on the selected information (you would not want to DELETE the wrong thing!).
-
- So, to that end, access to the internals of ReactTable are required to get what is
- currently visible in the table (either on the current page or any other page).
-
- The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
- ReactTable and then get the internal state and the 'sortedData'.
- That can then be iterrated to get all the currently visible records and set
- the selection state.
- */
- const selectAll = this.state.selectAll ? false : true;
- const selection = [];
- if (selectAll) {
- // we need to get at the internals of ReactTable
- const wrappedInstance = this.checkboxTable.getWrappedInstance();
- // the 'sortedData' property contains the currently accessible records based on the filter and sort
- const currentRecords = wrappedInstance.getResolvedState().sortedData;
- // we just push all the IDs onto the selection array
- currentRecords.forEach(item => {
- selection.push(item._original._id);
- });
- }
- this.setState({ selectAll, selection });
- };
- isSelected = key => {
- /*
- Instead of passing our external selection state we provide an 'isSelected'
- callback and detect the selection state ourselves. This allows any implementation
- for selection (either an array, object keys, or even a Javascript Set object).
- */
- return this.state.selection.includes(key);
- };
- logSelection = () => {
- console.log("selection:", this.state.selection);
- };
- render() {
- const { toggleSelection, toggleAll, isSelected, logSelection } = this;
- const { data, columns, selectAll } = this.state;
- const extraProps = {
- selectAll,
- isSelected,
- toggleAll,
- toggleSelection
- };
- return (
-
-
react-table - Checkbox Table
- Log Selection to Console
- {` (${this.state.selection.length}) selected`}
- {data ? (
- (this.checkboxTable = r)}
- className="-striped -highlight"
- {...extraProps}
- />
- ) : null}
-
- );
- }
-}
-
-// export default treeTableHOC(ComponentTest);
-export default ComponentTest;
diff --git a/docs/src/examples/expander/index.js b/docs/src/examples/expander/index.js
deleted file mode 100644
index c21c914..0000000
--- a/docs/src/examples/expander/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-
-export default class ComponentTest extends React.component {
- render() {
- return Bozo
;
- }
-}
-
-// import ReactTable from '../../../../lib/index'
-// import '../../../../react-table.css'
-//
-// console.log('ReactTable:',ReactTable)
-//
-// const data = [
-// {one:"1.1",two:"1.2"},
-// {one:"2.1",two:"2.2"},
-// {one:"3.1",two:"3.2"},
-// {one:"4.1",two:"4.2"},
-// ]
-//
-// const columns = [
-// {accessor:'one', Header: 'One'},
-// {accessor:'two', Header: 'Two'},
-// ]
-//
-// class ExpanderComponent extends React.Component {
-// render()
-// {
-// return (
-//
-// •
-//
-// )
-// }
-// }
-//
-// class SubComponent extends React.Component {
-// render()
-// {
-// return Nothing
-// }
-// }
-//
-// export default class ComponentTest extends React.Component {
-// render()
-// {
-// const rtProps = {
-// data,
-// columns,
-// // ExpanderComponent: (props, closeExpanded)=> this.setState(p => { return { folded: newFolded } })}
- folded={this.state.folded}
-
- data={this.getData()}
- columns={[{
- Header: "Name",
- foldable: true,
- columns: [
- {
- Header: "First Name",
- accessor: "first_name"
- },
- {
- Header: "Last Name",
- accessor: "last_name"
- }
- ]
- }, {
- Header: "Info",
- foldable: true,
- columns: [
- {
- Header: "Email",
- accessor: "email"
- },
- {
- Header: "Gender",
- accessor: "gender"
- }
- ]
- }]
- }> )
- }
-}
diff --git a/docs/src/examples/foldabletable/FoldableTableWithHeader.js b/docs/src/examples/foldabletable/FoldableTableWithHeader.js
deleted file mode 100644
index 110f882..0000000
--- a/docs/src/examples/foldabletable/FoldableTableWithHeader.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react'
-import ReactTable from '../../../../lib/index'
-import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
-
-const FoldableTable = FoldableTableHOC(ReactTable)
-
-export default class FoldableTableWithHeader extends React.Component {
-
- getData = () => [{
- id: 1,
- first_name: 'Jeanette',
- last_name: 'Penddreth',
- 'email': 'jpenddreth0@census.gov',
- gender: 'Female',
- 'ip_address': '26.58.193.2',
- }, {
- 'id': 2,
- first_name: 'Giavani',
- last_name: 'Frediani',
- email: 'gfrediani1@senate.gov',
- gender: 'Male',
- 'ip_address': '229.179.4.212',
- }, {
- 'id': 3,
- 'first_name': 'Noell',
- last_name: 'Bea',
- 'email': 'nbea2@imageshack.us',
- 'gender': 'Female',
- ip_address: '180.66.162.255',
- }, {
- 'id': 4,
- 'first_name': 'Willard',
- 'last_name': 'Valek',
- email: 'wvalek3@vk.com',
- 'gender': 'Male',
- ip_address: '67.76.188.26',
- }];
-
- render() {
- return (
-
- Sample With Header Columns
-
-
-
-
- Sample With Normal Columns
-
-
-
-
- Custom State and selectedTable
-
-
-
-
react-table - Select Table
-
- Select Type: {selectType}
-
- Log Selection to Console
- {` (${this.state.selection.length}) selected`}
- {data ? (
- (this.selectTable = r)}
- className="-striped -highlight"
- {...extraProps}
- />
- ) : null}
-
- );
- }
-}
-
-export default ComponentTest;
diff --git a/docs/src/examples/selecttreetable/index.js b/docs/src/examples/selecttreetable/index.js
deleted file mode 100644
index 130e4f2..0000000
--- a/docs/src/examples/selecttreetable/index.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import React from "react";
-import shortid from "shortid";
-
-import ReactTable from "../../../../lib/index";
-import "../../../../react-table.css";
-
-import selectTableHOC from "../../../../lib/hoc/selectTable";
-import treeTableHOC from "../../../../lib/hoc/treeTable";
-
-const SelectTreeTable = selectTableHOC(treeTableHOC(ReactTable));
-
-async function getData() {
- const result = await (await fetch("/au_500_tree.json")).json();
- // we are adding a unique ID to the data for tracking the selected records
- return result.map(item => {
- const _id = shortid.generate();
- return {
- _id,
- ...item
- };
- });
-}
-
-function getColumns(data) {
- const columns = [];
- const sample = data[0];
- for (let key in sample) {
- if (key === "_id") continue;
- columns.push({
- accessor: key,
- Header: key
- });
- }
- return columns;
-}
-
-function getNodes(data, node = []) {
- data.forEach(item => {
- if (item.hasOwnProperty("_subRows") && item._subRows) {
- node = getNodes(item._subRows, node);
- } else {
- node.push(item._original);
- }
- });
- return node;
-}
-
-export class ComponentTest extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: null,
- columns: null,
- selection: [],
- selectAll: false,
- selectType: "checkbox"
- };
- }
- componentDidMount() {
- getData().then(data => {
- const columns = getColumns(data);
- const pivotBy = ["state", "post"];
- this.setState({ data, columns, pivotBy });
- });
- }
- toggleSelection = (key, shift, row) => {
- /*
- Implementation of how to manage the selection state is up to the developer.
- This implementation uses an array stored in the component state.
- Other implementations could use object keys, a Javascript Set, or Redux... etc.
- */
- // start off with the existing state
- if (this.state.selectType === "radio") {
- let selection = [];
- if (selection.indexOf(key) < 0) selection.push(key);
- this.setState({ selection });
- } else {
- let selection = [...this.state.selection];
- const keyIndex = selection.indexOf(key);
- // check to see if the key exists
- if (keyIndex >= 0) {
- // it does exist so we will remove it using destructing
- selection = [
- ...selection.slice(0, keyIndex),
- ...selection.slice(keyIndex + 1)
- ];
- } else {
- // it does not exist so add it
- selection.push(key);
- }
- // update the state
- this.setState({ selection });
- }
- };
- toggleAll = () => {
- /*
- 'toggleAll' is a tricky concept with any filterable table
- do you just select ALL the records that are in your data?
- OR
- do you only select ALL the records that are in the current filtered data?
-
- The latter makes more sense because 'selection' is a visual thing for the user.
- This is especially true if you are going to implement a set of external functions
- that act on the selected information (you would not want to DELETE the wrong thing!).
-
- So, to that end, access to the internals of ReactTable are required to get what is
- currently visible in the table (either on the current page or any other page).
-
- The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
- ReactTable and then get the internal state and the 'sortedData'.
- That can then be iterrated to get all the currently visible records and set
- the selection state.
- */
- const selectAll = this.state.selectAll ? false : true;
- const selection = [];
- if (selectAll) {
- // we need to get at the internals of ReactTable
- const wrappedInstance = this.selectTable.getWrappedInstance();
- // the 'sortedData' property contains the currently accessible records based on the filter and sort
- const currentRecords = wrappedInstance.getResolvedState().sortedData;
- // we need to get all the 'real' (original) records out to get at their IDs
- const nodes = getNodes(currentRecords);
- // we just push all the IDs onto the selection array
- nodes.forEach(item => {
- selection.push(item._id);
- });
- }
- this.setState({ selectAll, selection });
- };
- isSelected = key => {
- /*
- Instead of passing our external selection state we provide an 'isSelected'
- callback and detect the selection state ourselves. This allows any implementation
- for selection (either an array, object keys, or even a Javascript Set object).
- */
- return this.state.selection.includes(key);
- };
- logSelection = () => {
- console.log("selection:", this.state.selection);
- };
- toggleType = () => {
- this.setState({
- selectType: this.state.selectType === "radio" ? "checkbox" : "radio",
- selection: [],
- selectAll: false
- });
- };
- toggleTree = () => {
- if (this.state.pivotBy.length) {
- this.setState({ pivotBy: [], expanded: {} });
- } else {
- this.setState({ pivotBy: ["state", "post"], expanded: {} });
- }
- };
- onExpandedChange = expanded => {
- this.setState({ expanded });
- };
- render() {
- const {
- toggleSelection,
- toggleAll,
- isSelected,
- logSelection,
- toggleType,
- toggleTree,
- onExpandedChange
- } = this;
- const {
- data,
- columns,
- selectAll,
- selectType,
- pivotBy,
- expanded
- } = this.state;
- const extraProps = {
- selectAll,
- isSelected,
- toggleAll,
- toggleSelection,
- selectType,
- pivotBy,
- expanded,
- onExpandedChange,
- pageSize: 5
- };
- return (
-
-
react-table - Select Tree Table
-
- This example combines two HOCs (the TreeTable and the SelectTable) to
- make a composite component.
-
-
We'll call it SelectTreeTable!
-
Here is what the buttons do:
-
-
- Toggle Tree: enables or disabled the pivotBy on the
- table.
-
-
- Select Type: changes from 'checkbox' to 'radio' and
- back again.
-
-
- Log Selection to Console: open your console to see
- what has been selected.
-
-
-
- NOTE: the selection is maintained when toggling the
- tree on and off but is cleared when switching between select types
- (radio, checkbox).
-
-
- Toggle Tree [{pivotBy && pivotBy.length ? pivotBy.join(", ") : ""}]
-
-
- Select Type: {selectType}
-
-
Log Selection to Console
- {` (${this.state.selection.length}) selected`}
- {data ? (
-
(this.selectTable = r)}
- className="-striped -highlight"
- freezeWhenExpanded={true}
- {...extraProps}
- />
- ) : null}
-
-
react-table - Tree Table
- {data ? (
- (this.reactTable = r)}
- className="-striped -highlight"
- defaultPageSize={5}
- {...extraProps}
- />
- ) : null}
-
- );
- }
-}
-
-export default ComponentTest;
diff --git a/docs/src/examples/treetable/treeTableHOC.js b/docs/src/examples/treetable/treeTableHOC.js
deleted file mode 100644
index 6713383..0000000
--- a/docs/src/examples/treetable/treeTableHOC.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-
-export default Component => {
- const wrapper = componentProps => {
- const TrComponent = props => {
- const { ri, ...rest } = props;
- if (ri && ri.groupedByPivot) {
- const cell = props.children[ri.level];
-
- cell.props.style.flex = "unset";
- cell.props.style.width = "100%";
- cell.props.style.maxWidth = "unset";
- cell.props.style.paddingLeft = `${componentProps.treeTableIndent *
- ri.level}px`;
- cell.props.style.backgroundColor = "#DDD";
- cell.props.style.borderBottom = "1px solid rgba(128,128,128,0.2)";
-
- return {cell}
;
- }
- return
-
- );
- }
- componentDidMount() {
- global.Prism && global.Prism.highlightAll();
- }
-}
diff --git a/docs/src/stories/Readme.js b/docs/src/stories/Readme.js
deleted file mode 100644
index 5358fbe..0000000
--- a/docs/src/stories/Readme.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable import/no-webpack-loader-syntax */
-import React from "react";
-import marked from "marked";
-//
-import Readme from "!raw!../../../README.md";
-import "github-markdown-css/github-markdown.css";
-import "./utils/prism.js";
-
-export default class Story extends React.Component {
- render() {
- return (
-
-
- );
- }
- componentDidMount() {
- global.Prism && global.Prism.highlightAll();
- }
-}
diff --git a/docs/src/stories/test.js b/docs/src/stories/test.js
deleted file mode 100644
index aaa1bee..0000000
--- a/docs/src/stories/test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-import ReactTable from "../../../lib/index";
-import "../../../react-table.css";
-
-const data = [
- { one: "1.1", two: "1.2" },
- { one: "2.1", two: "2.2" },
- { one: "3.1", two: "3.2" },
- { one: "4.1", two: "4.2" }
-];
-
-const columns = [
- { accessor: "one", Header: "One" },
- { accessor: "two", Header: "Two" }
-];
-
-export default class Story extends React.Component {
- render() {
- return (
-
- Test
-
- );
- }
-}
diff --git a/docs/src/stories/utils/prism.css b/docs/src/stories/utils/prism.css
deleted file mode 100644
index f308416..0000000
--- a/docs/src/stories/utils/prism.css
+++ /dev/null
@@ -1,138 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
- color: black;
- background: none;
- text-shadow: 0 1px white;
- font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
- text-align: left;
- white-space: pre;
- word-spacing: normal;
- word-break: normal;
- word-wrap: normal;
- line-height: 1.5;
-
- -moz-tab-size: 4;
- -o-tab-size: 4;
- tab-size: 4;
-
- -webkit-hyphens: none;
- -moz-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
- text-shadow: none;
- background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
- text-shadow: none;
- background: #b3d4fc;
-}
-
-@media print {
- code[class*="language-"],
- pre[class*="language-"] {
- text-shadow: none;
- }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
- padding: 1em;
- margin: .5em 0;
- overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
- background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
- padding: .1em;
- border-radius: .3em;
- white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
- color: slategray;
-}
-
-.token.punctuation {
- color: #999;
-}
-
-.namespace {
- opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
- color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
- color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
- color: #a67f59;
- background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
- color: #07a;
-}
-
-.token.function {
- color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
- color: #e90;
-}
-
-.token.important,
-.token.bold {
- font-weight: bold;
-}
-.token.italic {
- font-style: italic;
-}
-
-.token.entity {
- cursor: help;
-}
diff --git a/docs/src/stories/utils/prism.js b/docs/src/stories/utils/prism.js
deleted file mode 100644
index fb98fb0..0000000
--- a/docs/src/stories/utils/prism.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable */
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+jsx&plugins=line-highlight+line-numbers */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof window.WorkerGlobalScope&&self instanceof window.WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(c?b[1].length:0),_=b.index+b[0].length,A=m,P=y,j=r.length;j>A&&_>P;++A)P+=r[A].length,w>=P&&(++m,y=P);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,P),b.index-=y}if(b){c&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),S=[m,k];x&&S.push(x);var N=new a(l,g?n.tokenize(b,g):b,d,b,h);S.push(N),O&&S.push(O),Array.prototype.splice.apply(r,S)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
-!function(a){var e=a.util.clone(a.languages.javascript);a.languages.jsx=a.languages.extend("markup",e),a.languages.jsx.tag.pattern=/<\/?[\w\.:-]+\s*(?:\s+[\w\.:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+|(\{[\w\W]*?\})))?\s*)*\/?>/i,a.languages.jsx.tag.inside["attr-value"].pattern=/=[^\{](?:('|")[\w\W]*?(\1)|[^\s>]+)/i;var s=a.util.clone(a.languages.jsx);delete s.punctuation,s=a.languages.insertBefore("jsx","operator",{punctuation:/=(?={)|[{}[\];(),.:]/},{jsx:s}),a.languages.insertBefore("inside","attr-value",{script:{pattern:/=(\{(?:\{[^}]*\}|[^}])+\})/i,inside:s,alias:"language-javascript"}},a.languages.jsx.tag)}(Prism);
-!function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function t(e,t){return t=" "+t+" ",(" "+e.className+" ").replace(/[\n\t]/g," ").indexOf(t)>-1}function n(e,n,i){for(var o,a=n.replace(/\s+/g,"").split(","),l=+e.getAttribute("data-line-offset")||0,d=r()?parseInt:parseFloat,c=d(getComputedStyle(e).lineHeight),s=0;o=a[s++];){o=o.split("-");var u=+o[0],m=+o[1]||u,h=document.createElement("div");h.textContent=Array(m-u+2).join(" \n"),h.setAttribute("aria-hidden","true"),h.className=(i||"")+" line-highlight",t(e,"line-numbers")||(h.setAttribute("data-start",u),m>u&&h.setAttribute("data-end",m)),h.style.top=(u-l-1)*c+"px",t(e,"line-numbers")?e.appendChild(h):(e.querySelector("code")||e).appendChild(h)}}function i(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var i=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(i&&!document.getElementById(t)){var r=t.slice(0,t.lastIndexOf(".")),o=document.getElementById(r);o&&(o.hasAttribute("data-line")||o.setAttribute("data-line",""),n(o,i,"temporary "),document.querySelector(".temporary.line-highlight").scrollIntoView())}}if("undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector){var r=function(){var e;return function(){if("undefined"==typeof e){var t=document.createElement("div");t.style.fontSize="13px",t.style.lineHeight="1.5",t.style.padding=0,t.style.border=0,t.innerHTML="
- {children}
-
- ),
- TheadComponent: _.makeTemplateComponent('rt-thead', 'Thead'),
- TbodyComponent: _.makeTemplateComponent('rt-tbody', 'Tbody'),
- TrGroupComponent: ({ children, className, ...rest }) => (
-
- {children}
-
- ),
- TrComponent: ({ children, className, ...rest }) => (
-
- {children}
-
- ),
- ThComponent: ({
- toggleSort, className, children, ...rest
- }) => (
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events
- toggleSort && toggleSort(e)}
- role="columnheader"
- tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly
- {...rest}
- >
- {children}
-
- ),
- TdComponent: ({
- toggleSort, className, children, ...rest
- }) => (
-
- {children}
-
- ),
- TfootComponent: _.makeTemplateComponent('rt-tfoot', 'Tfoot'),
- FilterComponent: ({ filter, onChange, column }) => (
- •
- ),
- PivotValueComponent: ({ subRows, value }) => (
-
- {value} {subRows && `(${subRows.length})`}
-
- ),
- AggregatedComponent: ({ subRows, column }) => {
- const previewValues = subRows.filter(d => typeof d[column.id] !== 'undefined').map((row, i) => (
- // eslint-disable-next-line react/no-array-index-key
-
- {row[column.id]}
- {i < subRows.length - 1 ? ', ' : ''}
-
- ))
- return {previewValues}
- },
- PivotComponent: undefined, // this is a computed default generated using
- // the ExpanderComponent and PivotValueComponent at run-time in methods.js
- PaginationComponent: Pagination,
- PreviousComponent: undefined,
- NextComponent: undefined,
- LoadingComponent: ({
- className, loading, loadingText, ...rest
- }) => (
-
- ),
- NoDataComponent: _.makeTemplateComponent('rt-noData', 'NoData'),
- ResizerComponent: _.makeTemplateComponent('rt-resizer', 'Resizer'),
- PadRowComponent: () => ,
-}
diff --git a/src/hoc/README.md b/src/hoc/README.md
deleted file mode 100644
index c249bbb..0000000
--- a/src/hoc/README.md
+++ /dev/null
@@ -1,316 +0,0 @@
-
-
-
this.setState(p => { return { folded: newFolded } })}
- folded={this.state.folded}
- />
-}
-```
-#### Custom Components
- - FoldIconComponent: to render the Icon of buttons.
- - FoldButtonComponent: to render the folding buttons for each Column.
- With default rendering as below.
-
-```javascript
-const defaultFoldIconComponent = ({ collapsed }) => {
- //Render your Icon here
-}
-
-const defaultFoldButtonComponent = ({ header, collapsed, icon, onClick }) => {
- //Render your button here.
-}
-```
-
-### AdvancedExpandTable
-
-HOC which allows any Cell in the row to toggle the row's
-SubComponent (expand/collapse). Also allows the SubComponent to toggle itself. Technically supports toggling any row's SubComponent.
-
-These are the expand functions available to any SubComponent or Column Cell:
-
-```
-toggleRowSubComponent
-showRowSubComponent
-hideRowSubComponent
-```
-
-They are available through the `props.columnProps.rest` object.
-
-On any change to the props, the table will reset the expanded state.
-
-Accepts a onExpandedChange callback to be called whenever the table expanded state changes
-
-Note: only supports 1 level of nesting.
-
-Example usage in a Column Cell Renderer:
-
-```javascript
- Cell: props => {
- const {
- value
- columnProps: { rest: { showRowSubComponent } },
- nestingPath
- } = props;
- return (
-
- showRowSubComponent(nestingPath, e)}
- >
- {value}
-
-
- );
- }
-```
-
-Example usage in the ReactTable SubComponent (toggle itself):
-
-```javascript
- const AdvancedExpandReactTable = advancedExpandTableHOC(ReactTable);
-
-
- ...
- SubComponent={({ row, nestingPath, toggleRowSubComponent }) => {
- return (
-
- toggleRowSubComponent({ nestingPath }, e)}
- >
- {row.value}
-
-
- );
- }}
- />
-```
-
-Each Column Renderer (E.g. Cell ) gets the expand functions in its props and each SubComponent gets the expand functions in its props
-
-Expand functions takes the `nestingPath` or `rowInfo` given to each
-Column Renderer and SubComponent already by ReactTable.
-
-## HOC Guide for ReactTable
-
-There are a few rules required when writing a HOC for ReactTable (other than meeting the normal lint standards - which are
-still being developed).
-
-Firstly, there are issues with `ref` when you write a HOC. Consider a deeply nested component wrapped in multiple HOCs...
-
-A HOC in the middle of the chain requires access to the instance of the component it thinks it is wrapping but there is at
-least one other wrapper in the way. The challenge is: How do I get to the actual wrapped component?
-
-Each HOC is required to be a React Class so that a `ref` can be obtained against each component:
-
-```Javascript
- this.wrappedInstance = r} />
-```
-
-_NOTE:_ "Component" can also be the ` - No wrapped instance')
- if (this.wrappedInstance.getWrappedInstance) return this.wrappedInstance.getWrappedInstance()
- else return this.wrappedInstance
-}
-```
-
-Essentially this will walk down the chain (if there are chained HOCs) and stop when it gets to the end and return the wrapped instance.
-
-Finally, sometimes the chains need to be in a specific order to function correctly. It is not clear if this is just an architectural
-issue or if it would be better solved using a library like `recompose`. Anyone who is able to contribute a reliable solution to this
-is welcome to submit a PR.
diff --git a/src/hoc/advancedExpandTable/index.js b/src/hoc/advancedExpandTable/index.js
deleted file mode 100644
index 4162bd4..0000000
--- a/src/hoc/advancedExpandTable/index.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import set from 'lodash.set'
-import get from 'lodash.get'
-
-/*
- AvancedExpandTableHOC for ReactTable
-
- HOC which allows any Cell in the row to toggle the row's
- SubComponent. Also allows the SubComponent to toggle itself.
-
- Expand functions available to any SubComponent or Column Cell:
- toggleRowSubComponent
- showRowSubComponent
- hideRowSubComponent
-
- Each Column Renderer (E.g. Cell ) gets the expand functions in its props
- And Each SubComponent gets the expand functions in its props
-
- Expand functions takes the `rowInfo` given to each
- Column Renderer and SubComponent already by ReactTable.
-*/
-
-export const subComponentWithToggle = (SubComponent, expandFuncs) => props => (
-
-
- {icon}
-
- {!collapsed &&
{header}
}
-
(this.wrappedInstance = r)} />
- }
- }
-
- wrapper.displayName = 'RTFoldableTable'
- wrapper.defaultProps = {
- FoldIconComponent: defaultFoldIconComponent,
- FoldButtonComponent: defaultFoldButtonComponent,
- foldableOriginalKey: 'original_',
- FoldedColumn: {
- Cell: c => '',
- width: 30,
- sortable: false,
- resizable: false,
- filterable: false,
- },
- }
-
- return wrapper
-}
diff --git a/src/hoc/foldableTable/left.svg b/src/hoc/foldableTable/left.svg
deleted file mode 100644
index f0383f7..0000000
--- a/src/hoc/foldableTable/left.svg
+++ /dev/null
@@ -1 +0,0 @@
- (this.wrappedInstance = r)} />
- }
- }
-
- wrapper.displayName = 'RTSelectTable'
- wrapper.defaultProps = {
- keyField: '_id',
- isSelected: key => {
- console.log('No isSelected handler provided:', { key })
- },
- selectAll: false,
- toggleSelection: (key, shift, row) => {
- console.log('No toggleSelection handler provided:', { key, shift, row })
- },
- toggleAll: () => {
- console.log('No toggleAll handler provided.')
- },
- selectType: 'checkbox',
- SelectInputComponent: defaultSelectInputComponent,
- SelectAllInputComponent: defaultSelectInputComponent,
- }
-
- return wrapper
-}
diff --git a/src/hoc/treeTable/index.js b/src/hoc/treeTable/index.js
deleted file mode 100644
index 18e2086..0000000
--- a/src/hoc/treeTable/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable */
-
-import React from 'react'
-
-export default Component => {
- const wrapper = class RTTreeTable extends React.Component {
- constructor(props) {
- super(props)
- this.getWrappedInstance.bind(this)
- this.TrComponent.bind(this)
- this.getTrProps.bind(this)
- }
-
- // this is so we can expose the underlying ReactTable to get at the sortedData for selectAll
- getWrappedInstance = () => {
- if (!this.wrappedInstance) console.warn('RTTreeTable - No wrapped instance')
- if (this.wrappedInstance.getWrappedInstance) return this.wrappedInstance.getWrappedInstance()
- else return this.wrappedInstance
- }
-
- TrComponent = props => {
- const { ri, ...rest } = props
- if (ri && ri.groupedByPivot) {
- const cell = { ...props.children[ri.level] }
-
- cell.props.style.flex = 'unset'
- cell.props.style.width = '100%'
- cell.props.style.maxWidth = 'unset'
- cell.props.style.paddingLeft = `${this.props.treeTableIndent * ri.level}px`
- // cell.props.style.backgroundColor = '#DDD';
- cell.props.style.borderBottom = '1px solid rgba(128,128,128,0.2)'
-
- return (
-
- {cell}
-
- )
- }
- return (this.wrappedInstance = r)} />
- }
- }
- wrapper.displayName = 'RTTreeTable'
- wrapper.defaultProps = {
- treeTableIndent: 10,
- }
-
- return wrapper
-}
diff --git a/src/hooks/useAccessedRows.js b/src/hooks/useAccessedRows.js
new file mode 100755
index 0000000..3cff43e
--- /dev/null
+++ b/src/hooks/useAccessedRows.js
@@ -0,0 +1,41 @@
+import { useMemo } from 'react'
+
+export default function useAccessedRows ({
+ debug, data, columns, subRowsKey,
+}) {
+ return useMemo(
+ () => {
+ if (debug) console.info('getAccessedRows')
+
+ // Access the row's data
+ const accessRow = (data, i, depth = 0) => {
+ // Keep the original reference around
+ const original = data
+
+ // Process any subRows
+ const subRows = data[subRowsKey]
+ ? data[subRowsKey].map((d, i) => accessRow(d, i, depth + 1))
+ : undefined
+
+ const row = {
+ original,
+ index: i,
+ subRows,
+ depth,
+ }
+
+ // Create the cells and values
+ row.values = {}
+ columns.forEach(column => {
+ row.values[column.id] = column.accessor ? column.accessor(data) : undefined
+ })
+
+ return row
+ }
+
+ // Use the resolved data
+ return data.map((d, i) => accessRow(d, i))
+ },
+ [data, columns]
+ )
+}
diff --git a/src/hooks/useColumns.js b/src/hooks/useColumns.js
new file mode 100755
index 0000000..2d98ea3
--- /dev/null
+++ b/src/hooks/useColumns.js
@@ -0,0 +1,201 @@
+import { useMemo } from 'react'
+
+import { getFirstDefined, getBy } from '../utils'
+
+export default function useColumns ({
+ debug,
+ groupBy,
+ userColumns,
+ disableSorting,
+ disableGrouping,
+ disableFilters,
+}) {
+ return useMemo(
+ () => {
+ if (debug) console.info('getColumns')
+
+ // Decorate All the columns
+ const columnTree = decorateColumnTree(userColumns)
+
+ // Get the flat list of all columns
+ let columns = flattenBy(columnTree, 'columns')
+
+ columns = [
+ ...groupBy.map(g => columns.find(col => col.id === g)),
+ ...columns.filter(col => !groupBy.includes(col.id)),
+ ]
+
+ // Get headerGroups
+ const headerGroups = makeHeaderGroups(columns, findMaxDepth(columnTree))
+ const headers = flattenBy(headerGroups, 'headers')
+
+ return {
+ columns,
+ headerGroups,
+ headers,
+ }
+ },
+ [groupBy, userColumns]
+ )
+
+ // Find the depth of the columns
+ function findMaxDepth (columns, depth = 0) {
+ return columns.reduce((prev, curr) => {
+ if (curr.columns) {
+ return Math.max(prev, findMaxDepth(curr.columns, depth + 1))
+ }
+ return depth
+ }, 0)
+ }
+
+ function decorateColumn (column, parent) {
+ // First check for string accessor
+ let {
+ id, accessor, Header, canSortBy, canGroupBy, canFilter,
+ } = column
+
+ if (typeof accessor === 'string') {
+ id = id || accessor
+ const accessorString = accessor
+ accessor = row => getBy(row, accessorString)
+ }
+
+ const grouped = groupBy.includes(id)
+
+ canSortBy = accessor
+ ? getFirstDefined(canSortBy, disableSorting === true ? false : undefined, true)
+ : false
+ canGroupBy = accessor
+ ? getFirstDefined(canGroupBy, disableGrouping === true ? false : undefined, true)
+ : false
+ canFilter = accessor
+ ? getFirstDefined(canFilter, disableFilters === true ? false : undefined, true)
+ : false
+
+ if (!id && typeof Header === 'string') {
+ id = Header
+ }
+
+ if (!id) {
+ // Accessor, but no column id? This is bad.
+ console.error(column)
+ throw new Error('A column id is required!')
+ }
+
+ column = {
+ Header: '',
+ Cell: cell => cell.value,
+ show: true,
+ ...column,
+ grouped,
+ canSortBy,
+ canGroupBy,
+ canFilter,
+ id,
+ accessor,
+ parent,
+ }
+
+ column.Aggregated = column.Aggregated || column.Cell
+
+ return column
+ }
+
+ // Build the visible columns, headers and flat column list
+ function decorateColumnTree (columns, parent, depth = 0) {
+ return columns.map(column => {
+ column = decorateColumn(column, parent)
+ if (column.columns) {
+ column.columns = decorateColumnTree(column.columns, column, depth + 1)
+ }
+ return column
+ })
+ }
+
+ function flattenBy (columns, childKey) {
+ const flatColumns = []
+
+ const recurse = columns => {
+ columns.forEach(d => {
+ if (!d[childKey]) {
+ flatColumns.push(d)
+ } else {
+ recurse(d[childKey])
+ }
+ })
+ }
+
+ recurse(columns)
+
+ return flatColumns
+ }
+
+ // Build the header groups from the bottom up
+ function makeHeaderGroups (columns, maxDepth) {
+ const headerGroups = []
+
+ const removeChildColumns = column => {
+ delete column.columns
+ if (column.parent) {
+ removeChildColumns(column.parent)
+ }
+ }
+ columns.forEach(removeChildColumns)
+
+ const buildGroup = (columns, depth = 0) => {
+ const headerGroup = {
+ headers: [],
+ }
+
+ const parentColumns = []
+
+ const hasParents = columns.some(col => col.parent)
+
+ columns.forEach(column => {
+ const isFirst = !parentColumns.length
+ let latestParentColumn = [...parentColumns].reverse()[0]
+
+ // If the column has a parent, add it if necessary
+ if (column.parent) {
+ if (isFirst || latestParentColumn.originalID !== column.parent.id) {
+ parentColumns.push({
+ ...column.parent,
+ originalID: column.parent.id,
+ id: [column.parent.id, parentColumns.length].join('_'),
+ })
+ }
+ } else if (hasParents) {
+ // If other columns have parents, add a place holder if necessary
+ const placeholderColumn = decorateColumn({
+ originalID: [column.id, 'placeholder', maxDepth - depth].join('_'),
+ id: [column.id, 'placeholder', maxDepth - depth, parentColumns.length].join('_'),
+ })
+ if (isFirst || latestParentColumn.originalID !== placeholderColumn.originalID) {
+ parentColumns.push(placeholderColumn)
+ }
+ }
+
+ // Establish the new columns[] relationship on the parent
+ if (column.parent || hasParents) {
+ latestParentColumn = [...parentColumns].reverse()[0]
+ latestParentColumn.columns = latestParentColumn.columns || []
+ if (!latestParentColumn.columns.includes(column)) {
+ latestParentColumn.columns.push(column)
+ }
+ }
+
+ headerGroup.headers.push(column)
+ })
+
+ headerGroups.push(headerGroup)
+
+ if (parentColumns.length) {
+ buildGroup(parentColumns)
+ }
+ }
+
+ buildGroup(columns)
+
+ return headerGroups.reverse()
+ }
+}
diff --git a/src/hooks/useControlledState.js b/src/hooks/useControlledState.js
new file mode 100755
index 0000000..ad3ef5b
--- /dev/null
+++ b/src/hooks/useControlledState.js
@@ -0,0 +1,24 @@
+const mergeStateAndProps = (state, defaults, props) => {
+ Object.keys(props).forEach(key => {
+ if (typeof props[key] !== 'undefined') {
+ state[key] = props[key]
+ }
+ })
+
+ Object.keys(defaults).forEach(key => {
+ if (typeof state[key] === 'undefined') {
+ state[key] = defaults[key]
+ }
+ })
+
+ return state
+}
+
+export default function useControlledState ([userState, userSetState], defaults, props) {
+ const state = mergeStateAndProps(userState, defaults, props)
+
+ const setState = (updater, type) =>
+ userSetState(old => updater(mergeStateAndProps(old, defaults, props)), type)
+
+ return [state, setState]
+}
diff --git a/src/hooks/useExpandedRows.js b/src/hooks/useExpandedRows.js
new file mode 100755
index 0000000..3236f84
--- /dev/null
+++ b/src/hooks/useExpandedRows.js
@@ -0,0 +1,55 @@
+import { useMemo, useEffect } from 'react'
+
+import { getBy } from '../utils'
+
+export default function useExpandedRows ({
+ debug,
+ expanded,
+ expandedKey,
+ columns,
+ rows,
+ setState,
+ actions,
+}) {
+ return useMemo(
+ () => {
+ if (debug) console.info('getExpandedRows')
+
+ const expandedRows = []
+
+ // Here we do some mutation, but it's the last stage in the
+ // immutable process so this is safe
+ const handleRow = (row, index, depth = 0, parentPath = []) => {
+ // Compute some final state for the row
+ const path = [...parentPath, index]
+
+ row.path = path
+ row.depth = depth
+
+ row.isExpanded = (row.original && row.original[expandedKey]) || getBy(expanded, path)
+
+ row.cells = columns.map(column => {
+ const cell = {
+ column,
+ row,
+ state: null,
+ value: row.values[column.id],
+ }
+
+ return cell
+ })
+
+ expandedRows.push(row)
+
+ if (row.isExpanded && row.subRows && row.subRows.length) {
+ row.subRows.forEach((row, i) => handleRow(row, i, depth + 1, path))
+ }
+ }
+
+ rows.forEach((row, i) => handleRow(row, i))
+
+ return expandedRows
+ },
+ [rows, expanded, columns]
+ )
+}
diff --git a/src/hooks/useFilteredRows.js b/src/hooks/useFilteredRows.js
new file mode 100755
index 0000000..1076303
--- /dev/null
+++ b/src/hooks/useFilteredRows.js
@@ -0,0 +1,67 @@
+import { useMemo } from 'react'
+
+export default function useFilteredRows ({
+ debug,
+ filters,
+ rows,
+ columns,
+ filterFn,
+ manualFilters,
+}) {
+ return useMemo(
+ () => {
+ if (manualFilters || !Object.keys(filters).length) {
+ return rows
+ }
+
+ if (debug) console.info('getFilteredRows')
+
+ // Filters top level and nested rows
+ const filterRows = rows => {
+ let filteredRows = rows
+
+ filteredRows = Object.entries(filters).reduce((filteredSoFar, [columnID, filterValue]) => {
+ // Find the filters column
+ const column = columns.find(d => d.id === columnID)
+
+ // Don't filter hidden columns or columns that have had their filters disabled
+ if (!column || column.filterable === false) {
+ return filteredSoFar
+ }
+
+ const filterMethod = column.filterMethod || filterFn
+
+ // If 'filterAll' is set to true, pass the entire dataset to the filter method
+ if (column.filterAll) {
+ return filterMethod(filteredSoFar, columnID, filterValue, column)
+ }
+ return filteredSoFar.filter(row => filterMethod(row, columnID, filterValue, column))
+ }, rows)
+
+ // Apply the filter to any subRows
+ filteredRows = filteredRows.map(row => {
+ if (!row.subRows) {
+ return row
+ }
+ return {
+ ...row,
+ subRows: filterRows(row.subRows),
+ }
+ })
+
+ // then filter any rows without subcolumns because it would be strange to show
+ filteredRows = filteredRows.filter(row => {
+ if (!row.subRows) {
+ return true
+ }
+ return row.subRows.length > 0
+ })
+
+ return filteredRows
+ }
+
+ return filterRows(rows)
+ },
+ [rows, filters, manualFilters]
+ )
+}
diff --git a/src/hooks/useGroupedRows.js b/src/hooks/useGroupedRows.js
new file mode 100755
index 0000000..afd5dcc
--- /dev/null
+++ b/src/hooks/useGroupedRows.js
@@ -0,0 +1,77 @@
+import { useMemo } from 'react'
+
+import * as aggregations from '../aggregations'
+
+export default function useGroupedRows ({
+ debug,
+ groupBy,
+ rows,
+ columns,
+ groupByFn,
+ manualGroupBy,
+ userAggregations,
+}) {
+ return useMemo(
+ () => {
+ if (manualGroupBy || !groupBy.length) {
+ return rows
+ }
+ if (debug) console.info('getGroupedRows')
+ // Find the columns that can or are aggregating
+
+ // Uses each column to aggregate rows into a single value
+ const aggregateRowsToValues = rows => {
+ const values = {}
+ columns.forEach(column => {
+ const columnValues = rows.map(d => d.values[column.id])
+ const aggregate =
+ userAggregations[column.aggregate] || aggregations[column.aggregate] || column.aggregate
+ if (typeof aggregate === 'function') {
+ values[column.id] = aggregate(columnValues, rows)
+ } else if (aggregate) {
+ throw new Error(
+ `Invalid aggregate "${aggregate}" passed to column with ID: "${column.id}"`
+ )
+ } else {
+ values[column.id] = columnValues[0]
+ }
+ })
+ return values
+ }
+
+ // Recursively group the data
+ const groupRecursively = (rows, groupBy, depth = 0) => {
+ // This is the last level, just return the rows
+ if (depth >= groupBy.length) {
+ return rows
+ }
+
+ // Group the rows together for this level
+ const groupedRows = Object.entries(groupByFn(rows, groupBy[depth])).map(
+ ([groupByVal, subRows], index) => {
+ // Recurse to sub rows before aggregation
+ subRows = groupRecursively(subRows, groupBy, depth + 1)
+
+ const values = aggregateRowsToValues(subRows)
+
+ const row = {
+ groupByID: groupBy[depth],
+ groupByVal,
+ values,
+ subRows,
+ depth,
+ index,
+ }
+ return row
+ }
+ )
+
+ return groupedRows
+ }
+
+ // Assign the new data
+ return groupRecursively(rows, groupBy)
+ },
+ [rows, groupBy, columns, manualGroupBy]
+ )
+}
diff --git a/src/hooks/useSortedRows.js b/src/hooks/useSortedRows.js
new file mode 100755
index 0000000..9dcf1fd
--- /dev/null
+++ b/src/hooks/useSortedRows.js
@@ -0,0 +1,60 @@
+import { useMemo } from 'react'
+
+export default function useSortedRows ({
+ debug,
+ sortBy,
+ rows,
+ columns,
+ orderByFn,
+ sortByFn,
+ manualSorting,
+}) {
+ return useMemo(
+ () => {
+ if (manualSorting || !sortBy.length) {
+ return rows
+ }
+ if (debug) console.info('getSortedRows')
+
+ const sortMethodsByColumnID = {}
+
+ columns
+ .filter(col => col.sortMethod)
+ .forEach(col => {
+ sortMethodsByColumnID[col.id] = col.sortMethod
+ })
+
+ const sortData = rows => {
+ // Use the orderByFn to compose multiple sortBy's together.
+ // This will also perform a stable sorting using the row index
+ // if needed.
+ const sortedData = orderByFn(
+ rows,
+ sortBy.map(sort => {
+ // Support custom sorting methods for each column
+ const columnSortBy = sortMethodsByColumnID[sort.id]
+
+ // Return the correct sortFn
+ return (a, b) =>
+ (columnSortBy || sortByFn)(a.values[sort.id], b.values[sort.id], sort.desc)
+ }),
+ // Map the directions
+ sortBy.map(d => !d.desc)
+ )
+
+ // TODO: this should be optimized. Not good to loop again
+ sortedData.forEach(row => {
+ if (!row.subRows) {
+ return
+ }
+ row.subRows = sortData(row.subRows)
+ })
+
+ return sortedData
+ }
+
+ return sortData(rows)
+ },
+ [rows, columns, sortBy, manualSorting]
+ )
+}
diff --git a/src/hooks/useTableMethods.js b/src/hooks/useTableMethods.js
new file mode 100755
index 0000000..6a992c8
--- /dev/null
+++ b/src/hooks/useTableMethods.js
@@ -0,0 +1,156 @@
+import { getBy, setBy, getFirstDefined } from '../utils'
+
+export default function useTableMethods ({
+ debug,
+ setState,
+ actions,
+ groupBy,
+ columns,
+ defaultSortDesc,
+ filters,
+}) {
+ const toggleExpandedByPath = (path, set) =>
+ setState(old => {
+ const { expanded } = old
+ const existing = getBy(expanded, path)
+ set = getFirstDefined(set, !existing)
+ return {
+ ...old,
+ expanded: setBy(expanded, path, set),
+ }
+ }, actions.toggleExpanded)
+
+ // Updates sorting based on a columnID, desc flag and multi flag
+ const toggleSortByID = (columnID, desc, multi) =>
+ setState(old => {
+ const { sortBy } = old
+
+ // Find the column for this columnID
+ const column = columns.find(d => d.id === columnID)
+ const resolvedDefaultSortDesc = getFirstDefined(column.defaultSortDesc, defaultSortDesc)
+
+ // Find any existing sortBy for this column
+ const existingSortBy = sortBy.find(d => d.id === columnID)
+ const hasDescDefined = typeof desc !== 'undefined' && desc !== null
+
+ let newSortBy = []
+
+ // What should we do with this filter?
+ let action
+
+ if (!multi) {
+ if (sortBy.length <= 1 && existingSortBy) {
+ if (existingSortBy.desc) {
+ action = 'remove'
+ } else {
+ action = 'toggle'
+ }
+ } else {
+ action = 'replace'
+ }
+ } else if (!existingSortBy) {
+ action = 'add'
+ } else if (hasDescDefined) {
+ action = 'set'
+ } else {
+ action = 'toggle'
+ }
+
+ if (action === 'replace') {
+ newSortBy = [
+ {
+ id: columnID,
+ desc: hasDescDefined ? desc : resolvedDefaultSortDesc,
+ },
+ ]
+ } else if (action === 'add') {
+ newSortBy = [
+ ...sortBy,
+ {
+ id: columnID,
+ desc: hasDescDefined ? desc : resolvedDefaultSortDesc,
+ },
+ ]
+ } else if (action === 'set') {
+ newSortBy = sortBy.map(d => {
+ if (d.id === columnID) {
+ return {
+ ...d,
+ desc,
+ }
+ }
+ return d
+ })
+ } else if (action === 'toggle') {
+ newSortBy = sortBy.map(d => {
+ if (d.id === columnID) {
+ return {
+ ...d,
+ desc: !existingSortBy.desc,
+ }
+ }
+ return d
+ })
+ } else if (action === 'remove') {
+ newSortBy = []
+ }
+
+ return {
+ ...old,
+ sortBy: newSortBy,
+ }
+ }, actions.sortByChange)
+
+ const toggleGroupBy = (id, toggle) =>
+ setState(old => {
+ const resolvedToggle = typeof set !== 'undefined' ? toggle : !groupBy.includes(id)
+ if (resolvedToggle) {
+ return {
+ ...old,
+ groupBy: [...groupBy, id],
+ }
+ }
+ return {
+ ...old,
+ groupBy: groupBy.filter(d => d !== id),
+ }
+ }, actions.toggleGroupBy)
+
+ const setFilter = (id, val) =>
+ setState(old => {
+ if (typeof val === 'undefined') {
+ const { [id]: prev, ...rest } = filters
+ return {
+ ...old,
+ filters: {
+ ...rest,
+ },
+ }
+ }
+
+ return {
+ ...old,
+ filters: {
+ ...filters,
+ [id]: val,
+ },
+ }
+ }, actions.setFilter)
+
+ const setAllFilters = filters =>
+ setState(
+ old => ({
+ ...old,
+ filters,
+ }),
+ actions.setAllFilters
+ )
+
+ return {
+ toggleExpandedByPath,
+ toggleSortByID,
+ toggleGroupBy,
+ setFilter,
+ setAllFilters,
+ }
+}
diff --git a/src/index.js b/src/index.js
old mode 100644
new mode 100755
index 91b25b9..ec33283
--- a/src/index.js
+++ b/src/index.js
@@ -1,868 +1,11 @@
-import React, { Component } from 'react'
-import classnames from 'classnames'
-//
-import _ from './utils'
-import Lifecycle from './lifecycle'
-import Methods from './methods'
-import defaultProps from './defaultProps'
-import propTypes from './propTypes'
-
-export const ReactTableDefaults = defaultProps
-
-export default class ReactTable extends Methods(Lifecycle(Component)) {
- static propTypes = propTypes
- static defaultProps = defaultProps
-
- constructor (props) {
- super()
-
- this.getResolvedState = this.getResolvedState.bind(this)
- this.getDataModel = this.getDataModel.bind(this)
- this.getSortedData = this.getSortedData.bind(this)
- this.fireFetchData = this.fireFetchData.bind(this)
- this.getPropOrState = this.getPropOrState.bind(this)
- this.getStateOrProp = this.getStateOrProp.bind(this)
- this.filterData = this.filterData.bind(this)
- this.sortData = this.sortData.bind(this)
- this.getMinRows = this.getMinRows.bind(this)
- this.onPageChange = this.onPageChange.bind(this)
- this.onPageSizeChange = this.onPageSizeChange.bind(this)
- this.sortColumn = this.sortColumn.bind(this)
- this.filterColumn = this.filterColumn.bind(this)
- this.resizeColumnStart = this.resizeColumnStart.bind(this)
- this.resizeColumnEnd = this.resizeColumnEnd.bind(this)
- this.resizeColumnMoving = this.resizeColumnMoving.bind(this)
-
- this.state = {
- page: props.defaultPage,
- pageSize: props.defaultPageSize,
- sorted: props.defaultSorted,
- expanded: props.defaultExpanded,
- filtered: props.defaultFiltered,
- resized: props.defaultResized,
- currentlyResizing: false,
- skipNextSort: false,
- }
- }
-
- render () {
- const resolvedState = this.getResolvedState()
- const {
- children,
- className,
- style,
- getProps,
- getTableProps,
- getTheadGroupProps,
- getTheadGroupTrProps,
- getTheadGroupThProps,
- getTheadProps,
- getTheadTrProps,
- getTheadThProps,
- getTheadFilterProps,
- getTheadFilterTrProps,
- getTheadFilterThProps,
- getTbodyProps,
- getTrGroupProps,
- getTrProps,
- getTdProps,
- getTfootProps,
- getTfootTrProps,
- getTfootTdProps,
- getPaginationProps,
- getLoadingProps,
- getNoDataProps,
- getResizerProps,
- showPagination,
- showPaginationTop,
- showPaginationBottom,
- manual,
- loadingText,
- noDataText,
- sortable,
- multiSort,
- resizable,
- filterable,
- // Pivoting State
- pivotIDKey,
- pivotValKey,
- pivotBy,
- subRowsKey,
- aggregatedKey,
- originalKey,
- indexKey,
- groupedByPivotKey,
- // State
- loading,
- pageSize,
- page,
- sorted,
- filtered,
- resized,
- expanded,
- pages,
- onExpandedChange,
- // Components
- TableComponent,
- TheadComponent,
- TbodyComponent,
- TrGroupComponent,
- TrComponent,
- ThComponent,
- TdComponent,
- TfootComponent,
- PaginationComponent,
- LoadingComponent,
- SubComponent,
- NoDataComponent,
- ResizerComponent,
- ExpanderComponent,
- PivotValueComponent,
- PivotComponent,
- AggregatedComponent,
- FilterComponent,
- PadRowComponent,
- // Data model
- resolvedData,
- visibleColumns,
- headerGroups,
- hasHeaderGroups,
- // Sorted Data
- sortedData,
- currentlyResizing,
- } = resolvedState
-
- // Pagination
- const startRow = pageSize * page
- const endRow = startRow + pageSize
- let pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
- const minRows = this.getMinRows()
- const padRows = _.range(Math.max(minRows - pageRows.length, 0))
-
- const hasColumnFooter = visibleColumns.some(d => d.Footer)
- const hasFilters = filterable || visibleColumns.some(d => d.filterable)
-
- const recurseRowsViewIndex = (rows, path = [], index = -1) => [
- rows.map((row, i) => {
- index += 1
- const rowWithViewIndex = {
- ...row,
- _viewIndex: index,
- }
- const newPath = path.concat([i])
- if (rowWithViewIndex[subRowsKey] && _.get(expanded, newPath)) {
- [rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(
- rowWithViewIndex[subRowsKey],
- newPath,
- index
- )
- }
- return rowWithViewIndex
- }),
- index,
- ];
- [pageRows] = recurseRowsViewIndex(pageRows)
-
- const canPrevious = page > 0
- const canNext = page + 1 < pages
-
- const rowMinWidth = _.sum(
- visibleColumns.map(d => {
- const resizedColumn = resized.find(x => x.id === d.id) || {}
- return _.getFirstDefined(resizedColumn.value, d.width, d.minWidth)
- })
- )
-
- let rowIndex = -1
-
- const finalState = {
- ...resolvedState,
- startRow,
- endRow,
- pageRows,
- minRows,
- padRows,
- hasColumnFooter,
- canPrevious,
- canNext,
- rowMinWidth,
- }
-
- const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
- const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
- const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
- const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
- const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
-
- // Visual Components
-
- const makeHeaderGroup = (column, i) => {
- const resizedValue = col => (resized.find(x => x.id === col.id) || {}).value
-
- const leafColumns = _.leaves(column, 'columns')
- const flex = _.sum(
- leafColumns.map(col => (col.width || resizedValue(col) ? 0 : col.minWidth))
- )
- const width = _.sum(
- leafColumns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.minWidth))
- )
- const maxWidth = _.sum(
- leafColumns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.maxWidth))
- )
-
- const theadGroupThProps = _.splitProps(
- getTheadGroupThProps(finalState, undefined, column, this)
- )
- const columnHeaderProps = _.splitProps(
- column.getHeaderProps(finalState, undefined, column, this)
- )
-
- const classes = [
- column.headerClassName,
- theadGroupThProps.className,
- columnHeaderProps.className,
- ]
-
- const styles = {
- ...column.headerStyle,
- ...theadGroupThProps.style,
- ...columnHeaderProps.style,
- }
-
- const rest = {
- ...theadGroupThProps.rest,
- ...columnHeaderProps.rest,
- }
-
- const flexStyles = {
- flex: `${flex} 0 auto`,
- width: _.asPx(width),
- maxWidth: _.asPx(maxWidth),
- }
-
- return (
-
- {_.normalizeComponent(column.Header, {
- data: sortedData,
- column,
- })}
-
- )
- }
-
- const makeHeaderGroups = (row, i) => {
- const theadGroupProps = _.splitProps(getTheadGroupProps(finalState, undefined, row, this))
- const theadGroupTrProps = _.splitProps(getTheadGroupTrProps(finalState, undefined, row, this))
- return (
-
-
- {row.map(makeHeaderGroup)}
-
-
- )
- }
-
- const makeHeader = (column, i) => {
- const resizedCol = resized.find(x => x.id === column.id) || {}
- const sort = sorted.find(d => d.id === column.id)
- const show = typeof column.show === 'function' ? column.show() : column.show
- const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
- const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
- const theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column, this))
- const columnHeaderProps = _.splitProps(
- column.getHeaderProps(finalState, undefined, column, this)
- )
-
- const classes = [column.headerClassName, theadThProps.className, columnHeaderProps.className]
-
- const styles = {
- ...column.headerStyle,
- ...theadThProps.style,
- ...columnHeaderProps.style,
- }
-
- const rest = {
- ...theadThProps.rest,
- ...columnHeaderProps.rest,
- }
-
- const isResizable = _.getFirstDefined(column.resizable, resizable, false)
- const resizer = isResizable ? (
- this.resizeColumnStart(e, column, false)}
- onTouchStart={e => this.resizeColumnStart(e, column, true)}
- {...getResizerProps('finalState', undefined, column, this)}
- />
- ) : null
-
- const isSortable = _.getFirstDefined(column.sortable, sortable, false)
-
- return (
- {
- if (isSortable) this.sortColumn(column, multiSort ? e.shiftKey : false)
- }}
- {...rest}
- >
-
- {_.normalizeComponent(column.Header, {
- data: sortedData,
- column,
- })}
-
- {resizer}
-
- )
- }
-
- const makeHeaders = () => {
- const theadProps = _.splitProps(getTheadProps(finalState, undefined, undefined, this))
- const theadTrProps = _.splitProps(getTheadTrProps(finalState, undefined, undefined, this))
- return (
-
-
- {visibleColumns.map(makeHeader)}
-
-
- )
- }
-
- const makeFilter = (column, i) => {
- const resizedCol = resized.find(x => x.id === column.id) || {}
- const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
- const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
- const theadFilterThProps = _.splitProps(
- getTheadFilterThProps(finalState, undefined, column, this)
- )
- const columnHeaderProps = _.splitProps(
- column.getHeaderProps(finalState, undefined, column, this)
- )
-
- const classes = [
- column.headerClassName,
- theadFilterThProps.className,
- columnHeaderProps.className,
- ]
-
- const styles = {
- ...column.headerStyle,
- ...theadFilterThProps.style,
- ...columnHeaderProps.style,
- }
-
- const rest = {
- ...theadFilterThProps.rest,
- ...columnHeaderProps.rest,
- }
-
- const filter = filtered.find(filter => filter.id === column.id)
-
- const ResolvedFilterComponent = column.Filter || FilterComponent
-
- const isFilterable = _.getFirstDefined(column.filterable, filterable, false)
-
- return (
-
- {isFilterable
- ? _.normalizeComponent(
- ResolvedFilterComponent,
- {
- column,
- filter,
- onChange: value => this.filterColumn(column, value),
- },
- defaultProps.column.Filter
- )
- : null}
-
- )
- }
-
- const makeFilters = () => {
- const theadFilterProps = _.splitProps(
- getTheadFilterProps(finalState, undefined, undefined, this)
- )
- const theadFilterTrProps = _.splitProps(
- getTheadFilterTrProps(finalState, undefined, undefined, this)
- )
- return (
-
-
- {visibleColumns.map(makeFilter)}
-
-
- )
- }
-
- const makePageRow = (row, i, path = []) => {
- const rowInfo = {
- original: row[originalKey],
- row,
- index: row[indexKey],
- viewIndex: (rowIndex += 1),
- pageSize,
- page,
- level: path.length,
- nestingPath: path.concat([i]),
- aggregated: row[aggregatedKey],
- groupedByPivot: row[groupedByPivotKey],
- subRows: row[subRowsKey],
- }
- const isExpanded = _.get(expanded, rowInfo.nestingPath)
- const trGroupProps = getTrGroupProps(finalState, rowInfo, undefined, this)
- const trProps = _.splitProps(getTrProps(finalState, rowInfo, undefined, this))
- return (
-
-
- {visibleColumns.map((column, i2) => {
- const resizedCol = resized.find(x => x.id === column.id) || {}
- const show = typeof column.show === 'function' ? column.show() : column.show
- const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
- const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
- const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column, this))
- const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column, this))
-
- const classes = [tdProps.className, column.className, columnProps.className]
-
- const styles = {
- ...tdProps.style,
- ...column.style,
- ...columnProps.style,
- }
-
- const cellInfo = {
- ...rowInfo,
- isExpanded,
- column: { ...column },
- value: rowInfo.row[column.id],
- pivoted: column.pivoted,
- expander: column.expander,
- resized,
- show,
- width,
- maxWidth,
- tdProps,
- columnProps,
- classes,
- styles,
- }
-
- const value = cellInfo.value
-
- let useOnExpanderClick
- let isBranch
- let isPreview
-
- const onExpanderClick = e => {
- let newExpanded = _.clone(expanded)
- if (isExpanded) {
- newExpanded = _.set(newExpanded, cellInfo.nestingPath, false)
- } else {
- newExpanded = _.set(newExpanded, cellInfo.nestingPath, {})
- }
-
- return this.setStateWithData(
- {
- expanded: newExpanded,
- },
- () => onExpandedChange && onExpandedChange(newExpanded, cellInfo.nestingPath, e)
- )
- }
-
- // Default to a standard cell
- let resolvedCell = _.normalizeComponent(column.Cell, cellInfo, value)
-
- // Resolve Renderers
- const ResolvedAggregatedComponent =
- column.Aggregated || (!column.aggregate ? AggregatedComponent : column.Cell)
- const ResolvedExpanderComponent = column.Expander || ExpanderComponent
- const ResolvedPivotValueComponent = column.PivotValue || PivotValueComponent
- const DefaultResolvedPivotComponent =
- PivotComponent ||
- (props => (
-
-
- ))
- const ResolvedPivotComponent = column.Pivot || DefaultResolvedPivotComponent
-
- // Is this cell expandable?
- if (cellInfo.pivoted || cellInfo.expander) {
- // Make it expandable by defualt
- cellInfo.expandable = true
- useOnExpanderClick = true
- // If pivoted, has no subRows, and does not have a subComponent,
- // do not make expandable
- if (cellInfo.pivoted && !cellInfo.subRows && !SubComponent) {
- cellInfo.expandable = false
- }
- }
-
- if (cellInfo.pivoted) {
- // Is this column a branch?
- isBranch = rowInfo.row[pivotIDKey] === column.id && cellInfo.subRows
- // Should this column be blank?
- isPreview =
- pivotBy.indexOf(column.id) > pivotBy.indexOf(rowInfo.row[pivotIDKey]) &&
- cellInfo.subRows
- // Pivot Cell Render Override
- if (isBranch) {
- // isPivot
- resolvedCell = _.normalizeComponent(
- ResolvedPivotComponent,
- {
- ...cellInfo,
- value: row[pivotValKey],
- },
- row[pivotValKey]
- )
- } else if (isPreview) {
- // Show the pivot preview
- resolvedCell = _.normalizeComponent(ResolvedAggregatedComponent, cellInfo, value)
- } else {
- resolvedCell = null
- }
- } else if (cellInfo.aggregated) {
- resolvedCell = _.normalizeComponent(ResolvedAggregatedComponent, cellInfo, value)
- }
-
- if (cellInfo.expander) {
- resolvedCell = _.normalizeComponent(
- ResolvedExpanderComponent,
- cellInfo,
- row[pivotValKey]
- )
- if (pivotBy) {
- if (cellInfo.groupedByPivot) {
- resolvedCell = null
- }
- if (!cellInfo.subRows && !SubComponent) {
- resolvedCell = null
- }
- }
- }
-
- const resolvedOnExpanderClick = useOnExpanderClick ? onExpanderClick : () => {}
-
- // If there are multiple onClick events, make sure they don't
- // override eachother. This should maybe be expanded to handle all
- // function attributes
- const interactionProps = {
- onClick: resolvedOnExpanderClick,
- }
-
- if (tdProps.rest.onClick) {
- interactionProps.onClick = e => {
- tdProps.rest.onClick(e, () => resolvedOnExpanderClick(e))
- }
- }
-
- if (columnProps.rest.onClick) {
- interactionProps.onClick = e => {
- columnProps.rest.onClick(e, () => resolvedOnExpanderClick(e))
- }
- }
-
- // Return the cell
- return (
-
- {resolvedCell}
-
- )
- })}
-
- {rowInfo.subRows &&
- isExpanded &&
- rowInfo.subRows.map((d, i) => makePageRow(d, i, rowInfo.nestingPath))}
- {SubComponent &&
- !rowInfo.subRows &&
- isExpanded &&
- SubComponent(rowInfo, () => {
- const newExpanded = _.clone(expanded)
-
- _.set(newExpanded, rowInfo.nestingPath, false)
- })}
-
- )
- }
-
- const makePadColumn = (column, i) => {
- const resizedCol = resized.find(x => x.id === column.id) || {}
- const show = typeof column.show === 'function' ? column.show() : column.show
- const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
- const flex = width
- const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
- const tdProps = _.splitProps(getTdProps(finalState, undefined, column, this))
- const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
-
- const classes = [tdProps.className, column.className, columnProps.className]
-
- const styles = {
- ...tdProps.style,
- ...column.style,
- ...columnProps.style,
- }
-
- return (
-
- {_.normalizeComponent(PadRowComponent)}
-
- )
- }
-
- const makePadRow = (row, i) => {
- const trGroupProps = getTrGroupProps(finalState, undefined, undefined, this)
- const trProps = _.splitProps(getTrProps(finalState, undefined, undefined, this))
- return (
-
-
- {visibleColumns.map(makePadColumn)}
-
-
- )
- }
-
- const makeColumnFooter = (column, i) => {
- const resizedCol = resized.find(x => x.id === column.id) || {}
- const show = typeof column.show === 'function' ? column.show() : column.show
- const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
- const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
- const tFootTdProps = _.splitProps(getTfootTdProps(finalState, undefined, undefined, this))
- const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
- const columnFooterProps = _.splitProps(
- column.getFooterProps(finalState, undefined, column, this)
- )
-
- const classes = [
- tFootTdProps.className,
- column.className,
- columnProps.className,
- columnFooterProps.className,
- ]
-
- const styles = {
- ...tFootTdProps.style,
- ...column.style,
- ...columnProps.style,
- ...columnFooterProps.style,
- }
-
- return (
-
- {_.normalizeComponent(column.Footer, {
- data: sortedData,
- column,
- })}
-
- )
- }
-
- const makeColumnFooters = () => {
- const tFootProps = _.splitProps(getTfootProps(finalState, undefined, undefined, this))
- const tFootTrProps = _.splitProps(getTfootTrProps(finalState, undefined, undefined, this))
- return (
-
-
- {visibleColumns.map(makeColumnFooter)}
-
-
- )
- }
-
- const makePagination = isTop => {
- const paginationProps = _.splitProps(
- getPaginationProps(finalState, undefined, undefined, this)
- )
- return (
-
- {showPagination && showPaginationTop ? (
-
{makePagination(true)}
- ) : null}
-
- {hasHeaderGroups ? headerGroups.map(makeHeaderGroups) : null}
- {makeHeaders()}
- {hasFilters ? makeFilters() : null}
-
- {pageRows.map((d, i) => makePageRow(d, i))}
- {padRows.map(makePadRow)}
-
- {hasColumnFooter ? makeColumnFooters() : null}
-
- {showPagination && showPaginationBottom ? (
-
{makePagination(false)}
- ) : null}
- {!pageRows.length && (
-
{_.normalizeComponent(noDataText)}
- )}
-
-
Pivoted )
-
- let pivotColumnGroup = {
- Header: PivotGroupHeader,
- columns: pivotColumns.map(col => ({
- ...this.props.pivotDefaults,
- ...col,
- pivoted: true,
- })),
- }
-
- // Place the pivotColumns back into the visibleColumns
- if (pivotIndex >= 0) {
- pivotColumnGroup = {
- ...allVisibleColumns[pivotIndex],
- ...pivotColumnGroup,
- }
- allVisibleColumns.splice(pivotIndex, 1, pivotColumnGroup)
- } else {
- allVisibleColumns.unshift(pivotColumnGroup)
- }
- }
-
- // Build Visible Columns and Header Groups
- const allColumnHeaders = []
-
- const addHeader = column => {
- let level = 0
-
- // If this column has children, push them first and add this column to the next level
- if (column.columns) {
- const childLevels = column.columns.map(addHeader)
- level = Math.max(...childLevels) + 1
- }
-
- // Add spans above columns without parents (orphans) to fill the space above them
- if (allColumnHeaders.length <= level) allColumnHeaders.push([])
- if (level > 0) {
- // The spans need to contain the shifted headers as children. This finds all of the
- // columns in the lower level between the first child of this column and the last child
- // of the preceding column (if there is one)
- const lowerLevel = allColumnHeaders[level - 1]
- const precedingColumn = _.last(allColumnHeaders[level])
-
- const indexOfFirstChildInLowerLevel = lowerLevel.indexOf(column.columns[0])
- const indexAfterLastChildInPrecedingColumn = precedingColumn
- ? lowerLevel.indexOf(_.last(precedingColumn.columns)) + 1
- : 0
-
- // If there are ophans, add a span above them
- const orphans = lowerLevel.slice(
- indexAfterLastChildInPrecedingColumn,
- indexOfFirstChildInLowerLevel
- )
-
- if (orphans.length) {
- allColumnHeaders[level].push({
- ...this.props.column,
- columns: orphans,
- })
- }
- }
-
- allColumnHeaders[level].push(column)
-
- return level
- }
-
- allVisibleColumns.forEach(addHeader)
-
- // visibleColumns is an array containing column definitions for the bottom row of TH elements
- const visibleColumns = allColumnHeaders.shift()
- const headerGroups = allColumnHeaders.reverse()
-
- // Access the data
- const accessRow = (d, i, level = 0) => {
- const row = {
- [originalKey]: d,
- [indexKey]: i,
- [subRowsKey]: d[subRowsKey],
- [nestingLevelKey]: level,
- }
- allDecoratedColumns.forEach(column => {
- if (column.expander) return
- row[column.id] = column.accessor(d)
- })
- if (row[subRowsKey]) {
- row[subRowsKey] = row[subRowsKey].map((d, i) => accessRow(d, i, level + 1))
- }
- return row
- }
-
- // // If the data hasn't changed, just use the cached data
- let resolvedData = this.resolvedData
- // If the data has changed, run the data resolver and cache the result
- if (!this.resolvedData || dataChanged) {
- resolvedData = resolveData(data)
- this.resolvedData = resolvedData
- }
- // Use the resolved data
- resolvedData = resolvedData.map((d, i) => accessRow(d, i))
-
- // TODO: Make it possible to fabricate nested rows without pivoting
- const aggregatingColumns = visibleColumns.filter(d => !d.expander && d.aggregate)
-
- // If pivoting, recursively group the data
- const aggregate = rows => {
- const aggregationValues = {}
- aggregatingColumns.forEach(column => {
- const values = rows.map(d => d[column.id])
- aggregationValues[column.id] = column.aggregate(values, rows)
- })
- return aggregationValues
- }
- if (pivotBy.length) {
- const groupRecursively = (rows, keys, i = 0) => {
- // This is the last level, just return the rows
- if (i === keys.length) {
- return rows
- }
- // Group the rows together for this level
- let groupedRows = Object.entries(_.groupBy(rows, keys[i])).map(([key, value]) => ({
- [pivotIDKey]: keys[i],
- [pivotValKey]: key,
- [keys[i]]: key,
- [subRowsKey]: value,
- [nestingLevelKey]: i,
- [groupedByPivotKey]: true,
- }))
- // Recurse into the subRows
- groupedRows = groupedRows.map(rowGroup => {
- const subRows = groupRecursively(rowGroup[subRowsKey], keys, i + 1)
- return {
- ...rowGroup,
- [subRowsKey]: subRows,
- [aggregatedKey]: true,
- ...aggregate(subRows),
- }
- })
- return groupedRows
- }
- resolvedData = groupRecursively(resolvedData, pivotBy)
- }
-
- return {
- ...newState,
- resolvedData,
- visibleColumns,
- headerGroups,
- allDecoratedColumns,
- hasHeaderGroups,
- }
- }
-
- getSortedData (resolvedState) {
- const {
- manual,
- sorted,
- filtered,
- defaultFilterMethod,
- resolvedData,
- allDecoratedColumns,
- } = resolvedState
-
- const sortMethodsByColumnID = {}
-
- allDecoratedColumns.filter(col => col.sortMethod).forEach(col => {
- sortMethodsByColumnID[col.id] = col.sortMethod
- })
-
- // Resolve the data from either manual data or sorted data
- return {
- sortedData: manual
- ? resolvedData
- : this.sortData(
- this.filterData(resolvedData, filtered, defaultFilterMethod, allDecoratedColumns),
- sorted,
- sortMethodsByColumnID
- ),
- }
- }
-
- fireFetchData () {
- // determine the current state, preferring certain state values over props
- const currentState = {
- ...this.getResolvedState(),
- page: this.getStateOrProp('page'),
- pageSize: this.getStateOrProp('pageSize'),
- filter: this.getStateOrProp('filter'),
- }
-
- this.props.onFetchData(currentState, this)
- }
-
- getPropOrState (key) {
- return _.getFirstDefined(this.props[key], this.state[key])
- }
-
- getStateOrProp (key) {
- return _.getFirstDefined(this.state[key], this.props[key])
- }
-
- filterData (data, filtered, defaultFilterMethod, visibleColumns) {
- let filteredData = data
-
- if (filtered.length) {
- filteredData = filtered.reduce((filteredSoFar, nextFilter) => {
- const column = visibleColumns.find(x => x.id === nextFilter.id)
-
- // Don't filter hidden columns or columns that have had their filters disabled
- if (!column || column.filterable === false) {
- return filteredSoFar
- }
-
- const filterMethod = column.filterMethod || defaultFilterMethod
-
- // If 'filterAll' is set to true, pass the entire dataset to the filter method
- if (column.filterAll) {
- return filterMethod(nextFilter, filteredSoFar, column)
- }
- return filteredSoFar.filter(row => filterMethod(nextFilter, row, column))
- }, filteredData)
-
- // Apply the filter to the subrows if we are pivoting, and then
- // filter any rows without subcolumns because it would be strange to show
- filteredData = filteredData
- .map(row => {
- if (!row[this.props.subRowsKey]) {
- return row
- }
- return {
- ...row,
- [this.props.subRowsKey]: this.filterData(
- row[this.props.subRowsKey],
- filtered,
- defaultFilterMethod,
- visibleColumns
- ),
- }
- })
- .filter(row => {
- if (!row[this.props.subRowsKey]) {
- return true
- }
- return row[this.props.subRowsKey].length > 0
- })
- }
-
- return filteredData
- }
-
- sortData (data, sorted, sortMethodsByColumnID = {}) {
- if (!sorted.length) {
- return data
- }
-
- const sortedData = (this.props.orderByMethod || _.orderBy)(
- data,
- sorted.map(sort => {
- // Support custom sorting methods for each column
- if (sortMethodsByColumnID[sort.id]) {
- return (a, b) => sortMethodsByColumnID[sort.id](a[sort.id], b[sort.id], sort.desc)
- }
- return (a, b) => this.props.defaultSortMethod(a[sort.id], b[sort.id], sort.desc)
- }),
- sorted.map(d => !d.desc),
- this.props.indexKey
- )
-
- sortedData.forEach(row => {
- if (!row[this.props.subRowsKey]) {
- return
- }
- row[this.props.subRowsKey] = this.sortData(
- row[this.props.subRowsKey],
- sorted,
- sortMethodsByColumnID
- )
- })
-
- return sortedData
- }
-
- getMinRows () {
- return _.getFirstDefined(this.props.minRows, this.getStateOrProp('pageSize'))
- }
-
- // User actions
- onPageChange (page) {
- const { onPageChange, collapseOnPageChange } = this.props
-
- const newState = { page }
- if (collapseOnPageChange) {
- newState.expanded = {}
- }
- this.setStateWithData(newState, () => onPageChange && onPageChange(page))
- }
-
- onPageSizeChange (newPageSize) {
- const { onPageSizeChange } = this.props
- const { pageSize, page } = this.getResolvedState()
-
- // Normalize the page to display
- const currentRow = pageSize * page
- const newPage = Math.floor(currentRow / newPageSize)
-
- this.setStateWithData(
- {
- pageSize: newPageSize,
- page: newPage,
- },
- () => onPageSizeChange && onPageSizeChange(newPageSize, newPage)
- )
- }
-
- sortColumn (column, additive) {
- const { sorted, skipNextSort, defaultSortDesc } = this.getResolvedState()
-
- const firstSortDirection = Object.prototype.hasOwnProperty.call(column, 'defaultSortDesc')
- ? column.defaultSortDesc
- : defaultSortDesc
- const secondSortDirection = !firstSortDirection
-
- // we can't stop event propagation from the column resize move handlers
- // attached to the document because of react's synthetic events
- // so we have to prevent the sort function from actually sorting
- // if we click on the column resize element within a header.
- if (skipNextSort) {
- this.setStateWithData({
- skipNextSort: false,
- })
- return
- }
-
- const { onSortedChange } = this.props
-
- let newSorted = _.clone(sorted || []).map(d => {
- d.desc = _.isSortingDesc(d)
- return d
- })
- if (!_.isArray(column)) {
- // Single-Sort
- const existingIndex = newSorted.findIndex(d => d.id === column.id)
- if (existingIndex > -1) {
- const existing = newSorted[existingIndex]
- if (existing.desc === secondSortDirection) {
- if (additive) {
- newSorted.splice(existingIndex, 1)
- } else {
- existing.desc = firstSortDirection
- newSorted = [existing]
- }
- } else {
- existing.desc = secondSortDirection
- if (!additive) {
- newSorted = [existing]
- }
- }
- } else if (additive) {
- newSorted.push({
- id: column.id,
- desc: firstSortDirection,
- })
- } else {
- newSorted = [
- {
- id: column.id,
- desc: firstSortDirection,
- },
- ]
- }
- } else {
- // Multi-Sort
- const existingIndex = newSorted.findIndex(d => d.id === column[0].id)
- // Existing Sorted Column
- if (existingIndex > -1) {
- const existing = newSorted[existingIndex]
- if (existing.desc === secondSortDirection) {
- if (additive) {
- newSorted.splice(existingIndex, column.length)
- } else {
- column.forEach((d, i) => {
- newSorted[existingIndex + i].desc = firstSortDirection
- })
- }
- } else {
- column.forEach((d, i) => {
- newSorted[existingIndex + i].desc = secondSortDirection
- })
- }
- if (!additive) {
- newSorted = newSorted.slice(existingIndex, column.length)
- }
- // New Sort Column
- } else if (additive) {
- newSorted = newSorted.concat(
- column.map(d => ({
- id: d.id,
- desc: firstSortDirection,
- }))
- )
- } else {
- newSorted = column.map(d => ({
- id: d.id,
- desc: firstSortDirection,
- }))
- }
- }
-
- this.setStateWithData(
- {
- page: (!sorted.length && newSorted.length) || !additive ? 0 : this.state.page,
- sorted: newSorted,
- },
- () => onSortedChange && onSortedChange(newSorted, column, additive)
- )
- }
-
- filterColumn (column, value) {
- const { filtered } = this.getResolvedState()
- const { onFilteredChange } = this.props
-
- // Remove old filter first if it exists
- const newFiltering = (filtered || []).filter(x => x.id !== column.id)
-
- if (value !== '') {
- newFiltering.push({
- id: column.id,
- value,
- })
- }
-
- this.setStateWithData(
- {
- filtered: newFiltering,
- },
- () => onFilteredChange && onFilteredChange(newFiltering, column, value)
- )
- }
-
- resizeColumnStart (event, column, isTouch) {
- event.stopPropagation()
- const parentWidth = event.target.parentElement.getBoundingClientRect().width
-
- let pageX
- if (isTouch) {
- pageX = event.changedTouches[0].pageX
- } else {
- pageX = event.pageX
- }
-
- this.trapEvents = true
- this.setStateWithData(
- {
- currentlyResizing: {
- id: column.id,
- startX: pageX,
- parentWidth,
- },
- },
- () => {
- if (isTouch) {
- document.addEventListener('touchmove', this.resizeColumnMoving)
- document.addEventListener('touchcancel', this.resizeColumnEnd)
- document.addEventListener('touchend', this.resizeColumnEnd)
- } else {
- document.addEventListener('mousemove', this.resizeColumnMoving)
- document.addEventListener('mouseup', this.resizeColumnEnd)
- document.addEventListener('mouseleave', this.resizeColumnEnd)
- }
- }
- )
- }
-
- resizeColumnMoving (event) {
- event.stopPropagation()
- const { onResizedChange, column } = this.props
- const { resized, currentlyResizing, columns } = this.getResolvedState()
- const currentColumn = columns.find(c => c.accessor === currentlyResizing.id)
- const minResizeWidth = currentColumn ? currentColumn.minResizeWidth : column.minResizeWidth
-
- // Delete old value
- const newResized = resized.filter(x => x.id !== currentlyResizing.id)
-
- let pageX
-
- if (event.type === 'touchmove') {
- pageX = event.changedTouches[0].pageX
- } else if (event.type === 'mousemove') {
- pageX = event.pageX
- }
-
- const newWidth = Math.max(
- currentlyResizing.parentWidth + pageX - currentlyResizing.startX,
- minResizeWidth
- )
-
- newResized.push({
- id: currentlyResizing.id,
- value: newWidth,
- })
-
- this.setStateWithData(
- {
- resized: newResized,
- },
- () => onResizedChange && onResizedChange(newResized, event)
- )
- }
-
- resizeColumnEnd (event) {
- event.stopPropagation()
- const isTouch = event.type === 'touchend' || event.type === 'touchcancel'
-
- if (isTouch) {
- document.removeEventListener('touchmove', this.resizeColumnMoving)
- document.removeEventListener('touchcancel', this.resizeColumnEnd)
- document.removeEventListener('touchend', this.resizeColumnEnd)
- }
-
- // If its a touch event clear the mouse one's as well because sometimes
- // the mouseDown event gets called as well, but the mouseUp event doesn't
- document.removeEventListener('mousemove', this.resizeColumnMoving)
- document.removeEventListener('mouseup', this.resizeColumnEnd)
- document.removeEventListener('mouseleave', this.resizeColumnEnd)
-
- // The touch events don't propagate up to the sorting's onMouseDown event so
- // no need to prevent it from happening or else the first click after a touch
- // event resize will not sort the column.
- if (!isTouch) {
- this.setStateWithData({
- skipNextSort: true,
- currentlyResizing: false,
- })
- }
- }
- }
diff --git a/src/pagination.js b/src/pagination.js
deleted file mode 100644
index 6c1331d..0000000
--- a/src/pagination.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, { Component } from 'react'
-import classnames from 'classnames'
-
-const defaultButton = props => (
-
- {props.children}
-
-)
-
-export default class ReactTablePagination extends Component {
- static defaultProps = {
- PreviousComponent: defaultButton,
- NextComponent: defaultButton,
- renderPageJump: ({
- onChange, value, onBlur, onKeyPress, inputType, pageJumpText,
- }) => (
-
-
- ),
- renderCurrentPage: page => {page + 1} ,
- renderTotalPagesCount: pages => {pages || 1} ,
- renderPageSizeOptions: ({
- pageSize,
- pageSizeOptions,
- rowsSelectorText,
- onPageSizeChange,
- rowsText,
- }) => (
-
- onPageSizeChange(Number(e.target.value))}
- value={pageSize}
- >
- {pageSizeOptions.map((option, i) => (
- // eslint-disable-next-line react/no-array-index-key
-
- {`${option} ${rowsText}`}
-
- ))}
-
-
- ),
- }
-
- constructor (props) {
- super(props)
-
- this.getSafePage = this.getSafePage.bind(this)
- this.changePage = this.changePage.bind(this)
- this.applyPage = this.applyPage.bind(this)
-
- this.state = {
- page: props.page,
- }
- }
-
- componentWillReceiveProps (nextProps) {
- if (this.props.page !== nextProps.page) {
- this.setState({ page: nextProps.page })
- }
- }
-
- getSafePage (page) {
- if (Number.isNaN(page)) {
- page = this.props.page
- }
- return Math.min(Math.max(page, 0), this.props.pages - 1)
- }
-
- changePage (page) {
- page = this.getSafePage(page)
- this.setState({ page })
- if (this.props.page !== page) {
- this.props.onPageChange(page)
- }
- }
-
- applyPage (e) {
- if (e) {
- e.preventDefault()
- }
- const page = this.state.page
- this.changePage(page === '' ? this.props.page : page)
- }
-
- getPageJumpProperties () {
- return {
- onKeyPress: e => {
- if (e.which === 13 || e.keyCode === 13) {
- this.applyPage()
- }
- },
- onBlur: this.applyPage,
- value: this.state.page === '' ? '' : this.state.page + 1,
- onChange: e => {
- const val = e.target.value
- const page = val - 1
- if (val === '') {
- return this.setState({ page: val })
- }
- this.setState({ page: this.getSafePage(page) })
- },
- inputType: this.state.page === '' ? 'text' : 'number',
- pageJumpText: this.props.pageJumpText,
- }
- }
-
- render () {
- const {
- // Computed
- pages,
- // Props
- page,
- showPageSizeOptions,
- pageSizeOptions,
- pageSize,
- showPageJump,
- canPrevious,
- canNext,
- onPageSizeChange,
- className,
- PreviousComponent,
- NextComponent,
- renderPageJump,
- renderCurrentPage,
- renderTotalPagesCount,
- renderPageSizeOptions,
- } = this.props
-
- return (
-
-
-
{
- if (!canPrevious) return
- this.changePage(page - 1)
- }}
- disabled={!canPrevious}
- >
- {this.props.previousText}
-
-
-
-
- {this.props.pageText}{' '}
- {showPageJump ? renderPageJump(this.getPageJumpProperties()) : renderCurrentPage(page)}{' '}
- {this.props.ofText} {renderTotalPagesCount(pages)}
-
- {showPageSizeOptions &&
- renderPageSizeOptions({
- pageSize,
- rowsSelectorText: this.props.rowsSelectorText,
- pageSizeOptions,
- onPageSizeChange,
- rowsText: this.props.rowsText,
- })}
-
-
- {
- if (!canNext) return
- this.changePage(page + 1)
- }}
- disabled={!canNext}
- >
- {this.props.nextText}
-
-
-
- {children}
-
- )
- cmp.displayName = displayName
- return cmp
-}
-
-function groupBy (xs, key) {
- return xs.reduce((rv, x, i) => {
- const resKey = typeof key === 'function' ? key(x, i) : x[key]
- rv[resKey] = isArray(rv[resKey]) ? rv[resKey] : []
- rv[resKey].push(x)
- return rv
+export function defaultGroupByFn (rows, grouper) {
+ return rows.reduce((prev, row, i) => {
+ const resKey = typeof grouper === 'function' ? grouper(row.values, i) : row.values[grouper]
+ prev[resKey] = Array.isArray(prev[resKey]) ? prev[resKey] : []
+ prev[resKey].push(row)
+ return prev
}, {})
}
-function asPx (value) {
- value = Number(value)
- return Number.isNaN(value) ? null : `${value}px`
+export function defaultFilterFn (row, id, value, column) {
+ return row.values[id] !== undefined
+ ? String(row.values[id])
+ .toLowerCase()
+ .includes(String(value).toLowerCase())
+ : true
}
-function isArray (a) {
- return Array.isArray(a)
+export function setBy (obj = {}, path, value) {
+ const recurse = (obj, depth = 0) => {
+ const key = path[depth]
+ const target = typeof obj[key] !== 'object' ? {} : obj[key]
+ const subValue = depth === path.length - 1 ? value : recurse(target, depth + 1)
+ return {
+ ...obj,
+ [key]: subValue,
+ }
+ }
+
+ return recurse(obj)
}
-// ########################################################################
-// Non-exported Helpers
-// ########################################################################
+export function getElementDimensions (element) {
+ const rect = element.getBoundingClientRect()
+ const style = window.getComputedStyle(element)
+ const margins = {
+ left: parseInt(style.marginLeft),
+ right: parseInt(style.marginRight),
+ }
+ const padding = {
+ left: parseInt(style.paddingLeft),
+ right: parseInt(style.paddingRight),
+ }
+ return {
+ left: Math.ceil(rect.left),
+ width: Math.ceil(rect.width),
+ outerWidth: Math.ceil(rect.width + margins.left + margins.right + padding.left + padding.right),
+ marginLeft: margins.left,
+ marginRight: margins.right,
+ paddingLeft: padding.left,
+ paddingRight: padding.right,
+ scrollWidth: element.scrollWidth,
+ }
+}
+
+export function flexRender (Comp, props) {
+ if (typeof Comp === 'function') {
+ return Object.getPrototypeOf(Comp).isReactComponent ?