Revision history [back]

To automatically expand all rows when using react-table 7, you can use the useExpanded hook provided by the library. Here is the procedure:

1. Install the latest version of react-table:

npm install react-table@7.7.0

1. Import the useExpanded hook from the library in your component:

import { useTable, useExpanded } from 'react-table'

1. Define your table data and columns as usual, and include the useExpanded hook in your table instance:

const tableInstance = useTable(
  {
    data: myData,
    columns: myColumns,
  },
  useExpanded
)

1. In your table component, render a button or icon that triggers the toggleAllRowsExpanded function provided by the useExpanded hook:

<button onClick={() => tableInstance.toggleAllRowsExpanded(true)}>
  Expand All Rows
</button>

This will expand all rows in your table when the button is clicked.