Skip to content
Permalink
Browse files

fix: better naming, fix header regen, getSubRows, getRowPathID

  • Loading branch information...
tannerlinsley committed Aug 26, 2019
1 parent f40b8f5 commit 3b42c72e7c7f649ff8a348fd4877b3a1e53ec4c3
@@ -97,6 +97,19 @@ The following options are supported via the main options object passed to `useTa
- Defaults to `initialState`
- This key is used to look for the initial state of a row when initializing the `rowState` for a`data` array.
- If the value located at `row[initialRowStateKey]` is falsey, `{}` will be used instead.
- `getSubRows: Function(row, relativeIndex) => Rows[]`
- Optional
- Must be **memoized**
- Defaults to `(row) => row.subRows || []`
- Use this function to change how React Table detects subrows. You could even use this function to generate sub rows if you want.
- By default, it will attempt to return the `subRows` property on the row, or an empty array if that is not found.
- `getRowPathID: Function(row, relativeIndex) => string`
- Optional
- Must be **memoized**
- Defaults to `(row, relativeIndex) => relativeIndex`
- Use this function to change how React Table constructs each row's underlying `path` property.
- You may want to change this function if
- By default, it will attempt to return the `subRows` property on the row, or an empty array if that is not found.
- `debug: Bool`
- Optional
- A flag to turn on debug mode.
@@ -143,17 +156,24 @@ The following options are supported on any column object you can pass to `column

The following properties are available on the table instance returned from `useTable`

- `headers[] Array<Column>`
- A **nested** array of final column objects, similar in structure to the original columns configuration option.
- See [Column Properties](#column-properties) for more information
- `columns: Array<Column>`
- A **flat** array of all final column objects computed from the original columns configuration option.
- A **nested** array of final column objects, **similar in structure to the original columns configuration option**.
- See [Column Properties](#column-properties) for more information
- `flatColumns: Array<Column>`
- A **flat** array of all final column objects.
- See [Column Properties](#column-properties) for more information
- `headerGroups: Array<HeaderGroup>`
- An array of normalized header groups, each containing a flattened array of final column objects for that row.
- **Some of these headers may be materialized as placeholders**
- See [Header Group Properties](#headergroup-properties) for more information
- `headers: Array<Column>`
- An **nested** array of final header objects, **similar in structure to the original columns configuration option, but rebuilt for ordering**
- Each contains the headers that are displayed underneath it.
- **Some of these headers may be materialized as placeholders**
- See [Column Properties](#column-properties) for more information
- `flatHeaders[] Array<Column>`
- A **flat** array of final header objects found in each header group. Columns may be duplicated (if columns are not adjacent)
- A **flat** array of final header objects found in each header group.
- **Some of these headers may be materialized as placeholders**
- See [Column Properties](#column-properties) for more information
- `rows: Array<Row>`
- An array of **materialized row objects** from the original `data` array and `columns` passed into the table options
@@ -182,7 +202,7 @@ The following properties are available on the table instance returned from `useT
- Pass it a valid `rowPath` array, `columnID` and `updater`. The `updater` may be a value or function, similar to `React.useState`'s usage.
- If `updater` is a function, it will be passed the previous value

### `HeaderGroup` Properties
### HeaderGroup Properties

The following additional properties are available on every `headerGroup` object returned by the table instance.

@@ -477,7 +497,11 @@ function Table({ columns, data }) {
<span>
{/* Add a sort direction indicator */}
<span>
{column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
{/* Add a sort index indicator */}
<span>({column.isSorted ? column.sortedIndex + 1 : ''})</span>
@@ -921,7 +945,7 @@ The following options are supported via the main options object passed to `useTa
- A `pathIndex` can be set as the key and its value set to `true` to expand that row's subRows into view. For example, if `{ '3': true }` was passed as the `expanded` state, the **4th row in the original data array** would be expanded.
- For nested expansion, you may **use another object** instead of a Boolean to expand sub rows. For example, if `{ '3': { '5' : true }}` was passed as the `expanded` state, then the **6th subRow of the 4th row and the 4th row of the original data array** would be expanded.
- This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `subRowsKey: String`
- `getSubRows: Function(row, relativeIndex) => Rows[]`
- Optional
- See the [useTable hook](#table-options) for more details
- `manualExpandedKey: String`
@@ -42,7 +42,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
headerGroups,
rows,
prepareRow,
columns,
flatColumns,
state: [{ expanded }],
} = useTable(
{
@@ -87,7 +87,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
*/}
{row.isExpanded ? (
<tr>
<td colSpan={columns.length}>
<td colSpan={flatColumns.length}>
{/*
Inside it, call our renderRowSubComponent function. In reality,
you coul pass whatever you want as props to
BIN +17.7 KB (110%) media/src/logo.sketch
Binary file not shown.
@@ -8,24 +8,19 @@ import {
flexRender,
decorateColumnTree,
makeHeaderGroups,
findMaxDepth,
flattenBy,
determineColumnVisibility,
determineHeaderVisibility,
} from '../utils'

import { useTableState } from './useTableState'

const propTypes = {
// General
data: PropTypes.array.isRequired,
columns: PropTypes.arrayOf(
PropTypes.shape({
Cell: PropTypes.any,
Header: PropTypes.any,
})
).isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
defaultColumn: PropTypes.object,
subRowsKey: PropTypes.string,
getSubRows: PropTypes.func,
getRowPathID: PropTypes.func,
debug: PropTypes.bool,
}

@@ -34,6 +29,9 @@ const renderErr =

const defaultColumnInstance = {}

const defaultGetSubRows = (row, index) => row.subRows || []
const defaultGetRowPathID = (row, index) => index

export const useTable = (props, ...plugins) => {
// Validate props
PropTypes.checkPropTypes(propTypes, props, 'property', 'useTable')
@@ -44,7 +42,8 @@ export const useTable = (props, ...plugins) => {
state: userState,
columns: userColumns,
defaultColumn = defaultColumnInstance,
subRowsKey = 'subRows',
getSubRows = defaultGetSubRows,
getRowPathID = defaultGetRowPathID,
debug,
} = props

@@ -89,22 +88,20 @@ export const useTable = (props, ...plugins) => {
console.timeEnd('plugins')

// Decorate All the columns
let headers = React.useMemo(
let columns = React.useMemo(
() => decorateColumnTree(userColumns, defaultColumn),
[defaultColumn, userColumns]
)

// Get the flat list of all columns
let columns = React.useMemo(() => flattenBy(headers, 'columns'), [headers])

// Allow hooks to decorate columns (and trigger this memoization via deps)
columns = React.useMemo(() => {
// Get the flat list of all columns andllow hooks to decorate
// those columns (and trigger this memoization via deps)
let flatColumns = React.useMemo(() => {
if (process.env.NODE_ENV === 'development' && debug)
console.time('hooks.columnsBeforeHeaderGroups')

let newColumns = applyHooks(
instanceRef.current.hooks.columnsBeforeHeaderGroups,
columns,
flattenBy(columns, 'columns'),
instanceRef.current
)

@@ -124,12 +121,15 @@ export const useTable = (props, ...plugins) => {

// Make the headerGroups
const headerGroups = React.useMemo(
() => makeHeaderGroups(columns, findMaxDepth(headers), defaultColumn),
[columns, defaultColumn, headers]
() => makeHeaderGroups(flatColumns, columns, defaultColumn),
[columns, defaultColumn, flatColumns]
)

const headers = React.useMemo(() => headerGroups[0].headers, [headerGroups])

Object.assign(instanceRef.current, {
columns,
flatColumns,
headerGroups,
headers,
})
@@ -147,18 +147,20 @@ export const useTable = (props, ...plugins) => {
// Keep the original reference around
const original = originalRow

const rowID = getRowPathID(originalRow, i)

// Make the new path for the row
const path = [...parentPath, i]
const path = [...parentPath, rowID]

flatRows++
rowPaths.push(path.join('.'))

// Process any subRows
const subRows = originalRow[subRowsKey]
? originalRow[subRowsKey].map((d, i) =>
accessRow(d, i, depth + 1, path)
)
: []
let subRows = getSubRows(originalRow, i)

if (subRows) {
subRows = subRows.map((d, i) => accessRow(d, i, depth + 1, path))
}

const row = {
original,
@@ -183,7 +185,7 @@ export const useTable = (props, ...plugins) => {

// Create the cells and values
row.values = {}
columns.forEach(column => {
flatColumns.forEach(column => {
row.values[column.id] = column.accessor
? column.accessor(originalRow, i, { subRows, depth, data })
: undefined
@@ -197,14 +199,14 @@ export const useTable = (props, ...plugins) => {
if (process.env.NODE_ENV === 'development' && debug)
console.timeEnd('getAccessedRows')
return [accessedData, rowPaths, flatRows]
}, [debug, data, columns, subRowsKey])
}, [debug, data, getRowPathID, getSubRows, flatColumns])

instanceRef.current.rows = rows
instanceRef.current.rowPaths = rowPaths
instanceRef.current.flatRows = flatRows

// Determine column visibility
determineColumnVisibility(instanceRef.current)
determineHeaderVisibility(instanceRef.current)

// Provide a flat header list for utilities
instanceRef.current.flatHeaders = headerGroups.reduce(
@@ -258,15 +260,15 @@ export const useTable = (props, ...plugins) => {
instanceRef.current.headerGroups.forEach((headerGroup, i) => {
// Filter out any headers and headerGroups that don't have visible columns
headerGroup.headers = headerGroup.headers.filter(header => {
const recurse = columns =>
columns.filter(column => {
if (column.columns) {
return recurse(column.columns)
const recurse = headers =>
headers.filter(header => {
if (header.headers) {
return recurse(header.headers)
}
return column.isVisible
return header.isVisible
}).length
if (header.columns) {
return recurse(header.columns)
if (header.headers) {
return recurse(header.headers)
}
return header.isVisible
})
@@ -316,53 +318,51 @@ export const useTable = (props, ...plugins) => {
props
)

const visibleColumns = instanceRef.current.columns.filter(
column => column.isVisible
)
// Build the visible cells for each row
row.cells = instanceRef.current.flatColumns
.filter(d => d.isVisible)
.map(column => {
const cell = {
column,
row,
value: row.values[column.id],
}

// Build the cells for each row
row.cells = visibleColumns.map(column => {
const cell = {
column,
row,
value: row.values[column.id],
}
// Give each cell a getCellProps base
cell.getCellProps = props => {
const columnPathStr = [...row.path, column.id].join('_')
return mergeProps(
{
key: ['cell', columnPathStr].join('_'),
},
applyPropHooks(
instanceRef.current.hooks.getCellProps,
cell,
instanceRef.current
),
props
)
}

// Give each cell a getCellProps base
cell.getCellProps = props => {
const columnPathStr = [...row.path, column.id].join('_')
return mergeProps(
{
key: ['cell', columnPathStr].join('_'),
},
applyPropHooks(
instanceRef.current.hooks.getCellProps,
cell,
instanceRef.current
),
props
)
}
// Give each cell a renderer function (supports multiple renderers)
cell.render = (type, userProps = {}) => {
const Comp = typeof type === 'string' ? column[type] : type

// Give each cell a renderer function (supports multiple renderers)
cell.render = (type, userProps = {}) => {
const Comp = typeof type === 'string' ? column[type] : type
if (typeof Comp === 'undefined') {
throw new Error(renderErr)
}

if (typeof Comp === 'undefined') {
throw new Error(renderErr)
return flexRender(Comp, {
...instanceRef.current,
column,
row,
cell,
...userProps,
})
}

return flexRender(Comp, {
...instanceRef.current,
column,
row,
cell,
...userProps,
})
}

return cell
})
return cell
})

// need to apply any row specific hooks (useExpanded requires this)
applyHooks(instanceRef.current.hooks.prepareRow, row, instanceRef.current)

0 comments on commit 3b42c72

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