mirror of
https://github.com/gosticks/react-table.git
synced 2026-08-19 08:20:30 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Tanner Linsley
|
6056bb94ec | ||
|
Tanner Linsley
|
9545aef69b |
@@ -12,15 +12,12 @@ import Readme from '../README.md'
|
||||
//
|
||||
import Simple from '../stories/Simple.js'
|
||||
import CellRenderers from '../stories/CellRenderers.js'
|
||||
import DefaultSorting from '../stories/DefaultSorting.js'
|
||||
import CustomWidths from '../stories/CustomWidths.js'
|
||||
import MaxWidths from '../stories/MaxWidths.js'
|
||||
import ServerSide from '../stories/ServerSide.js'
|
||||
import SubComponents from '../stories/SubComponents.js'
|
||||
import Pivoting from '../stories/Pivoting.js'
|
||||
import PivotingSubComponents from '../stories/PivotingSubComponents.js'
|
||||
import OneHundredKRows from '../stories/OneHundredKRows.js'
|
||||
import FunctionalRendering from '../stories/FunctionalRendering.js'
|
||||
import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
|
||||
//
|
||||
configure(() => {
|
||||
storiesOf('1. Docs')
|
||||
@@ -38,13 +35,10 @@ configure(() => {
|
||||
storiesOf('2. Demos')
|
||||
.add('Simple Table', Simple)
|
||||
.add('Cell Renderers & Custom Components', CellRenderers)
|
||||
.add('Default Sorting', DefaultSorting)
|
||||
.add('Custom Column Widths', CustomWidths)
|
||||
.add('Max Widths', MaxWidths)
|
||||
.add('Server-side Data', ServerSide)
|
||||
.add('Sub Components', SubComponents)
|
||||
.add('Pivoting & Aggregation', Pivoting)
|
||||
.add('Pivoting & Aggregation w/ Sub Components', PivotingSubComponents)
|
||||
.add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
|
||||
.add('Functional Rendering', FunctionalRendering)
|
||||
.add('Custom Expander Position', CustomExpanderPosition)
|
||||
}, module)
|
||||
|
||||
@@ -49,8 +49,7 @@
|
||||
- [Sub Tables & Sub Components](#sub-tables--sub-components)
|
||||
- [Server-side Data](#server-side-data)
|
||||
- [Fully Controlled Component](#fully-controlled-component)
|
||||
- [Functional Rendering](#functional-rendering)
|
||||
- [Multi-Sort](#multi-sort)
|
||||
- [Multi-sort](#multi-sort)
|
||||
- [Component Overrides](#component-overrides)
|
||||
|
||||
## Installation
|
||||
@@ -58,7 +57,7 @@
|
||||
```bash
|
||||
$ npm install react-table
|
||||
# or
|
||||
$ yarn add react-table
|
||||
$ yarn react-table
|
||||
```
|
||||
2. Import the `react-table` module
|
||||
```javascript
|
||||
@@ -206,14 +205,9 @@ Or just define them on the component per-instance
|
||||
sortable: true,
|
||||
sort: 'asc' or 'desc', // used to determine the column sorting on init
|
||||
show: true, // can be used to hide a column
|
||||
width: undefined, // A hardcoded width for the column. This overrides both min and max width options
|
||||
minWidth: 100 // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
|
||||
maxWidth: undefined // A maximum width for this column.
|
||||
|
||||
// Special
|
||||
expander: false // This option will override all data-related options and designates the column to be used
|
||||
// for pivoting and sub-component expansion
|
||||
|
||||
// Cell Options
|
||||
className: '', // Set the classname of the `td` element of the column
|
||||
style: {}, // Set the style of the `td` element of the column
|
||||
@@ -382,52 +376,6 @@ Here are the props and their corresponding callbacks that control the state of t
|
||||
/>
|
||||
```
|
||||
|
||||
## Functional Rendering
|
||||
Possibly one of the coolest features of React-Table is its ability to expose internal state for custom render logic. The easiest way to do this is to optionally pass a function as a child of `<ReactTable />`.
|
||||
|
||||
The function you pass will be called with the following items:
|
||||
- Fully-resolved state of the table
|
||||
- The standard table generator
|
||||
- The instance of the component
|
||||
|
||||
You can then return any JSX or react you want! This turns out to be perfect for:
|
||||
- Accessing the internal state of the table before rendering the table
|
||||
- Decorating the table with more UI
|
||||
- Building your own 100% custom display logic, while utilizing the state and methods of the table component
|
||||
|
||||
Example:
|
||||
```javascript
|
||||
<ReactTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
...
|
||||
>
|
||||
{(state, makeTable, instance) => {
|
||||
// Now you have full access to the state of the table!
|
||||
state.decoratedColumns === [...] // all of the columns (with id's and meta)
|
||||
state.visibleColumns === [...] // all of the columns (with id's and meta)
|
||||
state.visibleColumns === [...] // all of the columns (with id's and meta)
|
||||
// etc.
|
||||
|
||||
// `makeTable` is a function that returns the standard table markup
|
||||
return makeTable()
|
||||
|
||||
// So add some decoration!
|
||||
return (
|
||||
<div>
|
||||
<customPivotBySelect />
|
||||
<customColumnHideShow />
|
||||
<customAnything />
|
||||
{makeTable()}
|
||||
</div>
|
||||
)
|
||||
|
||||
// The possibilities are endless!!!
|
||||
|
||||
}}
|
||||
</ReactTable>
|
||||
```
|
||||
|
||||
## Multi-Sort
|
||||
When clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!
|
||||
|
||||
|
||||
+1
-1
@@ -16,7 +16,7 @@
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="error-display"></div>
|
||||
<script src="static/preview.9c8139cf3eafea207bb8.bundle.js"></script>
|
||||
<script src="static/preview.2dea77e688032cb54b25.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="storybook-version" content="2.35.3">
|
||||
<meta name="storybook-version" content="2.35.2">
|
||||
<title>React Storybook</title>
|
||||
<style>
|
||||
/*
|
||||
@@ -38,7 +38,7 @@
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
<div id="root"></div>
|
||||
<script src="static/manager.423cfb5e0df11f89a8ac.bundle.js"></script>
|
||||
<script src="static/manager.6358a4421928765ac21b.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"static/manager.423cfb5e0df11f89a8ac.bundle.js","sources":["webpack:///static/manager.423cfb5e0df11f89a8ac.bundle.js"],"mappings":"AAAA;AAkuDA;AA04DA;AA+8DA;AA00DA;AAsyEA;AA89CA;AA8rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAoxDA;AAsrDA;AAqyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"static/manager.6358a4421928765ac21b.bundle.js","sources":["webpack:///static/manager.6358a4421928765ac21b.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AA4gEA;AAiiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAw3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"static/preview.2dea77e688032cb54b25.bundle.js","sources":["webpack:///static/preview.2dea77e688032cb54b25.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AA4rDA;AAgjFA;AAy+FA;AAomJA;AAloHA;AAgsWA;AAm0DA;AA4kEA;AA+nDA;AAw8CA;AAkjEA;AA0oDA;AAq8CA;AAqoDA;AAksEA;AAwrDA;AAiuCA;AAopDA;AA0kDA;AAyqEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AAmrDA;AA6/BA;AAw9CA;AA6ZA;AAw8CA","sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
{"version":3,"file":"static/preview.9c8139cf3eafea207bb8.bundle.js","sources":["webpack:///static/preview.9c8139cf3eafea207bb8.bundle.js"],"mappings":"AAAA;AAkuDA;AA03DA;AAo+CA;AAqvGA;AAu+EA;AA05NA;AAyuGA;AA6lEA;AAywDA;AAozDA;AAk1DA;AA2qDA;AAw7CA;AAy7DA;AA2oDA;AA67CA;AA8pDA;AAolEA;AA60DA;AA+rCA;AA+mDA;AA2lDA;AAkqEA;AAs2DA;AA2zDA;AAo4CA;AAgnFA;AA+tGA;AAsiDA;AA88BA;AA+yDA;AAkhCA;AAqSA;AAk4EA","sourceRoot":""}
|
||||
+1
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-table",
|
||||
"version": "4.4.0",
|
||||
"version": "4.2.8",
|
||||
"description": "A fast, lightweight, opinionated table and datagrid built on React",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/tannerlinsley/react-table#readme",
|
||||
@@ -60,7 +60,6 @@
|
||||
"postcss-cli": "^2.6.0",
|
||||
"react": "^15.4.2",
|
||||
"react-dom": "^15.4.2",
|
||||
"react-json-tree": "^0.10.1",
|
||||
"standard": "^8.0.0",
|
||||
"stylus": "^0.54.5",
|
||||
"uglifyify": "3.0.3"
|
||||
|
||||
Binary file not shown.
Binary file not shown.
+202
-288
@@ -208,7 +208,6 @@ export default React.createClass({
|
||||
render () {
|
||||
const resolvedProps = this.getResolvedState()
|
||||
const {
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
tableClassName,
|
||||
@@ -235,10 +234,12 @@ export default React.createClass({
|
||||
loading,
|
||||
pageSize,
|
||||
page,
|
||||
resolvedSorting,
|
||||
sorting,
|
||||
pages,
|
||||
// Pivoting State
|
||||
pivotBy,
|
||||
pivotValKey,
|
||||
pivotIDKey,
|
||||
subRowsKey,
|
||||
expandedRows,
|
||||
onExpandRow,
|
||||
@@ -254,18 +255,19 @@ export default React.createClass({
|
||||
PaginationComponent,
|
||||
LoadingComponent,
|
||||
SubComponent,
|
||||
columnPercentage,
|
||||
// Data model
|
||||
pivotColumn,
|
||||
resolvedData,
|
||||
allVisibleColumns,
|
||||
headerGroups,
|
||||
standardColumns,
|
||||
allDecoratedColumns,
|
||||
hasHeaderGroups,
|
||||
// Sorted Data
|
||||
sortedData
|
||||
} = resolvedProps
|
||||
|
||||
// Determine the flex percentage for each column
|
||||
// const columnPercentage = 100 / allVisibleColumns.length
|
||||
|
||||
// Pagination
|
||||
const startRow = pageSize * page
|
||||
const endRow = startRow + pageSize
|
||||
@@ -292,145 +294,128 @@ export default React.createClass({
|
||||
const canPrevious = page > 0
|
||||
const canNext = page + 1 < pages
|
||||
|
||||
const rowMinWidth = _.sum(allVisibleColumns.map(d => _.getFirstDefined(d.width, d.minWidth)))
|
||||
const rowWidth = (SubComponent ? expanderColumnWidth : 0) + _.sum(allVisibleColumns.map(d => d.minWidth))
|
||||
|
||||
let rowIndex = -1
|
||||
|
||||
const makeHeaderGroups = () => (
|
||||
const makeHeaderGroup = () => (
|
||||
<TheadComponent
|
||||
className={classnames(theadGroupClassName, '-headerGroups')}
|
||||
style={Object.assign({}, theadStyle, {
|
||||
minWidth: `${rowMinWidth}px`
|
||||
minWidth: `${rowWidth}px`
|
||||
})}
|
||||
>
|
||||
<TrComponent
|
||||
className={trClassName}
|
||||
style={trStyle}
|
||||
>
|
||||
{headerGroups.map(makeHeaderGroup)}
|
||||
{pivotBy.length ? (
|
||||
<ThComponent
|
||||
className={classnames(thClassname, 'rt-pivot-header')}
|
||||
style={_.prefixAll({
|
||||
flex: `${columnPercentage} 0 auto`,
|
||||
width: `${pivotColumn.minWidth}px`,
|
||||
maxWidth: `${pivotColumn.maxWidth}px`
|
||||
})}
|
||||
/>
|
||||
) : SubComponent ? (
|
||||
<ThComponent
|
||||
className={classnames(thClassname, 'rt-expander-header')}
|
||||
style={_.prefixAll({
|
||||
flex: `0 0 auto`,
|
||||
width: `${expanderColumnWidth}px`
|
||||
})}
|
||||
/>
|
||||
) : null}
|
||||
{headerGroups.map((column, i) => {
|
||||
return (
|
||||
<ThComponent
|
||||
key={i}
|
||||
className={classnames(thClassname, column.headerClassName)}
|
||||
style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
|
||||
flex: `${column.columns.length * columnPercentage} 0 auto`,
|
||||
width: `${_.sum(column.columns.map(d => {
|
||||
return d.maxWidth < d.minWidth ? d.maxWidth : d.minWidth
|
||||
}))}px`,
|
||||
maxWidth: `${_.sum(column.columns.map(d => d.maxWidth))}px`
|
||||
}))}
|
||||
>
|
||||
{typeof column.header === 'function' ? (
|
||||
<column.header
|
||||
data={sortedData}
|
||||
column={column}
|
||||
/>
|
||||
) : column.header}
|
||||
</ThComponent>
|
||||
)
|
||||
})}
|
||||
</TrComponent>
|
||||
</TheadComponent>
|
||||
)
|
||||
|
||||
const makeHeaderGroup = (column, i) => {
|
||||
const flex = _.sum(column.columns.map(d => d.width ? 0 : d.minWidth))
|
||||
const width = _.sum(column.columns.map(d => _.getFirstDefined(d.width, d.minWidth)))
|
||||
const maxWidth = _.sum(column.columns.map(d => _.getFirstDefined(d.width, d.maxWidth)))
|
||||
if (column.expander) {
|
||||
if (column.pivotColumns) {
|
||||
return (
|
||||
<ThComponent
|
||||
className={classnames(thClassname, 'rt-pivot-header')}
|
||||
style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
|
||||
flex: `${flex} 0 auto`,
|
||||
width: `${width}px`,
|
||||
maxWidth: `${maxWidth}px`
|
||||
}))}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ThComponent
|
||||
className={classnames(thClassname, 'rt-expander-header')}
|
||||
style={_.prefixAll({
|
||||
flex: `0 0 auto`,
|
||||
width: `${expanderColumnWidth}px`
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ThComponent
|
||||
key={i}
|
||||
className={classnames(thClassname, column.headerClassName)}
|
||||
style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
|
||||
flex: `${flex} 0 auto`,
|
||||
width: `${width}px`,
|
||||
maxWidth: `${maxWidth}px`
|
||||
}))}
|
||||
>
|
||||
{typeof column.header === 'function' ? (
|
||||
<column.header
|
||||
data={sortedData}
|
||||
column={column}
|
||||
/>
|
||||
) : column.header}
|
||||
</ThComponent>
|
||||
)
|
||||
}
|
||||
|
||||
const makeHeaders = () => {
|
||||
const makeHeader = () => {
|
||||
const pivotSort = pivotColumn && sorting.find(d => d.id === pivotColumn.id)
|
||||
return (
|
||||
<TheadComponent
|
||||
className={classnames(theadClassName, '-header')}
|
||||
style={Object.assign({}, theadStyle, {
|
||||
minWidth: `${rowMinWidth}px`
|
||||
minWidth: `${rowWidth}px`
|
||||
})}
|
||||
>
|
||||
<TrComponent
|
||||
className={trClassName}
|
||||
style={trStyle}
|
||||
>
|
||||
{allVisibleColumns.map(makeHeader)}
|
||||
{pivotBy.length ? (
|
||||
<ThComponent
|
||||
className={classnames(
|
||||
thClassname,
|
||||
'rt-pivot-header',
|
||||
pivotSort ? (pivotSort.asc ? '-sort-asc' : '-sort-desc') : '',
|
||||
pivotColumn.sortable && '-cursor-pointer'
|
||||
)}
|
||||
style={_.prefixAll({
|
||||
flex: `${columnPercentage} 0 auto`,
|
||||
width: `${pivotColumn.minWidth}px`,
|
||||
maxWidth: `${pivotColumn.maxWidth}px`
|
||||
})}
|
||||
toggleSort={(e) => {
|
||||
pivotColumn.sortable && this.sortColumn(pivotColumn.pivotColumns, e.shiftKey)
|
||||
}}
|
||||
>
|
||||
{pivotColumn.pivotColumns.map((column, i) => {
|
||||
return (
|
||||
<span key={column.id}>
|
||||
{typeof column.header === 'function' ? (
|
||||
<column.header
|
||||
data={sortedData}
|
||||
column={column}
|
||||
/>
|
||||
) : column.header}
|
||||
{i < pivotColumn.pivotColumns.length - 1 && (
|
||||
<ExpanderComponent />
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</ThComponent>
|
||||
) : SubComponent ? (
|
||||
<ThComponent
|
||||
className={classnames(thClassname, 'rt-expander-header')}
|
||||
style={_.prefixAll({
|
||||
flex: `0 0 auto`,
|
||||
width: `${expanderColumnWidth}px`
|
||||
})}
|
||||
/>
|
||||
) : null}
|
||||
{standardColumns.map(makeHeaderGroupColumn)}
|
||||
</TrComponent>
|
||||
</TheadComponent>
|
||||
)
|
||||
}
|
||||
|
||||
const makeHeader = (column, i) => {
|
||||
const sort = resolvedSorting.find(d => d.id === column.id)
|
||||
const makeHeaderGroupColumn = (column, i) => {
|
||||
const sort = sorting.find(d => d.id === column.id)
|
||||
const show = typeof column.show === 'function' ? column.show() : column.show
|
||||
const width = _.getFirstDefined(column.width, column.minWidth)
|
||||
const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
|
||||
if (column.expander) {
|
||||
if (column.pivotColumns) {
|
||||
const pivotSort = resolvedSorting.find(d => d.id === column.id)
|
||||
return (
|
||||
<ThComponent
|
||||
className={classnames(
|
||||
thClassname,
|
||||
'rt-pivot-header',
|
||||
pivotSort ? (pivotSort.asc ? '-sort-asc' : '-sort-desc') : '',
|
||||
column.sortable && '-cursor-pointer'
|
||||
)}
|
||||
style={_.prefixAll({
|
||||
flex: `${width} 0 auto`,
|
||||
width: `${width}px`,
|
||||
maxWidth: `${maxWidth}px`
|
||||
})}
|
||||
toggleSort={(e) => {
|
||||
column.sortable && this.sortColumn(column.pivotColumns, e.shiftKey)
|
||||
}}
|
||||
>
|
||||
{column.pivotColumns.map((pivotColumn, i) => {
|
||||
return (
|
||||
<span key={pivotColumn.id}>
|
||||
{typeof pivotColumn.header === 'function' ? (
|
||||
<pivotColumn.header
|
||||
data={sortedData}
|
||||
column={pivotColumn}
|
||||
/>
|
||||
) : pivotColumn.header}
|
||||
{i < column.pivotColumns.length - 1 && (
|
||||
<ExpanderComponent />
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</ThComponent>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ThComponent
|
||||
className={classnames(thClassname, 'rt-expander-header')}
|
||||
style={_.prefixAll({
|
||||
flex: `0 0 auto`,
|
||||
width: `${expanderColumnWidth}px`
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ThComponent
|
||||
key={i}
|
||||
@@ -444,9 +429,9 @@ export default React.createClass({
|
||||
}
|
||||
)}
|
||||
style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
|
||||
flex: `${width} 0 auto`,
|
||||
width: `${width}px`,
|
||||
maxWidth: `${maxWidth}px`
|
||||
flex: `${columnPercentage} 0 auto`,
|
||||
width: `${column.minWidth}px`,
|
||||
maxWidth: `${column.maxWidth}px`
|
||||
}))}
|
||||
toggleSort={(e) => {
|
||||
column.sortable && this.sortColumn(column, e.shiftKey)
|
||||
@@ -474,6 +459,8 @@ export default React.createClass({
|
||||
subRows: row[subRowsKey]
|
||||
}
|
||||
const isExpanded = _.get(expandedRows, rowInfo.nestingPath)
|
||||
const rowPivotColumn = allDecoratedColumns.find(d => d.id === row[pivotIDKey])
|
||||
const PivotCell = rowPivotColumn && rowPivotColumn.pivotRender
|
||||
return (
|
||||
<TrGroupComponent key={rowInfo.nestingPath.join('_')}>
|
||||
<TrComponent
|
||||
@@ -481,14 +468,16 @@ export default React.createClass({
|
||||
className={classnames(trClassName, trClassCallback(rowInfo), row._viewIndex % 2 ? '-even' : '-odd')}
|
||||
style={Object.assign({}, trStyle, trStyleCallback(rowInfo))}
|
||||
>
|
||||
{allVisibleColumns.map((column, i2) => {
|
||||
const Cell = column.render
|
||||
const show = typeof column.show === 'function' ? column.show() : column.show
|
||||
const width = _.getFirstDefined(column.width, column.minWidth)
|
||||
const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
|
||||
|
||||
if (column.expander) {
|
||||
const onTdClick = (e) => {
|
||||
{(pivotBy.length || SubComponent) && (
|
||||
<TdComponent
|
||||
className={classnames(thClassname, 'rt-pivot')}
|
||||
style={_.prefixAll({
|
||||
paddingLeft: rowInfo.nestingPath.length === 1 ? undefined : `${30 * (rowInfo.nestingPath.length - 1)}px`,
|
||||
flex: `${pivotColumn ? columnPercentage : 0} 0 auto`,
|
||||
width: `${pivotColumn ? pivotColumn.minWidth : expanderColumnWidth}px`,
|
||||
maxWidth: pivotColumn && `${pivotColumn.maxWidth}px`
|
||||
})}
|
||||
onClick={(e) => {
|
||||
if (onExpandRow) {
|
||||
return onExpandRow(rowInfo.nestingPath, e)
|
||||
}
|
||||
@@ -501,73 +490,40 @@ export default React.createClass({
|
||||
return this.setStateWithData({
|
||||
expandedRows: _.set(newExpandedRows, rowInfo.nestingPath, {})
|
||||
})
|
||||
}
|
||||
|
||||
if (column.pivotColumns) {
|
||||
// Return the pivot expander cell
|
||||
const PivotCell = column.pivotRender
|
||||
return (
|
||||
<TdComponent
|
||||
className={classnames(thClassname, 'rt-pivot')}
|
||||
style={_.prefixAll({
|
||||
paddingLeft: rowInfo.nestingPath.length === 1 ? undefined : `${30 * (rowInfo.nestingPath.length - 1)}px`,
|
||||
flex: `${width} 0 auto`,
|
||||
width: `${width}px`,
|
||||
maxWidth: `${maxWidth}px`
|
||||
})}
|
||||
onClick={onTdClick}
|
||||
>
|
||||
{rowInfo.subRows ? (
|
||||
<span>
|
||||
<ExpanderComponent
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
{column && column.pivotRender ? (
|
||||
<PivotCell
|
||||
{...rowInfo}
|
||||
value={rowInfo.rowValues[pivotValKey]}
|
||||
/>
|
||||
) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
|
||||
</span>
|
||||
) : SubComponent ? (
|
||||
<span>
|
||||
<ExpanderComponent
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
</span>
|
||||
) : null}
|
||||
</TdComponent>
|
||||
)
|
||||
}
|
||||
|
||||
// Return the regular expander cell
|
||||
return (
|
||||
<TdComponent
|
||||
className={classnames(column.className, {hidden: !show})}
|
||||
style={_.prefixAll({
|
||||
flex: `0 0 auto`,
|
||||
width: `${expanderColumnWidth}px`
|
||||
})}
|
||||
onClick={onTdClick}
|
||||
>
|
||||
<span>
|
||||
<ExpanderComponent
|
||||
isExpanded={isExpanded}
|
||||
}}
|
||||
>
|
||||
{rowInfo.subRows ? (
|
||||
<span>
|
||||
<ExpanderComponent
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
{rowPivotColumn && rowPivotColumn.pivotRender ? (
|
||||
<PivotCell
|
||||
{...rowInfo}
|
||||
value={rowInfo.rowValues[pivotValKey]}
|
||||
/>
|
||||
</span>
|
||||
</TdComponent>
|
||||
)
|
||||
}
|
||||
|
||||
// Return regular cell
|
||||
) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
|
||||
</span>
|
||||
) : SubComponent ? (
|
||||
<span>
|
||||
<ExpanderComponent
|
||||
isExpanded={isExpanded}
|
||||
/>
|
||||
</span>
|
||||
) : null}
|
||||
</TdComponent>
|
||||
)}
|
||||
{standardColumns.map((column, i2) => {
|
||||
const Cell = column.render
|
||||
const show = typeof column.show === 'function' ? column.show() : column.show
|
||||
return (
|
||||
<TdComponent
|
||||
key={i2}
|
||||
className={classnames(column.className, {hidden: !show})}
|
||||
style={Object.assign({}, tdStyle, column.style, _.prefixAll({
|
||||
flex: `${width} 0 auto`,
|
||||
width: `${width}px`,
|
||||
maxWidth: `${maxWidth}px`
|
||||
flex: `${columnPercentage} 0 auto`,
|
||||
width: `${column.minWidth}px`,
|
||||
maxWidth: `${column.maxWidth}px`
|
||||
}))}
|
||||
>
|
||||
{typeof Cell === 'function' ? (
|
||||
@@ -609,18 +565,15 @@ export default React.createClass({
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
{allVisibleColumns.map((column, i2) => {
|
||||
{standardColumns.map((column, i2) => {
|
||||
const show = typeof column.show === 'function' ? column.show() : column.show
|
||||
const width = _.getFirstDefined(column.width, column.minWidth)
|
||||
const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
|
||||
return (
|
||||
<TdComponent
|
||||
key={i2}
|
||||
className={classnames(column.className, {hidden: !show})}
|
||||
style={Object.assign({}, tdStyle, column.style, {
|
||||
flex: `${width} 0 auto`,
|
||||
width: `${width}px`,
|
||||
maxWidth: `${maxWidth}px`
|
||||
flex: `${columnPercentage} 0 auto`,
|
||||
width: `${column.minWidth}px`
|
||||
})}
|
||||
>
|
||||
|
||||
@@ -632,7 +585,7 @@ export default React.createClass({
|
||||
)
|
||||
}
|
||||
|
||||
const makeTable = () => (
|
||||
return (
|
||||
<div
|
||||
className={classnames(className, 'ReactTable')}
|
||||
style={style}
|
||||
@@ -641,12 +594,12 @@ export default React.createClass({
|
||||
className={classnames(tableClassName)}
|
||||
style={tableStyle}
|
||||
>
|
||||
{hasHeaderGroups && makeHeaderGroups()}
|
||||
{makeHeaders()}
|
||||
{hasHeaderGroups && makeHeaderGroup()}
|
||||
{makeHeader()}
|
||||
<TbodyComponent
|
||||
className={classnames(tbodyClassName)}
|
||||
style={Object.assign({}, tbodyStyle, {
|
||||
minWidth: `${rowMinWidth}px`
|
||||
minWidth: `${rowWidth}px`
|
||||
})}
|
||||
>
|
||||
{pageRows.map((d, i) => makePageRow(d, i))}
|
||||
@@ -670,21 +623,6 @@ export default React.createClass({
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
// childProps are optionally passed to a function-as-a-child
|
||||
const childState = {
|
||||
...resolvedProps,
|
||||
startRow,
|
||||
endRow,
|
||||
pageRows,
|
||||
minRows,
|
||||
padRows,
|
||||
canPrevious,
|
||||
canNext,
|
||||
rowMinWidth
|
||||
}
|
||||
|
||||
return children ? children(childState, makeTable, this) : makeTable()
|
||||
},
|
||||
|
||||
// Helpers
|
||||
@@ -695,9 +633,7 @@ export default React.createClass({
|
||||
data,
|
||||
pivotIDKey,
|
||||
pivotValKey,
|
||||
subRowsKey,
|
||||
expanderColumnWidth,
|
||||
SubComponent
|
||||
subRowsKey
|
||||
} = this.getResolvedState(nextProps, nextState)
|
||||
|
||||
// Determine Header Groups
|
||||
@@ -713,67 +649,21 @@ export default React.createClass({
|
||||
let currentSpan = []
|
||||
|
||||
// A convenience function to add a header and reset the currentSpan
|
||||
const addHeader = (columns, column = columns[0]) => {
|
||||
const addHeader = (columns, column = {}) => {
|
||||
headerGroups.push(Object.assign({}, column, {
|
||||
columns: columns
|
||||
}))
|
||||
currentSpan = []
|
||||
}
|
||||
|
||||
const noSubExpanderColumns = columns.map(col => {
|
||||
return {
|
||||
...col,
|
||||
columns: col.columns ? col.columns.filter(d => !d.expander) : undefined
|
||||
}
|
||||
})
|
||||
|
||||
let expanderColumnIndex = columns.findIndex(col => col.expander)
|
||||
const needsExpander = (SubComponent || pivotBy.length) && expanderColumnIndex === -1
|
||||
const columnsWithExpander = needsExpander ? [{expander: true}, ...noSubExpanderColumns] : noSubExpanderColumns
|
||||
if (needsExpander) {
|
||||
expanderColumnIndex = 0
|
||||
}
|
||||
|
||||
const makeDecoratedColumn = (column) => {
|
||||
const dcol = Object.assign({}, this.props.column, column)
|
||||
|
||||
if (dcol.expander) {
|
||||
dcol.width = expanderColumnWidth
|
||||
return dcol
|
||||
}
|
||||
|
||||
if (typeof dcol.accessor === 'string') {
|
||||
dcol.id = dcol.id || dcol.accessor
|
||||
const accessorString = dcol.accessor
|
||||
dcol.accessor = row => _.get(row, accessorString)
|
||||
return dcol
|
||||
}
|
||||
|
||||
if (dcol.accessor && !dcol.id) {
|
||||
console.warn(dcol)
|
||||
throw new Error('A column id is required if using a non-string accessor for column above.')
|
||||
}
|
||||
|
||||
if (!dcol.accessor) {
|
||||
dcol.accessor = d => undefined
|
||||
}
|
||||
|
||||
// Ensure minWidth is not greater than maxWidth if set
|
||||
if (dcol.maxWidth < dcol.minWidth) {
|
||||
dcol.minWidth = dcol.maxWidth
|
||||
}
|
||||
|
||||
return dcol
|
||||
}
|
||||
|
||||
// Decorate the columns
|
||||
const decorateAndAddToAll = (col) => {
|
||||
const decoratedColumn = makeDecoratedColumn(col)
|
||||
const decoratedColumn = this.makeDecoratedColumn(col)
|
||||
allDecoratedColumns.push(decoratedColumn)
|
||||
return decoratedColumn
|
||||
}
|
||||
let allDecoratedColumns = []
|
||||
const decoratedColumns = columnsWithExpander.map((column, i) => {
|
||||
const decoratedColumns = columns.map((column, i) => {
|
||||
if (column.columns) {
|
||||
return {
|
||||
...column,
|
||||
@@ -784,7 +674,7 @@ export default React.createClass({
|
||||
}
|
||||
})
|
||||
|
||||
// Build the visible columns, headers and flat column list
|
||||
// Build the visible columns and headers and flat column list
|
||||
let visibleColumns = decoratedColumns.slice()
|
||||
let allVisibleColumns = []
|
||||
|
||||
@@ -803,23 +693,7 @@ export default React.createClass({
|
||||
return column.columns ? column.columns.length : pivotBy.indexOf(column.id) > -1 ? false : _.getFirstDefined(column.show, true)
|
||||
})
|
||||
|
||||
// Move the pivot columns into a single column if needed
|
||||
if (pivotBy.length) {
|
||||
const pivotColumns = []
|
||||
for (var i = 0; i < allDecoratedColumns.length; i++) {
|
||||
if (pivotBy.indexOf(allDecoratedColumns[i].id) > -1) {
|
||||
pivotColumns.push(allDecoratedColumns[i])
|
||||
}
|
||||
}
|
||||
const pivotColumn = {
|
||||
...pivotColumns[0],
|
||||
pivotColumns,
|
||||
expander: true
|
||||
}
|
||||
visibleColumns[expanderColumnIndex] = pivotColumn
|
||||
}
|
||||
|
||||
// Build flast list of allVisibleColumns and HeaderGroups
|
||||
// Build allVisible columns and HeaderGroups
|
||||
visibleColumns.forEach((column, i) => {
|
||||
if (column.columns) {
|
||||
allVisibleColumns = allVisibleColumns.concat(column.columns)
|
||||
@@ -836,6 +710,23 @@ export default React.createClass({
|
||||
addHeader(currentSpan)
|
||||
}
|
||||
|
||||
// Move the pivot columns into a single column if needed
|
||||
if (pivotBy.length) {
|
||||
const pivotColumns = []
|
||||
for (var i = 0; i < allDecoratedColumns.length; i++) {
|
||||
if (pivotBy.indexOf(allDecoratedColumns[i].id) > -1) {
|
||||
pivotColumns.push(allDecoratedColumns[i])
|
||||
}
|
||||
}
|
||||
allVisibleColumns.unshift({
|
||||
...pivotColumns[0],
|
||||
pivotColumns
|
||||
})
|
||||
}
|
||||
|
||||
// Determine the flex percentage for each column
|
||||
const columnPercentage = 100 / allVisibleColumns.length
|
||||
|
||||
// Access the data
|
||||
let resolvedData = data.map((d, i) => {
|
||||
const row = {
|
||||
@@ -843,7 +734,6 @@ export default React.createClass({
|
||||
__index: i
|
||||
}
|
||||
allDecoratedColumns.forEach(column => {
|
||||
if (column.expander) return
|
||||
row[column.id] = column.accessor(d)
|
||||
})
|
||||
return row
|
||||
@@ -896,9 +786,11 @@ export default React.createClass({
|
||||
|
||||
return {
|
||||
resolvedData,
|
||||
columnPercentage,
|
||||
pivotColumn,
|
||||
allVisibleColumns,
|
||||
headerGroups,
|
||||
standardColumns,
|
||||
allDecoratedColumns,
|
||||
hasHeaderGroups
|
||||
}
|
||||
@@ -916,7 +808,6 @@ export default React.createClass({
|
||||
|
||||
// Resolve the data from either manual data or sorted data
|
||||
return {
|
||||
resolvedSorting,
|
||||
sortedData: manual ? resolvedData : this.sortData(resolvedData, resolvedSorting)
|
||||
}
|
||||
},
|
||||
@@ -943,12 +834,10 @@ export default React.createClass({
|
||||
}
|
||||
})
|
||||
|
||||
return initSorting
|
||||
|
||||
// return initSorting.length ? initSorting : [{
|
||||
// id: columns.find(d => d.id).id,
|
||||
// asc: true
|
||||
// }]
|
||||
return initSorting.length ? initSorting : [{
|
||||
id: columns[0].id,
|
||||
asc: true
|
||||
}]
|
||||
},
|
||||
sortData (data, sorting) {
|
||||
const sorted = _.sortBy(data, sorting.map(sort => {
|
||||
@@ -970,7 +859,32 @@ export default React.createClass({
|
||||
}
|
||||
})
|
||||
},
|
||||
makeDecoratedColumn (column) {
|
||||
const dcol = Object.assign({}, this.props.column, column)
|
||||
|
||||
if (typeof dcol.accessor === 'string') {
|
||||
dcol.id = dcol.id || dcol.accessor
|
||||
const accessorString = dcol.accessor
|
||||
dcol.accessor = row => _.get(row, accessorString)
|
||||
return dcol
|
||||
}
|
||||
|
||||
if (dcol.accessor && !dcol.id) {
|
||||
console.warn(dcol)
|
||||
throw new Error('A column id is required if using a non-string accessor for column above.')
|
||||
}
|
||||
|
||||
if (!dcol.accessor) {
|
||||
dcol.accessor = d => undefined
|
||||
}
|
||||
|
||||
// Ensure minWidth is not greater than maxWidth if set
|
||||
if (dcol.maxWidth < dcol.minWidth) {
|
||||
dcol.minWidth = dcol.maxWidth
|
||||
}
|
||||
|
||||
return dcol
|
||||
},
|
||||
getMinRows () {
|
||||
return _.getFirstDefined(this.props.minRows, this.getStateOrProp('pageSize'))
|
||||
},
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
import React from 'react'
|
||||
import _ from 'lodash'
|
||||
import namor from 'namor'
|
||||
|
||||
import CodeHighlight from './components/codeHighlight'
|
||||
import ReactTable from '../src/index'
|
||||
|
||||
export default () => {
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
const columns = [{
|
||||
header: 'Name',
|
||||
columns: [{
|
||||
header: 'First Name',
|
||||
accessor: 'firstName',
|
||||
render: row => {
|
||||
return <span>{row.aggregated ? '...' : row.value}</span>
|
||||
}
|
||||
}, {
|
||||
header: 'Last Name',
|
||||
id: 'lastName',
|
||||
accessor: d => d.lastName
|
||||
}]
|
||||
}, {
|
||||
expander: true
|
||||
}, {
|
||||
header: 'Info',
|
||||
columns: [{
|
||||
header: 'Age',
|
||||
accessor: 'age',
|
||||
aggregate: vals => _.round(_.mean(vals)),
|
||||
render: row => {
|
||||
return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
|
||||
}
|
||||
}]
|
||||
}]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='table-wrap'>
|
||||
<ReactTable
|
||||
className='-striped -highlight'
|
||||
data={data}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
SubComponent={() => <span>Hello</span>}
|
||||
pivotBy={['lastName']}
|
||||
/>
|
||||
</div>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<br />
|
||||
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||
</div>
|
||||
<CodeHighlight>{() => getCode()}</CodeHighlight>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getCode () {
|
||||
return `
|
||||
import ReactTable from 'react-table'
|
||||
|
||||
// Create some column definitions
|
||||
const columns = [{
|
||||
header: 'Name',
|
||||
columns: [{
|
||||
header: 'First Name',
|
||||
accessor: 'firstName',
|
||||
render: row => {
|
||||
return <span>{row.aggregated ? '...' : row.value}</span>
|
||||
}
|
||||
}, {
|
||||
header: 'Last Name',
|
||||
id: 'lastName',
|
||||
accessor: d => d.lastName
|
||||
}]
|
||||
}, {
|
||||
expander: true
|
||||
}, {
|
||||
header: 'Info',
|
||||
columns: [{
|
||||
header: 'Age',
|
||||
accessor: 'age',
|
||||
aggregate: vals => _.round(_.mean(vals)),
|
||||
render: row => {
|
||||
return <span>{row.aggregated ? \`$\{row.value} (avg)\` : row.value}</span>
|
||||
}
|
||||
}]
|
||||
}]
|
||||
|
||||
return (
|
||||
<ReactTable
|
||||
className='-striped -highlight'
|
||||
data={data}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
SubComponent={() => <span>Hello</span>}
|
||||
pivotBy={['lastName']}
|
||||
/>
|
||||
)
|
||||
`
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import React from 'react'
|
||||
import _ from 'lodash'
|
||||
import namor from 'namor'
|
||||
|
||||
import CodeHighlight from './components/codeHighlight'
|
||||
import ReactTable from '../src/index'
|
||||
|
||||
export default () => {
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
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',
|
||||
sort: 'desc'
|
||||
}]
|
||||
}]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='table-wrap'>
|
||||
<ReactTable
|
||||
className='-striped -highlight'
|
||||
data={data}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
/>
|
||||
</div>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<br />
|
||||
<em>Tip: Hold shift when sorting to multi-sort!</em>
|
||||
</div>
|
||||
<CodeHighlight>{() => getCode()}</CodeHighlight>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getCode () {
|
||||
return `
|
||||
import ReactTable from 'react-table'
|
||||
|
||||
// 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 (
|
||||
<ReactTable
|
||||
data={data}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
/>
|
||||
)
|
||||
`
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
import React from 'react'
|
||||
import _ from 'lodash'
|
||||
import namor from 'namor'
|
||||
import JSONTree from 'react-json-tree'
|
||||
|
||||
import CodeHighlight from './components/codeHighlight'
|
||||
import ReactTable from '../src/index'
|
||||
|
||||
const JSONtheme = {
|
||||
scheme: 'monokai',
|
||||
author: 'wimer hazenberg (http://www.monokai.nl)',
|
||||
base00: '#272822',
|
||||
base01: '#383830',
|
||||
base02: '#49483e',
|
||||
base03: '#75715e',
|
||||
base04: '#a59f85',
|
||||
base05: '#f8f8f2',
|
||||
base06: '#f5f4f1',
|
||||
base07: '#f9f8f5',
|
||||
base08: '#f92672',
|
||||
base09: '#fd971f',
|
||||
base0A: '#f4bf75',
|
||||
base0B: '#a6e22e',
|
||||
base0C: '#a1efe4',
|
||||
base0D: '#66d9ef',
|
||||
base0E: '#ae81ff',
|
||||
base0F: '#cc6633'
|
||||
}
|
||||
|
||||
export default () => {
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
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 (
|
||||
<div>
|
||||
<div className='table-wrap'>
|
||||
<ReactTable
|
||||
className='-striped -highlight'
|
||||
data={data}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
>
|
||||
{(state, makeTable, instance) => {
|
||||
console.log(state)
|
||||
return (
|
||||
<div>
|
||||
Look! This is the entire table state and component instance at your disposal!
|
||||
<JSONTree
|
||||
data={Object.assign({}, state, {children: 'function () {...}'})}
|
||||
theme={JSONtheme}
|
||||
invertTheme
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
{makeTable()}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</ReactTable>
|
||||
</div>
|
||||
<br />
|
||||
<CodeHighlight>{() => getCode()}</CodeHighlight>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getCode () {
|
||||
return `
|
||||
import ReactTable from 'react-table'
|
||||
|
||||
// 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 (
|
||||
<ReactTable
|
||||
className='-striped -highlight'
|
||||
data={data}
|
||||
columns={columns}
|
||||
defaultPageSize={10}
|
||||
>
|
||||
{(state, makeTable, instance) => {
|
||||
console.log(state)
|
||||
return (
|
||||
<div>
|
||||
Look! This is the entire table state and component instance at your disposal!
|
||||
<JSONTree
|
||||
data={Object.assign({}, state, {children: 'function () {...}'})}
|
||||
theme={JSONtheme}
|
||||
invertTheme
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
{makeTable()}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</ReactTable>
|
||||
)
|
||||
`
|
||||
}
|
||||
@@ -24,14 +24,14 @@ export default () => {
|
||||
header: 'Last Name',
|
||||
id: 'lastName',
|
||||
accessor: d => d.lastName,
|
||||
width: 300
|
||||
maxWidth: 400
|
||||
}]
|
||||
}, {
|
||||
header: 'Info',
|
||||
columns: [{
|
||||
header: 'Age',
|
||||
accessor: 'age',
|
||||
minWidth: 400
|
||||
maxWidth: 60
|
||||
}]
|
||||
}]
|
||||
|
||||
@@ -68,14 +68,14 @@ const columns = [{
|
||||
header: 'Last Name',
|
||||
id: 'lastName',
|
||||
accessor: d => d.lastName,
|
||||
width: 300
|
||||
maxWidth: 400
|
||||
}]
|
||||
}, {
|
||||
header: 'Info',
|
||||
columns: [{
|
||||
header: 'Age',
|
||||
accessor: 'age',
|
||||
minWidth: 400
|
||||
maxWidth: 60
|
||||
}]
|
||||
}]
|
||||
|
||||
@@ -181,10 +181,6 @@ align-text@^0.1.1, align-text@^0.1.3:
|
||||
longest "^1.0.1"
|
||||
repeat-string "^1.5.2"
|
||||
|
||||
almost-equal@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd"
|
||||
|
||||
alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
|
||||
@@ -352,7 +348,26 @@ asynckit@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
|
||||
|
||||
autoprefixer@^6.3.1, autoprefixer@^6.3.7, autoprefixer@^6.7.0:
|
||||
autoprefixer-stylus@^0.13.0:
|
||||
version "0.13.0"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer-stylus/-/autoprefixer-stylus-0.13.0.tgz#cc2a864e121fad691421c82d9f3e4328137b7df4"
|
||||
dependencies:
|
||||
autoprefixer "6.6.1"
|
||||
multi-stage-sourcemap "0.2.1"
|
||||
postcss "5.2.8"
|
||||
|
||||
autoprefixer@6.6.1, autoprefixer@^6.3.1, autoprefixer@^6.3.7:
|
||||
version "6.6.1"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.6.1.tgz#11a4077abb4b313253ec2f6e1adb91ad84253519"
|
||||
dependencies:
|
||||
browserslist "~1.5.1"
|
||||
caniuse-db "^1.0.30000604"
|
||||
normalize-range "^0.1.2"
|
||||
num2fraction "^1.2.2"
|
||||
postcss "^5.2.8"
|
||||
postcss-value-parser "^3.2.3"
|
||||
|
||||
autoprefixer@^6.7.0:
|
||||
version "6.7.0"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.0.tgz#88992cf04df141e7b8293550f2ee716c565d1cae"
|
||||
dependencies:
|
||||
@@ -1175,7 +1190,7 @@ babel-runtime@6.11.6:
|
||||
core-js "^2.4.0"
|
||||
regenerator-runtime "^0.9.5"
|
||||
|
||||
babel-runtime@6.x.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.5.0, babel-runtime@^6.6.1, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
|
||||
babel-runtime@6.x.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.5.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1, babel-runtime@^6.9.2:
|
||||
version "6.22.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
|
||||
dependencies:
|
||||
@@ -1234,10 +1249,6 @@ balanced-match@^0.4.1, balanced-match@^0.4.2:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
|
||||
|
||||
base16@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
|
||||
|
||||
base64-js@^1.0.2:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
|
||||
@@ -1430,7 +1441,13 @@ browserify@13.1.0:
|
||||
vm-browserify "~0.0.1"
|
||||
xtend "^4.0.0"
|
||||
|
||||
browserslist@^1.0.1, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@~1.6.0:
|
||||
browserslist@^1.0.1, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@~1.5.1:
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.5.2.tgz#1c82fde0ee8693e6d15c49b7bff209dc06298c56"
|
||||
dependencies:
|
||||
caniuse-db "^1.0.30000604"
|
||||
|
||||
browserslist@~1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.6.0.tgz#85fb7c993540d3fda31c282baf7f5aee698ac9ee"
|
||||
dependencies:
|
||||
@@ -1511,7 +1528,7 @@ caniuse-api@^1.5.2:
|
||||
lodash.uniq "^4.3.0"
|
||||
shelljs "^0.7.0"
|
||||
|
||||
caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000613:
|
||||
caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000604, caniuse-db@^1.0.30000613:
|
||||
version "1.0.30000617"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000617.tgz#9b7fd81f58a35526315c83e60cb5f076f0beb392"
|
||||
|
||||
@@ -1645,13 +1662,6 @@ color-name@^1.0.0, color-name@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
|
||||
|
||||
color-space@^1.14.3:
|
||||
version "1.14.7"
|
||||
resolved "https://registry.yarnpkg.com/color-space/-/color-space-1.14.7.tgz#b7f5a31779427bb25f9927a69410d80c2eaaa71b"
|
||||
dependencies:
|
||||
husl "^5.0.0"
|
||||
mumath "^3.0.0"
|
||||
|
||||
color-string@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
|
||||
@@ -2952,10 +2962,6 @@ https-browserify@0.0.1, https-browserify@~0.0.0:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
|
||||
|
||||
husl@^5.0.0:
|
||||
version "5.0.3"
|
||||
resolved "https://registry.yarnpkg.com/husl/-/husl-5.0.3.tgz#ee272aaff1bebe40df3588ed007b70de7e679788"
|
||||
|
||||
iconv-lite@0.4.13:
|
||||
version "0.4.13"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
|
||||
@@ -3462,14 +3468,6 @@ lodash.camelcase@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
|
||||
|
||||
lodash.curry@^4.0.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
|
||||
|
||||
lodash.flow@^3.3.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
|
||||
|
||||
lodash.indexof@^4.0.5:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
|
||||
@@ -3734,11 +3732,11 @@ ms@0.7.2:
|
||||
version "0.7.2"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
|
||||
|
||||
mumath@^3.0.0:
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/mumath/-/mumath-3.3.3.tgz#262e10fcc10699f7050dc707575d39db5c903181"
|
||||
multi-stage-sourcemap@0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/multi-stage-sourcemap/-/multi-stage-sourcemap-0.2.1.tgz#b09fc8586eaa17f81d575c4ad02e0f7a3f6b1105"
|
||||
dependencies:
|
||||
almost-equal "^1.1.0"
|
||||
source-map "^0.1.34"
|
||||
|
||||
mute-stream@0.0.5:
|
||||
version "0.0.5"
|
||||
@@ -4451,7 +4449,16 @@ postcss-zindex@^2.0.1:
|
||||
postcss "^5.0.4"
|
||||
uniqs "^2.0.0"
|
||||
|
||||
postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.11, postcss@^5.2.5:
|
||||
postcss@5.2.8, postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.5, postcss@^5.2.8:
|
||||
version "5.2.8"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.8.tgz#05720c49df23c79bda51fd01daeb1e9222e94390"
|
||||
dependencies:
|
||||
chalk "^1.1.3"
|
||||
js-base64 "^2.1.9"
|
||||
source-map "^0.5.6"
|
||||
supports-color "^3.1.2"
|
||||
|
||||
postcss@^5.2.11:
|
||||
version "5.2.11"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.11.tgz#ff29bcd6d2efb98bfe08a022055ec599bbe7b761"
|
||||
dependencies:
|
||||
@@ -4533,10 +4540,6 @@ punycode@^1.2.4, punycode@^1.3.2, punycode@^1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
|
||||
|
||||
pure-color@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.2.0.tgz#702d2f2819dd545b1fde5116fca5f0c2dad2d18d"
|
||||
|
||||
q@^1.1.2:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
|
||||
@@ -4588,16 +4591,6 @@ rc@~1.1.6:
|
||||
minimist "^1.2.0"
|
||||
strip-json-comments "~1.0.4"
|
||||
|
||||
react-base16-styling@^0.4.1:
|
||||
version "0.4.6"
|
||||
resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.4.6.tgz#ac23cb19b278974d965003b88f06a038d790bc80"
|
||||
dependencies:
|
||||
base16 "^1.0.0"
|
||||
color-space "^1.14.3"
|
||||
lodash.curry "^4.0.1"
|
||||
lodash.flow "^3.3.0"
|
||||
pure-color "^1.2.0"
|
||||
|
||||
react-docgen@^2.12.1:
|
||||
version "2.13.0"
|
||||
resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.13.0.tgz#7fcc4a3104ea8d4fd428383ba38df11166837be9"
|
||||
@@ -4633,14 +4626,6 @@ react-inspector@^1.1.0:
|
||||
babel-runtime "^6.9.2"
|
||||
is-dom "^1.0.5"
|
||||
|
||||
react-json-tree@^0.10.1:
|
||||
version "0.10.1"
|
||||
resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.10.1.tgz#7f9eab36abf8adf329c7e5ad4091f5987bcbd5de"
|
||||
dependencies:
|
||||
babel-runtime "^6.6.1"
|
||||
react-base16-styling "^0.4.1"
|
||||
react-pure-render "^1.0.2"
|
||||
|
||||
react-komposer@^1.9.0:
|
||||
version "1.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-komposer/-/react-komposer-1.13.1.tgz#4b8ac4bcc71323bd7413dcab95c831197f50eed0"
|
||||
@@ -4669,10 +4654,6 @@ react-modal@^1.2.0, react-modal@^1.2.1:
|
||||
exenv "1.2.0"
|
||||
lodash.assign "^4.2.0"
|
||||
|
||||
react-pure-render@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-pure-render/-/react-pure-render-1.0.2.tgz#9d8a928c7f2c37513c2d064e57b3e3c356e9fabb"
|
||||
|
||||
react-simple-di@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "http://registry.npmjs.org/react-simple-di/-/react-simple-di-1.2.0.tgz#dde0e5bf689f391ef2ab02c9043b213fe239c6d0"
|
||||
@@ -5160,7 +5141,7 @@ source-map-support@^0.4.2:
|
||||
dependencies:
|
||||
source-map "^0.5.3"
|
||||
|
||||
source-map@0.1.x:
|
||||
source-map@0.1.x, source-map@^0.1.34:
|
||||
version "0.1.43"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
|
||||
dependencies:
|
||||
@@ -5385,7 +5366,7 @@ supports-color@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
|
||||
|
||||
supports-color@^3.1.0, supports-color@^3.2.3:
|
||||
supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
|
||||
version "3.2.3"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
|
||||
dependencies:
|
||||
|
||||
Reference in New Issue
Block a user