React Table

Column Options

getRowId: Function(row, relativeIndex, ?parent) => string

• getRowId: Function(row, relativeIndex, ?parent) => string

- Use this function to change how React Table detects unique rows and also how it constructs each row's underlying id property.

Optional

- Optional

- Must be memoized

- Defaults to (row, relativeIndex, parent) => parent ? [parent.id, relativeIndex].join('.') : relativeIndex

getRowId: Function(row, relativeIndex, ?parent) => string

Use this function to change how React Table detects unique rows and also how it constructs each row's underlying id property.

Optional

Must be memoized

Defaults to (row, relativeIndex, parent) => parent ? [parent.id, relativeIndex].join('.') : relativeIndex

getSubRows: Function(row, relativeIndex) => Rows[]

Optional

• 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.

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.

defaultColumn: Object

Optional

• defaultColumn: Object

- Optional

- Defaults to {}

- The default column object for every column passed to React Table.

- Column-specific properties will override the properties in this object, eg. { ...defaultColumndefaultColumn, ...userColumn userColumn }

- This is particularly useful for adding global column properties. For instance, when using the useFilters useFilters plugin hook, add a default Filter renderer for every column, eg.{ Filter: MyDefaultFilterComponent }{ Filter: MyDefaultFilterComponent }

defaultColumn: Object

Optional

Defaults to {}

The default column object for every column passed to React Table.

Column-specific properties will override the properties in this object, eg. { ...defaultColumn, ...userColumn }

This is particularly useful for adding global column properties. For instance, when using the useFilters plugin hook, add a default Filter renderer for every column, eg.{ Filter: MyDefaultFilterComponent }

useControlledState: HookFunction(state) => controlledState

Optional

• useControlledState: HookFunction(state) => controlledState

- Optional

- If you need to control part of the table state, this is the place to do it.

- This function is run on every single render, just like a hook and allows you to alter the final state of the table if necessary.

- You can use hooks inside of this function, but most of the time, we just suggest using React.useMemoReact.useMemo to memoize your state overrides.

- See the FAQ "How can I manually control the table state?" for a an example.

useControlledState: HookFunction(state) => controlledState

Optional

If you need to control part of the table state, this is the place to do it.

This function is run on every single render, just like a hook and allows you to alter the final state of the table if necessary.

You can use hooks inside of this function, but most of the time, we just suggest using React.useMemo to memoize your state overrides.

See the FAQ "How can I manually control the table state?" for a an example.

• stateReducer: Function(newState, action, prevState) => newState

- Optional

- With every action that is dispatched to the table's internal React.useReducer instance, this reducer is called and is allowed to modify the final state object for updating.

- It is passed the newState, action, and prevState and is expected to either return the newState or a modified version of the newState

- May also be used to "control" the state of the table, by overriding certain pieces of state regardless of the action.

- To update hiddenColumnshiddenColumns, pass a new array into setHiddenColumns setHiddenColumns which is supplied by useTableuseTable. Changing hiddenColumns directly won't cause the table to add the hidden columns back.

• autoResetHiddenColumns: Boolean

- Defaults to true

- When true, the hiddenColumns state will automatically reset if any of the following conditions are met:

columns is changed

- To disable, set to false