- react-table demo
+ react-table
@@ -66,15 +36,22 @@ export default Component({
- {props.children} ,
- thComponent: (props) => {props.children} ,
+ thComponent: (props) => {
+ const {toggleSort, ...rest} = props
+ return (
+ {
+ toggleSort && toggleSort(e)
+ }}>{props.children}
+ )
+ },
tdComponent: (props) => {props.children} ,
previousComponent: null,
- nextComponent: null
+ nextComponent: null,
+ loadingComponent: props => (
+
+
- -
+
- + + Simple + + +
- + + Server-Side + + +
-
- Tip: Hold shift when sorting to multi-sort! +
)
diff --git a/example/src/screens/async.js b/example/src/screens/async.js
deleted file mode 100644
index c04a90d..0000000
--- a/example/src/screens/async.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Component } from 'jumpsuit'
-import _ from 'lodash'
-import namor from 'namor'
-
-import ReactTable from 'react-table'
-
-// Let's mock some data to play around with
-const rawData = _.map(_.range(1000), d => {
- return {
- firstName: namor.generate({ words: 1, numLen: 0 }),
- lastName: namor.generate({ words: 1, numLen: 0 }),
- age: Math.floor(Math.random() * 30)
- }
-})
-
-// Now let's mock the server. It's job is simple: use the table model to sort and return the page data
-const requestData = (pageSize, page, sorting) => {
- return new Promise((resolve, reject) => {
- // On the server, you'll likely use SQL or noSQL or some other query language to do this.
- // For this mock, we'll just use lodash
- const sortedData = _.orderBy(rawData, sorting.map(sort => {
- return row => {
- if (row[sort.id] === null || row[sort.id] === undefined) {
- return -Infinity
- }
- return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id]
- }
- }), sorting.map(d => d.asc ? 'asc' : 'desc'))
-
- // Be sure to send back the rows to be displayed and any other pertinent information, like how many pages there are total.
- const res = {
- rows: sortedData.slice(pageSize * page, (pageSize * page) + pageSize),
- pages: Math.ceil(rawData.length / pageSize)
- }
-
- // Here we'll simulate a server response with 500ms of delay.
- setTimeout(() => resolve(res), 500)
- })
-}
-
-export default Component({
- getInitialState () {
- // To handle our data server-side, we need a few things in the state to help us out:
- return {
- data: [],
- pages: null,
- loading: true
- }
- },
- fetchData (state, instance) {
- // Whenever the table model changes, or the user sorts or changes pages, this method gets called and passed the current table model.
- // You can set the `loading` prop of the table to true to use the built-in one or show you're own loading bar if you want.
- this.setState({loading: true})
- // Request the data however you want. Here, we'll use our mocked service we created earlier
- requestData(state.pageSize, state.page, state.sorting)
- .then((res) => {
- // Now just get the rows of data to your React Table (and update anything else like total pages or loading)
- this.setState({
- data: res.rows,
- pages: res.pages,
- loading: false
- })
- })
- },
- render () {
- return (
- - Tip: Hold shift when sorting to multi-sort! +
+ {this.props.children}
- d.lastName
- }]
- }, {
- header: 'Info',
- columns: [{
- header: 'Age',
- accessor: 'age'
- }]
- }]}
- manual // Forces table not to paginate or sort automatically, so we can handle it server-side
- pageSize={5}
- data={this.state.data} // Set the rows to be displayed
- pages={this.state.pages} // Display the total number of pages
- loading={this.state.loading} // Display the loading overlay when we need it
- onChange={this.fetchData} // Request new data when things change
- />
-
- )
- }
-})
diff --git a/example/src/screens/serverSide.js b/example/src/screens/serverSide.js
new file mode 100644
index 0000000..2eae3a0
--- /dev/null
+++ b/example/src/screens/serverSide.js
@@ -0,0 +1,170 @@
+import { Component } from 'jumpsuit'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from 'components/codeHighlight'
+import ReactTable from '../../../lib/index.js'
+
+// Let's mock some data to play around with
+const rawData = _.map(_.range(3424), d => {
+ return {
+ firstName: namor.generate({ words: 1, numLen: 0 }),
+ lastName: namor.generate({ words: 1, numLen: 0 }),
+ age: Math.floor(Math.random() * 30)
+ }
+})
+
+// Now let's mock the server. It's job is simple: use the table model to sort and return the page data
+const requestData = (pageSize, page, sorting) => {
+ return new Promise((resolve, reject) => {
+ // On the server, you'll likely use SQL or noSQL or some other query language to do this.
+ // For this mock, we'll just use lodash
+ const sortedData = _.orderBy(rawData, sorting.map(sort => {
+ return row => {
+ if (row[sort.id] === null || row[sort.id] === undefined) {
+ return -Infinity
+ }
+ return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id]
+ }
+ }), sorting.map(d => d.asc ? 'asc' : 'desc'))
+
+ // Be sure to send back the rows to be displayed and any other pertinent information, like how many pages there are total.
+ const res = {
+ rows: sortedData.slice(pageSize * page, (pageSize * page) + pageSize),
+ pages: Math.ceil(rawData.length / pageSize)
+ }
+
+ // Here we'll simulate a server response with 500ms of delay.
+ setTimeout(() => resolve(res), 500)
+ })
+}
+
+export default Component({
+ getInitialState () {
+ // To handle our data server-side, we need a few things in the state to help us out:
+ return {
+ data: [],
+ pages: null,
+ loading: true
+ }
+ },
+ fetchData (state, instance) {
+ // Whenever the table model changes, or the user sorts or changes pages, this method gets called and passed the current table model.
+ // You can set the `loading` prop of the table to true to use the built-in one or show you're own loading bar if you want.
+ this.setState({loading: true})
+ // Request the data however you want. Here, we'll use our mocked service we created earlier
+ requestData(state.pageSize, state.page, state.sorting)
+ .then((res) => {
+ // Now just get the rows of data to your React Table (and update anything else like total pages or loading)
+ this.setState({
+ data: res.rows,
+ pages: res.pages,
+ loading: false
+ })
+ })
+ },
+ render () {
+ return (
+
+ {getCode()}
+
+ )
+ }
+})
+
+function getCode () {
+ return `
+import ReactTable from 'react-table'
+
+export default React.creatClass({
+ getInitialState () {
+ // To handle our data server-side, we need to keep track of our table state
+ return {
+ data: [],
+ pages: null,
+ loading: true
+ }
+ },
+ fetchData (state, instance) {
+ // Whenever the table model changes (sorting, pagination, etc), this method gets called and passed the current table model.
+ // You can set the 'loading' prop of the table to true to use the built-in loading notice, or show you're own loading bar if you want.
+ this.setState({loading: true})
+ // Request the data from a server however you want! Be sure to send the bits of the table model that it may neeed.
+ Axios.post('mysite.com/data', {
+ pageSize: state.pageSize,
+ page: state.page,
+ sorting: state.sorting
+ })
+ .then((res) => {
+ // Now update your state!
+ this.setState({
+ data: res.rows,
+ pages: res.pages,
+ loading: false
+ })
+ })
+ },
+ render () {
+ 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 (
+
+ d.lastName
+ }]
+ }, {
+ header: 'Info',
+ columns: [{
+ header: 'Age',
+ accessor: 'age'
+ }]
+ }]}
+ manual // Forces table not to paginate or sort automatically, so we can handle it server-side
+ pageSize={10}
+ data={this.state.data} // Set the rows to be displayed
+ pages={this.state.pages} // Display the total number of pages
+ loading={this.state.loading} // Display the loading overlay when we need it
+ onChange={this.fetchData} // Request new data when things change
+ />
+
+
+
+ Tip: Hold shift when sorting to multi-sort! +
+ + Tip: Hold shift when sorting to multi-sort! +
+ {getCode()}
+
+ )
+ }
+})
+
+function getCode () {
+ return `
+import ReactTable from 'react-table'
+
+// To help us mock some data
+import namor from 'namor'
+import _ from 'lodash'
+
+export default () => {
+
+ // Mock some data
+ const data = _.map(_.range(5553), d => {
+ return {
+ firstName: namor.generate({ words: 1, numLen: 0 }),
+ lastName: namor.generate({ words: 1, numLen: 0 }),
+ age: Math.floor(Math.random() * 30)
+ }
+ })
+
+ // Create some column definitions
+ 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'
+ }]
+ }]
+
+ // Display your table!
+ return (
+
+
+
+
+ Tip: Hold shift when sorting to multi-sort! +
+ + Tip: Hold shift when sorting to multi-sort! +
+
+ )
}
export default React.createClass({
@@ -71,7 +86,6 @@ export default React.createClass({
getInitialState () {
return {
page: 0,
- pages: -1,
sorting: false
}
},
@@ -80,12 +94,18 @@ export default React.createClass({
},
fireOnChange () {
this.props.onChange({
- page: _.getFirstDefined(this.props.page, this.state.page),
- pageSize: this.props.pageSize,
- pages: this.props.pages,
+ page: this.getPropOrState('page'),
+ pageSize: this.getStateOrProp('pageSize'),
+ pages: this.getPagesLength(),
sorting: this.getSorting()
}, this)
},
+ getPropOrState (key) {
+ return _.getFirstDefined(this.props[key], this.state[key])
+ },
+ getStateOrProp (key) {
+ return _.getFirstDefined(this.state[key], this.props[key])
+ },
getInitSorting (columns) {
if (!columns) {
return []
@@ -138,6 +158,13 @@ export default React.createClass({
getSorting (columns) {
return this.props.sorting || (this.state.sorting && this.state.sorting.length ? this.state.sorting : this.getInitSorting(columns))
},
+ getPagesLength () {
+ return this.props.manual ? this.props.pages
+ : Math.ceil(this.props.data.length / this.getStateOrProp('pageSize'))
+ },
+ getMinRows () {
+ return _.getFirstDefined(this.props.minRows, this.props.pageSize)
+ },
render () {
// Build Columns
const decoratedColumns = []
@@ -198,17 +225,22 @@ export default React.createClass({
})
const data = this.props.manual ? accessedData : this.sortData(accessedData, sorting)
+ // Normalize state
+ const currentPage = this.getPropOrState('page')
+ const pageSize = this.getStateOrProp('pageSize')
+ const pagesLength = this.getPagesLength()
+
// Pagination
- const pagesLength = this.props.manual ? this.props.pages : Math.ceil(data.length / this.props.pageSize)
- const startRow = this.props.pageSize * this.state.page
- const endRow = startRow + this.props.pageSize
+ const startRow = pageSize * currentPage
+ const endRow = startRow + pageSize
const pageRows = this.props.manual ? data : data.slice(startRow, endRow)
- const padRows = pagesLength > 1 ? _.range(this.props.pageSize - pageRows.length)
- : this.props.minRows ? _.range(Math.max(this.props.minRows - pageRows.length, 0))
+ const minRows = this.getMinRows()
+ const padRows = pagesLength > 1 ? _.range(pageSize - pageRows.length)
+ : minRows ? _.range(Math.max(minRows - pageRows.length, 0))
: []
- const canPrevious = this.state.page > 0
- const canNext = this.state.page + 1 < pagesLength
+ const canPrevious = currentPage > 0
+ const canNext = currentPage + 1 < pagesLength
const TableComponent = this.props.tableComponent
const TheadComponent = this.props.theadComponent
@@ -216,9 +248,9 @@ export default React.createClass({
const TrComponent = this.props.trComponent
const ThComponent = this.props.thComponent
const TdComponent = this.props.tdComponent
-
- const PreviousComponent = this.props.previousComponent || defaultButton
- const NextComponent = this.props.nextComponent || defaultButton
+ const PreviousComponent = this.props.previousComponent
+ const NextComponent = this.props.nextComponent
+ const LoadingComponent = this.props.loadingComponent
return (
+ {props.loadingText}
+
+ {
+ toggleSort={(e) => {
column.sortable && this.sortColumn(column, e.shiftKey)
}}
>
@@ -384,37 +416,26 @@ export default React.createClass({
})}
- {pagesLength > 1 && (
-
)
},
@@ -426,13 +447,17 @@ export default React.createClass({
this.fireOnChange()
})
},
- nextPage (e) {
- e.preventDefault()
- this.setPage(this.state.page + 1)
- },
- previousPage (e) {
- e.preventDefault()
- this.setPage(this.state.page - 1)
+ setPageSize (pageSize) {
+ const currentPageSize = this.getStateOrProp('pageSize')
+ const currentPage = this.getPropOrState('page')
+ const currentRow = currentPageSize * currentPage
+ const page = Math.floor(currentRow / pageSize)
+ this.setState({
+ pageSize,
+ page
+ }, () => {
+ this.fireOnChange()
+ })
},
sortColumn (column, additive) {
const existingSorting = this.getSorting()
diff --git a/src/index.styl b/src/index.styl
index 1714191..37013ac 100644
--- a/src/index.styl
+++ b/src/index.styl
@@ -120,10 +120,10 @@ $easeOutBack = cubic-bezier(0.175, 0.885, 0.320, 1.275)
.-pagination
width:100%
display:flex
- margin-top:5px
justify-content: space-between
align-items: center
flex-wrap: wrap
+ padding-top:3px
.-btn
appearance:none
@@ -147,21 +147,33 @@ $easeOutBack = cubic-bezier(0.175, 0.885, 0.320, 1.275)
background: alpha(black, .3)
color: white
- .-left
+ .-previous
.-center
- .-right
- flex: 1
- // min-width:150px
- margin-bottom:5px
+ .-next
+ margin:3px 0
- .-left
- .-right
+ .-previous
+ .-next
+ flex: 1
text-align: center
-
.-center
+ flex: 1.5
text-align:center
- padding: 0 5px
+
+ .-pageInfo
+ display: inline-block
+ margin: 0 10px 3px
+ white-space: nowrap
+
+ .-pageJump
+ display:inline-block
+ input
+ width: 70px
+ text-align:center
+
+ .-pageSizeOptions
+ margin-left:12px
.-loading
@@ -194,3 +206,29 @@ $easeOutBack = cubic-bezier(0.175, 0.885, 0.320, 1.275)
pointer-events: all
> div
transform: translateY(50%)
+
+ input
+ select
+ appearance: none
+ border: 1px solid rgba(0,0,0,0.1)
+ padding: 5px 7px
+ font-size: inherit
+ border-radius: 3px
+ font-weight: normal
+ outline:none
+
+ .select-wrap
+ position:relative
+ display:inline-block
+ select
+ padding: 5px 15px 5px 7px
+ min-width:100px
+ &:after
+ content: ''
+ position: absolute
+ right: 8px
+ top: 50%
+ transform: translate(0, -50%)
+ border-color: #999 transparent transparent
+ border-style: solid
+ border-width: 5px 5px 2.5px
diff --git a/src/pagination.js b/src/pagination.js
new file mode 100644
index 0000000..4cbd7b7
--- /dev/null
+++ b/src/pagination.js
@@ -0,0 +1,121 @@
+import React from 'react'
+import classnames from 'classnames'
+//
+// import _ from './utils'
+
+const defaultButton = (props) => (
+
+)
+
+export default React.createClass({
+ getInitialState () {
+ return {
+ page: this.props.currentPage
+ }
+ },
+ componentWillReceiveProps (nextProps) {
+ this.setState({page: nextProps.currentPage})
+ },
+ getSafePage (page) {
+ return Math.min(Math.max(page, 0), this.props.pagesLength - 1)
+ },
+ changePage (page) {
+ page = this.getSafePage(page)
+ this.setState({page})
+ this.props.onChange(page)
+ },
+ applyPage (e) {
+ e && e.preventDefault()
+ const page = this.state.page
+ this.changePage(page === '' ? this.props.currentPage : page)
+ },
+ render () {
+ const {
+ currentPage,
+ pagesLength,
+ showPageSizeOptions,
+ pageSizeOptions,
+ pageSize,
+ showPageJump,
+ canPrevious,
+ canNext,
+ onPageSizeChange
+ } = this.props
+
+ const PreviousComponent = this.props.PreviousComponent || defaultButton
+ const NextComponent = this.props.NextComponent || defaultButton
+
+ return (
+
-
+ {this.props.showPagination && pagesLength > 1 && (
+
- this.previousPage(e))}
- disabled={!canPrevious}
- >
- {this.props.previousText}
-
-
-
- Page {this.state.page + 1} of {pagesLength}
-
-
- this.nextPage(e))}
- disabled={!canNext}
- >
- {this.props.nextText}
-
-
-
-
+
- {this.props.loadingText}
-
-
+
+ )
+ }
+})
+ {
+ if (!canPrevious) return
+ this.changePage(currentPage - 1)
+ }}
+ disabled={!canPrevious}
+ >
+ {this.props.previousText}
+
+
+
+
+ Page {showPageJump ? (
+
+ ) : (
+ {currentPage + 1}
+ )} of {pagesLength}
+
+ {showPageSizeOptions && (
+
+
+
+ )}
+
+
+ {
+ if (!canNext) return
+ this.changePage(currentPage + 1)
+ }}
+ disabled={!canNext}
+ >
+ {this.props.nextText}
+
+
+