Expand subcomponent rows by default with react-table

Question

I am using react-table to display some rows, each row has a subcomponent, which just renders some more "subrows." However, you have to click the row in order to show the subrows. React-table does not have a setting to have then expanded by default. There is some discussion out there on doing this but I can't seem to make anything work with my example.

Current looks like this on load:

After clicking on each row (how im trying to get it to look by default)

Table.js

import React, { Component } from 'react';
import ReactTable from 'react-table';
import { columns, subComponent } from './tableSetup';


class Table extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ReactTable data={ data }
        columns={ columns }
        SubComponent={ subComponent }
        expandedRows={ true }
        resizable={ false }
        minRows={ 1 }
        pageSize={ 8 }
        showPageSizeOptions={ false } />
    );
  }
}

export default Table;

tableSetup.js with exampe data import React from 'react';

export const columns = [
  {
    Header: () => (
      <div />
    ),
    accessor: 'name',
    maxWidth: 300,
    Cell: row => (
      <div className='first-column'>{row.value}</div>
    )
  }
];

export const subComponent = row => {
  return (
    <div>
      {row.original.types.map((type, id) => {
        return (
          <div className='subRow' key={ id }>{ type.name }</div>
        );
      })}
    </div>
  );
};

export const data = [
  {
    id: '12345',
    name: 'sports',
    types: [
      {
        name: 'basketball',
        id: '1'
      },
      {
        name: 'soccer',
        id: '2'

      },
      {
        name: 'baseball',
        id: '3'
      }
    ]
  },
  {
    id: '678910',
    name: 'food',
    types: [
      {
        name: 'pizza',
        id: '4'
      },
      {
        name: 'hamburger',
        id: '5'

      },
      {
        name: 'salad',
        id: '6'
      }
    ]
  }
];

score 8 · Accepted Answer · answered Jul 04 '19 at 16:20

In order to expand all rows from the beginning, you can use the props defaultExpanded in which you give all the rows index you want to expand. (In this case, all of them), like this :

  render() {
    // Set all the rows index to true
    const defaultExpandedRows = data.map((element, index) => {return {index: true}});
    return (
      <div>
        <ReactTable
          data={data}
          // Use it here
          defaultExpanded={defaultExpandedRows}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
          SubComponent={subComponent}
        />
      </div>
    );
  }

For more information, you can look here.

score 1 · Answer 2 · edited Jan 11 '21 at 07:37

In-order to get multiple sub-rows in react-table v6 1.Firstly make you data Array like this

     data = [
            0:{name:'abc', age: 34, friends: [
                        0:{name:'xyz', age: 12, friends:[]}
                        1:{name:'john', age: 45, friends:[]}
                        2:{name:'kim', age: 23 , friends: [
                            0:{name:'ray', age: 15}
                            ]
                        }
                    ]
            }
            1:{name:'john', age: 45, friends:[]}
        ]

Add your subrow key into your react-table

    <ReactTable 
                data={data}
                columns={ columns }
                expandedRows={true}
                subRowsKey= {'friends'}
                />

and then in last step use Expender callback in table columns

       columns = [
            {
                Header: "Name",
                accessor: 'name'
            },
            {
                Header: "AGE",
                accessor: 'age'
            },
            {
                Header: "Have Friend",
                Expander: ({ isExpanded, ...rest }) =>
                    {
                      if(rest.original.friends.length === 0) {
                        return null;
                      }
                       else {
                        return (
                          <div>
                            {isExpanded
                                    ? <span>-</span>
                                    : <span>+</span>
                            }
                          </div>
                        );
                      }
                    },
            },
        
        ]

score 1 · Answer 3 · edited Mar 18 '21 at 20:42

https://codesandbox.io/s/pjmk93281j?file=/index.js

// all the rows are expanded now
let expandedRows = data.map((i, index) => { index:true }); 

const [expanded, setExpanded] = useState(expandedRows);

<ReactTable data={data}
    ...
    expanded={expanded}
    onExpandedChange={(expanded, index, event) => {
        // console.log(index, expanded);
        // don't for get to save the 'expanded'
        // so it can be fed back in as a prop

        console.log(expanded);
        setExpanded(expanded);
    }}
/>

Try it, it worked for me.

score 0 · Answer 4 · edited Oct 16 '19 at 08:08

0

Answer by Orlyyn works but I don't understand, why do we need to return an object with index and true? Just returning true works, and easy to update it later.

const defaultExpandedRows = data.map(() => {return true});

To make toggle work you can store defaultExpandedRows in state and change the value of index to false onExpandedChange

edited Oct 16 '19 at 08:08

J. Scott Elblein

4,013
15
58
94

answered Oct 16 '19 at 07:02

Tilak Puli

73
1
3

1

How would this work with `subRows`? I have this working for rows, but if there are child rows, they do not expand. – ChaseHardin Feb 10 '20 at 18:32

Expand subcomponent rows by default with react-table

4 Answers4