датагрид
This commit is contained in:
parent
e7edfd2cc0
commit
38c1ea9a17
1359
package-lock.json
generated
1359
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,8 @@
|
|||||||
"@mui/material": "^5.10.5",
|
"@mui/material": "^5.10.5",
|
||||||
"@mui/styled-engine-sc": "^5.10.3",
|
"@mui/styled-engine-sc": "^5.10.3",
|
||||||
"@mui/x-data-grid": "^5.17.4",
|
"@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",
|
"@mui/x-date-pickers": "^5.0.3",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.3.0",
|
"@testing-library/react": "^13.3.0",
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -3,6 +3,7 @@ import { Box } from "@mui/material";
|
|||||||
import Templater from "./Templater";
|
import Templater from "./Templater";
|
||||||
import Quiz from "./Quiz";
|
import Quiz from "./Quiz";
|
||||||
import Contractor from "./Contractor";
|
import Contractor from "./Contractor";
|
||||||
|
import DataGridElement from "./DataGridElement";
|
||||||
import ModalMini from "./ModalMini";
|
import ModalMini from "./ModalMini";
|
||||||
import theme from "../../../../theme";
|
import theme from "../../../../theme";
|
||||||
|
|
||||||
@ -31,6 +32,7 @@ const Tariffs: React.FC = () => {
|
|||||||
<Templater openModal={ openModal } />
|
<Templater openModal={ openModal } />
|
||||||
<Quiz openModal={ openModal } />
|
<Quiz openModal={ openModal } />
|
||||||
<Contractor openModal={ openModal } />
|
<Contractor openModal={ openModal } />
|
||||||
|
<DataGridElement />
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<ModalMini open={ open } variant={ variant } close={ handleClose } />
|
<ModalMini open={ open } variant={ variant } close={ handleClose } />
|
||||||
|
Loading…
Reference in New Issue
Block a user