javascript - Auto expandable rows and subrows react table using hooks - Stack Overflow

admin管理员组

文章数量:1327939

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 :

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

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Feb 6, 2020 at 5:31 asked Feb 5, 2020 at 11:10 user12844904user12844904 1

• It looks like that react-table has an option initialState.expanded to pass to useTable. github./tannerlinsley/react-table/blob/… – robinvrd Commented Feb 5, 2020 at 11:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

I'm not sure this is still relevant 4+ years later, but in the latest MRT V2 you can simply say:

initialState: {
  expanded: true
},

and just like that all your rows / subrows will start expanded. No need for clumsy loops over your data and such imperative hacks.

In the meantime, the codesandbox changed to https://codesandbox.io/p/devbox/github/TanStack/table/tree/main/examples/react/expanding

Enjoy!

本文标签： javascriptAuto expandable rows and subrows react table using hooksStack Overflow