vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-10-07 00:06:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update Eslint and Code Formatting

Browse Source
This commit is contained in:
Tanner Linsley
2018-04-17 12:22:34 -06:00
parent 083534149c
commit 9fe806d8a7
33 changed files with 2219 additions and 2195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/App.js
+63 -62
View File
@@ -1,116 +1,117 @@
/* eslint-disable */
import React from 'react'
import React from "react";
//
import ReactStory, { defaultProps } from 'react-story'
import CodeSandbox from './CodeSandbox.js'
import './stories/utils/prism.css'
import '../../react-table.css'
import ReactStory, { defaultProps } from "react-story";
import CodeSandbox from "./CodeSandbox.js";
import "./stories/utils/prism.css";
import "../../react-table.css";
import Readme from './stories/Readme.js'
import HOCReadme from './stories/HOCReadme.js'
import Readme from "./stories/Readme.js";
import HOCReadme from "./stories/HOCReadme.js";
// import Test from './stories/test.js'
// import Tester from './examples/expander';
const stories = [
{ name: 'Readme', component: Readme },
{ name: 'HOC Readme', component: HOCReadme },
{ name: "Readme", component: Readme },
{ name: "HOC Readme", component: HOCReadme },
// { name: 'Tester', component: Test },
{ name: 'Simple Table', component: CodeSandbox('X6npLXPRW') },
{ name: "Simple Table", component: CodeSandbox("X6npLXPRW") },
{
name: 'Cell Renderers & Custom Components',
component: CodeSandbox('OyRL04Z4Y'),
name: "Cell Renderers & Custom Components",
component: CodeSandbox("OyRL04Z4Y")
},
{ name: 'Default Sorting', component: CodeSandbox('gLwmmjzA3') },
{ name: "Default Sorting", component: CodeSandbox("gLwmmjzA3") },
{
name: 'Custom Sorting',
component: CodeSandbox('VGx67J35'),
name: "Custom Sorting",
component: CodeSandbox("VGx67J35")
},
{ name: 'Custom Column Widths', component: CodeSandbox('o2OORXNXN') },
{ name: 'Custom Component Props', component: CodeSandbox('nZW3L0wp4') },
{ name: 'Server-side Data', component: CodeSandbox('wjrn8wy3R') },
{ name: 'Sub Components', component: CodeSandbox('n2gqAxl7') },
{ name: 'Pivoting & Aggregation', component: CodeSandbox('oNY9z8xN') },
{ name: "Custom Column Widths", component: CodeSandbox("o2OORXNXN") },
{ name: "Custom Component Props", component: CodeSandbox("nZW3L0wp4") },
{ name: "Server-side Data", component: CodeSandbox("wjrn8wy3R") },
{ name: "Sub Components", component: CodeSandbox("n2gqAxl7") },
{ name: "Pivoting & Aggregation", component: CodeSandbox("oNY9z8xN") },
{
name: 'Pivoting & Aggregation w/ Sub Components',
component: CodeSandbox('p0kEVBgQ'),
name: "Pivoting & Aggregation w/ Sub Components",
component: CodeSandbox("p0kEVBgQ")
},
{
name: '100k Rows w/ Pivoting & Sub Components',
component: CodeSandbox('DRmKj0XyK'),
name: "100k Rows w/ Pivoting & Sub Components",
component: CodeSandbox("DRmKj0XyK")
},
{ name: 'Pivoting Options', component: CodeSandbox('kZKmNBK6r') },
{ name: 'Functional Rendering', component: CodeSandbox('VPZ0Bzv8X') },
{ name: "Pivoting Options", component: CodeSandbox("kZKmNBK6r") },
{ name: "Functional Rendering", component: CodeSandbox("VPZ0Bzv8X") },
{
name: 'Custom Expander Position',
component: CodeSandbox('1jj2XrPEV'),
name: "Custom Expander Position",
component: CodeSandbox("1jj2XrPEV")
},
{ name: 'Custom "No Data" Text', component: CodeSandbox('RgRpRDv80') },
{ name: 'Footers', component: CodeSandbox('KOqQXn3p8') },
{ name: 'Custom Filtering', component: CodeSandbox('5Eyxxxyx') },
{ name: 'Controlled Component', component: CodeSandbox('r7XEZRK2') },
{ name: 'Editable Table', component: CodeSandbox('n5r19gzQP') },
{ name: 'Custom "No Data" Text', component: CodeSandbox("RgRpRDv80") },
{ name: "Footers", component: CodeSandbox("KOqQXn3p8") },
{ name: "Custom Filtering", component: CodeSandbox("5Eyxxxyx") },
{ name: "Controlled Component", component: CodeSandbox("r7XEZRK2") },
{ name: "Editable Table", component: CodeSandbox("n5r19gzQP") },
{
name: 'Fixed Header w/ Vertical Scroll',
component: CodeSandbox('7LY0gjA8O'),
name: "Fixed Header w/ Vertical Scroll",
component: CodeSandbox("7LY0gjA8O")
},
{
name: 'Multiple Pagers (Top and Bottom)',
component: CodeSandbox('VEZ8OgvX'),
name: "Multiple Pagers (Top and Bottom)",
component: CodeSandbox("VEZ8OgvX")
},
{ name: 'Tree Table (HOC)', component: CodeSandbox('lxmr4wynzq') },
{ name: 'Select Table (HOC)', component: CodeSandbox('7yq5ylw09j') },
{ name: 'Select Tree Table (HOC)', component: CodeSandbox('2p7jp4klwp') },
]
{ name: "Tree Table (HOC)", component: CodeSandbox("lxmr4wynzq") },
{ name: "Select Table (HOC)", component: CodeSandbox("7yq5ylw09j") },
{ name: "Select Tree Table (HOC)", component: CodeSandbox("2p7jp4klwp") }
];
export default class App extends React.Component {
render () {
render() {
return (
<ReactStory
style={{
display: 'block',
width: '100%',
height: '100%',
display: "block",
width: "100%",
height: "100%"
}}
pathPrefix='story/'
StoryWrapper={props =>
pathPrefix="story/"
StoryWrapper={props => (
<defaultProps.StoryWrapper
css={{
padding: 0,
display: 'flex',
flexDirection: 'column',
display: "flex",
flexDirection: "column"
}}
>
<a
href='//github.com/react-tools/react-table'
href="//github.com/react-tools/react-table"
style={{
display: 'block',
textAlign: 'center',
borderBottom: 'solid 3px #cccccc',
display: "block",
textAlign: "center",
borderBottom: "solid 3px #cccccc"
}}
>
<img
src='https://github.com/react-tools/media/raw/master/logo-react-table.png'
alt='React Table Logo'
src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
alt="React Table Logo"
style={{
width: '150px',
padding: '10px',
width: "150px",
padding: "10px"
}}
/>
</a>
<div
{...props}
style={{
flex: '1 0 auto',
position: 'relative',
flex: "1 0 auto",
position: "relative"
}}
/>
</defaultProps.StoryWrapper>}
</defaultProps.StoryWrapper>
)}
stories={stories}
/>
)
);
}
}
docs/src/CodeSandbox.js
+9 -10
View File
@@ -1,22 +1,21 @@
import React from 'react'
import React from "react";
export default id => () => {
return (
<iframe
src={`https://codesandbox.io/embed/${id}?autoresize=1&hidenavigation=1&view=${global.innerWidth <
1000
? 'preview'
: 'split'}`}
src={`https://codesandbox.io/embed/${id}?autoresize=1&hidenavigation=1&view=${
global.innerWidth < 1000 ? "preview" : "split"
}`}
style={{
position: 'absolute',
position: "absolute",
top: 0,
left: 0,
width: `100%`,
height: `100%`,
border: 0,
overflow: `hidden`,
overflow: `hidden`
}}
sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
/>
)
}
);
};
docs/src/examples/checkbox/checkboxHOC.js
+63 -57
View File
@@ -1,88 +1,94 @@
import React from "react";
import React from 'react';
export default (Component) => {
export default Component => {
const wrapper = class RTCheckboxTable extends React.Component {
// we only need a Component so we can get the 'ref' - pure components can't get a 'ref'
rowSelector = (row) =>
{
if(!row || !row.hasOwnProperty(this.props.keyField)) return null;
rowSelector = row => {
if (!row || !row.hasOwnProperty(this.props.keyField)) return null;
const checked = this.props.isSelected(row[this.props.keyField]);
return (
<input
type='checkbox'
checked={checked}
onClick={(e)=>{
<input
type="checkbox"
checked={checked}
onClick={e => {
const { shiftKey } = e;
e.stopPropagation();
this.props.toggleSelection(row[this.props.keyField],shiftKey,row);
}}
onChange={()=>{}}
value=''
this.props.toggleSelection(row[this.props.keyField], shiftKey, row);
}}
onChange={() => {}}
value=""
/>
);
}
};
headSelector = (row) =>
{
headSelector = row => {
const checked = this.props.selectAll;
return (
<input
type='checkbox'
checked={checked}
onClick={(e)=>{
<input
type="checkbox"
checked={checked}
onClick={e => {
e.stopPropagation();
this.props.toggleAll();
}}
onChange={()=>{}}
value=''
}}
onChange={() => {}}
value=""
/>
);
}
// this is so we can expose the underlying ReactTable to get at the sortedData for selectAll
getWrappedInstance = ()=>this.wrappedInstance
};
render()
{
const { columns:originalCols, isSelected, toggleSelection, toggleAll, keyField, selectAll, ...rest } = this.props;
const { rowSelector, headSelector, } = this;
// this is so we can expose the underlying ReactTable to get at the sortedData for selectAll
getWrappedInstance = () => this.wrappedInstance;
render() {
const {
columns: originalCols,
isSelected,
toggleSelection,
toggleAll,
keyField,
selectAll,
...rest
} = this.props;
const { rowSelector, headSelector } = this;
const select = {
id: '_selector',
accessor: ()=>'x', // this value is not important
id: "_selector",
accessor: () => "x", // this value is not important
Header: headSelector,
Cell: (ci) => { return rowSelector(ci.original); },
Cell: ci => {
return rowSelector(ci.original);
},
width: 30,
filterable: false,
sortable: false,
resizable: false,
style: { textAlign: 'center' },
}
const columns = [
select,
...originalCols,
];
style: { textAlign: "center" }
};
const columns = [select, ...originalCols];
const extra = {
columns,
columns
};
return (
<Component {...rest} {...extra} ref={(r)=>this.wrappedInstance=r}/>
)
<Component {...rest} {...extra} ref={r => (this.wrappedInstance = r)} />
);
}
}
};
wrapper.displayName = 'RTCheckboxTable';
wrapper.defaultProps =
{
keyField: '_id',
isSelected: (key)=>{ console.log('No isSelected handler provided:',{key})},
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.') },
}
toggleSelection: (key, shift, row) => {
console.log("No toggleSelection handler provided:", { key, shift, row });
},
toggleAll: () => {
console.log("No toggleAll handler provided.");
}
};
return wrapper;
}
};
docs/src/examples/checkbox/index.js
+45 -57
View File
@@ -1,38 +1,34 @@
import React from "react";
import shortid from "shortid";
import React from 'react';
import shortid from 'shortid';
import ReactTable from "../../../../lib/index";
import "../../../../react-table.css";
import ReactTable from '../../../../lib/index'
import '../../../../react-table.css'
import checkboxTableHOC from './checkboxHOC';
import checkboxTableHOC from "./checkboxHOC";
const CheckboxTable = checkboxTableHOC(ReactTable);
async function getData()
{
const result = await ( await fetch('/au_500_tree.json') ).json();
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)=>{
return result.map(item => {
const _id = shortid.generate();
return {
_id,
...item,
}
...item
};
});
}
function getColumns(data)
{
function getColumns(data) {
const columns = [];
const sample = data[0];
for(let key in sample)
{
if(key==='_id') continue;
for (let key in sample) {
if (key === "_id") continue;
columns.push({
accessor: key,
Header: key,
})
Header: key
});
}
return columns;
}
@@ -40,46 +36,42 @@ function getColumns(data)
export class ComponentTest extends React.Component {
constructor(props) {
super(props);
this.state =
{
this.state = {
data: null,
columns: null,
selection: [],
selectAll: false,
selectAll: false
};
}
componentDidMount()
{
getData().then((data)=>{
componentDidMount() {
getData().then(data => {
const columns = getColumns(data);
this.setState({ data, columns });
});
}
toggleSelection = (key,shift,row) => {
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
];
let selection = [...this.state.selection];
const keyIndex = selection.indexOf(key);
// check to see if the key exists
if(keyIndex>=0) {
if (keyIndex >= 0) {
// it does exist so we will remove it using destructing
selection = [
...selection.slice(0,keyIndex),
...selection.slice(keyIndex+1)
]
...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});
}
this.setState({ selection });
};
toggleAll = () => {
/*
'toggleAll' is a tricky concept with any filterable table
@@ -99,58 +91,54 @@ export class ComponentTest extends React.Component {
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 selectAll = this.state.selectAll ? false : true;
const selection = [];
if(selectAll)
{
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)=>{
currentRecords.forEach(item => {
selection.push(item._original._id);
})
});
}
this.setState({selectAll,selection})
}
isSelected = (key) => {
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(){
console.log("selection:", this.state.selection);
};
render() {
const { toggleSelection, toggleAll, isSelected, logSelection } = this;
const { data, columns, selectAll } = this.state;
const extraProps =
{
const extraProps = {
selectAll,
isSelected,
toggleAll,
toggleSelection,
}
toggleSelection
};
return (
<div style={{ padding: '10px'}}>
<div style={{ padding: "10px" }}>
<h1>react-table - Checkbox Table</h1>
<button onClick={logSelection}>Log Selection to Console</button>
{` (${this.state.selection.length}) selected`}
{
data?
{data ? (
<CheckboxTable
data={data}
columns={columns}
ref={(r)=>this.checkboxTable = r}
ref={r => (this.checkboxTable = r)}
className="-striped -highlight"
{...extraProps}
/>
:null
}
) : null}
</div>
);
}
docs/src/examples/expander/index.js
+11 -12
View File
@@ -1,47 +1,46 @@
import React from 'react'
import React from "react";
export default class ComponentTest extends React.component {
render () {
return <div>Bozo</div>
render() {
return <div>Bozo</div>;
}
}
// 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 (
// <div className={`rt-expander ${this.props.isExpanded ? '-open' : ''}`}>
// &bull;
// </div>
// </div>
// )
// }
// }
//
//
// class SubComponent extends React.Component {
// render()
// {
// return <div>Nothing</div>
// }
// }
//
//
// export default class ComponentTest extends React.Component {
// render()
// {
@@ -53,7 +52,7 @@ export default class ComponentTest extends React.component {
// // multiSort: false,
// }
// return (
// <ReactTable
// <ReactTable
// {...rtProps}
// />
// )
docs/src/examples/index.js
+4 -8
View File
@@ -1,11 +1,7 @@
/* eslint-disable */
import TreeTable from './treetable'
import SelectTable from './selecttable'
import SelectTreeTable from './selecttreetable'
import TreeTable from "./treetable";
import SelectTable from "./selecttable";
import SelectTreeTable from "./selecttreetable";
export {
TreeTable,
SelectTable,
SelectTreeTable,
}
export { TreeTable, SelectTable, SelectTreeTable };
docs/src/examples/selecttable/index.js
+65 -66
View File
@@ -1,38 +1,34 @@
import React from "react";
import shortid from "shortid";
import React from 'react';
import shortid from 'shortid';
import ReactTable from "../../../../lib/index";
import "../../../../react-table.css";
import ReactTable from '../../../../lib/index'
import '../../../../react-table.css'
import selectTableHOC from '../../../../lib/hoc/selectTable'
import selectTableHOC from "../../../../lib/hoc/selectTable";
const SelectTable = selectTableHOC(ReactTable);
async function getData()
{
const result = await ( await fetch('/au_500_tree.json') ).json();
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)=>{
return result.map(item => {
const _id = shortid.generate();
return {
_id,
...item,
}
...item
};
});
}
function getColumns(data)
{
function getColumns(data) {
const columns = [];
const sample = data[0];
for(let key in sample)
{
if(key==='_id') continue;
for (let key in sample) {
if (key === "_id") continue;
columns.push({
accessor: key,
Header: key,
})
Header: key
});
}
return columns;
}
@@ -40,53 +36,49 @@ function getColumns(data)
export class ComponentTest extends React.Component {
constructor(props) {
super(props);
this.state =
{
this.state = {
data: null,
columns: null,
selection: [],
selectAll: false,
selectType: 'checkbox',
selectType: "checkbox"
};
}
componentDidMount()
{
getData().then((data)=>{
componentDidMount() {
getData().then(data => {
const columns = getColumns(data);
this.setState({ data, columns });
});
}
toggleSelection = (key,shift,row) => {
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') {
if (this.state.selectType === "radio") {
let selection = [];
if (selection.indexOf(key)<0) selection.push(key);
this.setState({selection});
if (selection.indexOf(key) < 0) selection.push(key);
this.setState({ selection });
} else {
let selection = [
...this.state.selection
];
let selection = [...this.state.selection];
const keyIndex = selection.indexOf(key);
// check to see if the key exists
if(keyIndex>=0) {
if (keyIndex >= 0) {
// it does exist so we will remove it using destructing
selection = [
...selection.slice(0,keyIndex),
...selection.slice(keyIndex+1)
]
...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});
this.setState({ selection });
}
}
};
toggleAll = () => {
/*
'toggleAll' is a tricky concept with any filterable table
@@ -106,66 +98,73 @@ export class ComponentTest extends React.Component {
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 selectAll = this.state.selectAll ? false : true;
const selection = [];
if(selectAll)
{
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 just push all the IDs onto the selection array
currentRecords.forEach((item)=>{
if(item._original)
{
currentRecords.forEach(item => {
if (item._original) {
selection.push(item._original._id);
}
})
});
}
this.setState({selectAll,selection})
}
isSelected = (key) => {
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);
}
console.log("selection:", this.state.selection);
};
toggleType = () => {
this.setState({ selectType: this.state.selectType === 'radio' ? 'checkbox' : 'radio', selection: [], selectAll: false, });
}
render(){
const { toggleSelection, toggleAll, isSelected, logSelection, toggleType } = this;
this.setState({
selectType: this.state.selectType === "radio" ? "checkbox" : "radio",
selection: [],
selectAll: false
});
};
render() {
const {
toggleSelection,
toggleAll,
isSelected,
logSelection,
toggleType
} = this;
const { data, columns, selectAll, selectType } = this.state;
const extraProps =
{
const extraProps = {
selectAll,
isSelected,
toggleAll,
toggleSelection,
selectType,
}
selectType
};
return (
<div style={{ padding: '10px'}}>
<div style={{ padding: "10px" }}>
<h1>react-table - Select Table</h1>
<button onClick={toggleType}>Select Type: <strong>{selectType}</strong></button>
<button onClick={toggleType}>
Select Type: <strong>{selectType}</strong>
</button>
<button onClick={logSelection}>Log Selection to Console</button>
{` (${this.state.selection.length}) selected`}
{
data?
{data ? (
<SelectTable
data={data}
columns={columns}
ref={(r)=>this.selectTable = r}
ref={r => (this.selectTable = r)}
className="-striped -highlight"
{...extraProps}
/>
:null
}
) : null}
</div>
);
}
docs/src/examples/selecttreetable/index.js
+109 -87
View File
@@ -1,49 +1,43 @@
import React from "react";
import shortid from "shortid";
import React from 'react';
import shortid from 'shortid';
import ReactTable from "../../../../lib/index";
import "../../../../react-table.css";
import ReactTable from '../../../../lib/index'
import '../../../../react-table.css'
import selectTableHOC from '../../../../lib/hoc/selectTable'
import treeTableHOC from '../../../../lib/hoc/treeTable'
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();
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)=>{
return result.map(item => {
const _id = shortid.generate();
return {
_id,
...item,
}
...item
};
});
}
function getColumns(data)
{
function getColumns(data) {
const columns = [];
const sample = data[0];
for(let key in sample)
{
if(key==='_id') continue;
for (let key in sample) {
if (key === "_id") continue;
columns.push({
accessor: key,
Header: key,
})
Header: key
});
}
return columns;
}
function getNodes(data,node=[])
{
data.forEach((item)=>{
if(item.hasOwnProperty('_subRows') && item._subRows)
{
node = getNodes(item._subRows,node);
function getNodes(data, node = []) {
data.forEach(item => {
if (item.hasOwnProperty("_subRows") && item._subRows) {
node = getNodes(item._subRows, node);
} else {
node.push(item._original);
}
@@ -54,54 +48,50 @@ function getNodes(data,node=[])
export class ComponentTest extends React.Component {
constructor(props) {
super(props);
this.state =
{
this.state = {
data: null,
columns: null,
selection: [],
selectAll: false,
selectType: 'checkbox',
selectType: "checkbox"
};
}
componentDidMount()
{
getData().then((data)=>{
componentDidMount() {
getData().then(data => {
const columns = getColumns(data);
const pivotBy = ['state','post'];
const pivotBy = ["state", "post"];
this.setState({ data, columns, pivotBy });
});
}
toggleSelection = (key,shift,row) => {
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') {
if (this.state.selectType === "radio") {
let selection = [];
if (selection.indexOf(key)<0) selection.push(key);
this.setState({selection});
if (selection.indexOf(key) < 0) selection.push(key);
this.setState({ selection });
} else {
let selection = [
...this.state.selection
];
let selection = [...this.state.selection];
const keyIndex = selection.indexOf(key);
// check to see if the key exists
if(keyIndex>=0) {
if (keyIndex >= 0) {
// it does exist so we will remove it using destructing
selection = [
...selection.slice(0,keyIndex),
...selection.slice(keyIndex+1)
]
...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});
this.setState({ selection });
}
}
};
toggleAll = () => {
/*
'toggleAll' is a tricky concept with any filterable table
@@ -121,10 +111,9 @@ export class ComponentTest extends React.Component {
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 selectAll = this.state.selectAll ? false : true;
const selection = [];
if(selectAll)
{
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
@@ -132,41 +121,59 @@ export class ComponentTest extends React.Component {
// 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)=>{
nodes.forEach(item => {
selection.push(item._id);
})
});
}
this.setState({selectAll,selection})
}
isSelected = (key) => {
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);
}
console.log("selection:", this.state.selection);
};
toggleType = () => {
this.setState({ selectType: this.state.selectType === 'radio' ? 'checkbox' : 'radio', selection: [], selectAll: false, });
}
this.setState({
selectType: this.state.selectType === "radio" ? "checkbox" : "radio",
selection: [],
selectAll: false
});
};
toggleTree = () => {
if(this.state.pivotBy.length) {
this.setState({pivotBy:[],expanded:{}});
if (this.state.pivotBy.length) {
this.setState({ pivotBy: [], expanded: {} });
} else {
this.setState({pivotBy:['state','post'],expanded:{}});
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 =
{
};
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,
@@ -175,39 +182,54 @@ export class ComponentTest extends React.Component {
pivotBy,
expanded,
onExpandedChange,
pageSize: 5,
}
pageSize: 5
};
return (
<div style={{ padding: '10px'}}>
<div style={{ padding: "10px" }}>
<h1>react-table - Select Tree Table</h1>
<p>This example combines two HOCs (the TreeTable and the SelectTable) to make a composite component.</p>
<p>
This example combines two HOCs (the TreeTable and the SelectTable) to
make a composite component.
</p>
<p>We'll call it SelectTreeTable!</p>
<p>Here is what the buttons do:</p>
<ul>
<li><strong>Toggle Tree:</strong> enables or disabled the pivotBy on the table.</li>
<li><strong>Select Type:</strong> changes from 'checkbox' to 'radio' and back again.</li>
<li><strong>Log Selection to Console:</strong> open your console to see what has been selected.</li>
<li>
<strong>Toggle Tree:</strong> enables or disabled the pivotBy on the
table.
</li>
<li>
<strong>Select Type:</strong> changes from 'checkbox' to 'radio' and
back again.
</li>
<li>
<strong>Log Selection to Console:</strong> open your console to see
what has been selected.
</li>
</ul>
<p>
<strong>NOTE:</strong> the selection is maintained when toggling the tree on and off but is cleared
when switching between select types (radio, checkbox).
<strong>NOTE:</strong> the selection is maintained when toggling the
tree on and off but is cleared when switching between select types
(radio, checkbox).
</p>
<button onClick={toggleTree}>Toggle Tree [{pivotBy && pivotBy.length ? pivotBy.join(', ') : ''}]</button>
<button onClick={toggleType}>Select Type: <strong>{selectType}</strong></button>
<button onClick={toggleTree}>
Toggle Tree [{pivotBy && pivotBy.length ? pivotBy.join(", ") : ""}]
</button>
<button onClick={toggleType}>
Select Type: <strong>{selectType}</strong>
</button>
<button onClick={logSelection}>Log Selection to Console</button>
{` (${this.state.selection.length}) selected`}
{
data?
{data ? (
<SelectTreeTable
data={data}
columns={columns}
ref={(r)=>this.selectTable = r}
ref={r => (this.selectTable = r)}
className="-striped -highlight"
freezeWhenExpanded={true}
{...extraProps}
/>
:null
}
) : null}
</div>
);
}
docs/src/examples/treetable/index.js
+32 -42
View File
@@ -1,27 +1,23 @@
import React from "react";
import React from 'react';
import ReactTable from "../../../../lib/index";
import "../../../../react-table.css";
import ReactTable from '../../../../lib/index'
import '../../../../react-table.css'
import treeTableHOC from "../../../../lib/hoc/treeTable";
import treeTableHOC from '../../../../lib/hoc/treeTable'
async function getData()
{
const result = await ( await fetch('/au_500_tree.json') ).json();
async function getData() {
const result = await (await fetch("/au_500_tree.json")).json();
return result;
}
function getColumns(data,pivotBy)
{
function getColumns(data, pivotBy) {
const columns = [];
const sample = data[0];
for(let key in sample)
{
for (let key in sample) {
columns.push({
accessor: key,
Header: key,
})
Header: key
});
}
return columns;
}
@@ -29,49 +25,43 @@ function getColumns(data,pivotBy)
export class ComponentTest extends React.Component {
constructor(props) {
super(props);
this.state =
{
this.state = {
data: null,
columns: null,
pivotBy: null, // ["firstName", "lastName"],
pivotBy: null // ["firstName", "lastName"],
};
}
componentDidMount()
{
getData().then((data)=>{
componentDidMount() {
getData().then(data => {
// console.log('cwm data:',data);
const pivotBy = ['state','post','city'];
const columns = getColumns(data,pivotBy);
const pivotBy = ["state", "post", "city"];
const columns = getColumns(data, pivotBy);
// console.log('cwm cols:',columns);
this.setState({data,columns,pivotBy});
this.setState({ data, columns, pivotBy });
});
}
showState = ()=>
{
console.log('state:',this.reactTable.getResolvedState());
}
render(){
showState = () => {
console.log("state:", this.reactTable.getResolvedState());
};
render() {
const { data, columns, pivotBy } = this.state;
const extraProps =
{
const extraProps = {
data,
columns,
pivotBy,
}
pivotBy
};
const TreeTable = treeTableHOC(ReactTable);
return (
<div style={{ padding: '10px'}}>
<div style={{ padding: "10px" }}>
<h1>react-table - Tree Table</h1>
{
data?
{data ? (
<TreeTable
ref={(r)=>this.reactTable=r}
className="-striped -highlight"
defaultPageSize={5}
{...extraProps}
/>
:null
}
ref={r => (this.reactTable = r)}
className="-striped -highlight"
defaultPageSize={5}
{...extraProps}
/>
) : null}
</div>
);
}
docs/src/examples/treetable/treeTableHOC.js
+32 -37
View File
@@ -1,58 +1,53 @@
import React from "react";
import React from 'react';
export default (Component) => {
const wrapper = (componentProps) => {
const TrComponent = (props) => {
export default Component => {
const wrapper = componentProps => {
const TrComponent = props => {
const { ri, ...rest } = props;
if(ri && ri.groupedByPivot) {
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)';
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 <div {...rest}>{cell}</div>;
}
return <Component.defaultProps.TrComponent {...rest} />;
}
};
const getTrProps = (state,ri,ci,instance) => {
return {ri};
}
const getTrProps = (state, ri, ci, instance) => {
return { ri };
};
const { columns, ...rest } = componentProps;
const extra = {
columns: columns.map((col)=>{
columns: columns.map(col => {
let column = col;
if(rest.pivotBy && rest.pivotBy.includes(col.accessor))
{
if (rest.pivotBy && rest.pivotBy.includes(col.accessor)) {
column = {
accessor: col.accessor,
width: `${componentProps.treeTableIndent}px`,
show: false,
Header: '',
}
Header: ""
};
}
return column;
}),
TrComponent,
getTrProps,
getTrProps
};
return (
<Component {...rest} {...extra} />
)
}
wrapper.displayName = 'RTTreeTable';
wrapper.defaultProps =
{
treeTableRowBackground: '#EEE',
treeTableIndent: 10,
}
return <Component {...rest} {...extra} />;
};
wrapper.displayName = "RTTreeTable";
wrapper.defaultProps = {
treeTableRowBackground: "#EEE",
treeTableIndent: 10
};
return wrapper;
}
};
docs/src/examples/utils.js
+3 -2
View File
@@ -1,4 +1,3 @@
import namor from "namor";
const range = len => {
@@ -20,7 +19,9 @@ const newPerson = () => {
status:
statusChance > 0.66
? "relationship"
: statusChance > 0.33 ? "complicated" : "single"
: statusChance > 0.33
? "complicated"
: "single"
};
};
docs/src/index.css
+4 -2
View File
@@ -1,5 +1,7 @@
html, body, #root {
height: 100%
html,
body,
#root {
height: 100%;
}
body {
margin: 0;
docs/src/index.js
+5 -8
View File
@@ -1,10 +1,7 @@
import React from 'react'
import ReactDOM from 'react-dom'
import React from "react";
import ReactDOM from "react-dom";
//
import './index.css'
import App from './App.js'
import "./index.css";
import App from "./App.js";
ReactDOM.render(
<App />,
document.getElementById('root')
)
ReactDOM.render(<App />, document.getElementById("root"));
docs/src/stories/HOCReadme.js
+11 -11
View File
@@ -1,23 +1,23 @@
/* eslint-disable */
import React from 'react'
import marked from 'marked'
import React from "react";
import marked from "marked";
//
import HOCReadme from '!raw!../../../src/hoc/README.md'
import 'github-markdown-css/github-markdown.css'
import './utils/prism.js'
import HOCReadme from "!raw!../../../src/hoc/README.md";
import "github-markdown-css/github-markdown.css";
import "./utils/prism.js";
export default class HOCStory extends React.Component {
render () {
render() {
return (
<div style={{ padding: '10px' }}>
<div style={{ padding: "10px" }}>
<span
className='markdown-body'
className="markdown-body"
dangerouslySetInnerHTML={{ __html: marked(HOCReadme) }}
/>
</div>
)
);
}
componentDidMount () {
global.Prism && global.Prism.highlightAll()
componentDidMount() {
global.Prism && global.Prism.highlightAll();
}
}
docs/src/stories/Readme.js
+11 -11
View File
@@ -1,23 +1,23 @@
/* eslint-disable import/no-webpack-loader-syntax */
import React from 'react'
import marked from 'marked'
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'
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 () {
render() {
return (
<div style={{ padding: '10px' }}>
<div style={{ padding: "10px" }}>
<span
className='markdown-body'
className="markdown-body"
dangerouslySetInnerHTML={{ __html: marked(Readme) }}
/>
</div>
)
);
}
componentDidMount () {
global.Prism && global.Prism.highlightAll()
componentDidMount() {
global.Prism && global.Prism.highlightAll();
}
}
docs/src/stories/test.js
+14 -18
View File
@@ -1,31 +1,27 @@
import React from "react";
import React from 'react'
import ReactTable from '../../../lib/index'
import '../../../react-table.css'
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' },
]
{ 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' },
]
{ accessor: "one", Header: "One" },
{ accessor: "two", Header: "Two" }
];
export default class Story extends React.Component {
render () {
render() {
return (
<div>
Test
<ReactTable
data={data}
columns={columns}
/>
<ReactTable data={data} columns={columns} />
</div>
)
);
}
}