Skip to content

Commit 8161676

Browse files
BlariBlari
committed
Add tables
1 parent 4404bb6 commit 8161676

File tree

11 files changed

+932
-39
lines changed

11 files changed

+932
-39
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"jsonwebtoken": "^8.5.1",
3434
"line-awesome": "^1.3.0",
3535
"moment": "2.29.1",
36+
"mui-datatables": "^4.2.2",
3637
"query-string": "7.1.0",
3738
"react": "^17.0.2",
3839
"react-dom": "^17.0.2",

‎src/components/App.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,22 @@ export default function App() {
3939
<Route
4040
exact
4141
path='/'
42-
render={() => <Redirect to='/admin/dashboard' />}
42+
render={() => <Redirect to='/app/dashboard' />}
4343
/>
4444

4545
<Route
4646
exact
47-
path='/admin'
48-
render={() => <Redirect to='/admin/dashboard' />}
47+
path='/app'
48+
render={() => <Redirect to='/app/dashboard' />}
4949
/>
5050

5151
<Route path='/documentation' component={Documentation} />
52-
<PrivateRoute path='/admin' component={Layout} />
52+
<PrivateRoute path='/app' component={Layout} />
5353
<PublicRoute path='/starter' component={Starter} />
5454
<PublicRoute path='/login' component={Login} />
5555
<PublicRoute path='/verify-email' exact component={Verify} />
5656
<PublicRoute path='/password-reset' exact component={Reset} />
57-
<Redirect from='*' to='/admin/dashboard' />
57+
<Redirect from='*' to='/app/dashboard' />
5858
<Route component={Error} />
5959
</Switch>
6060
</Router>

‎src/components/Layout/Layout.js

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ import Profile from '../../pages/profile'
2929
import TypographyPage from '../../pages/typography'
3030
import ColorsPage from '../../pages/colors'
3131
import GridPage from '../../pages/grid'
32+
33+
import StaticTablesPage from '../../pages/tables'
34+
import DynamicTablesPage from '../../pages/tables/dynamic'
35+
36+
3237
import BreadCrumbs from '../../components/BreadCrumbs';
3338

3439
// context
@@ -70,15 +75,20 @@ function Layout(props) {
7075
<div className={classes.fakeToolbar} />
7176
<BreadCrumbs />
7277
<Switch>
73-
<Route path='/admin/dashboard' component={Dashboard} />
74-
<Route path="/admin/profile" component={Profile} />
75-
<Route path='/admin/user/edit' component={EditUser} />
78+
<Route path='/app/dashboard' component={Dashboard} />
79+
<Route path="/app/profile" component={Profile} />
80+
<Route path='/app/user/edit' component={EditUser} />
7681
{/*TypographyPage*/}
77-
<Route path="/admin/core/typography" component={TypographyPage} />
78-
<Route path="/admin/core/colors" component={ColorsPage} />
79-
<Route path="/admin/core/grid" component={GridPage} />
82+
<Route path="/app/core/typography" component={TypographyPage} />
83+
<Route path="/app/core/colors" component={ColorsPage} />
84+
<Route path="/app/core/grid" component={GridPage} />
85+
86+
<Route path="/app/tables/static" component={StaticTablesPage} />
87+
<Route path="/app/tables/dynamic" component={DynamicTablesPage}
88+
/>
89+
/>
8090

81-
<Route path={'/admin/api-docs'} exact
91+
<Route path={'/app/api-docs'} exact
8292
component={(props) => (
8393
<Redirect
8494
url={
@@ -91,10 +101,10 @@ function Layout(props) {
91101
)}
92102
/>
93103

94-
<Route path={'/admin/users'} exact component={UsersTablePage} />
95-
<Route path={'/admin/user/new'} exact component={AddUser} />
104+
<Route path={'/app/users'} exact component={UsersTablePage} />
105+
<Route path={'/app/user/new'} exact component={AddUser} />
96106
<Route
97-
path={'/admin/users/:id/edit'}
107+
path={'/app/users/:id/edit'}
98108
exact
99109
component={UsersFormPage}
100110
/>

‎src/components/Sidebar/SidebarStructure.js

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ import { makeStyles } from '@mui/styles';
2525
import Dot from './components/Dot';
2626

2727
const structure = [
28-
{ id: 100, label: 'Profile', link: '/admin/profile', icon: <ProfileIcon /> },
29-
{ id: 0, label: 'Dashboard', link: '/admin/dashboard', icon: <HomeIcon /> },
28+
{ id: 100, label: 'Profile', link: '/app/profile', icon: <ProfileIcon /> },
29+
{ id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
3030
{
3131
id: 1,
3232
label: 'E-commerce',
@@ -59,15 +59,15 @@ const structure = [
5959
children: [
6060
{
6161
label: 'User List',
62-
link: '/admin/users',
62+
link: '/app/users',
6363
},
6464
{
6565
label: 'User Add',
66-
link: '/admin/user/new',
66+
link: '/app/user/new',
6767
},
6868
{
6969
label: 'User Edit',
70-
link: '/admin/user/edit',
70+
link: '/app/user/edit',
7171
},
7272
],
7373
},
@@ -82,20 +82,35 @@ const structure = [
8282
{
8383
id: 6,
8484
label: 'Core',
85-
link: '/admin/core',
85+
link: '/app/core',
8686
icon: <CoreIcon />,
8787
children: [
8888
{
8989
label: 'Typography',
90-
link: '/admin/core/typography',
90+
link: '/app/core/typography',
9191
},
9292
{
9393
label: 'Colors',
94-
link: '/admin/core/colors',
94+
link: '/app/core/colors',
9595
},
9696
{
9797
label: 'Grid',
98-
link: '/admin/core/grid',
98+
link: '/app/core/grid',
99+
},
100+
],
101+
},
102+
{
103+
id: 7,
104+
label: 'Tables',
105+
link: '/app/tables',
106+
icon: <TableIcon />,
107+
children: [
108+
{ label: 'Tables Basic',
109+
link: '/app/tables/static'
110+
},
111+
{
112+
label: 'Tables Dynamic',
113+
link: '/app/tables/dynamic',
99114
},
100115
],
101116
},

‎src/pages/dashboard/components/Table/Table.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
TableBody,
77
TableCell,
88
Box
9-
} from "@material-ui/core";
9+
} from "@mui/material";
1010

1111
import { Button, Avatar } from "../../../../components/Wrappers";
1212

@@ -17,7 +17,7 @@ const states = {
1717
declined: "secondary"
1818
};
1919
export default function TableComponent({ data }) {
20-
var keys = Object.keys(data[0]).map(i => i.toUpperCase());
20+
let keys = Object.keys(data[0]).map(i => i.toUpperCase());
2121
keys.shift();
2222
keys.pop(); // delete "id, colors" key
2323

‎src/pages/tables/Tables.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from "react";
2+
import { Grid } from "@mui/material";
3+
import MUIDataTable from "mui-datatables";
4+
import useStyles from "./styles";
5+
6+
// components
7+
import Widget from "../../components/Widget";
8+
import Table from "../dashboard/components/Table/Table";
9+
10+
// data
11+
import mock from "../dashboard/mock";
12+
13+
const datatableData = [
14+
["Joe James", "Example Inc.", "Yonkers", "NY"],
15+
["John Walsh", "Example Inc.", "Hartford", "CT"],
16+
["Bob Herm", "Example Inc.", "Tampa", "FL"],
17+
["James Houston", "Example Inc.", "Dallas", "TX"],
18+
["Prabhakar Linwood", "Example Inc.", "Hartford", "CT"],
19+
["Kaui Ignace", "Example Inc.", "Yonkers", "NY"],
20+
["Esperanza Susanne", "Example Inc.", "Hartford", "CT"],
21+
["Christian Birgitte", "Example Inc.", "Tampa", "FL"],
22+
["Meral Elias", "Example Inc.", "Hartford", "CT"],
23+
["Deep Pau", "Example Inc.", "Yonkers", "NY"],
24+
["Sebastiana Hani", "Example Inc.", "Dallas", "TX"],
25+
["Marciano Oihana", "Example Inc.", "Yonkers", "NY"],
26+
["Brigid Ankur", "Example Inc.", "Dallas", "TX"],
27+
["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
28+
["Avram Sylva", "Example Inc.", "Hartford", "CT"],
29+
["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
30+
["Gaston Festus", "Example Inc.", "Tampa", "FL"]
31+
];
32+
33+
export default function Tables() {
34+
const classes = useStyles();
35+
return (
36+
<>
37+
<Grid container spacing={4}>
38+
<Grid item xs={12}>
39+
<MUIDataTable
40+
title="Employee List"
41+
data={datatableData}
42+
columns={["Name", "Company", "City", "State"]}
43+
options={{
44+
filterType: "checkbox"
45+
}}
46+
/>
47+
</Grid>
48+
<Grid item xs={12}>
49+
<Widget
50+
title="Material-UI Table"
51+
noBodyPadding
52+
bodyClass={classes.tableWrapper}
53+
>
54+
<Table data={mock.table} />
55+
</Widget>
56+
</Grid>
57+
</Grid>
58+
</>
59+
);
60+
}

0 commit comments

Comments
 (0)