Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material table how to set page size to All

I am using React + Material Table.

What to achieve

I want to have the option to set pageSize to 'All' to match to total count of rows in material-table.

What I have done

I use useState to create rowsPerPage , and set rowsPerPage in the handleChangeRowsPerPage function. I use component overriding to customize the Pagination and pass rowsPerPage and handler to its props. I also pass rowsPerPage to MaterialTable's pageSize option.

Problem I encounter

The page does not re-size, and the state.pageSize does not update. Even though the props.options.pageSize and Pagination successfully update with onChangeRowsPerPage.

Link to sandbox

import React, { useState } from "react";
import MaterialTable from "material-table";
import { TablePagination } from "@material-ui/core";

export default function ComponentOverriding() {
  const [rowsPerPage, setRowsPerPage] = useState(5);
  //updates pagination, but no re-size
  const handleChangeRowsPerPage = event => {
    //enable to set rows per page to match total count
    event.target.value === "All"
      ? setRowsPerPage(data.length)
      : setRowsPerPage(event.target.value);
  }; 

  const data = [
    { name: "Mehmet", surname: "Baran", birthYear: 1987 },
    { name: "Zerya Betül", surname: "Baran", birthYear: 2017 }
  ];
  return (
    <MaterialTable
      title="Component Override Demo"
      columns={[
        { title: "Name", field: "name" },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear" }
      ]}
      data={data}
      //options.pageSize updates, but no re-size
      options={{ pageSize: rowsPerPage }}
      // onChangeRowsPerPage={handleChangeRowsPerPage} //TypeError Cannot read property 'value' of undefined
      components={{
        Pagination: props => (
          <TablePagination
            {...props}
            rowsPerPageOptions={[5, 10, 20, "All"]}
            rowsPerPage={rowsPerPage}
            //updates pagination, but no re-size
            onChangeRowsPerPage={handleChangeRowsPerPage}
          />
        )
      }}
    />
  );
}


like image 884
kevheyk Avatar asked Jun 18 '20 05:06

kevheyk


People also ask

How do I use Materialtable?

To render a table with material-table, you have to supply the data (an array of objects) and the name of the columns to map with the data. The columns will specify which piece of data will go in which column.

What is lookup in material-table?

The lookup is an object, and its definition you can find here in the first example https://mbrn.github.io/material-table/#/docz-examples-06-example-filtering. But if you tried to create that object outside and after that assign it to lookup you will get an error.

Is material-table open source?

material-table is a powerful way of representing data in a table format in a React application. It follows Material UI guidelines to style the elements. It is one of the most popular open-source libraries available in the React space and provides different individual components.


1 Answers

I got a solution, no need to customize pagination just replace

<MaterialTable
  options={{ 
    pageSize: rowsPerPage,
    pageSizeOptions: [5, 10, 20],
  }}
/>

with

<MaterialTable
  options={{ 
    pageSize: rowsPerPage,
    pageSizeOptions: [5, 10, 20, { value: data.length, label: 'All' }],
  }}
/>
like image 66
Ashish Karambalkar Avatar answered Oct 12 '22 04:10

Ashish Karambalkar