Skip to content

Commit 8a362e4

Browse files
tannerlinsleytannerlinsley
committed
Rollback on table partials to fix mounting/unmounting issues
1 parent 265a5c8 commit 8a362e4

File tree

3 files changed

+76
-233
lines changed

3 files changed

+76
-233
lines changed

‎README.md

Lines changed: 18 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const data = [{
102102

103103
const columns = [{
104104
header: 'Name',
105-
accessor: 'name' // String-based value accessors!
105+
accessor: 'name' // String-based value accessors!
106106
}, {
107107
header: 'Age',
108108
accessor: 'age',
@@ -607,56 +607,21 @@ Possibly one of the coolest features of React-Table is its ability to expose int
607607

608608
The function you pass will be called with the following items:
609609
- Fully-resolved state of the table
610-
- The standard table component (including individual partials as properties of this component)
610+
- A function that returns the standard table component
611611
- The instance of the component
612612

613613
You can then return any JSX or react you want! This turns out to be perfect for:
614-
- Reordering the internal components of the table
615614
- Accessing the internal state of the table without a `ref`
616615
- Decorating the table or extending it with your own UI
617616
- Building your own custom display logic
618617

619-
Custom pagination order:
620-
```javascript
621-
<ReactTable
622-
data={data}
623-
columns={columns}
624-
>
625-
{(state, {
626-
Root,
627-
Table,
628-
HeaderGroups,
629-
Headers,
630-
Rows,
631-
Footers,
632-
Pagination,
633-
NoData,
634-
Loading
635-
}, instance) => {
636-
return (
637-
<Root>
638-
<Pagination />
639-
<Table>
640-
<HeaderGroups />
641-
<Headers />
642-
<Rows />
643-
<Footers />
644-
</Table>
645-
<NoData />
646-
<Loading />
647-
</Root>
648-
)
649-
}}
650-
</ReactTable>
651-
```
652-
653618
Accessing internal state and wrapping with more UI:
654619
```javascript
655620
<ReactTable
656621
data={data}
657622
columns={columns}
658623
>
659-
{(state, Table, instance) => {
624+
{(state, makeTable, instance) => {
660625
return (
661626
<div style={{
662627
background: '#ffcf00',
@@ -665,7 +630,7 @@ Accessing internal state and wrapping with more UI:
665630
padding: '5px'
666631
}}>
667632
<pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
668-
<Table />
633+
{makeTable()}
669634
</div>
670635
)
671636
}}
@@ -683,18 +648,20 @@ Though we confidently stand by the markup and architecture behind it, `react-tab
683648
// Change the global default
684649
import { ReactTableDefaults } from 'react-table'
685650
Object.assign(ReactTableDefaults, {
686-
TableComponent: Component,
687-
TheadComponent: Component,
688-
TbodyComponent: Component,
689-
TrGroupComponent: Component,
690-
TrComponent: Component,
691-
ThComponent: Component,
692-
TdComponent: Component,
693-
PaginationComponent: Component,
694-
PreviousComponent: Component,
695-
NextComponent: Component,
696-
LoadingComponent: Component,
697-
ExpanderComponent: Component
651+
TableComponent: component,
652+
TheadComponent: component,
653+
TbodyComponent: component,
654+
TrGroupComponent: component,
655+
TrComponent: component,
656+
ThComponent: component
657+
TdComponent: component,
658+
TfootComponent: component,
659+
ExpanderComponent: component,
660+
PaginationComponent: component,
661+
PreviousComponent: undefined,
662+
NextComponent: undefined,
663+
LoadingComponent: component,
664+
NoDataComponent: component,
698665
})
699666

700667
// Or change per instance

‎src/index.js

Lines changed: 55 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -709,110 +709,66 @@ export default React.createClass({
709709
const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
710710
const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
711711

712-
const Root = ({children}) => {
713-
return (
714-
<div
715-
className={classnames(
716-
'ReactTable',
717-
className,
718-
rootProps.className
719-
)}
720-
style={{
721-
...style,
722-
...rootProps.style
723-
}}
724-
{...rootProps.rest}
725-
>
726-
{children}
727-
</div>
728-
)
729-
}
730-
731-
const Table = ({children}) => (
732-
<TableComponent
733-
className={classnames(tableProps.className)}
734-
style={tableProps.style}
735-
{...tableProps.rest}
736-
>
737-
{children}
738-
</TableComponent>
739-
)
740-
741-
const HeaderGroups = () => hasHeaderGroups ? makeHeaderGroups() : null
742-
const Headers = () => makeHeaders()
743-
const Rows = ({children}) => (
744-
<TbodyComponent
745-
className={classnames(tBodyProps.className)}
712+
const makeTable = () => (
713+
<div
714+
className={classnames(
715+
'ReactTable',
716+
className,
717+
rootProps.className
718+
)}
746719
style={{
747-
...tBodyProps.style,
748-
minWidth: `${rowMinWidth}px`
720+
...style,
721+
...rootProps.style
749722
}}
750-
{...tBodyProps.rest}
723+
{...rootProps.rest}
751724
>
752-
{pageRows.map((d, i) => makePageRow(d, i))}
753-
{padRows.map(makePadRow)}
754-
</TbodyComponent>
755-
)
756-
757-
const Footers = () => hasColumnFooter ? makeColumnFooters() : null
758-
759-
const Pagination = () => showPagination ? (
760-
<PaginationComponent
761-
{...resolvedState}
762-
pages={pages}
763-
canPrevious={canPrevious}
764-
canNext={canNext}
765-
onPageChange={this.onPageChange}
766-
onPageSizeChange={this.onPageSizeChange}
767-
className={paginationProps.className}
768-
style={paginationProps.style}
769-
{...paginationProps.rest}
770-
/>
771-
) : null
772-
773-
const NoData = () => !pageRows.length ? (
774-
<NoDataComponent
775-
{...noDataProps}
776-
>
777-
{_.normalizeComponent(noDataText)}
778-
</NoDataComponent>
779-
) : null
780-
781-
const Loading = () => (
782-
<LoadingComponent
783-
loading={loading}
784-
loadingText={loadingText}
785-
{...loadingProps}
786-
/>
787-
)
788-
789-
const StandardTable = () => (
790-
<Root>
791-
<Table>
792-
<HeaderGroups />
793-
<Headers />
794-
<Rows />
795-
<Footers />
796-
</Table>
797-
<Pagination />
798-
<NoData />
799-
<Loading />
800-
</Root>
725+
<TableComponent
726+
className={classnames(tableProps.className)}
727+
style={tableProps.style}
728+
{...tableProps.rest}
729+
>
730+
{hasHeaderGroups ? makeHeaderGroups() : null}
731+
{makeHeaders()}
732+
<TbodyComponent
733+
className={classnames(tBodyProps.className)}
734+
style={{
735+
...tBodyProps.style,
736+
minWidth: `${rowMinWidth}px`
737+
}}
738+
{...tBodyProps.rest}
739+
>
740+
{pageRows.map((d, i) => makePageRow(d, i))}
741+
{padRows.map(makePadRow)}
742+
</TbodyComponent>
743+
{hasColumnFooter ? makeColumnFooters() : null}
744+
</TableComponent>
745+
{showPagination ? (
746+
<PaginationComponent
747+
{...resolvedState}
748+
pages={pages}
749+
canPrevious={canPrevious}
750+
canNext={canNext}
751+
onPageChange={this.onPageChange}
752+
onPageSizeChange={this.onPageSizeChange}
753+
className={paginationProps.className}
754+
style={paginationProps.style}
755+
{...paginationProps.rest}
756+
/>
757+
) : null}
758+
<NoDataComponent
759+
{...noDataProps}
760+
>
761+
{_.normalizeComponent(noDataText)}
762+
</NoDataComponent>
763+
<LoadingComponent
764+
loading={loading}
765+
loadingText={loadingText}
766+
{...loadingProps}
767+
/>
768+
</div>
801769
)
802770

803-
Object.assign(StandardTable, {
804-
Root,
805-
Table,
806-
HeaderGroups,
807-
Headers,
808-
Rows,
809-
Footers,
810-
Pagination,
811-
NoData,
812-
Loading
813-
})
814-
815771
// childProps are optionally passed to a function-as-a-child
816-
return children ? children(finalState, StandardTable, this) : <StandardTable />
772+
return children ? children(finalState, makeTable, this) : makeTable()
817773
}
818774
})

‎stories/FunctionalRendering.js

Lines changed: 3 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -60,93 +60,13 @@ export default () => {
6060
return (
6161
<div>
6262
<strong>Functional rendering</strong> simply means that you have all of the building blocks to render your own React Table however you'd like.
63-
<br />
64-
<br />
65-
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.
6663

6764
<br />
6865
<br />
6966
<br />
7067
<br />
7168

72-
<strong>Pagination at the top using partials:</strong>
73-
<br />
74-
<br />
75-
76-
<div className='table-wrap'>
77-
<ReactTable
78-
data={data}
79-
columns={columns}
80-
>
81-
{(state, {
82-
Root,
83-
Table,
84-
HeaderGroups,
85-
Headers,
86-
Rows,
87-
Footers,
88-
Pagination,
89-
NoData,
90-
Loading
91-
}, instance) => {
92-
return (
93-
<Root>
94-
<Pagination />
95-
<Table>
96-
<HeaderGroups />
97-
<Headers />
98-
<Rows />
99-
<Footers />
100-
</Table>
101-
<NoData />
102-
<Loading />
103-
</Root>
104-
)
105-
}}
106-
</ReactTable>
107-
</div>
108-
109-
<CodeHighlight>{() => `
110-
import ReactTable from 'react-table'
111-
112-
return (
113-
<ReactTable
114-
data={data}
115-
columns={columns}
116-
>
117-
{(state, {
118-
Root,
119-
Table,
120-
HeaderGroups,
121-
Headers,
122-
Rows,
123-
Footers,
124-
Pagination,
125-
NoData,
126-
Loading
127-
}, instance) => {
128-
return (
129-
<Root>
130-
<Pagination />
131-
<Table>
132-
<HeaderGroups />
133-
<Headers />
134-
<Rows />
135-
<Footers />
136-
</Table>
137-
<NoData />
138-
<Loading />
139-
</Root>
140-
)
141-
}}
142-
</ReactTable>
143-
)
144-
`}</CodeHighlight>
145-
146-
<br />
147-
<br />
148-
149-
<strong>Wrapping the standard table output</strong>
69+
<strong>Decorating the standard table output</strong>
15070
<br />
15171
<br />
15272

@@ -155,7 +75,7 @@ return (
15575
data={data}
15676
columns={columns}
15777
>
158-
{(state, Table, instance) => {
78+
{(state, makeTable, instance) => {
15979
return (
16080
<div style={{
16181
background: '#ffcf00',
@@ -164,7 +84,7 @@ return (
16484
padding: '5px'
16585
}}>
16686
<pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
167-
<Table />
87+
{makeTable()}
16888
</div>
16989
)
17090
}}

0 commit comments

Comments
 (0)