vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-07-07 20:50:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Rollback on table partials to fix mounting/unmounting issues

Browse Source
This commit is contained in:
Tanner Linsley
2017-02-16 12:40:12 -07:00
parent 265a5c8753
commit 8a362e4d04
3 changed files with 76 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
README.md
View File

@@ -102,7 +102,7 @@ const data = [{
const columns = [{
header: 'Name',
accessor: 'name' // String-based value accessors!
accessor: 'name' // String-based value accessors!
}, {
header: 'Age',
accessor: 'age',
@@ -607,56 +607,21 @@ Possibly one of the coolest features of React-Table is its ability to expose int
The function you pass will be called with the following items:
- Fully-resolved state of the table
- The standard table component (including individual partials as properties of this component)
- A function that returns the standard table component
- The instance of the component
You can then return any JSX or react you want! This turns out to be perfect for:
- Reordering the internal components of the table
- Accessing the internal state of the table without a `ref`
- Decorating the table or extending it with your own UI
- Building your own custom display logic
Custom pagination order:
```javascript
<ReactTable
data={data}
columns={columns}
>
{(state, {
Root,
Table,
HeaderGroups,
Headers,
Rows,
Footers,
Pagination,
NoData,
Loading
}, instance) => {
return (
<Root>
<Pagination />
<Table>
<HeaderGroups />
<Headers />
<Rows />
<Footers />
</Table>
<NoData />
<Loading />
</Root>
)
}}
</ReactTable>
```
Accessing internal state and wrapping with more UI:
```javascript
<ReactTable
data={data}
columns={columns}
>
{(state, Table, instance) => {
{(state, makeTable, instance) => {
return (
<div style={{
background: '#ffcf00',
@@ -665,7 +630,7 @@ Accessing internal state and wrapping with more UI:
padding: '5px'
}}>
<pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
<Table />
{makeTable()}
</div>
)
}}
@@ -683,18 +648,20 @@ Though we confidently stand by the markup and architecture behind it, `react-tab
// Change the global default
import { ReactTableDefaults } from 'react-table'
Object.assign(ReactTableDefaults, {
TableComponent: Component,
TheadComponent: Component,
TbodyComponent: Component,
TrGroupComponent: Component,
TrComponent: Component,
ThComponent: Component,
TdComponent: Component,
PaginationComponent: Component,
PreviousComponent: Component,
NextComponent: Component,
LoadingComponent: Component,
ExpanderComponent: Component
TableComponent: component,
TheadComponent: component,
TbodyComponent: component,
TrGroupComponent: component,
TrComponent: component,
ThComponent: component
TdComponent: component,
TfootComponent: component,
ExpanderComponent: component,
PaginationComponent: component,
PreviousComponent: undefined,
NextComponent: undefined,
LoadingComponent: component,
NoDataComponent: component,
})
// Or change per instance

154
src/index.js
View File

@@ -709,110 +709,66 @@ export default React.createClass({
const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
const Root = ({children}) => {
return (
<div
className={classnames(
'ReactTable',
className,
rootProps.className
)}
style={{
...style,
...rootProps.style
}}
{...rootProps.rest}
>
{children}
</div>
)
}
const Table = ({children}) => (
<TableComponent
className={classnames(tableProps.className)}
style={tableProps.style}
{...tableProps.rest}
>
{children}
</TableComponent>
)
const HeaderGroups = () => hasHeaderGroups ? makeHeaderGroups() : null
const Headers = () => makeHeaders()
const Rows = ({children}) => (
<TbodyComponent
className={classnames(tBodyProps.className)}
const makeTable = () => (
<div
className={classnames(
'ReactTable',
className,
rootProps.className
)}
style={{
...tBodyProps.style,
minWidth: `${rowMinWidth}px`
...style,
...rootProps.style
}}
{...tBodyProps.rest}
{...rootProps.rest}
>
{pageRows.map((d, i) => makePageRow(d, i))}
{padRows.map(makePadRow)}
</TbodyComponent>
<TableComponent
className={classnames(tableProps.className)}
style={tableProps.style}
{...tableProps.rest}
>
{hasHeaderGroups ? makeHeaderGroups() : null}
{makeHeaders()}
<TbodyComponent
className={classnames(tBodyProps.className)}
style={{
...tBodyProps.style,
minWidth: `${rowMinWidth}px`
}}
{...tBodyProps.rest}
>
{pageRows.map((d, i) => makePageRow(d, i))}
{padRows.map(makePadRow)}
</TbodyComponent>
{hasColumnFooter ? makeColumnFooters() : null}
</TableComponent>
{showPagination ? (
<PaginationComponent
{...resolvedState}
pages={pages}
canPrevious={canPrevious}
canNext={canNext}
onPageChange={this.onPageChange}
onPageSizeChange={this.onPageSizeChange}
className={paginationProps.className}
style={paginationProps.style}
{...paginationProps.rest}
/>
) : null}
<NoDataComponent
{...noDataProps}
>
{_.normalizeComponent(noDataText)}
</NoDataComponent>
<LoadingComponent
loading={loading}
loadingText={loadingText}
{...loadingProps}
/>
</div>
)
const Footers = () => hasColumnFooter ? makeColumnFooters() : null
const Pagination = () => showPagination ? (
<PaginationComponent
{...resolvedState}
pages={pages}
canPrevious={canPrevious}
canNext={canNext}
onPageChange={this.onPageChange}
onPageSizeChange={this.onPageSizeChange}
className={paginationProps.className}
style={paginationProps.style}
{...paginationProps.rest}
/>
) : null
const NoData = () => !pageRows.length ? (
<NoDataComponent
{...noDataProps}
>
{_.normalizeComponent(noDataText)}
</NoDataComponent>
) : null
const Loading = () => (
<LoadingComponent
loading={loading}
loadingText={loadingText}
{...loadingProps}
/>
)
const StandardTable = () => (
<Root>
<Table>
<HeaderGroups />
<Headers />
<Rows />
<Footers />
</Table>
<Pagination />
<NoData />
<Loading />
</Root>
)
Object.assign(StandardTable, {
Root,
Table,
HeaderGroups,
Headers,
Rows,
Footers,
Pagination,
NoData,
Loading
})
// childProps are optionally passed to a function-as-a-child
return children ? children(finalState, StandardTable, this) : <StandardTable />
return children ? children(finalState, makeTable, this) : makeTable()
}
})

86
stories/FunctionalRendering.js
View File

@@ -60,16 +60,13 @@ export default () => {
return (
<div>
<strong>Functional rendering</strong> simply means that you have all of the building blocks to render your own React Table however you'd like.
<br />
<br />
Whether it's <strong>completely custom</strong>, or even just <strong>rearranging the order of the table's elements</strong>, this is how you can do it.
<br />
<br />
<br />
<br />
<strong>Pagination at the top using partials:</strong>
<strong>Decorating the standard table output</strong>
<br />
<br />
@@ -78,84 +75,7 @@ export default () => {
data={data}
columns={columns}
>
{(state, {
Root,
Table,
HeaderGroups,
Headers,
Rows,
Footers,
Pagination,
NoData,
Loading
}, instance) => {
return (
<Root>
<Pagination />
<Table>
<HeaderGroups />
<Headers />
<Rows />
<Footers />
</Table>
<NoData />
<Loading />
</Root>
)
}}
</ReactTable>
</div>
<CodeHighlight>{() => `
import ReactTable from 'react-table'
return (
<ReactTable
data={data}
columns={columns}
>
{(state, {
Root,
Table,
HeaderGroups,
Headers,
Rows,
Footers,
Pagination,
NoData,
Loading
}, instance) => {
return (
<Root>
<Pagination />
<Table>
<HeaderGroups />
<Headers />
<Rows />
<Footers />
</Table>
<NoData />
<Loading />
</Root>
)
}}
</ReactTable>
)
`}</CodeHighlight>
<br />
<br />
<strong>Wrapping the standard table output</strong>
<br />
<br />
<div className='table-wrap'>
<ReactTable
data={data}
columns={columns}
>
{(state, Table, instance) => {
{(state, makeTable, instance) => {
return (
<div style={{
background: '#ffcf00',
@@ -164,7 +84,7 @@ return (
padding: '5px'
}}>
<pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
<Table />
{makeTable()}
</div>
)
}}