Skip to content

Commit

Permalink
[DataGrid] Add DataGridCssVars regression demo (#14662)
Browse files Browse the repository at this point in the history
  • Loading branch information
cherniavskii authored Sep 19, 2024
1 parent b907bb5 commit d42b3c3
Showing 1 changed file with 69 additions and 0 deletions.
69 changes: 69 additions & 0 deletions test/regressions/data-grid/DataGridCssVars.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import {
randomCreatedDate,
randomTraderName,
randomEmail,
randomUpdatedDate,
} from '@mui/x-data-grid-generator';
import { Box, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material';

export default function ControlPinnedColumns() {
const [pinnedColumns, setPinnedColumns] = React.useState({
left: ['name'],
right: ['dateCreated'],
});

const handlePinnedColumnsChange = React.useCallback(
(updatedPinnedColumns) => {
setPinnedColumns(updatedPinnedColumns);
},
[setPinnedColumns],
);

return (
<Box sx={{ height: 400, width: 400 }}>
<CssVarsProvider>
<DataGridPro
rows={rows}
hideFooter
columns={columns}
pinnedColumns={pinnedColumns}
onPinnedColumnsChange={handlePinnedColumnsChange}
/>
</CssVarsProvider>
</Box>
);
}

const columns = [
{ field: 'name', headerName: 'Name', width: 80, editable: true },
{ field: 'email', headerName: 'Email', width: 150, editable: true },
{ field: 'age', headerName: 'Age', type: 'number', editable: true },
{
field: 'dateCreated',
headerName: 'Date Created',
type: 'date',
width: 80,
editable: true,
},
{
field: 'lastLogin',
headerName: 'Last Login',
type: 'dateTime',
width: 180,
editable: true,
},
];

const rows = [
{
id: 1,
name: randomTraderName(),
email: randomEmail(),
age: 25,
dateCreated: randomCreatedDate(),
lastLogin: randomUpdatedDate(),
},
];

0 comments on commit d42b3c3

Please sign in to comment.