5.3.1

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',
@@ -256,7 +256,7 @@ Or just define them as props
 ```javascript
 [{
   // General
-  accessor: 'propertyName' or Accessor eg. (row) => row.propertyName,
+  accessor: 'propertyName' // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)
   id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
   sortable: true,
   show: true, // can be used to hide a column
@@ -296,6 +296,28 @@ Or just define them as props
 }]
 ```
 
+## Accessors
+Accessors are functions that return the value to populate the row's value for the column.
+This lets the render function not have to worry about accessing the correct data, the value is automatically populated in it's props.
+
+If a `string` or `array` is passed the default accessor is used.
+The default accessor will parse the input into an array and recursively flatten it.
+Any values that contain a dot (`.`) will be split.
+Any values that contain bracket (`[]`) will be split.
+This array is then used as the path to the value to return.
+
+("$" is the placeholder value that would be returned by the default accessor)
+| value        | path            | data                   |
+|--------------|-----------------|------------------------|
+| "a"          | ["a"]           | {"a": $}               |
+| "a.b"        | ["a", "b"]      | {"a": {"b": $}}        |
+| "a[0]"       | ["a", "0"]      | {"a": [$]}             |
+| ["a.b", "c"] | ["a", "b", "c"] | {"a": {"b": {"c": $}}} |
+
+*NOTE*
+If your data has a field/key with a dot (`.`) you will need to supply a custom accessor.
+
+
 ## Column Header Groups
 To group columns with another header column, just nest your columns in a header column.  Header columns utilize the same header properties as regular columns.
 ```javascript
@@ -585,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',
@@ -643,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>
     )
   }}
@@ -661,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

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.fe48f7ea9cf295bed07c.bundle.js"></script>
+        <script src="static/preview.437e4f72f80621de5f68.bundle.js"></script>
       </body>
     </html>
   

docs/static/preview.437e4f72f80621de5f68.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.437e4f72f80621de5f68.bundle.js","sources":["webpack:///static/preview.437e4f72f80621de5f68.bundle.js"],"mappings":"AAAA;AAkuDA;AAq5DA;AA8xFA;AA2+EA;AA++NA;AA06GA;AAgsDA;AA8/DA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAszFA;AA65FA;AA4/CA;AAwzCA;AAmlCA;AAotDA;AAyrBA;AAkPA;AA84EA","sourceRoot":""}

docs/static/preview.fe48f7ea9cf295bed07c.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.fe48f7ea9cf295bed07c.bundle.js","sources":["webpack:///static/preview.fe48f7ea9cf295bed07c.bundle.js"],"mappings":"AAAA;AAkuDA;AA48CA;AA0sGA;AAigFA;AAyiNA;AA0rFA;AAk4FA;AAsiEA;AAwuDA;AAu9DA;AA6gDA;AAixDA;AA69CA;AAk+DA;AAqoDA;AAs9CA;AAgoDA;AAwsEA;AAuoDA;AAmvCA;AAioDA;AAkpDA;AA6lEA;AAs4DA;AAuyDA;AAokDA;AA0mFA;AAyiGA;AA2gDA;AAm2CA;AAy/BA;AA4uDA;AAy4BA;AA0XA;AA6zEA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

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()
   }
 })

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>
             )
           }}