3

Here I have code of react table using hooks, and i have struggled on task where I need to set all rows and subrows expanded by default when i open the page, I have tried several solutions, but all of them didn't work.

Link to the code : https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding

  • It looks like that `react-table` has an option `initialState.expanded` to pass to `useTable`. https://github.com/tannerlinsley/react-table/blob/b1b71103c4be32e16a9c9886d685008a33fd6dd6/docs/api/useExpanded.md#table-options – robinvrd Feb 05 '20 at 11:16

1 Answers1

6

Just as I said, the option initialState.expanded allows you to expand the rows you want.

useTable(
    {
      columns: userColumns,
      data,
      initialState: {
        expanded: { "0": true, "2": true }
      }
    },
    useExpanded // Use the useExpanded plugin hook
  )

This will expand the first and the third row.

robinvrd
  • 1,760
  • 12
  • 28
  • Thank you, sir, for your respond, really appreciate, and how can I make SUBROWS expandable in this case, do not you know? Cause decision above makes expandable only rows, but now subrows. For example, at the sandbox I have subrows for each row, and I need to expand all of them until the last child. Thanks! –  Feb 06 '20 at 03:07
  • and I cannot do like that : initialState: { expanded: { 0: true, 0.1: true, 0.1.0: true, }, }, }, –  Feb 06 '20 at 05:05
  • You should do something like `expanded: { 0: true, 0.1: true, 0.1.0: true, }`, maybe you need to do a loop that go through each child to build the object `expanded` with all your rows/subrows. You don't have many choices, when you choose to use a library you are limited to its limits. – robinvrd Feb 06 '20 at 08:56