CHIEFSOFT\ameye
75 lines
2.0 KiB
JavaScript
75 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import Card from "@mui/material/Card";
|
|
import { Typography } from "@mui/material";
|
|
import { DataGrid } from '@mui/x-data-grid';
|
|
|
|
const columns = [
|
|
{ field: 'id', headerName: 'ID', width: 70 },
|
|
{ field: 'firstName', headerName: 'First name', width: 130 },
|
|
{ field: 'lastName', headerName: 'Last name', width: 130 },
|
|
{
|
|
field: 'age',
|
|
headerName: 'Age',
|
|
type: 'number',
|
|
width: 90,
|
|
},
|
|
{
|
|
field: 'fullName',
|
|
headerName: 'Full name',
|
|
description: 'This column has a value getter and is not sortable.',
|
|
sortable: false,
|
|
width: 160,
|
|
valueGetter: (params) =>
|
|
`${params.row.firstName || ''} ${params.row.lastName || ''}`,
|
|
},
|
|
];
|
|
|
|
const rows = [
|
|
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
|
|
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
|
|
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
|
|
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
|
|
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
|
|
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
|
|
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
|
|
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
|
|
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
|
|
];
|
|
|
|
export default function DataTable() {
|
|
return (
|
|
<>
|
|
<Card
|
|
sx={{
|
|
boxShadow: "none",
|
|
borderRadius: "10px",
|
|
p: "25px",
|
|
mb: "15px",
|
|
}}
|
|
>
|
|
<Typography
|
|
as="h3"
|
|
sx={{
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
mb: '10px'
|
|
}}
|
|
>
|
|
Data Table
|
|
</Typography>
|
|
|
|
<div style={{ height: 400, width: '100%' }}>
|
|
<DataGrid
|
|
rows={rows}
|
|
columns={columns}
|
|
pageSize={5}
|
|
rowsPerPageOptions={[5]}
|
|
checkboxSelection
|
|
className="dark-data-table"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|