[DataGrid] Server filters

packages/grid/_modules_/grid/GridComponent.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { useForkRef } from '@material-ui/core/utils';
 import { AutoSizer } from './components/AutoSizer';
-import { ColumnsHeader } from './components/column-headers';
+import { ColumnsHeader } from './components/columnHeaders/ColumnHeaders';
 import { DefaultFooter } from './components/default-footer';
 import { ErrorBoundary } from './components/error-boundary';
 import { Pagination } from './components/pagination';

packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderFilterIcon.tsx

@@ -0,0 +1,65 @@
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import Tooltip from '@material-ui/core/Tooltip';
+import * as React from 'react';
+import { useGridSelector } from '../../hooks/features/core/useGridSelector';
+import { preferencePanelStateSelector } from '../../hooks/features/preferencesPanel/preferencePanelSelector';
+import { PreferencePanelsValue } from '../../hooks/features/preferencesPanel/preferencesPanelValue';
+import { useIcons } from '../../hooks/utils/useIcons';
+import { optionsSelector } from '../../hooks/utils/useOptionsProp';
+import { ApiContext } from '../api-context';
+
+export interface ColumnHeaderFilterIconProps {
+  counter?: number;
+}
+
+export const ColumnHeaderFilterIcon: React.FC<ColumnHeaderFilterIconProps> = (props) => {
+  const { counter } = props;
+  const apiRef = React.useContext(ApiContext);
+  const options = useGridSelector(apiRef, optionsSelector);
+  const preferencePanel = useGridSelector(apiRef, preferencePanelStateSelector);
+
+  const icons = useIcons();
+  const filteredColumnIconElement = React.createElement(icons.ColumnFiltered!, {
+    fontSize: 'small',
+  });
+  const toggleFilter = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const { open, openedPanelValue } = preferencePanel;
+      if (open && openedPanelValue === PreferencePanelsValue.filters) {
+        apiRef!.current.hideFilterPanel();
+      } else {
+        apiRef!.current.showFilterPanel();
+      }
+    },
+    [apiRef, preferencePanel],
+  );
+
+  if (!counter || options.disableColumnFilter || !options.hideToolbar) {
+    return null;
+  }
+
+  const iconButton = (
+    <IconButton onClick={toggleFilter} color="default" aria-label="Show Filters" size="small">
+      {filteredColumnIconElement}
+    </IconButton>
+  );
+
+  return (
+    <Tooltip title={`${counter} active filter(s)`} enterDelay={1000}>
+      <div className="MuiDataGrid-iconButtonContainer">
+        <div>
+          {counter > 1 && (
+            <Badge badgeContent={counter} color="default">
+              {iconButton}
+            </Badge>
+          )}
+          {counter === 1 && iconButton}
+        </div>
+      </div>
+    </Tooltip>
+  );
+};