I have a data array as:

data = [ {date: "16/05/2020", value: [ {column: "student", count: 10, value: "abcd" }, 
         {column: "teacher", count: 25, value: "pqrs" }] },
         {date: "17/05/2020", value: [ {column: "student", count: 19, value: "mno" }, 
         {column: "teacher", count: 7, value: "xyz" }] }
        ];

This is the column array:

columns = [{ Header: "Date", accessor: "date"}, 
           { Header: "Column", accessor: "column"},
           { Header: "Count", accessor: "count"},
           { Header: "Value", accessor: "value"}
           ]

I want to display the data as mentioned in the picture (table) in React Table.

Inside render(), I am doing this:

              <ReactTable
                data={data}
                columns={columns}
                minRows={0}
                defaultPageSize={25}
              />

Kindly, help.

Thanks in Advance!!

I have a data array as:

data = [ {date: "16/05/2020", value: [ {column: "student", count: 10, value: "abcd" }, 
         {column: "teacher", count: 25, value: "pqrs" }] },
         {date: "17/05/2020", value: [ {column: "student", count: 19, value: "mno" }, 
         {column: "teacher", count: 7, value: "xyz" }] }
        ];

This is the column array:

columns = [{ Header: "Date", accessor: "date"}, 
           { Header: "Column", accessor: "column"},
           { Header: "Count", accessor: "count"},
           { Header: "Value", accessor: "value"}
           ]

I want to display the data as mentioned in the picture (table) in React Table.

Inside render(), I am doing this:

              <ReactTable
                data={data}
                columns={columns}
                minRows={0}
                defaultPageSize={25}
              />

Kindly, help.

Thanks in Advance!!

• javascript
• reactjs
• redux
• frontend
• react-table

• is ReactTable a 3rd party library? – zb22 Commented May 16, 2020 at 11:23
• Yes, it is a 3rd party library. – Pariksha Commented May 16, 2020 at 11:27
• can you add the link to its git repository? – zb22 Commented May 16, 2020 at 11:33
• I have not created git repository yet. – Pariksha Commented May 16, 2020 at 12:03

1 Answer 1

You need to use the accessor to get into the properties from data and to custom the cells.

Try this:

const data = [
  {
    date: "16/05/2020",
    value: [
      { column: "student", count: 10, value: "abcd" },
      { column: "teacher", count: 25, value: "pqrs" }
    ]
  },
  {
    date: "17/05/2020",
    value: [
      { column: "student", count: 19, value: "mno" },
      { column: "teacher", count: 7, value: "xyz" }
    ]
  }
];

const columns = [
  {
    Header: "Date",
    id: "date",
    accessor: d => (
      <div className="wrapper">
        <div>{d.date}</div>
        <div>{d.date}</div>
      </div>
    )
  },
  {
    Header: "Column",
    id: "column",
    accessor: d => (
      <div className="wrapper">
        <div>{d.value[0].column}</div>
        <div>{d.value[1].column}</div>
      </div>
    )
  },
  {
    Header: "Count",
    id: "count",
    accessor: d => (
      <div className="wrapper">
        <div>{d.value[0].count}</div>
        <div>{d.value[1].count}</div>
      </div>
    )
  },
  {
    Header: "Value",
    id: "value",
    accessor: d => (
      <div className="wrapper">
        <div>{d.value[0].value}</div>
        <div>{d.value[1].value}</div>
      </div>
    )
  }
];

const App = () => {
  return <ReactTable data={data} columns={columns} />;
};

and here is a sandbox: