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

[DataGrid] Header filter design improvements #15991

Merged
merged 25 commits into from
Jan 16, 2025
Merged

[DataGrid] Header filter design improvements #15991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
e6c629e
change header filter variant and update styling
KenanYusuf Dec 9, 2024
c61dbd1
Merge branch 'master' into header-filter-design
KenanYusuf Dec 10, 2024
73bcdde
small inputs
KenanYusuf Dec 11, 2024
0b704af
Merge branch 'master' into header-filter-design
KenanYusuf Dec 23, 2024
ebea8b3
update clear button design
KenanYusuf Dec 23, 2024
7bfafa2
Merge branch 'master' into header-filter-design
KenanYusuf Dec 23, 2024
cebcb87
apply styles to header filter class
KenanYusuf Dec 23, 2024
e9d3fcd
update styles
KenanYusuf Dec 24, 2024
c96bdc9
update demos
KenanYusuf Dec 24, 2024
b0621f9
Merge branch 'master' into header-filter-design
KenanYusuf Dec 24, 2024
85c15f6
add test
KenanYusuf Dec 24, 2024
6efe0da
Merge branch 'master' into header-filter-design
KenanYusuf Jan 2, 2025
ea0db1d
fix keyboard navigation
KenanYusuf Jan 2, 2025
0502511
updates
KenanYusuf Jan 2, 2025
d357d84
Merge branch 'master' into header-filter-design
KenanYusuf Jan 2, 2025
0d13012
update headerFilterHeight test
KenanYusuf Jan 2, 2025
00e0397
clarify doc
KenanYusuf Jan 2, 2025
5969b6d
Merge branch 'master' into header-filter-design
KenanYusuf Jan 3, 2025
248dcfb
update migration guide
KenanYusuf Jan 8, 2025
4f1980e
show clear button with initial filter model
KenanYusuf Jan 8, 2025
760b478
fix disabled state
KenanYusuf Jan 8, 2025
585e71d
Run script
MBilalShafi Jan 13, 2025
fb67602
Merge branch 'master' into header-filter-design
KenanYusuf Jan 14, 2025
5f960b1
render label instead of disabled input for no-input filter operators
KenanYusuf Jan 15, 2025
d96b3c6
Merge branch 'master' into header-filter-design
KenanYusuf Jan 16, 2025
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
2 changes: 1 addition & 1 deletion docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function CustomHeaderFilter(props) {
<Stack
sx={[
{
borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
},
hasFocus
? {
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
<Stack
sx={[
{
borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
},
hasFocus
? {
Expand Down
37 changes: 17 additions & 20 deletions docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,28 +23,25 @@ function RatingInputValue(props) {
};

return (
<React.Fragment>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
width: '100%',
}}
>
<Rating
name="custom-rating-filter-operator"
value={Number(item.value)}
onChange={handleFilterChange}
precision={0.5}
ref={ratingRef}
sx={{ mr: 0.5 }}
/>
{headerFilterMenu}
<Box
sx={{
display: 'inline-flex',
flexDirection: 'row',
alignItems: 'center',
height: '100%',
pl: '10px',
bl: '1px solid lightgrey',
}}
>
<Rating
name="custom-rating-filter-operator"
value={Number(item.value)}
onChange={handleFilterChange}
precision={0.5}
ref={ratingRef}
/>
</Box>
{clearButton}
</React.Fragment>
</Box>
);
}

Expand Down
37 changes: 17 additions & 20 deletions docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,28 +32,25 @@ function RatingInputValue(
};

return (
<React.Fragment>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
width: '100%',
}}
>
<Rating
name="custom-rating-filter-operator"
value={Number(item.value)}
onChange={handleFilterChange}
precision={0.5}
ref={ratingRef}
sx={{ mr: 0.5 }}
/>
{headerFilterMenu}
<Box
sx={{
display: 'inline-flex',
flexDirection: 'row',
alignItems: 'center',
height: '100%',
pl: '10px',
bl: '1px solid lightgrey',
}}
>
<Rating
name="custom-rating-filter-operator"
value={Number(item.value)}
onChange={handleFilterChange}
precision={0.5}
ref={ratingRef}
/>
</Box>
{clearButton}
</React.Fragment>
</Box>
);
}

Expand Down
8 changes: 6 additions & 2 deletions docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,18 @@ function AdminFilter(props) {
const label = !value ? 'Filter' : 'Is admin';

return (
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
<InputLabel id="select-is-admin-label">{label}</InputLabel>
<FormControl variant="outlined" size="small" fullWidth>
<InputLabel id="select-is-admin-label" shrink>
{label}
</InputLabel>
<Select
labelId="select-is-admin-label"
id="select-is-admin"
value={value}
onChange={handleChange}
label={label}
inputProps={{ sx: { fontSize: 14 } }}
notched
>
<MenuItem value="">
<em>None</em>
Expand Down
8 changes: 6 additions & 2 deletions docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,18 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
const label = !value ? 'Filter' : 'Is admin';

return (
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
<InputLabel id="select-is-admin-label">{label}</InputLabel>
<FormControl variant="outlined" size="small" fullWidth>
<InputLabel id="select-is-admin-label" shrink>
{label}
</InputLabel>
<Select
labelId="select-is-admin-label"
id="select-is-admin"
value={value}
onChange={handleChange}
label={label}
inputProps={{ sx: { fontSize: 14 } }}
notched
>
<MenuItem value="">
<em>None</em>
Expand Down
48 changes: 48 additions & 0 deletions docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'website'];

export default function HeaderFilteringInlineClearDataGridPro() {
const { data, loading } = useDemoData({
dataSet: 'Employee',
rowLength: 100,
visibleFields: VISIBLE_FIELDS,
});

const columns = React.useMemo(() => {
return data.columns.map((col) => ({
...col,
minWidth: 200,
}));
}, [data.columns]);

return (
<div style={{ height: 400, width: '100%' }}>
<DataGridPro
{...data}
columns={columns}
loading={loading}
initialState={{
...data.initialState,
filter: {
filterModel: {
items: [
{ field: 'name', operator: 'contains', value: 'a' },
{ field: 'website', operator: 'contains', value: 'http://' },
{ field: 'rating', operator: '>', value: 2 },
],
},
},
}}
headerFilters
slotProps={{
headerFilterCell: {
showClearIcon: true,
},
}}
/>
</div>
);
}
48 changes: 48 additions & 0 deletions docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'website'];

export default function HeaderFilteringInlineClearDataGridPro() {
const { data, loading } = useDemoData({
dataSet: 'Employee',
rowLength: 100,
visibleFields: VISIBLE_FIELDS,
});

const columns = React.useMemo(() => {
return data.columns.map((col) => ({
...col,
minWidth: 200,
}));
}, [data.columns]);

return (
<div style={{ height: 400, width: '100%' }}>
<DataGridPro
{...data}
columns={columns}
loading={loading}
initialState={{
...data.initialState,
filter: {
filterModel: {
items: [
{ field: 'name', operator: 'contains', value: 'a' },
{ field: 'website', operator: 'contains', value: 'http://' },
{ field: 'rating', operator: '>', value: 2 },
],
},
},
}}
headerFilters
slotProps={{
headerFilterCell: {
showClearIcon: true,
},
}}
/>
</div>
);
}
3 changes: 2 additions & 1 deletion docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
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 { DataGridPro } from '@mui/x-data-grid-pro';
import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function SimpleHeaderFilteringDataGridPro() {
Expand Down Expand Up @@ -27,6 +27,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
slots={{
headerFilterMenu: null,
}}
sx={{ [`.${gridClasses['columnHeader--filter']}`]: { px: 1 } }}
/>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.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 { DataGridPro } from '@mui/x-data-grid-pro';
import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function SimpleHeaderFilteringDataGridPro() {
Expand Down Expand Up @@ -27,6 +27,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
slots={{
headerFilterMenu: null,
}}
sx={{ [`.${gridClasses['columnHeader--filter']}`]: { px: 1 } }}
/>
</div>
);
Expand Down
6 changes: 6 additions & 0 deletions docs/data/data-grid/filtering/header-filters.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ You can disable the default filter panel using `disableColumnFilter` prop and on

{{"demo": "SimpleHeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}

## Inline clear button
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this make more sense under Customize header filter section since it's kind-of a customization?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is, but it's also very similar to the "Simple header filters" section above 😅 Could move both?


The clear button is within the header filter menu by default. To display the clear button in the header filter cell instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.

{{"demo": "HeaderFilteringInlineClearDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}

## Customize header filters

There are multiple ways to customize header filters.
Expand Down
Loading
Loading