Skip to content

Commit

Permalink
[DataGridPro] Improve compact density UI for header filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@MBilalShafi
MBilalShafi committed Aug 28, 2024
1 parent 8e82705 commit b3b429e
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 14 deletions.
2 changes: 1 addition & 1 deletion docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ function CustomHeaderFilter(props) {
{...mouseEventsHandlers}
>
<Button
centerRipple={false}
disableRipple
onClick={() => apiRef.current.showFilterPanel(colDef.field)}
>
{activeFiltersCount > 0 ? `${activeFiltersCount} active` : 'Add'} filters
Expand Down
2 changes: 1 addition & 1 deletion docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
{...mouseEventsHandlers}
>
<Button
centerRipple={false}
disableRipple
onClick={() => apiRef.current.showFilterPanel(colDef.field)}
>
{activeFiltersCount > 0 ? `${activeFiltersCount} active` : 'Add'} filters
Expand Down
12 changes: 8 additions & 4 deletions docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
gridFilterModelSelector,
useGridSelector,
useGridApiContext,
gridDensitySelector,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

Expand All @@ -17,6 +18,7 @@ function AdminFilter(props) {
const { colDef } = props;
const apiRef = useGridApiContext();
const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
const density = useGridSelector(apiRef, gridDensitySelector);
const currentFieldFilters = React.useMemo(
() => filterModel.items?.filter(({ field }) => field === colDef.field),
[colDef.field, filterModel.items],
Expand All @@ -43,13 +45,15 @@ function AdminFilter(props) {

return (
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
<InputLabel id="select-is-admin-label">{label}</InputLabel>
{density !== 'compact' ? (
<InputLabel id="select-is-admin-label">{label}</InputLabel>
) : null}
<Select
labelId="select-is-admin-label"
id="select-is-admin"
{...(density !== 'compact'
? { ...{ labelId: 'select-is-admin-label', id: 'select-is-admin', label } }
: {})}
value={value}
onChange={handleChange}
label={label}
>
<MenuItem value="">
<em>None</em>
Expand Down
12 changes: 8 additions & 4 deletions docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
gridFilterModelSelector,
useGridSelector,
useGridApiContext,
gridDensitySelector,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

Expand All @@ -18,6 +19,7 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
const { colDef } = props;
const apiRef = useGridApiContext();
const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
const density = useGridSelector(apiRef, gridDensitySelector);
const currentFieldFilters = React.useMemo(
() => filterModel.items?.filter(({ field }) => field === colDef.field),
[colDef.field, filterModel.items],
Expand All @@ -44,13 +46,15 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {

return (
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
<InputLabel id="select-is-admin-label">{label}</InputLabel>
{density !== 'compact' ? (
<InputLabel id="select-is-admin-label">{label}</InputLabel>
) : null}
<Select
labelId="select-is-admin-label"
id="select-is-admin"
{...(density !== 'compact'
? { ...{ labelId: 'select-is-admin-label', id: 'select-is-admin', label } }
: {})}
value={value}
onChange={handleChange}
label={label}
>
<MenuItem value="">
<em>None</em>
Expand Down
7 changes: 5 additions & 2 deletions packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
gridFilterModelSelector,
gridFilterableColumnLookupSelector,
GridPinnedColumnPosition,
gridDensitySelector,
} from '@mui/x-data-grid';
import {
GridStateColDef,
Expand Down Expand Up @@ -122,6 +123,8 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
const menuOpenField = useGridSelector(apiRef, gridHeaderFilteringMenuSelector);
const isMenuOpen = menuOpenField === colDef.field;

const density = useGridSelector(apiRef, gridDensitySelector);

// TODO: Support for `isAnyOf` operator
const filterOperators = React.useMemo(() => {
if (!colDef.filterOperators) {
Expand Down Expand Up @@ -347,8 +350,8 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
}));
}
}}
label={capitalize(label)}
placeholder=""
label={density === 'compact' ? null : capitalize(label)}
placeholder={density === 'compact' ? label : undefined}
isFilterActive={isFilterActive}
clearButton={
showClearIcon && isApplied ? (
Expand Down
48 changes: 47 additions & 1 deletion packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,53 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
setFilterValueState(item.value || '');
}, [item.value]);

const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
const label =
labelProp === undefined ? apiRef.current.getLocaleText('filterPanelInputLabel') : labelProp;

if (label === null) {
return (
<BooleanOperatorContainer>
<rootProps.slots.baseFormControl fullWidth>
<rootProps.slots.baseSelect
value={filterValueState}
onChange={onFilterChange}
variant={variant}
notched={variant === 'outlined' ? true : undefined}
native={isSelectNative}
displayEmpty
inputProps={{ ref: focusElementRef, tabIndex }}
{
...(others as any) /* FIXME: typing error */
}
{...baseSelectProps}
>
<rootProps.slots.baseSelectOption
{...baseSelectOptionProps}
native={isSelectNative}
value=""
>
{apiRef.current.getLocaleText('filterValueAny')}
</rootProps.slots.baseSelectOption>
<rootProps.slots.baseSelectOption
{...baseSelectOptionProps}
native={isSelectNative}
value="true"
>
{apiRef.current.getLocaleText('filterValueTrue')}
</rootProps.slots.baseSelectOption>
<rootProps.slots.baseSelectOption
{...baseSelectOptionProps}
native={isSelectNative}
value="false"
>
{apiRef.current.getLocaleText('filterValueFalse')}
</rootProps.slots.baseSelectOption>
</rootProps.slots.baseSelect>
</rootProps.slots.baseFormControl>
{clearButton}
</BooleanOperatorContainer>
);
}

return (
<BooleanOperatorContainer>
Expand Down
40 changes: 39 additions & 1 deletion packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,45 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
return null;
}

const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
const label =
labelProp === undefined ? apiRef.current.getLocaleText('filterPanelInputLabel') : labelProp;

if (label === null) {
return (
<SingleSelectOperatorContainer>
<rootProps.slots.baseFormControl fullWidth>
<rootProps.slots.baseSelect
value={filterValue}
onChange={onFilterChange}
variant={variant}
type={type || 'text'}
inputProps={{
tabIndex,
ref: focusElementRef,
placeholder:
placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
}}
native={isSelectNative}
notched={variant === 'outlined' ? true : undefined}
{
...(others as any) /* FIXME: typing error */
}
{...rootProps.slotProps?.baseSelect}
>
{renderSingleSelectOptions({
column: resolvedColumn,
OptionComponent: rootProps.slots.baseSelectOption,
getOptionLabel,
getOptionValue,
isSelectNative,
baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
})}
</rootProps.slots.baseSelect>
</rootProps.slots.baseFormControl>
{clearButton}
</SingleSelectOperatorContainer>
);
}

return (
<SingleSelectOperatorContainer>
Expand Down

0 comments on commit b3b429e

Please sign in to comment.