Skip to content

Commit 0d0e239

Browse files
Mayank Jethvatannerlinsley
Mayank Jethva
authored and
tannerlinsley
committed
Top and Bottom Pagination (TanStack#283)
* added top and bottom pagination, included story * version bump * linting * fixes * PR fixes * lint and fixes * update story * removed unused attr
1 parent f61b19c commit 0d0e239

File tree

7 files changed

+158
-63
lines changed

7 files changed

+158
-63
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,8 @@ These are all of the available props (and their default values) for the main `<R
155155
data: [],
156156
loading: false,
157157
showPagination: true,
158+
showPaginationTop: false,
159+
showPaginationBottom: true
158160
showPageSizeOptions: true,
159161
pageSizeOptions: [5, 10, 20, 25, 50, 100],
160162
defaultPageSize: 20,

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"react": "^15.5.4",
1515
"react-dom": "^15.5.4",
1616
"react-json-tree": "^0.10.9",
17-
"react-story": "^0.0.6"
17+
"react-story": "^0.0.10"
1818
},
1919
"scripts": {
2020
"start": "react-scripts start",

‎docs/src/App.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import ControlledTable from './stories/ControlledTable.js'
2626
import PivotingOptions from './stories/PivotingOptions.js'
2727
import EditableTable from './stories/EditableTable.js'
2828
import FixedHeader from './stories/FixedHeader.js'
29+
import MultiplePagers from './stories/MultiplePagers';
2930

3031
export default class App extends React.Component {
3132
render() {
@@ -100,7 +101,8 @@ export default class App extends React.Component {
100101
{ name: 'Custom Filtering', component: Filtering },
101102
{ name: 'Controlled Component', component: ControlledTable },
102103
{ name: 'Editable Table', component: EditableTable },
103-
{ name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader }
104+
{ name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader },
105+
{ name: 'Multiple Pagers (Top and Bottom)', component: MultiplePagers}
104106
]}
105107
/>
106108
)

‎docs/src/stories/MultiplePagers.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* eslint-disable import/no-webpack-loader-syntax */
2+
import React from 'react'
3+
import _ from 'lodash'
4+
import namor from 'namor'
5+
6+
import ReactTable from '../../../lib/index'
7+
8+
class Story extends React.PureComponent {
9+
render () {
10+
const data = _.map(_.range(5553), d => {
11+
return {
12+
firstName: namor.generate({ words: 1, numbers: 0 }),
13+
lastName: namor.generate({ words: 1, numbers: 0 }),
14+
age: Math.floor(Math.random() * 30),
15+
children: _.map(_.range(10), d => {
16+
return {
17+
firstName: namor.generate({ words: 1, numbers: 0 }),
18+
lastName: namor.generate({ words: 1, numbers: 0 }),
19+
age: Math.floor(Math.random() * 30)
20+
}
21+
})
22+
}
23+
})
24+
25+
const columns = [{
26+
Header: 'Name',
27+
columns: [{
28+
Header: 'First Name',
29+
accessor: 'firstName'
30+
}, {
31+
Header: 'Last Name',
32+
id: 'lastName',
33+
accessor: d => d.lastName
34+
}]
35+
}, {
36+
Header: 'Info',
37+
columns: [{
38+
Header: 'Age',
39+
accessor: 'age'
40+
}]
41+
}]
42+
43+
return (
44+
<div>
45+
<div className='table-wrap'>
46+
<ReactTable
47+
className='-striped -highlight'
48+
data={data}
49+
columns={columns}
50+
defaultPageSize={10}
51+
showPagination
52+
showPaginationTop
53+
showPaginationBottom
54+
/>
55+
</div>
56+
<div style={{textAlign: 'center'}}>
57+
<br />
58+
<em>Tip: Hold shift when sorting to multi-sort!</em>
59+
</div>
60+
</div>
61+
)
62+
}
63+
}
64+
65+
const CodeHighlight = require('./components/codeHighlight').default
66+
const source = require('!raw!./MultiplePagers')
67+
68+
export default () => (
69+
<div>
70+
<Story />
71+
<CodeHighlight>{() => source}</CodeHighlight>
72+
</div>
73+
)

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-table",
3-
"version": "6.0.5",
3+
"version": "6.1.0",
44
"description": "A fast, lightweight, opinionated table and datagrid built on React",
55
"license": "MIT",
66
"homepage": "https://github.com/tannerlinsley/react-table#readme",

‎src/defaultProps.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export default {
1111
data: [],
1212
loading: false,
1313
showPagination: true,
14+
showPaginationTop: false,
15+
showPaginationBottom: true,
1416
showPageSizeOptions: true,
1517
pageSizeOptions: [5, 10, 20, 25, 50, 100],
1618
defaultPageSize: 20,

‎src/index.js

Lines changed: 76 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
7272
getNoDataProps,
7373
getResizerProps,
7474
showPagination,
75+
showPaginationTop,
76+
showPaginationBottom,
7577
manual,
7678
loadingText,
7779
noDataText,
@@ -758,78 +760,92 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
758760
)
759761
}
760762

763+
const makePagination = () => {
764+
const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
765+
return <PaginationComponent
766+
{...resolvedState}
767+
pages={pages}
768+
canPrevious={canPrevious}
769+
canNext={canNext}
770+
onPageChange={this.onPageChange}
771+
onPageSizeChange={this.onPageSizeChange}
772+
className={paginationProps.className}
773+
style={paginationProps.style}
774+
{...paginationProps.rest}
775+
/>
776+
}
777+
761778
const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
762779
const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
763780
const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
764-
const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
765781
const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
766782
const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
767783
const resizerProps = getResizerProps(finalState, undefined, undefined, this)
768784

769-
const makeTable = () => (
770-
<div
771-
className={classnames(
772-
'ReactTable',
773-
className,
774-
rootProps.className
775-
)}
776-
style={{
777-
...style,
778-
...rootProps.style
779-
}}
780-
{...rootProps.rest}
781-
>
782-
<TableComponent
785+
const makeTable = () => {
786+
const pagination = makePagination()
787+
return (
788+
<div
783789
className={classnames(
784-
tableProps.className,
785-
currentlyResizing ? 'rt-resizing' : ''
790+
'ReactTable',
791+
className,
792+
rootProps.className
786793
)}
787-
style={tableProps.style}
788-
{...tableProps.rest}
794+
style={{
795+
...style,
796+
...rootProps.style
797+
}}
798+
{...rootProps.rest}
789799
>
790-
{hasHeaderGroups ? makeHeaderGroups() : null}
791-
{makeHeaders()}
792-
{hasFilters ? makeFilters() : null}
793-
<TbodyComponent
794-
className={classnames(tBodyProps.className)}
795-
style={{
796-
...tBodyProps.style,
797-
minWidth: `${rowMinWidth}px`
798-
}}
799-
{...tBodyProps.rest}
800+
{showPagination && showPaginationTop
801+
? <div className='pagination-top'>
802+
{pagination}
803+
</div>
804+
: null}
805+
<TableComponent
806+
className={classnames(
807+
tableProps.className,
808+
currentlyResizing ? 'rt-resizing' : ''
809+
)}
810+
style={tableProps.style}
811+
{...tableProps.rest}
800812
>
801-
{pageRows.map((d, i) => makePageRow(d, i))}
802-
{padRows.map(makePadRow)}
803-
</TbodyComponent>
804-
{hasColumnFooter ? makeColumnFooters() : null}
805-
</TableComponent>
806-
{showPagination ? (
807-
<PaginationComponent
808-
{...resolvedState}
809-
pages={pages}
810-
canPrevious={canPrevious}
811-
canNext={canNext}
812-
onPageChange={this.onPageChange}
813-
onPageSizeChange={this.onPageSizeChange}
814-
className={paginationProps.className}
815-
style={paginationProps.style}
816-
{...paginationProps.rest}
813+
{hasHeaderGroups ? makeHeaderGroups() : null}
814+
{makeHeaders()}
815+
{hasFilters ? makeFilters() : null}
816+
<TbodyComponent
817+
className={classnames(tBodyProps.className)}
818+
style={{
819+
...tBodyProps.style,
820+
minWidth: `${rowMinWidth}px`
821+
}}
822+
{...tBodyProps.rest}
823+
>
824+
{pageRows.map((d, i) => makePageRow(d, i))}
825+
{padRows.map(makePadRow)}
826+
</TbodyComponent>
827+
{hasColumnFooter ? makeColumnFooters() : null}
828+
</TableComponent>
829+
{showPagination && showPaginationBottom
830+
? <div className='pagination-bottom'>
831+
{pagination}
832+
</div>
833+
: null}
834+
{!pageRows.length && (
835+
<NoDataComponent
836+
{...noDataProps}
837+
>
838+
{_.normalizeComponent(noDataText)}
839+
</NoDataComponent>
840+
)}
841+
<LoadingComponent
842+
loading={loading}
843+
loadingText={loadingText}
844+
{...loadingProps}
817845
/>
818-
) : null}
819-
{!pageRows.length && (
820-
<NoDataComponent
821-
{...noDataProps}
822-
>
823-
{_.normalizeComponent(noDataText)}
824-
</NoDataComponent>
825-
)}
826-
<LoadingComponent
827-
loading={loading}
828-
loadingText={loadingText}
829-
{...loadingProps}
830-
/>
831-
</div>
832-
)
846+
</div>
847+
)
848+
}
833849

834850
// childProps are optionally passed to a function-as-a-child
835851
return children ? children(finalState, makeTable, this) : makeTable()

0 commit comments

Comments
 (0)