Material UI material-table TablePagination issue. (React)

Asked
Active3 hr before
Viewed126 times

6 Answers

tabletablepaginationissuereactmaterial
90%

I am using material-table. The TablePagination is not working. It throws an error in console.,https://material-table.com/#/docs/install, No. So basically I was using a beta version of material ui (a paid/licensed template). Which does not support the material-table. So we implemented our own custom component that can handle the pagination logic. – knock out Jul 8 at 11:24 , where is the table pagination is your code? is this the code that return an error? – ali sasani Mar 3 at 10:22

npm install material - table--save
npm install @material - ui / core--save
load more v
88%

The API documentation of the TablePagination React component. Learn more about the props and the CSS customization points.,You can override the style of the component thanks to one of these customization points:,A TableCell based component for placing inside TableFooter for pagination.,If that's not sufficient, you can check the implementation of the component for more detail.

Import

import TablePagination from '@material-ui/core/TablePagination';
// or
import {
   TablePagination
} from '@material-ui/core';
72%

Describe the bug I'm trying to integrate it with material-ui but pagination is giving me 'Nan-Nan of 20 items',In your TablePagination element, you're setting page={page}. I understand why you did this, but the TablePagination page prop (probably) expects a Number, and page is a JS Object (more on that later). You actually should be passing page={pageIndex}., In your TablePagination element, you're setting page={page}. I understand why you did this, but the TablePagination page prop (probably) expects a Number, and page is a JS Object (more on that later). You actually should be passing page={pageIndex}. ,I'd look back on the Pagination Codebox example to clarify your understanding of what everything is doing, but it's a pretty easy fix to solve both your issues.

Describe the bug
I'm trying to integrate it with material-ui but pagination is giving me 'Nan-Nan of 20 items'

Additionally, I've set the state = initialState: { pageIndex: 0, pageSize: 5 } but when I start paginating it shows more then 10.

initialState: {
   pageIndex: 0,
   pageSize: 5
}
load more v
65%

This problem came up for me when following the advice from https://github.com/mbrn/material-table/issues/148#issuecomment-452984812, referencing this line material-table.js:449. LabelDisplayedRows and labelRowsPerPage don't work anymore., Ask questionscomponents.Pagination labelRowsPerPage overwritten by localization ,Related issues: https://github.com/mbrn/material-table/issues/148, https://github.com/mbrn/material-table/issues/226

For example:

// import { TablePagination } from '@material-ui/core';

<MaterialTable
  columns={[]}
  data={this.state.data}
  title='Demo Title'

  // ******** Some workarounds can happen out here now *******
  localization={{
    pagination: {
      labelDisplayedRows: 'string here'
      labelRowsPerPage: 'another string here'
    }
  }}
  // ********

  components={{
    Pagination: props => (
        <TablePagination
            {...props}

            // ******* These don't work anymore, because overwritten ********
            labelRowsPerPage={<div style={{fontSize: 14}}>{props.labelRowsPerPage}</div>}
            labelDisplayedRows={row => <div style={{fontSize: 14}}>{props.labelDisplayedRows(row)}</div>}
            // ******* 
        />
    )
  }}
/>;
75%

Assume that we have tutorials table in database like this:,So we will have following state: – search and display Tutorials:,a tutorials array displayed as a list on the left.,– We use tutorials and totalPages as count state from the response data:

This is structure of the response for the HTTP GET request:

{
   "totalItems": 8,
   "tutorials": [...],
   "totalPages": 3,
   "currentPage": 1
}
load more v
40%

Issues would be prioritized according reactions count. is:issue is:open sort:reactions-+1-desc filter would be use.,List issues according to reaction score,A simple and powerful Datatable for React based on Material-UI Table with some additional features.,Here is a basic example of using material-table within a react application.

To install material-table with npm:

npm install material - table @material - ui / core--save

To install material-table with yarn:

yarn add material - table @material - ui / core
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

To install @material-ui/icons with npm:

npm install @material - ui / icons--save

To install @material-ui/icons with yarn:

yarn add @material - ui / icons
import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import {
   AddBox,
   ArrowDownward
} from "@material-ui/icons";
import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

<MaterialTable
  icons={tableIcons}
  ...
/>
import React, { Component } from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";

class App extends Component {
  render() {
    return (
      <div style={{ maxWidth: "100%" }}>
        <MaterialTable
          columns={[
            { title: "Adı", field: "name" },
            { title: "Soyadı", field: "surname" },
            { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
            {
              title: "Doğum Yeri",
              field: "birthCity",
              lookup: { 34:stanbul", 63:anlıurfa" },
            },
          ]}
          data={[
            {
              name: "Mehmet",
              surname: "Baran",
              birthYear: 1987,
              birthCity: 63,
            },
          ]}
          title="Demo Title"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react-div"));
load more v

Other "table-tablepagination" queries related to "Material UI material-table TablePagination issue. (React)"