From 8a362e4d043d501a86b50dade9c4a8eafd10f808 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Thu, 16 Feb 2017 12:40:12 -0700
Subject: [PATCH] Rollback on table partials to fix mounting/unmounting issues

---
 README.md                      |  69 ++++-----------
 src/index.js                   | 154 ++++++++++++---------------------
 stories/FunctionalRendering.js |  86 +-----------------
 3 files changed, 76 insertions(+), 233 deletions(-)

diff --git a/README.md b/README.md
index b085861..f523273 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/src/index.js b/src/index.js
index c3dbdf8..0fb4dbd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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()
   }
 })
diff --git a/stories/FunctionalRendering.js b/stories/FunctionalRendering.js
index cf52b65..0c49dac 100644
--- a/stories/FunctionalRendering.js
+++ b/stories/FunctionalRendering.js
@@ -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>
             )
           }}