Add DataGrid

2026-05-07 00:59:29 -05:00 · 2024-05-08 14:50:11 -07:00
parent 1f8254999f
commit 13a458cf43
7 changed files with 229 additions and 73 deletions
@@ -13,6 +13,7 @@
        "@fontsource/roboto": "^5.0.13",
        "@mui/icons-material": "^5.15.16",
        "@mui/material": "^5.15.16",
+        "@mui/x-data-grid": "7.3.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router": "^6.23.0",
@@ -1338,6 +1339,31 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
    },
+    "node_modules/@mui/x-data-grid": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.3.2.tgz",
+      "integrity": "sha512-seuRiZ2yyhzeUa7Thzap0xvvizGPSEwJRNOjY9kffjUr+0iXGF3PZGEsMoJ7jCjZ2peHX7FjfqBdssDvizxIDQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.0",
+        "@mui/system": "^5.15.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1",
+        "reselect": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.15.14",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4213,6 +4239,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
    "node_modules/resolve": {
      "version": "2.0.0-next.5",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -15,6 +15,7 @@
    "@fontsource/roboto": "^5.0.13",
    "@mui/icons-material": "^5.15.16",
    "@mui/material": "^5.15.16",
+    "@mui/x-data-grid": "7.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.23.0",
@@ -1,24 +1,23 @@
-
-import { Routes, Route } from 'react-router-dom'
-import './App.css'
-import NotFound from './Pages/NotFound'
-import Login from './Pages/Login'
-import Register from './Pages/Register'
-import HomeLayout from './Layouts/HomeLayout'
-
+import { Routes, Route } from "react-router-dom";
+import "./App.css";
+import NotFound from "./Pages/NotFound";
+import Login from "./Pages/Login";
+import Register from "./Pages/Register";
+import HomeLayout from "./Layouts/HomeLayout";
+import Demo from "./Pages/Demo/Demo";

 function App() {
  return (
    <>
      <Routes>
-        <Route exact path='/' element={<HomeLayout />} />
-        <Route exact path='/register' element={<Register />} />
-        <Route exact path='/login' element={<Login />} />
-        <Route path='*' element={<NotFound />} />
+        <Route exact path="/" element={<HomeLayout />} />
+        <Route exact path="/register" element={<Register />} />
+        <Route exact path="/login" element={<Login />} />
+        <Route exact path="/demo" element={<Demo />} />
+        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
-  )
+  );
 }

-export default App
-
+export default App;
@@ -3,4 +3,5 @@
  display: inline-flex;
  justify-content: center;
  align-items: center;
+  line-height: normal;
 }
@@ -0,0 +1,182 @@
+import React from "react";
+import Button from "../../Components/Button";
+import Link from "../../Components/Link";
+import ColoredLabel from "../../Components/Label/ColoredLabel";
+import {
+  useTheme,
+  Switch,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+} from "@mui/material";
+import StatusLabel from "../../Components/Label/StautsLabel";
+import Avatar from "../../Components/Avatar/Avatar";
+import avatarImage from "../../assets/Images/avatar_placeholder.png";
+import { DataGrid } from "@mui/x-data-grid";
+
+const cols = [
+  {
+    field: "name",
+    headerName: "Name",
+    renderCell: (params) => {
+      return (
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <Avatar
+            src={params.value.avatarImage}
+            firstName={params.value.firstName}
+            lastName={params.value.lastName}
+          />
+          <div style={{ marginLeft: "1rem" }}>
+            {params.value.firstName} {params.value.lastName}
+          </div>
+        </div>
+      );
+    },
+    flex: 1,
+  },
+  {
+    field: "status",
+    headerName: "Status",
+    renderCell: (params) => {
+      return <StatusLabel status={params.value} />;
+    },
+    flex: 1,
+  },
+  { field: "role", headerName: "Role", flex: 1 },
+  { field: "team", headerName: "Team", flex: 1 },
+  { field: "hireDate", headerName: "Hire date", flex: 1 },
+];
+
+const rows = ((count) => {
+  const arr = [];
+  for (let i = 0; i < count; i++) {
+    let row = {
+      id: i,
+      name: {
+        avatarImage: i % 2 === 0 ? avatarImage : null,
+        firstName: "Placeholder Name",
+        lastName: i,
+      },
+      status: "Active",
+      role: "Product Designer",
+      team: "Marketing",
+      hireDate: new Date().toLocaleDateString(),
+    };
+    arr.push(row);
+  }
+  return arr;
+})(100);
+
+const Demo = () => {
+  const [radio, setRadio] = React.useState(1);
+
+  const handleRadio = (event) => {
+    setRadio(event.target.value);
+  };
+
+  const change = (event, type) => {
+    alert(event.target.checked ? `${type} checked` : `${type} unchecked`);
+  };
+
+  const theme = useTheme();
+  return (
+    <div>
+      <h4>Buttons</h4>
+      <div>
+        <Button level="primary" label="Primary" />
+        <Button level="secondary" label="Secondary" />
+        <Button level="tertiary" label="Tertiary" />
+        <Button level="error" label="Error" />
+      </div>
+      <h4>Disabled Buttons</h4>
+      <div>
+        <Button level="primary" label="Primary" disabled />
+        <Button level="secondary" label="Secondary" disabled />
+        <Button level="tertiary" label="Tertiary" disabled />
+        <Button level="error" label="Error" disabled />
+      </div>
+      <div>
+        <Link
+          level="tertiary"
+          label="Tertiary Link"
+          url={"https://www.google.com"}
+        />
+      </div>
+      <h4>Labels</h4>
+      <div>
+        <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
+        <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
+        <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
+        <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
+      </div>
+
+      <h4>Status Lables</h4>
+      <div>
+        <StatusLabel status="Seen" />
+        <StatusLabel status="Waiting" />
+        <StatusLabel status="New" />
+        <StatusLabel status="Active" />
+      </div>
+      <h4>Avatar</h4>
+      <div style={{ display: "flex" }}>
+        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
+        <Avatar firstName="Alex" lastName="Holliday" />
+        <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" small />
+        <Avatar firstName="Alex" lastName="Holliday" small />
+      </div>
+      <h4>Switches</h4>
+      <div>
+        <Switch onChange={(event) => change(event, "Switch")} />
+        <Switch size="small" />
+        <Switch disabled />
+        <Switch checked />
+      </div>
+      <h4>Checkboxes</h4>
+      <div>
+        <Checkbox onChange={(event) => change(event, "Checkbox")} />
+        <Checkbox size="small" />
+        <Checkbox disabled />
+        <Checkbox checked />
+      </div>
+      <h4>Radio</h4>
+      <div>
+        <FormControl>
+          <FormLabel>Demo Radio</FormLabel>
+          <RadioGroup value={radio} onChange={handleRadio}>
+            <div>
+              <FormControlLabel value={1} control={<Radio />} label="1" />
+              <FormControlLabel value={2} control={<Radio />} label="2" />
+              <FormControlLabel
+                value={3}
+                control={<Radio size="small" />}
+                label="3"
+              />
+              <FormControlLabel
+                value={4}
+                control={<Radio disabled />}
+                label="4"
+              />
+            </div>
+          </RadioGroup>
+        </FormControl>
+      </div>
+      <h4>Table</h4>
+      <div style={{ height: "400px", width: "50vw" }}>
+        <DataGrid
+          autoHeight
+          columns={cols}
+          rows={rows}
+          initialState={{
+            pagination: {
+              paginationModel: { page: 0, pageSize: 10 },
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+export default Demo;
@@ -1,69 +1,11 @@
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
-import Button from "../../Components/Button";
-import Link from "../../Components/Link";
-import ColoredLabel from "../../Components/Label/ColoredLabel";
-import { useTheme } from "@mui/material";
-import StatusLabel from "../../Components/Label/StautsLabel";
-import Avatar from "../../Components/Avatar/Avatar";
-import avatarImage from "../../assets/Images/avatar_placeholder.png";

 const Home = () => {
-  const theme = useTheme();
  return (
    <>
      <div>Home</div>
      <DropdownTeamMember />
-      <div>
-        <h4>Buttons</h4>
-        <div>
-          <Button level="primary" label="Primary" />
-          <Button level="secondary" label="Secondary" />
-          <Button level="tertiary" label="Tertiary" />
-          <Button level="error" label="Error" />
-        </div>
-        <h4>Disabled Buttons</h4>
-        <div>
-          <Button level="primary" label="Primary" disabled />
-          <Button level="secondary" label="Secondary" disabled />
-          <Button level="tertiary" label="Tertiary" disabled />
-          <Button level="error" label="Error" disabled />
-        </div>
-        <div>
-          <Link
-            level="tertiary"
-            label="Tertiary Link"
-            url={"https://www.google.com"}
-          />
-        </div>
-        <h4>Labels</h4>
-        <div>
-          <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
-          <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
-          <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
-          <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
-        </div>
-
-        <h4>Status Lables</h4>
-        <div>
-          <StatusLabel status="Seen" />
-          <StatusLabel status="Waiting" />
-          <StatusLabel status="New" />
-          <StatusLabel status="Active" />
-        </div>
-        <h4>Avatar</h4>
-        <div style={{ display: "flex" }}>
-          <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
-          <Avatar firstName="Alex" lastName="Holliday" />
-          <Avatar
-            src={avatarImage}
-            firstName="Alex"
-            lastName="Holliday"
-            small
-          />
-          <Avatar firstName="Alex" lastName="Holliday" small />
-        </div>
-      </div>
    </>
  );
 };