0

I am using a prime react datatable to populate date. I want to auto adjust the values with the column in the table. I have tried using some css and dattable properties , but it is not working for me . Here is what i have done so far

const MyBookDatable = ({ data, onPageChange, exportFile }) => {
const { totalElements, content, pageable } = data;
const [pageSize, setpageSize] = useState(0);

const dynamicColumns = columns.map((column) => {
return (
  <Column
    //headerStyle={{ width: "100%" }}
    //bodyClassName="tableBody"
    className = {column.field + " tableBody"}
    field={column.field}
    header={column.header}
  ></Column>
   );
 });

Here i have created columns

export const columns = [
{
  "field": "market",
  "header": "Market"
},
{
  "field": "storeNumber",
  "header": "Store Number"
},
{

Here is the datatable css

.datatableStyle {
width: auto;

overflow-x: scroll;
max-height: 80vh;
min-height: 40vh;
}

The columns are not auto adjusting with the values , and also i want to add the horizontal scroll bar to the table.Can anyone help me please. I am new to prime react.

Mandrek
  • 1,159
  • 6
  • 25
  • 55

1 Answers1

0

In older version of datatable it as a property called responsive and set it as true like this responsive={true} in the datatable