mirror of
https://github.com/gosticks/react-table.git
synced 2026-09-21 08:30:39 +00:00
add FoldableTable (#937)
I have used this library to develop a big application for my company and had been required to make the columns are foldable. I saw that feature is useful and would like to share with everybody. Especially to all developers who developed this great component. Let me know if any issues with My component. I will fix it accordingly.
This commit is contained in:
Steven
+8
-6
@@ -15,8 +15,8 @@ import HOCReadme from "./stories/HOCReadme.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") },
|
||||
@@ -61,10 +61,12 @@ const stories = [
|
||||
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') },
|
||||
{ name: 'Foldable Table (HOC)', component: CodeSandbox('2p7jp4klwp') },
|
||||
]
|
||||
|
||||
export default class App extends React.Component {
|
||||
render() {
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import React from 'react'
|
||||
import ReactTable from '../../../../lib/index'
|
||||
import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
|
||||
import selectTableHOC from '../../../../lib/hoc/selectTable'
|
||||
|
||||
const FoldableTable = FoldableTableHOC(selectTableHOC(ReactTable))
|
||||
|
||||
export default class FoldableTableCustomState extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props, context)
|
||||
|
||||
this.state = { folded: {}, seleted: {}, selectedAll: false }
|
||||
}
|
||||
|
||||
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',
|
||||
}];
|
||||
|
||||
toggleSelection = (key, shift, row) => {
|
||||
const { selected } = this.state
|
||||
let newSelected = Object.assign({}, selected)
|
||||
newSelected[key] = !newSelected[key]
|
||||
this.setState(p => ({ selected: newSelected }))
|
||||
};
|
||||
|
||||
toggleAll = () => {
|
||||
const { selectedAll } = this.state
|
||||
|
||||
if (selectedAll) { this.setState(p => { return { selectedAll: false, seleted: {} } }); }
|
||||
else {
|
||||
const data = this.getData()
|
||||
|
||||
let newSelected = {}
|
||||
data.forEach(d => newSelected[d.id] = true)
|
||||
this.setState(p => ({ selectedAll: true, seleted: newSelected }))
|
||||
}
|
||||
}
|
||||
|
||||
isSelected = key => this.state.seleted[key];
|
||||
|
||||
render() {
|
||||
return (<FoldableTable
|
||||
//SelectTable props
|
||||
keyField='id'
|
||||
toggleSelection={this.toggleSelection}
|
||||
toggleAll={this.toggleAll}
|
||||
isSelected={this.isSelected}
|
||||
selectAll={this.state.selectedAll}
|
||||
selectType='checkbox'
|
||||
|
||||
onFoldChange={newFolded => 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"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}></FoldableTable>)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
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 (<FoldableTable
|
||||
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"
|
||||
}
|
||||
]
|
||||
}]
|
||||
}></FoldableTable>)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import ReactTable from '../../../../lib/index';
|
||||
import FoldableTableHOC from '../../../../lib/hoc/foldableTable';
|
||||
|
||||
const FoldableTable = FoldableTableHOC(ReactTable);
|
||||
|
||||
export default class FoldableTableWithoutHeader 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 <FoldableTable
|
||||
data={this.getData()}
|
||||
columns={[
|
||||
{
|
||||
Header: "First Name",
|
||||
accessor: "first_name"
|
||||
},
|
||||
{
|
||||
Header: "Last Name",
|
||||
accessor: "last_name",
|
||||
foldable: true,
|
||||
},
|
||||
{
|
||||
Header: "Email",
|
||||
accessor: "email",
|
||||
foldable: true,
|
||||
},
|
||||
{
|
||||
Header: "Gender",
|
||||
accessor: "gender",
|
||||
foldable: true,
|
||||
}
|
||||
]}></FoldableTable>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
|
||||
import React from 'react'
|
||||
import '../../../../react-table.css'
|
||||
|
||||
import FoldableTableWithHeader from './FoldableTableWithHeader'
|
||||
import FoldableTableWithoutHeader from './FoldableTableWithoutHeader'
|
||||
import FoldableTableCustomState from './FoldableTableCustomState'
|
||||
|
||||
class FaldableComponentTest extends React.Component {
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>- Sample With Header Columns</p>
|
||||
<br />
|
||||
<FoldableTableWithHeader />
|
||||
<br /> <br />
|
||||
<p>- Sample With Normal Columns</p>
|
||||
<br />
|
||||
<FoldableTableWithoutHeader />
|
||||
<br /> <br />
|
||||
<p>- Custom State and selectedTable</p>
|
||||
<br />
|
||||
<FoldableTableCustomState />
|
||||
</div >
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default FaldableComponentTest
|
||||
@@ -1,7 +1,13 @@
|
||||
/* 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'
|
||||
import FoldableTable from './foldabletable';
|
||||
|
||||
export { TreeTable, SelectTable, SelectTreeTable };
|
||||
export {
|
||||
TreeTable,
|
||||
SelectTable,
|
||||
SelectTreeTable,
|
||||
FoldableTable
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user