датагрид

package.json

@@ -11,6 +11,8 @@
     "@mui/material": "^5.10.5",
     "@mui/styled-engine-sc": "^5.10.3",
     "@mui/x-data-grid": "^5.17.4",
+    "@mui/x-data-grid-generator": "^5.17.5",
+    "@mui/x-data-grid-premium": "^5.17.5",
     "@mui/x-date-pickers": "^5.0.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",

src/Components/LoggedIn/Content/Tariffs/DataGridElement/index.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Box } from '@mui/material';
+import { DataGrid, GridColDef, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import theme from "../../../../../theme";
+
+
+const columns: GridColDef[] = [
+  { 
+    field: 'id', 
+    headerName: 'ID', 
+    width: 30,
+    sortable: false,
+  },
+  {
+    field: 'name',
+    headerName: 'Название тарифа',
+    width: 200,
+    sortable: false,
+  },
+  {
+    field: 'service',
+    headerName: 'Сервис',
+    width: 160,
+    sortable: false,
+  },{
+    field: 'disk',
+    headerName: 'Гигабайты',
+    type: 'number',
+    width: 110,
+    sortable: false,
+  },
+  {
+    field: 'time',
+    headerName: 'Время',
+    type: 'number',
+    width: 110,
+    sortable: false,
+  },
+  {
+    field: 'points',
+    headerName: 'Объем',
+    width: 110,
+    sortable: false,
+  },
+  {
+    field: 'price',
+    headerName: 'Стоимость',
+    width: 160,
+    sortable: false,
+  },
+];
+
+const rows = [
+  { id: 1, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 2, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 3, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 4, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 5, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 6, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 7, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 8, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 9, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+  { id: 10, name: 'Лакшери', service: 'Шаблонизатор', disk: "100 гб", time: "1 мес", points: "100", price: "100500 $" },
+];
+
+export default function DataGridElement() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 5,
+  });
+
+  return (
+    <Box style={{ width: '100%' }}>
+      <Box style={{ height: 400 }}>
+        <DataGrid 
+          checkboxSelection={true} 
+          rows={rows}
+          columns={columns}
+          sx={{
+            color: theme.palette.secondary.main,
+            "& .MuiDataGrid-iconSeparator": {
+              display: "none"
+            },
+            "& .css-levciy-MuiTablePagination-displayedRows": {
+              color: theme.palette.secondary.main
+             },
+             "& .MuiSvgIcon-root": {
+              color: theme.palette.secondary.main
+             },
+             "& .MuiTablePagination-selectLabel": {
+              color: theme.palette.secondary.main
+             },
+             "& .MuiInputBase-root": {
+              color: theme.palette.secondary.main
+             },
+             "& .MuiButton-text": {
+              color: theme.palette.secondary.main
+             },
+          }}
+          components={{ Toolbar: GridToolbar }}
+        />
+      </Box>
+    </Box>
+  );
+}

src/Components/LoggedIn/Content/Tariffs/index.tsx

@@ -3,6 +3,7 @@ import { Box } from "@mui/material";
 import Templater from "./Templater";
 import Quiz from "./Quiz";
 import Contractor from "./Contractor";
+import DataGridElement from "./DataGridElement";
 import ModalMini from "./ModalMini";
 import theme from "../../../../theme";
 
@@ -31,6 +32,7 @@ const Tariffs: React.FC = () =>  {
         <Templater openModal={ openModal } />
         <Quiz openModal={ openModal } />
         <Contractor openModal={ openModal } />
+        <DataGridElement />
       </Box>
 
       <ModalMini open={ open } variant={ variant } close={ handleClose } />