Languages
[Edit]
EN

React - material table with AJAX remote data and pager

3 points
Created by:
Root-ssh
115830

In this article we would like to show you how to create simple application with react material table. On each page change data is fetched with ajax.

The result of this article is visible on below screenshot:

Online runnable example:

To run this app you need to copy 3 files from this article:

  • index.js
  • index.html
  • package.json

Entire application stucture:

Below we can see src code of those 3 files.

index.js

import React, { forwardRef } from 'react';
import ReactDOM from 'react-dom';

import MaterialTable from "material-table";
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';

const tableIcons = {
    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} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
};

const App = () => {
    let data = async query => {
        let url = `https://reqres.in/api/users` +
            `?per_page=${query.pageSize}` +
            `&page=${query.page + 1}`;
        const response = await fetch(url);
        const result = await response.json();
        return {
            data: result.data,
            page: result.page - 1,
            totalCount: result.total,
        };
    }

    return (
        <MaterialTable
            title="Material Table with Ajax, pageable data"
            icons={tableIcons}
            options={{
                search: false,
                sorting: false
            }}
            columns={[
                {title: 'Id', field: 'id'},
                {title: 'First Name', field: 'first_name'},
                {title: 'Last Name', field: 'last_name'},
            ]}
            data={data}
        />
    )
}

ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

package.json

{
  "name": "react-material-table-with-pager-remote-data-via-ajax",
  "main": "src/index.js",
  "dependencies": {
    "@material-ui/core": "4.11.2",
    "@material-ui/icons": "4.11.2",
    "material-table": "1.69.2",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-scripts": "4.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

References

ReactJS

React - material table with AJAX remote data and pager
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join