125 lines
2.5 KiB
TypeScript
125 lines
2.5 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { DataGrid } from "@mui/x-data-grid";
|
|
|
|
import type { GridColDef } from "@mui/x-data-grid";
|
|
|
|
const COLUMNS: GridColDef[] = [
|
|
{
|
|
field: "date",
|
|
headerName: "Дата",
|
|
minWidth: 130,
|
|
maxWidth: 200,
|
|
flex: 1,
|
|
sortable: false,
|
|
},
|
|
{
|
|
field: "time",
|
|
headerName: "Время",
|
|
minWidth: 90,
|
|
maxWidth: 180,
|
|
flex: 1,
|
|
sortable: false,
|
|
},
|
|
{
|
|
field: "product",
|
|
headerName: "Товар",
|
|
minWidth: 200,
|
|
maxWidth: 280,
|
|
flex: 1,
|
|
sortable: false,
|
|
},
|
|
{
|
|
field: "amount",
|
|
headerName: "Кол-во",
|
|
minWidth: 70,
|
|
maxWidth: 70,
|
|
flex: 1,
|
|
sortable: false,
|
|
},
|
|
];
|
|
|
|
const ROWS = [
|
|
{
|
|
id: "row_1",
|
|
date: "19.02.2023",
|
|
time: "17:01",
|
|
product: "Шаблонизатор",
|
|
amount: "1 шт.",
|
|
},
|
|
{
|
|
id: "row_2",
|
|
date: "28.02.2023",
|
|
time: "10:43",
|
|
product: "Шаблонизатор",
|
|
amount: "1 шт.",
|
|
},
|
|
{
|
|
id: "row_3",
|
|
date: "04.03.2023",
|
|
time: "21:09",
|
|
product: "Сокращатель ссылок",
|
|
amount: "2 шт.",
|
|
},
|
|
];
|
|
|
|
export const PurchaseTab = () => (
|
|
<Box
|
|
sx={{
|
|
height: "100%",
|
|
padding: "0 25px",
|
|
"&:before": {
|
|
content: '""',
|
|
height: "50px",
|
|
width: "100%",
|
|
position: "absolute",
|
|
left: "0",
|
|
top: "0",
|
|
background: "#F2F3F7",
|
|
},
|
|
}}
|
|
>
|
|
<DataGrid
|
|
rows={ROWS}
|
|
columns={COLUMNS}
|
|
pageSize={5}
|
|
rowsPerPageOptions={[5]}
|
|
hideFooter
|
|
disableColumnMenu
|
|
disableSelectionOnClick
|
|
rowHeight={50}
|
|
headerHeight={50}
|
|
experimentalFeatures={{ newEditingApi: true }}
|
|
sx={{
|
|
borderRadius: "0",
|
|
border: "none",
|
|
"& .MuiDataGrid-columnHeaders": {
|
|
background: "#F2F3F7",
|
|
borderBottom: "none",
|
|
},
|
|
"& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
|
|
outline: "none",
|
|
},
|
|
"& .MuiDataGrid-columnHeaderTitle": {
|
|
fontWeight: "bold",
|
|
userSelect: "none",
|
|
},
|
|
"& .MuiDataGrid-virtualScrollerRenderZone": {
|
|
width: "100%",
|
|
},
|
|
"& .MuiDataGrid-iconSeparator": { display: "none" },
|
|
"& .MuiDataGrid-main .MuiDataGrid-cell": {
|
|
outline: "none",
|
|
border: "none",
|
|
justifyContent: "flex-start",
|
|
},
|
|
"& .MuiDataGrid-row": {
|
|
width: "100%",
|
|
"&:hover": {
|
|
background: "#F2F3F7",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|