+
+
+ )
+ }
+})
diff --git a/src/index.js b/src/index.js
index f98cb6e..c3d923d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,21 +1,22 @@
import React from 'react'
import classnames from 'classnames'
//
-const _ = {
- get,
- takeRight,
- last,
- orderBy,
- range,
- clone,
- remove
-}
+import _ from './utils'
const defaultButton = (props) => (
)
export const ReactTableDefaults = {
+ // State
+ data: [],
+ loading: false,
+ pageSize: 20,
+ minRows: 0,
+ // Callbacks
+ onChange: () => null,
+ onPageChange: () => null,
+ onSort: () => null,
// Classes
className: '-striped -highlight',
tableClassName: '',
@@ -37,9 +38,6 @@ export const ReactTableDefaults = {
thStyle: {},
tdStyle: {},
paginationStyle: {},
- //
- pageSize: 20,
- minRows: 0,
// Global Column Defaults
column: {
sortable: true,
@@ -65,9 +63,7 @@ export const ReactTableDefaults = {
thComponent: (props) => 
+
+ 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
+ />
+
+
+
+ Tip: Hold shift when sorting to multi-sort! +
+ + Tip: Hold shift when sorting to multi-sort! +
+
)
},
+ // User actions
+ setPage (page) {
+ this.setState({
+ page
+ }, () => {
+ this.fireOnChange()
+ })
+ },
+ nextPage (e) {
+ e.preventDefault()
+ this.setPage(this.state.page + 1)
+ },
+ previousPage (e) {
+ e.preventDefault()
+ this.setPage(this.state.page - 1)
+ },
sortColumn (column, additive) {
- const existingSorting = this.state.sorting || []
+ const existingSorting = this.getSorting()
let sorting = _.clone(this.state.sorting || [])
const existingIndex = sorting.findIndex(d => d.id === column.id)
if (existingIndex > -1) {
@@ -510,95 +469,11 @@ export default React.createClass({
}
}
const page = (existingIndex === 0 || (!existingSorting.length && sorting.length) || !additive) ? 0 : this.state.page
- this.buildData(this.props, Object.assign({}, this.state, {page, sorting}))
- },
- nextPage (e) {
- e.preventDefault()
- this.setPage(this.state.page + 1)
- },
- previousPage (e) {
- e.preventDefault()
- this.setPage(this.state.page - 1)
+ this.setState({
+ page,
+ sorting
+ }, () => {
+ this.fireOnChange()
+ })
}
})
-
-// ########################################################################
-// Utils
-// ########################################################################
-
-function remove (a, b) {
- return a.filter(function (o, i) {
- var r = b(o)
- if (r) {
- a.splice(i, 1)
- return true
- }
- return false
- })
-}
-
-function get (a, b) {
- if (isArray(b)) {
- b = b.join('.')
- }
- return b
- .replace('[', '.').replace(']', '')
- .split('.')
- .reduce(
- function (obj, property) {
- return obj[property]
- }, a
- )
-}
-
-function takeRight (arr, n) {
- const start = n > arr.length ? 0 : arr.length - n
- return arr.slice(start)
-}
-
-function last (arr) {
- return arr[arr.length - 1]
-}
-
-function range (n) {
- const arr = []
- for (let i = 0; i < n; i++) {
- arr.push(n)
- }
- return arr
-}
-
-function orderBy (arr, funcs, dirs) {
- return arr.sort((a, b) => {
- for (let i = 0; i < funcs.length; i++) {
- const comp = funcs[i]
- const ca = comp(a)
- const cb = comp(b)
- const desc = dirs[i] === false || dirs[i] === 'desc'
- if (ca > cb) {
- return desc ? -1 : 1
- }
- if (ca < cb) {
- return desc ? 1 : -1
- }
- }
- return 0
- })
-}
-
-function clone (a) {
- return JSON.parse(JSON.stringify(a, function (key, value) {
- if (typeof value === 'function') {
- return value.toString()
- }
- return value
- }))
-}
-
-// ########################################################################
-// Helpers
-// ########################################################################
-
-function isArray (a) {
- return Array.isArray(a)
-}
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..edee136
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,95 @@
+export default {
+ get,
+ takeRight,
+ last,
+ orderBy,
+ range,
+ clone,
+ remove,
+ getFirstDefined
+}
+
+function remove (a, b) {
+ return a.filter(function (o, i) {
+ var r = b(o)
+ if (r) {
+ a.splice(i, 1)
+ return true
+ }
+ return false
+ })
+}
+
+function get (a, b) {
+ if (isArray(b)) {
+ b = b.join('.')
+ }
+ return b
+ .replace('[', '.').replace(']', '')
+ .split('.')
+ .reduce(
+ function (obj, property) {
+ return obj[property]
+ }, a
+ )
+}
+
+function takeRight (arr, n) {
+ const start = n > arr.length ? 0 : arr.length - n
+ return arr.slice(start)
+}
+
+function last (arr) {
+ return arr[arr.length - 1]
+}
+
+function range (n) {
+ const arr = []
+ for (let i = 0; i < n; i++) {
+ arr.push(n)
+ }
+ return arr
+}
+
+function orderBy (arr, funcs, dirs) {
+ return arr.sort((a, b) => {
+ for (let i = 0; i < funcs.length; i++) {
+ const comp = funcs[i]
+ const ca = comp(a)
+ const cb = comp(b)
+ const desc = dirs[i] === false || dirs[i] === 'desc'
+ if (ca > cb) {
+ return desc ? -1 : 1
+ }
+ if (ca < cb) {
+ return desc ? 1 : -1
+ }
+ }
+ return 0
+ })
+}
+
+function clone (a) {
+ return JSON.parse(JSON.stringify(a, function (key, value) {
+ if (typeof value === 'function') {
+ return value.toString()
+ }
+ return value
+ }))
+}
+
+// ########################################################################
+// Helpers
+// ########################################################################
+
+function isArray (a) {
+ return Array.isArray(a)
+}
+
+function getFirstDefined (...args) {
+ for (var i = 0; i < args.length; i++) {
+ if (typeof args[i] !== 'undefined') {
+ return args[i]
+ }
+ }
+}
{this.props.loadingText}
@@ -477,8 +420,24 @@ export default React.createClass({