Adding multiple data to a column in react-table

Question

I have a table using react-table but for one of the columns I want to show two pieces of data - name and description.

getInitialState(){
    return {
      data: [{
        id: 1,
        keyword: 'Example Keyword',
        product: [
          name: 'Red Shoe',
          description: 'This is a red shoe.'
        ]
      },{
        id: 2,
        keyword: 'Second Example Keyword',
        product: [
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        ]
      }]
    }
},
render(){
  const { data } = this.state;

  return (
    <div className="app-body">
      <ReactTable
        data={data}
        columns={[{
          columns: [{
              Header: 'Id',
              accessor: id,
              show: false
            }, {
              Header: 'Keyword',
              accessor: 'keyword'
            }, {
              Header: 'Product',
              accessor: 'product'  // <<< here 
            }]
        }]}
      defaultPageSize={10}
      className="-highlight"
    />
    </div>
  )
}

Where the accessor is Product I want to show both the name and description (I'll style them to stack with different font sizes) in the Product column.

I've tried using the Cell: row => attribute for that column and thought I could also try calling a function that lays it out, but I've gotten errors both times.

Any ideas how to do this?

Community · Accepted Answer · 2022-06-14 07:18:00Z

19

Indeed you should use Cell for this like this:

getInitialState(){
  return {
    data: [
      {
        id: 1,
        keyword: 'Example Keyword',
        product: [
          name: 'Red Shoe',
    description: 'This is a red shoe.'
]
},{
    id: 2,
      keyword: 'Second Example Keyword',
      product: [
      name: 'blue shirt',
      description: 'This is a blue shirt.'
  ]
  }]
}
},
render(){
  const { data } = this.state;

  return (
    <div className="app-body">
      <ReactTable
        data={data}
        columns={[{
          columns: [{
            Header: 'Id',
            accessor: id,
            show: false
          }, {
            Header: 'Keyword',
            accessor: 'keyword'
          }, {
            Header: 'Product',
            accessor: 'product',
            Cell: ({row}) => { //spread the props
              return (
                <div>
                  <span className="class-for-name">{row.product.name}</span>
                  <span className="class-for-description">{row.product.description}</span>
                </div>
              )
            }
          }]
        }]}
        defaultPageSize={10}
        className="-highlight"
      />
    </div>

  )
}

Another thing I spotted was that product property should be an object not an array, so change this:

product: [
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        ]

to this:

product: {
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        }

edited Jun 14, 2022 at 7:18

CommunityBot

11 silver badge

answered Mar 29, 2018 at 19:19

Shota

7,3989 gold badges40 silver badges74 bronze badges

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

4 Comments

user42010 Over a year ago

Thank you Shota! I made these changes, but I was getting a "cannot read property 'name' of undefined" error. So I changed "row.product.name" to "row.row.product.name" and it works now. Kind of strange, but at least it works!

Shota Over a year ago

Yes my bad, actually row is a big object, containing lots of things. If you try to console.log it you could see them.

user3348410 Over a year ago

so what will if product items more than 1 ?

Shahriar Over a year ago

What if the data is coming from the backend and is not nested?

Soyal7 · Accepted Answer · 2022-03-31 01:14:07Z

12

The accepted answer didn't work for me. Here's how I did it:

const [data, setData] = React.useState([
  {
    name: 'My item',
    desc: 'This is a nice item',
  },
]);

const columns = React.useMemo(() => [
  {
    Header: 'Name',
    accessor: 'name',

    Cell: (props) => (
      <>
        <p className="item title">{props.row.original.name}</p>
        <p className="item desc">{props.row.original.desc}</p>
      </>
    ),
  },
]);

answered Mar 31, 2022 at 1:14

Soyal7

4716 silver badges13 bronze badges

3 Comments

Ankit Garg Over a year ago

This helped me. Basically using data.row.original.{any_field} to access any field of the row.

Shahbaz Shueb Over a year ago

This works. You can access any fields from your data object this way

jumping_monkey Over a year ago

lowercase cell works for me. Thanks

Александра Лобовикова · Accepted Answer · 2024-02-29 15:44:52Z

0

I was struggling with this problem because I was using cell.getValue() inside the table. If you want to use Cell value from the examples above you need to use the:

flexRender(cell.column.columnDef.cell, cell.getContext())

I hope it helps someone!

answered Feb 29, 2024 at 15:44

Александра Лобовикова

1

Collectives™ on Stack Overflow

Adding multiple data to a column in react-table

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related