Display items of array in subrow (react-table)

Question

I am using react-table and need to create subrows with the data structure below. I have successfully created subrows for each object in the data array. However, each object in the data array contains another array "types."

How would i go about getting each row to list the "type" names as subrows?

My code so far is below:

Table:

import React from 'react';
import ReactTable from 'react-table';

const Table = (props) => {
  const subComponent = row => {
    return (
      <div>
        Names of "types" here respectively for each object in data array
        (no column headers or anything needed)
      </div>
    );
  };

  return (
    <ReactTable data={ props.data }
      columns={ props.columns }
      SubComponent={ subComponent } />
  );
};

export default Table;

Data structure:

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

This might be of help. codesandbox.io/s/relaxed-frost-kln0o?file=/src/App.js:1716-2034 — tbs
– tbs, Commented Jan 18, 2022 at 14:41
Hi Bro, I am trying past a week I did not add sub row getting error in react-table, as you said you have successfully added sub row on each array, if you have code please share the link just I can refer — Bhary
– Bhary, Commented Mar 31, 2023 at 20:36

hipercubus · Accepted Answer · 2021-02-13 14:30:38Z

4

You can rewrite the getSubRows method on useTable optios. Something like this:

const getSubRows = useCallback((row) => {
  return row.types || [];
}, []);

answered Feb 13, 2021 at 14:30

hipercubus

412 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tbs Over a year ago

Can you please elaborate with an example?

Hung Cao · Accepted Answer · 2019-06-03 19:49:28Z

1

Here is a good example on how to do it https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/archives/v6-examples/react-table-sub-components

From my best guess, your code will look like this:

import React from 'react';
import ReactTable from 'react-table';

const Table = (props) => {
  const subComponent = row => {
    return (
      <div>
        row.Original.types.map((type, idx) => (
           <div>{{type.id}}</div>
           <div>{{type.name}}</div>
        ))
      </div>
    );
  };

  return (
    <ReactTable data={ props.data }
      columns={ props.columns }
      SubComponent={ subComponent } />
  );
};

export default Table;

answered Jun 3, 2019 at 19:49

Hung Cao

3,2083 gold badges22 silver badges29 bronze badges

1 Comment

Nishant Mendiratta Over a year ago

The link is not working

Collectives™ on Stack Overflow

Display items of array in subrow (react-table)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related