React-Table display contents of array as individual elements inside a cell

Question

I am trying to use react-table to visualise some data structured as below:

 {
    companyName: "Barclays Bank Plc",
    tenancies: ["G.01 @ Newbuilding"],
    status: "Active",
    accountNumber: "EX209302",
    logo: "companylogo1",
  },
  {
    companyName: "Boeing AerospaceLtd",
    tenancies: ["G.01 @ Newbuilding", "G.02 @ Newbuilding"],
    status: "Active",
    accountNumber: "EX209302",
    logo: "companylogo1",
  },

My column definition (which doesn't work) looks something like this:

  {
    Header: "Tenancies",
    accessor: "tenancies",
    Cell: (tableProps) => (
      <div>{tableProps.cell.value.forEach((item) => item)}</div>
    ),
  },

What I am trying to do is display each array item within it's own HTML tags (such as a div) so I can visually style and seperate them within the table cell.

Can anyone point me in the right direction as to the best way to achieve this?

Does this answer your question? [Is there a way to style individual cell using react-table based on the value?](https://stackoverflow.com/questions/68935605/is-there-a-way-to-style-individual-cell-using-react-table-based-on-the-value) — desertnaut, Aug 18 '22 at 18:04

score 2 · Answer 1 · answered Aug 23 '22 at 03:14

According to the API document, the Cell receives the table Instance and returns a valid JSX.

{
  ...
  Cell: (tableInstance) => JSX
}

Since the tenancies array are available from tableInstance.row.original.tenancies, so you can change your tenancies column definition as follow:

{
  Header: "Tenancies",
  Cell: ({ row }) => {
    return (
      <div>
        {row.original.tenancies.map((tenancy, i) => (
          <div key={i}>{tenancy}</div>
        ))}
      </div>
    );
  }
}

Here is the example:

React-Table display contents of array as individual elements inside a cell

1 Answers1