diff --git a/README.md b/README.md
index 67adfa9..b5b0e3f 100644
--- a/README.md
+++ b/README.md
@@ -155,6 +155,8 @@ These are all of the available props (and their default values) for the main `
)
diff --git a/docs/src/stories/MultiplePagers.js b/docs/src/stories/MultiplePagers.js
new file mode 100644
index 0000000..a9cf173
--- /dev/null
+++ b/docs/src/stories/MultiplePagers.js
@@ -0,0 +1,73 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import ReactTable from '../../../lib/index'
+
+class Story extends React.PureComponent {
+ render () {
+ const data = _.map(_.range(5553), d => {
+ return {
+ firstName: namor.generate({ words: 1, numbers: 0 }),
+ lastName: namor.generate({ words: 1, numbers: 0 }),
+ age: Math.floor(Math.random() * 30),
+ children: _.map(_.range(10), d => {
+ return {
+ firstName: namor.generate({ words: 1, numbers: 0 }),
+ lastName: namor.generate({ words: 1, numbers: 0 }),
+ age: Math.floor(Math.random() * 30)
+ }
+ })
+ }
+ })
+
+ const columns = [{
+ Header: 'Name',
+ columns: [{
+ Header: 'First Name',
+ accessor: 'firstName'
+ }, {
+ Header: 'Last Name',
+ id: 'lastName',
+ accessor: d => d.lastName
+ }]
+ }, {
+ Header: 'Info',
+ columns: [{
+ Header: 'Age',
+ accessor: 'age'
+ }]
+ }]
+
+ return (
+
+
+
+
+
+
+ Tip: Hold shift when sorting to multi-sort!
+
+
+ )
+ }
+}
+
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw!./MultiplePagers')
+
+export default () => (
+
+
+ {() => source}
+
+)
diff --git a/package.json b/package.json
index c14590a..70a885a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-table",
- "version": "6.0.5",
+ "version": "6.1.0",
"description": "A fast, lightweight, opinionated table and datagrid built on React",
"license": "MIT",
"homepage": "https://github.com/tannerlinsley/react-table#readme",
diff --git a/src/defaultProps.js b/src/defaultProps.js
index 58843f6..2a29bc9 100644
--- a/src/defaultProps.js
+++ b/src/defaultProps.js
@@ -11,6 +11,8 @@ export default {
data: [],
loading: false,
showPagination: true,
+ showPaginationTop: false,
+ showPaginationBottom: true,
showPageSizeOptions: true,
pageSizeOptions: [5, 10, 20, 25, 50, 100],
defaultPageSize: 20,
diff --git a/src/index.js b/src/index.js
index 8b7fddf..496a762 100644
--- a/src/index.js
+++ b/src/index.js
@@ -72,6 +72,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
getNoDataProps,
getResizerProps,
showPagination,
+ showPaginationTop,
+ showPaginationBottom,
manual,
loadingText,
noDataText,
@@ -758,78 +760,92 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
+ const makePagination = () => {
+ const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
+ return
+ }
+
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 paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
const resizerProps = getResizerProps(finalState, undefined, undefined, this)
- const makeTable = () => (
-
-
{
+ const pagination = makePagination()
+ return (
+
- {hasHeaderGroups ? makeHeaderGroups() : null}
- {makeHeaders()}
- {hasFilters ? makeFilters() : null}
-
+ {pagination}
+
+ : null}
+
- {pageRows.map((d, i) => makePageRow(d, i))}
- {padRows.map(makePadRow)}
-
- {hasColumnFooter ? makeColumnFooters() : null}
-
- {showPagination ? (
-
+ {pageRows.map((d, i) => makePageRow(d, i))}
+ {padRows.map(makePadRow)}
+
+ {hasColumnFooter ? makeColumnFooters() : null}
+
+ {showPagination && showPaginationBottom
+ ?
+ {pagination}
+
+ : null}
+ {!pageRows.length && (
+
+ {_.normalizeComponent(noDataText)}
+
+ )}
+
- ) : null}
- {!pageRows.length && (
-
- {_.normalizeComponent(noDataText)}
-
- )}
-
-
- )
+
+ )
+ }
// childProps are optionally passed to a function-as-a-child
return children ? children(finalState, makeTable, this) : makeTable()