1+ import React from 'react'
2+ import _ from 'lodash'
3+ import namor from 'namor'
4+
5+ import CodeHighlight from './components/codeHighlight'
6+ import ReactTable from '../src/index'
7+
8+ const data = _ . map ( _ . range ( 5553 ) , d => {
9+ return {
10+ firstName : namor . generate ( { words : 1 , numLen : 0 } ) ,
11+ lastName : namor . generate ( { words : 1 , numLen : 0 } ) ,
12+ age : Math . floor ( Math . random ( ) * 30 )
13+ }
14+ } )
15+
16+ const columns = [ {
17+ header : 'Name' ,
18+ columns : [ {
19+ header : 'First Name' ,
20+ accessor : 'firstName'
21+ } , {
22+ header : 'Last Name' ,
23+ id : 'lastName' ,
24+ accessor : d => d . lastName
25+ } ]
26+ } , {
27+ header : 'Info' ,
28+ columns : [ {
29+ header : 'Age' ,
30+ accessor : 'age'
31+ } ]
32+ } ]
33+
34+ class ControlledTable extends React . Component {
35+ constructor ( ) {
36+ super ( )
37+ this . sortChange = this . sortChange . bind ( this )
38+ this . state = {
39+ sorting : [ ] ,
40+ page : 0 ,
41+ pageSize : 10
42+ }
43+ }
44+
45+ sortChange ( column , shift ) {
46+ if ( shift )
47+ alert ( 'Shift click not implemented in this demo' )
48+ var sort = { id : column . id }
49+ if ( this . state . sorting . length && this . state . sorting [ 0 ] . id == column . id )
50+ this . state . sorting [ 0 ] . asc ? sort . desc = true : sort . asc = true
51+ else
52+ sort . asc = true
53+ this . setState ( {
54+ sorting : [ sort ]
55+ } )
56+ }
57+
58+ render ( ) {
59+ return (
60+ < div >
61+ < div className = 'table-wrap' >
62+ < ReactTable
63+ className = '-striped -highlight'
64+ data = { data }
65+ columns = { columns }
66+ sorting = { this . state . sorting }
67+ onSortingChange = { this . sortChange }
68+ page = { this . state . page }
69+ onPageChange = { page => this . setState ( { page} ) }
70+ pageSize = { this . state . pageSize }
71+ onPageSizeChange = { ( pageSize , page ) => this . setState ( { page, pageSize} ) }
72+ />
73+ </ div >
74+ < div style = { { textAlign : 'center' } } >
75+ < br />
76+ < em > Tip: For simplicity, multi-sort is not implemented in this demo</ em >
77+ </ div >
78+ < CodeHighlight > { ( ) => getCode ( ) } </ CodeHighlight >
79+ </ div >
80+ )
81+ }
82+ }
83+
84+ function getCode ( ) {
85+ return `const data = _.map(_.range(5553), d => {
86+ return {
87+ firstName: namor.generate({ words: 1, numLen: 0 }),
88+ lastName: namor.generate({ words: 1, numLen: 0 }),
89+ age: Math.floor(Math.random() * 30)
90+ }
91+ })
92+
93+ const columns = [{
94+ header: 'Name',
95+ columns: [{
96+ header: 'First Name',
97+ accessor: 'firstName'
98+ }, {
99+ header: 'Last Name',
100+ id: 'lastName',
101+ accessor: d => d.lastName
102+ }]
103+ }, {
104+ header: 'Info',
105+ columns: [{
106+ header: 'Age',
107+ accessor: 'age'
108+ }]
109+ }]
110+
111+ class ControlledTable extends React.Component {
112+ constructor() {
113+ super()
114+ this.sortChange = this.sortChange.bind(this)
115+ this.pageChange = this.pageChange.bind(this)
116+ this.pageSizeChange = this.pageSizeChange.bind(this)
117+ this.state = {
118+ sorting: [],
119+ page: 0,
120+ pageSize: 10
121+ }
122+ }
123+
124+ sortChange(column, shift) {
125+ if(shift)
126+ alert('Shift click not implemented in this demo')
127+ var sort = {id: column.id}
128+ if(this.state.sorting.length && this.state.sorting[0].id == column.id)
129+ this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
130+ else
131+ sort.asc = true
132+ this.setState({
133+ sorting: [sort]
134+ })
135+ }
136+
137+ render() {
138+ return (
139+ <ReactTable
140+ className='-striped -highlight'
141+ data={data}
142+ columns={columns}
143+ sorting={this.state.sorting}
144+ onSortingChange={this.sortChange}
145+ page={this.state.page}
146+ onPageChange={page => this.setState({page})}
147+ pageSize={this.state.pageSize}
148+ onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
149+ />
150+ )
151+ }
152+ }`
153+ }
154+
155+ export default ( ) => < ControlledTable />
0 commit comments