CODEWITHSUNDEEP
react-table
Jonathan Nathanson
Jonathan Nathanson

Reputation: 143

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

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?

Upvotes: 0

Views: 790

Answers (1)

yohanes
yohanes

Reputation: 2675

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:

Edit kind-dubinsky-gu5sgr

Upvotes: 2

Related Questions