Skip to content
Permalink
Browse files

refactor(usetable/usetablestate): integrate useTableState into useTable

useTableState was an early and hasty abstraction that hasn't proved useful in many ways. Anything
you could do with useTableState, you could easily do using the same options (assuming they exist) in
the useTable hook. For this reason, state is now a first class citizen of the useTable hook, along
with more sane properties and option locations for anything pertaining to state.
  • Loading branch information...
tannerlinsley committed Oct 6, 2019
1 parent 7db7d59 commit bbfc6428b7ce530cd6e03938084068b97f3800c7

Large diffs are not rendered by default.

@@ -38,7 +38,7 @@
- The "Kitchen Sink"
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
- **Controlled via `useTableState`** - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table using the `useTableState` hook.
- **Controlled** - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
- Pagination (Controlled)
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
- [Open in CodeSandobx](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
@@ -294,7 +294,7 @@ function Table({ columns, data }) {
</tbody>
</table>
<pre>
<code>{JSON.stringify(state[0], null, 2)}</code>
<code>{JSON.stringify(state, null, 2)}</code>
</pre>
</>
)
@@ -95,7 +95,7 @@ function Table({ columns, data }) {
</tbody>
</table>
<pre>
<code>{JSON.stringify(state[0], null, 2)}</code>
<code>{JSON.stringify(state, null, 2)}</code>
</pre>
</>
)
@@ -95,7 +95,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
nextPage,
previousPage,
setPageSize,
state: [{ pageIndex, pageSize }],
state: { pageIndex, pageSize },
} = useTable(
{
columns,
@@ -40,7 +40,7 @@ function Table({ columns: userColumns, data }) {
headerGroups,
rows,
prepareRow,
state: [{ expanded }],
state: { expanded },
} = useTable(
{
columns: userColumns,
@@ -235,7 +235,7 @@ function Table({ columns, data }) {
<>
<div>
<pre>
<code>{JSON.stringify(state[0].filters, null, 2)}</code>
<code>{JSON.stringify(state.filters, null, 2)}</code>
</pre>
</div>
<table {...getTableProps()}>
@@ -40,7 +40,7 @@ function Table({ columns, data }) {
headerGroups,
rows,
prepareRow,
state: [{ groupBy, expanded }],
state: { groupBy, expanded },
} = useTable(
{
columns,
@@ -8,7 +8,6 @@ import {
useGroupBy,
useExpanded,
useRowSelect,
useTableState,
} from 'react-table'
import matchSorter from 'match-sorter'

@@ -265,8 +264,6 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
[]
)

const tableState = useTableState({ pageIndex: 2 })

// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
@@ -285,17 +282,22 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
nextPage,
previousPage,
setPageSize,
state: [
{ pageIndex, pageSize, groupBy, expanded, filters, selectedRowPaths },
],
state: {
pageIndex,
pageSize,
groupBy,
expanded,
filters,
selectedRowPaths,
},
} = useTable(
{
columns,
data,
defaultColumn,
filterTypes,
// nestExpandedRows: true,
state: tableState,
initialState: { pageIndex: 2 },
// updateMyData isn't part of the API, but
// anything we put into these options will
// automatically be available on the instance.
@@ -8,7 +8,6 @@ import {
useGroupBy,
useExpanded,
useRowSelect,
useTableState,
} from 'react-table'
import matchSorter from 'match-sorter'

@@ -265,8 +264,6 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
[]
)

const tableState = useTableState({ pageIndex: 2 })

// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
@@ -285,17 +282,22 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
nextPage,
previousPage,
setPageSize,
state: [
{ pageIndex, pageSize, groupBy, expanded, filters, selectedRowPaths },
],
state: {
pageIndex,
pageSize,
groupBy,
expanded,
filters,
selectedRowPaths,
},
} = useTable(
{
columns,
data,
defaultColumn,
filterTypes,
// nestExpandedRows: true,
state: tableState,
initialState: { pageIndex: 2 },
// updateMyData isn't part of the API, but
// anything we put into these options will
// automatically be available on the instance.
@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import { useTable, useTableState, usePagination } from 'react-table'
import { useTable, usePagination } from 'react-table'

import makeData from './makeData'

@@ -47,17 +47,6 @@ function Table({
loading,
pageCount: controlledPageCount,
}) {
// Use useTableState to hoist the state (and state updater) out of the table and control it
const tableState = useTableState({ pageIndex: 0 })

// Now we can get our table state from the hoisted table state tuple
const [{ pageIndex, pageSize }] = tableState

// Listen for changes in pagination and use the state to fetch our new data
React.useEffect(() => {
fetchData({ pageIndex, pageSize })
}, [fetchData, pageIndex, pageSize])

const {
getTableProps,
getTableBodyProps,
@@ -72,11 +61,13 @@ function Table({
nextPage,
previousPage,
setPageSize,
// Get the state from the instance
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
state: tableState, // Pass our hoisted table state
state: { pageIndex: 0 }, // Pass our hoisted table state
manualPagination: true, // Tell the usePagination
// hook that we'll handle our own data fetching
// This means we'll also have to provide our own
@@ -86,6 +77,13 @@ function Table({
usePagination
)

// Now we can get our table state from the hoisted table state tuple

// Listen for changes in pagination and use the state to fetch our new data
React.useEffect(() => {
fetchData({ pageIndex, pageSize })
}, [fetchData, pageIndex, pageSize])

// Render the UI for your table
return (
<>
@@ -42,7 +42,7 @@ function MyTable(props) {
prepareRow,
+ pageOptions,
+ page,
+ state: [{ pageIndex, pageSize }],
+ state: { pageIndex, pageSize },
+ gotoPage,
+ previousPage,
+ nextPage,
@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import { useTable, usePagination, useTableState } from 'react-table'
import { useTable, usePagination } from 'react-table'

import makeData from './makeData'

@@ -38,8 +38,6 @@ const Styles = styled.div`
`

function Table({ columns, data }) {
const tableState = useTableState({ pageIndex: 2 })

// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
@@ -58,12 +56,12 @@ function Table({ columns, data }) {
nextPage,
previousPage,
setPageSize,
state: [{ pageIndex, pageSize }],
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
state: tableState,
initialState: { pageIndex: 2 },
},
usePagination
)
@@ -42,7 +42,7 @@ function Table({ columns, data }) {
rows,
prepareRow,
selectedFlatRows,
state: [{ selectedRowPaths }],
state: { selectedRowPaths },
} = useTable(
{
columns,
@@ -44,7 +44,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
rows,
prepareRow,
flatColumns,
state: [{ expanded }],
state: { expanded },
} = useTable(
{
columns: userColumns,
@@ -202,15 +202,23 @@ declare module 'react-table' {
getTableProps: (userProps?: any) => any
getRowProps: (userProps?: any) => any
prepareRow: (row: Row<D>) => any
state: TableState<D>
setState: SetState<D>
}

export interface TableOptions<D = {}> {
data: D[]
columns: HeaderColumn<D>[]
state: State<D>
debug?: boolean
loading: boolean
defaultColumn?: Partial<Column<D>>
initialState?: Partial<TableState<D>>
state?: Partial<TableState<D>>
reducer?: (
oldState: TableState<D>,
newState: TableState<D>,
type: string
) => any
}

// The empty definition of TableState is not an error. It provides a definition
@@ -232,8 +240,6 @@ declare module 'react-table' {
actions: any
) => void

export type State<D> = [TableState<D>, SetState<D>]

export function useTable<D = {}>(
props: TableOptions<D>,
...plugins: any[]
@@ -267,19 +273,6 @@ declare module 'react-table' {
rows: Row<D>[]
}

export function useTableState<D = {}>(
initialState?: Partial<TableState<D>>,
overriddenState?: Partial<TableState<D>>,
options?: {
reducer?: (
oldState: TableState<D>,
newState: TableState<D>,
type: string
) => any
useState?: typeof useState
}
): State<D>

export const actions: Record<string, string>

export function addActions(...actions: string[]): void

0 comments on commit bbfc642

Please sign in to comment.
You can’t perform that action at this time.