React Table renders undefined original value while rendering Cell

Question

I am trying to render a table using react table. I am using latest react-table version. I have defined my columns like this and passing it as a props to other component where I have the table rendering logic as below.

 columns = [{
  accessor: (d) => d,
  id: CONSTANTS.configurationType,
  Header: CONSTANTS.configurationTypeTitle,
  Cell: ({ original }) => (
    <div>
      {original?.configurationType}
    </div>
  ),
  sortMethod: (a, b, desc) =>
    sortSeatService(a, b, desc, CONSTANTS.configurationType),
},
{
  // accessor: (d) => d,
  accessor: CONSTANTS.configurationSetName,
  id: CONSTANTS.configurationSetName,
  Header: CONSTANTS.configurationSetNameTitle,
  headerClassName: "percentageWidth5 cellContent",
  className: "spark-text-left percentageWidth5 cellContent",
  Cell: ({ original }) => (
    <div>
      {original?.configurationSetName}
    </div>
  ),
},
{
  accessor: (d) => d,
  id: CONSTANTS.effectiveDate,
  Header: CONSTANTS.effectiveDateTitle,
  headerClassName: "spark-text-left percentageWidth6 cellContent",
  className: "percentageWidth6 cellContent",
  Cell: ({ original }) => getDateCell(original, CONSTANTS.effectiveDate),
  sortMethod: (a, b, desc) => sortDate(a, b, desc, CONSTANTS.effectiveDate),
},
{
  accessor: (d) => d,
  id: CONSTANTS.discontinueDate,
  Header: CONSTANTS.discontinueDateTitle,
  headerClassName: "spark-text-left percentageWidth7 cellContent",
  className: "percentageWidth7 cellContent",
  Cell: ({ original }) => getDateCell(original, CONSTANTS.discontinueDate),
  sortMethod: (a, b, desc) =>
    sortDate(a, b, desc, CONSTANTS.discontinueDate),
}]

and my table component

const CustomTable = (props) => {

  const {data, columns} = props;
  
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
  useTable(
    {
      columns,
      data
    },
    useSortBy
  );
  return (
    <div>
      <section className="tableSection table-div">
        <Table
          {...getTableProps()}
        >
          <TableHead>
            {headerGroups.map((headerGroup) => (
              <TableRow
                key={headerGroup.id}
                {...headerGroup.getHeaderGroupProps()}
              >
                {headerGroup.headers.map((column) => (
                  <TableHeaderCell
                    key={column.id}
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                  >
                    {column.render("Header")}
                  </TableHeaderCell>
                    ))}
              </TableRow>
              ))}
          </TableHead>
          <TableBody {...getTableBodyProps()}>
            {rows.map((row) => {
              const rowId = row.id;
              prepareRow(row);
              return (
                <TableRow>
                  {row.cells.map((cell) => (
                    <TableCell
                      id={`cell-${cell.column.id}-${rowId}`}
                      key={`cell-${cell.column.id}-${rowId}`}
                    >
                      {cell.render("Cell")}
                    </TableCell>
                    ))}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </section>
    </div>
  );
};

CustomTable.propTypes = {
  props: PropTypes.objectOf(PropTypes.any),
  original: PropTypes.objectOf(PropTypes.any),
  data: PropTypes.arrayOf(PropTypes.object).isRequired,
  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
  onSortedChange:  PropTypes.objectOf(PropTypes.any).isRequired
}

CustomTable.defaultProps = {
  props: null,
  original: null,
};

export default CustomTable;

The table is rendering empty values. When I debugged the issue, I was getting the original in Cell as undefined. What is that I am missing here?

Answer 1

Get the cell data from row as follow:

 columns = [{
  ...
  Cell: ({ row }) => (
    <div>
      {row?.original?.configurationSetName}
    </div>
  ),
  ...

You can log the available props as follows:

columns = [{
  ...
  Cell: (props) => {
    console.log(props)
    return (
      <div>
        {props.row?.original?.configurationSetName}
      </div>
    )
  },
  ...