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'
      }
    ]
  }
];

Answer 1

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.

Answer 2

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:[]}
        ]

2. Add your subrow key into your react-table

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

3. 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>
                        );
                      }
                    },
            },
        
        ]