React Table not displaying data properly

Question

I am using React-Table-V6 and have trouble understanding why my data is not being rendered:

const sanArrayCols = [
  {Header: 'Serial No.', accessor: 'serialNumber'}
];

let temp = [{
  serialNumber: '1'
}];

<ReactTable 
  data={temp}
  columns={sanArrayCols}
  defaultPageSize={10}
  pageSize={[10, 20, 30]}/>

Yet, my table is not showing me anything. I am not sure what is wrong at this moment

Answer 1

You need to install react-table-6 with npm as:
npm i react-table-6

then you need to import:
import ReactTable from 'react-table-6';
import 'react-table-6/react-table.css';

Your code does not contain errors and will word. I made a React functional component to test it.

import React from "react";
import ReactTable from 'react-table-6';
import 'react-table-6/react-table.css';

export default function Rtable() {
const sanArrayCols = [
{Header: 'Serial No.', accessor: 'serialNumber'}
];

let temp = [{
serialNumber: '1'
}];

return (
<div>
<ReactTable columns={sanArrayCols} data={temp} ></ReactTable>
</div>
);
}