├── .gitignore
├── src
├── index.jsx
├── components
│ ├── App.jsx
│ └── CompanyTable.jsx
└── company-data-generator.js
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .cache
4 | .idea
5 |
6 | package-lock.json
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./components/App";
4 |
5 | ReactDOM.render(, document.getElementById("root"));
6 |
--------------------------------------------------------------------------------
/src/components/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import CompanyTable from './CompanyTable';
3 | import {Container} from '@mui/material';
4 |
5 | export default () => (
6 |
7 |
8 |
9 | );
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Paginate Material UI table
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/company-data-generator.js:
--------------------------------------------------------------------------------
1 | import {faker} from '@faker-js/faker';
2 |
3 | export const getCompanyData = () => {
4 | const companies = [];
5 | for (let i = 0; i < 100; i++) {
6 | companies.push({
7 | id: i,
8 | name: faker.company.companyName(),
9 | description: faker.company.bs(),
10 | currency: faker.finance.currencyName(),
11 | routingNumber: faker.finance.routingNumber() });
12 | }
13 | return companies;
14 | };
--------------------------------------------------------------------------------
/src/components/CompanyTable.jsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Table from '@mui/material/Table';
3 | import TableBody from '@mui/material/TableBody';
4 | import TableCell from '@mui/material/TableCell';
5 | import TableContainer from '@mui/material/TableContainer';
6 | import TableHead from '@mui/material/TableHead';
7 | import TableRow from '@mui/material/TableRow';
8 | import Paper from '@mui/material/Paper';
9 | import {useEffect, useState} from 'react';
10 | import {Box, Toolbar, Typography} from '@mui/material';
11 | import {getCompanyData} from '../company-data-generator';
12 |
13 | function CompanyTable() {
14 | let [rows, setRows] = useState([]);
15 |
16 | useEffect(() => {
17 | rows = getCompanyData();
18 | setRows(rows);
19 | }, []);
20 |
21 | return (
22 |
23 |
24 |
30 |
36 | Customer bank details
37 |
38 |
39 |
40 |
43 |
44 |
45 | Company Name
46 | What they do
47 | Currency
48 | Routing number
49 |
50 |
51 |
52 | {rows.map((row) => (
53 |
57 |
58 | {row.name}
59 |
60 | {row.description}
61 | {row.currency}
62 | {row.routingNumber}
63 |
64 | ))}
65 |
66 |
67 |
68 |
69 |
70 | );
71 | }
72 |
73 | export default CompanyTable;
74 |
--------------------------------------------------------------------------------