Rendering React Table [v7] results in [object Object]

Question

I'm new to Javascript so please bear with me. I'm attempting to render a table of data inside a div and I'm unable to do so. Basically I just want to replace the div in the html with the table div we've created.

I'm using react table v7 with webpack. The following code results in this being seen in the browser where the table should be.

Here is my code:

import { useTable } from 'react-table';
const ReactTable = require('react-table');
import React from 'react';

const tableData = [
    {someColumn: 1, someOtherColumn: 'A'},
    {someColumn: 2, someOtherColumn: 'B'}
]

const columnGenerator = (columnNames) => {
    var updatedNames = columnNames.map(c => {
        return {
            Header: camelToTitle(c),
            accessor: c
        }
    });
    return [
    {
      Header: "Claims Data",
      columns: updatedNames
    },
  ]
};
  
const Table = ({ columns, data }) => {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow
    } = useTable({
      columns,
      data
    });
  
    return (
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
};

const table = <div>
        <Table 
            columns={columnGenerator(Object.keys(tableData[0]))} 
            data={tableData}
        />
</div>

document.getElementById('claim-table').append(table);

score 1 · Accepted Answer · answered Feb 11 '21 at 23:22

[object Object] is just what is being rendered by converting that table object into a String. I would start by trying to use ReactDOM to mount that node instead of append:

import ReactDOM from 'react-dom'
...

ReactDOM.render(<Table 
                   columns={columnGenerator(Object.keys(tableData[0]))} 
                   data={tableData}
                  />,
                 document.getElementById('claim-table')
                )

johir Haque Dipok · Answer 2 · 2023-03-04T12:48:24.953

I'm writing this answer cause react table is now tanstack table there is a bit of changes In react-table v8, you can do following:

If data is like this array and array object has anther object property

[{
"id": 1,
"name": "Leanne Graham",
"email": "Sincere@april.biz",
"address": {
  "street": "Kulas Light",
  "suite": "Apt. 556",
  "city": "Gwenborough",
  "zipcode": "92998-3874",
}}] // plese follow that address object has more properties

You can see that address another object. so, in order to print address object property you can define column like this.

const defaultColumns = [
{
    accessorKey: "name",
    header: "Name",
    footer: (props) => props.column.id,
},
 {
    accessorKey: "email",
    header: "Email",
    footer: (props) => props.column.id,
},
{
    accessorKey: "address",
    header: "Address",
// you have to follow this method to print layered object property
    cell: ({ row }) => {

      return row.original.address.city

},
// or you can use
{
    accessorKey: "address",
    header: "Address",
    footer: (props) => props.column.id}
]

Rendering React Table [v7] results in [object Object]

2 Answers2

Linked