Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[website] Use MUI X Data Grid v7-beta #41276

Merged
merged 14 commits into from
Mar 13, 2024
Merged

[website] Use MUI X Data Grid v7-beta #41276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
50cced6
upgrade data grid
cherniavskii Feb 26, 2024
658ba26
use css variable for border color
cherniavskii Feb 26, 2024
211b56f
remove unused styles
cherniavskii Feb 26, 2024
121bd69
fix slot usage
cherniavskii Feb 26, 2024
a04f291
use css var to set border color
cherniavskii Feb 26, 2024
aed436e
add display flex
cherniavskii Feb 26, 2024
7fa3f4b
pnpm dedupe
cherniavskii Feb 26, 2024
e52b103
Merge branch 'master' into upgrade-data-grid
cherniavskii Mar 12, 2024
417ff16
update lockfile
cherniavskii Mar 12, 2024
7c86997
pnpm dedupe
cherniavskii Mar 12, 2024
8d45a74
update datatable demo
cherniavskii Mar 12, 2024
b050bc6
add a warning
cherniavskii Mar 12, 2024
2f5dbaf
bump data grid packages
cherniavskii Mar 12, 2024
ef414e9
Update docs/data/material/components/table/table.md
cherniavskii Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/data/material/components/table/DataTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ const columns = [
description: 'This column has a value getter and is not sortable.',
sortable: false,
width: 160,
valueGetter: (params) =>
`${params.row.firstName || ''} ${params.row.lastName || ''}`,
valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
},
];

Expand Down
5 changes: 2 additions & 3 deletions docs/data/material/components/table/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID', width: 70 },
Expand All @@ -17,8 +17,7 @@ const columns: GridColDef[] = [
description: 'This column has a value getter and is not sortable.',
sortable: false,
width: 160,
valueGetter: (params: GridValueGetterParams) =>
`${params.row.firstName || ''} ${params.row.lastName || ''}`,
valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
},
];

Expand Down
5 changes: 5 additions & 0 deletions docs/data/material/components/table/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@
The [`DataGrid` component](/x/react-data-grid/) is designed for use-cases that are focused on handling large amounts of tabular data.
While it comes with a more rigid structure, in exchange, you gain more powerful features.

:::info
The demo below uses the MUI X Data Grid v7, which is currently in beta.

Check warning on line 37 in docs/data/material/components/table/table.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[writing-rules.NoCompanyName] We avoid referencing the company name 'MUI X'. Instead you can reference a product or the team.

Raw Output:
{"message": "[writing-rules.NoCompanyName] We avoid referencing the company name 'MUI X'. Instead you can reference a product or the team.", "location": {"path": "docs/data/material/components/table/table.md", "range": {"start": {"line": 37, "column": 25}}}, "severity": "WARNING"}

Check failure on line 37 in docs/data/material/components/table/table.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[writing-rules.BrandName] Use a non-breaking space for brand name ('MUI X' instead of 'MUI X')

Raw Output:
{"message": "[writing-rules.BrandName] Use a non-breaking space for brand name ('MUI X' instead of 'MUI X')", "location": {"path": "docs/data/material/components/table/table.md", "range": {"start": {"line": 37, "column": 25}}}, "severity": "ERROR"}
Visit [the documentation](https://next.mui.com/x/react-data-grid/) to learn more about it.
:::

{{"demo": "DataTable.js", "bg": "inline"}}

## Dense table
Expand Down
8 changes: 4 additions & 4 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,10 @@
"@mui/types": "workspace:^",
"@mui/utils": "workspace:^",
"@mui/x-charts": "6.19.5",
"@mui/x-data-grid": "6.19.6",
"@mui/x-data-grid-generator": "6.19.6",
"@mui/x-data-grid-premium": "6.19.6",
"@mui/x-data-grid-pro": "6.19.6",
"@mui/x-data-grid": "7.0.0-beta.6",
"@mui/x-data-grid-generator": "7.0.0-beta.6",
"@mui/x-data-grid-premium": "7.0.0-beta.6",
"@mui/x-data-grid-pro": "7.0.0-beta.6",
"@mui/x-date-pickers": "6.19.6",
"@mui/x-date-pickers-pro": "6.19.6",
"@mui/x-license-pro": "6.10.2",
Expand Down
15 changes: 2 additions & 13 deletions docs/src/components/home/XGridGlobalStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export default function XGridGlobalStyles({
border: 'none',
fontSize: '0.75rem',
borderRadius: '0px',
'--DataGrid-rowBorderColor': (theme.vars || theme).palette.grey[200],
// toolbar
// style GridToolbar
'& .MuiDataGrid-toolbarContainer': {
Expand Down Expand Up @@ -51,9 +52,6 @@ export default function XGridGlobalStyles({
'& .MuiDataGrid-menuIcon svg': {
fontSize: '1rem',
},
'& .MuiDataGrid-columnHeaders': {
borderColor: (theme.vars || theme).palette.grey[200],
},
'& .MuiDataGrid-columnSeparator': {
color: (theme.vars || theme).palette.grey[200],
'&:hover': {
Expand All @@ -66,10 +64,6 @@ export default function XGridGlobalStyles({
'& .MuiDataGrid-virtualScroller': {
backgroundColor: (theme.vars || theme).palette.grey[50],
},
'& .MuiDataGrid-cell': {
borderBottom: '1px solid',
borderColor: (theme.vars || theme).palette.grey[200],
},
'& .MuiDataGrid-editInputCell': {
fontSize: '0.75rem',
'& > input': {
Expand Down Expand Up @@ -118,6 +112,7 @@ export default function XGridGlobalStyles({
theme.applyDarkStyles({
[selector]: {
'& .MuiDataGrid-root': {
'--DataGrid-rowBorderColor': alpha(theme.palette.primaryDark[500], 0.5),
'& .MuiDataGrid-toolbarContainer': {
'& > button': {
borderColor: (theme.vars || theme).palette.divider,
Expand All @@ -129,9 +124,6 @@ export default function XGridGlobalStyles({
'& .MuiIconButton-root:not(.Mui-disabled)': {
color: (theme.vars || theme).palette.primary[300],
},
'& .MuiDataGrid-columnHeaders': {
borderColor: (theme.vars || theme).palette.divider,
},
'& .MuiDataGrid-columnSeparator': {
color: (theme.vars || theme).palette.primaryDark[400],
'&:hover': {
Expand All @@ -143,9 +135,6 @@ export default function XGridGlobalStyles({
'& .MuiDataGrid-virtualScroller': {
backgroundColor: (theme.vars || theme).palette.primaryDark[900],
},
'& .MuiDataGrid-cell': {
borderColor: alpha(theme.palette.primaryDark[500], 0.5),
},
'& .MuiTablePagination-root': {
'& .MuiIconButton-root': {
'&:not([disabled])': {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/productX/XGridFullDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,8 +269,8 @@ export default function XGridFullDemo() {
<DataGridPro
{...data}
density="compact"
components={{
Toolbar: GridToolbar,
slots={{
toolbar: GridToolbar,
}}
loading={loading}
checkboxSelection
Expand Down
28 changes: 2 additions & 26 deletions docs/src/components/productX/XHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,16 +163,13 @@ export default function XHero() {
'& .MuiDataGrid-root': {
border: 0,
color: 'text.secondary',
'--DataGrid-rowBorderColor': (theme) => theme.palette.grey[200],
'& .MuiCheckbox-root': {
p: 0.5,
'& > svg': {
fontSize: '1.25rem',
},
},
'& .MuiDataGrid-columnHeaders': {
borderBottom: '1px solid',
borderColor: 'grey.200',
},
[`& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within`]:
{
outline: 'none',
Expand All @@ -188,22 +185,6 @@ export default function XHero() {
'& button, & button > svg': {
fontSize: 16,
},
'& .MuiDataGrid-cell': {
fontSize: '0.875rem',
color: 'text.secondary',
borderBottom: '1px solid',
borderColor: 'grey.200',
},
'& .MuiDataGrid-viewport': {
'& .MuiDataGrid-cell': {
fontSize: '0.875rem',
color: 'text.secondary',
},
'& .MuiInputBase-input': {
fontSize: '0.875rem',
px: 0.5,
},
},
'& .MuiChip-root.Rejected': {
color: red[800],
backgroundColor: red[50],
Expand Down Expand Up @@ -232,12 +213,7 @@ export default function XHero() {
(theme) =>
theme.applyDarkStyles({
'& .MuiDataGrid-root': {
'& .MuiDataGrid-columnHeaders': {
borderColor: 'divider',
},
'& .MuiDataGrid-cell': {
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
},
'--DataGrid-rowBorderColor': alpha(theme.palette.primaryDark[600], 0.5),
'& .MuiChip-root.Rejected': {
color: red[200],
backgroundColor: alpha(red[900], 0.2),
Expand Down
4 changes: 3 additions & 1 deletion docs/src/components/productX/XTheming.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function XTheming() {
const columns: Array<GridColDef> = [
{
field: 'desk',
headerName: 'desk',
headerName: 'Desk',
width: customized ? 72 : 100,
sortable: false,
editable: true,
Expand All @@ -65,6 +65,7 @@ export default function XTheming() {
sortable: false,
editable: true,
...(customized && {
display: 'flex',
renderCell: (params: GridCellParams) => {
return <ProgressBar value={Number(params.value)!} />;
},
Expand All @@ -81,6 +82,7 @@ export default function XTheming() {
sortable: false,
editable: true,
...(customized && {
display: 'flex',
renderCell: (params: GridCellParams) => {
return <Status status={(params.value || '').toString()} />;
},
Expand Down
Loading
Loading