+
{gridState.filter.items.map((item, index) => (
= () => {
/>
))}
-
- } color="primary">
- Clear
-
- } color="primary">
- Filter
-
-
+ {!disableMultipleColumnsFiltering && (
+
+ } color="primary">
+ Add Filter
+
+
+ )}
);
};
diff --git a/packages/grid/_modules_/grid/components/tools/Panel.tsx b/packages/grid/_modules_/grid/components/tools/Panel.tsx
new file mode 100644
index 0000000000000..b93e392a1b1b6
--- /dev/null
+++ b/packages/grid/_modules_/grid/components/tools/Panel.tsx
@@ -0,0 +1,83 @@
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import * as React from 'react';
+import { useGridSelector } from '../../hooks/features/core/useGridSelector';
+import { viewportSizeStateSelector } from '../../hooks/features/preferencesPanel/preferencePanelSelector';
+import { ApiContext } from '../api-context';
+
+const useStyles = makeStyles(
+ (theme: Theme) => ({
+ paper: {
+ backgroundColor: theme.palette.background.paper,
+ minWidth: 300,
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ panel: {
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ flex: 1,
+ '& .MuiDataGridPanel-container': {
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'auto',
+ flex: '1 1',
+ },
+ '& .MuiDataGridPanel-footer, .MuiDataGridPanel-header': {
+ padding: 8,
+ display: 'inline-flex',
+ justifyContent: 'space-between',
+ },
+ },
+ }),
+ { name: 'MuiDataGridPanel' },
+);
+
+export interface PanelProps {
+ open: boolean;
+}
+
+export const Panel: React.FC
= ({ children, open }) => {
+ const classes = useStyles();
+ const apiRef = React.useContext(ApiContext);
+ const viewportSizes = useGridSelector(apiRef, viewportSizeStateSelector);
+
+ const hidePreferences = React.useCallback(() => {
+ apiRef?.current.hidePreferences();
+ }, [apiRef]);
+
+ let anchorEl;
+ if (apiRef?.current && apiRef?.current.columnHeadersElementRef!.current) {
+ anchorEl = apiRef?.current.columnHeadersElementRef!.current;
+ }
+
+ if (!anchorEl) {
+ return null;
+ }
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+};
diff --git a/packages/grid/_modules_/grid/components/tools/Preferences.tsx b/packages/grid/_modules_/grid/components/tools/Preferences.tsx
index 7a7e0c027f50e..a8331adf15da6 100644
--- a/packages/grid/_modules_/grid/components/tools/Preferences.tsx
+++ b/packages/grid/_modules_/grid/components/tools/Preferences.tsx
@@ -1,165 +1,27 @@
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
import * as React from 'react';
import { allColumnsSelector } from '../../hooks/features/columns/columnsSelector';
import { useGridSelector } from '../../hooks/features/core/useGridSelector';
-import {
- preferencePanelStateSelector,
- viewportSizeStateSelector,
-} from '../../hooks/features/preferencesPanel/preferencePanelSelector';
+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';
import { ColumnsPanel } from './ColumnsPanel';
import { FilterPanel } from './FilterPanel';
+import { Panel } from './Panel';
-export const TabPanel: React.FC> = (props) => {
- const { children, ...rest } = props;
-
- return (
-
- {children}
-
- );
-};
-const useStyles = makeStyles((theme: Theme) => ({
- paper: {
- backgroundColor: theme.palette.background.paper,
- width: 600,
- minHeight: 200,
- display: 'flex',
- flexDirection: 'column',
- boxShadow: '0px 5px 5px 0px #00000070',
- },
- tabsRoot: {
- flexShrink: 0,
- },
- tab: {
- minWidth: 50,
- },
- tabPanel: {
- display: 'flex',
- flexDirection: 'column',
- overflow: 'hidden',
- flex: 1,
- '& .panelMainContainer': {
- display: 'flex',
- flexDirection: 'column',
- overflow: 'auto',
- flex: '1 1',
- paddingTop: 12,
- paddingLeft: 12,
- },
- '& .panelFooter': {
- padding: 12,
- display: 'inline-flex',
- flexFlow: 'wrap',
- alignItems: 'baseline',
- justifyContent: 'space-between',
- flex: '0 1 50px',
- },
- },
-}));
-// TODO refactor tab to navigation with a showNav prop on the component
-// TODO Extract Panel component?
-
-export const PreferencesPanel = () => {
- const classes = useStyles();
+export function PreferencesPanel() {
const apiRef = React.useContext(ApiContext);
const columns = useGridSelector(apiRef, allColumnsSelector);
const options = useGridSelector(apiRef, optionsSelector);
const preferencePanelState = useGridSelector(apiRef, preferencePanelStateSelector);
- const viewportSizes = useGridSelector(apiRef, viewportSizeStateSelector);
-
- const icons = useIcons();
- const filterIconElement = React.createElement(icons.ColumnFiltering!, {});
- const columnsIconElement = React.createElement(icons.ColumnSelector!, {});
-
- const changeTab = React.useCallback(
- (event: React.ChangeEvent<{}>, newValue: PreferencePanelsValue) => {
- apiRef?.current.showPreferences(newValue);
- },
- [apiRef],
- );
-
- const hidePreferences = React.useCallback(() => {
- apiRef?.current.hidePreferences();
- }, [apiRef]);
const isColumnsTabOpen = preferencePanelState.openedPanelValue === PreferencePanelsValue.columns;
const isFiltersTabOpen = !preferencePanelState.openedPanelValue || !isColumnsTabOpen;
- let anchorEl;
- if (apiRef?.current && apiRef?.current.columnHeadersElementRef!.current) {
- anchorEl = apiRef?.current.columnHeadersElementRef!.current;
- }
-
- if (!anchorEl) {
- return null;
- }
-
return (
- 0 && preferencePanelState.open}
- anchorEl={anchorEl}
- style={{ position: 'relative' }}
- >
-
-
-
- {!options.disableColumnFilter && (
-
- )}
- {!options.disableColumnSelector && (
-
- )}
-
- {!options.disableColumnSelector && isColumnsTabOpen && (
-
-
-
- )}
- {!options.disableColumnFilter && isFiltersTabOpen && (
-
-
-
- )}
-
-
-
+ 0 && preferencePanelState.open}>
+ {!options.disableColumnSelector && isColumnsTabOpen && }
+ {!options.disableColumnFilter && isFiltersTabOpen && }
+
);
-};
+}
diff --git a/packages/grid/_modules_/grid/components/tools/index.ts b/packages/grid/_modules_/grid/components/tools/index.ts
index b02ca1464d680..96a79959fa059 100644
--- a/packages/grid/_modules_/grid/components/tools/index.ts
+++ b/packages/grid/_modules_/grid/components/tools/index.ts
@@ -1,5 +1,7 @@
+export * from './ColumnsPanel';
export * from './FilterForm';
+export * from './FilterInputValue';
+export * from './FilterInputValueProps';
export * from './FilterPanel';
+export * from './Panel';
export * from './Preferences';
-export * from './FilterInputValueProps';
-export * from './FilterInputValue';
diff --git a/packages/grid/_modules_/grid/constants/eventsConstants.ts b/packages/grid/_modules_/grid/constants/eventsConstants.ts
index dd2f50d2ee9bb..a0485ae92576d 100644
--- a/packages/grid/_modules_/grid/constants/eventsConstants.ts
+++ b/packages/grid/_modules_/grid/constants/eventsConstants.ts
@@ -46,4 +46,3 @@ export const SORT_MODEL_CHANGE = 'sortModelChange';
export const STATE_CHANGE = 'stateChange';
export const MULTIPLE_KEY_PRESS_CHANGED = 'multipleKeyPressChange';
-export const PREVENT_HIDE_PREFERENCES = 'preventHidePreferences';
diff --git a/packages/grid/_modules_/grid/hooks/features/columnMenu/useColumnMenu.ts b/packages/grid/_modules_/grid/hooks/features/columnMenu/useColumnMenu.ts
index f148cd2296ef4..7fc0eaaf681d7 100644
--- a/packages/grid/_modules_/grid/hooks/features/columnMenu/useColumnMenu.ts
+++ b/packages/grid/_modules_/grid/hooks/features/columnMenu/useColumnMenu.ts
@@ -25,7 +25,7 @@ export const useColumnMenu = (apiRef: ApiRef): void => {
logger.debug('Hiding Column Menu');
setGridState((state) => ({
...state,
- columnMenu: { open: false },
+ columnMenu: { ...state.columnMenu, open: false },
}));
forceUpdate();
}, [forceUpdate, logger, setGridState]);
diff --git a/packages/grid/_modules_/grid/hooks/features/columns/columnsSelector.ts b/packages/grid/_modules_/grid/hooks/features/columns/columnsSelector.ts
index 5cd35852aabfa..8586401b14ef8 100644
--- a/packages/grid/_modules_/grid/hooks/features/columns/columnsSelector.ts
+++ b/packages/grid/_modules_/grid/hooks/features/columns/columnsSelector.ts
@@ -3,6 +3,7 @@ import { Columns, InternalColumns } from '../../../models/colDef/colDef';
import { GridState } from '../core/gridState';
export const columnsSelector = (state: GridState) => state.columns;
+export const columnLookupSelector = (state: GridState) => state.columns.lookup;
export const allColumnsSelector = createSelector(
columnsSelector,
(columns: InternalColumns) => columns.all,
diff --git a/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts b/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts
index 7ea55b92684ca..c210c6a170863 100644
--- a/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts
+++ b/packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts
@@ -231,9 +231,9 @@ export function useColumns(columns: Columns, apiRef: ApiRef): InternalColumns {
const updateColumn = React.useCallback((col: ColDef) => updateColumns([col]), [updateColumns]);
const toggleColumn = React.useCallback(
- (field: string, hide: boolean) => {
+ (field: string, hide?: boolean) => {
const col = getColumnFromField(field);
- const updatedCol = { ...col, hide };
+ const updatedCol = { ...col, hide: hide == null ? !col.hide : hide };
updateColumns([updatedCol]);
forceUpdate();
},
diff --git a/packages/grid/_modules_/grid/hooks/features/filter/filterSelector.ts b/packages/grid/_modules_/grid/hooks/features/filter/filterSelector.ts
index 0ff101bc221dc..78dd30e01c7bc 100644
--- a/packages/grid/_modules_/grid/hooks/features/filter/filterSelector.ts
+++ b/packages/grid/_modules_/grid/hooks/features/filter/filterSelector.ts
@@ -1,7 +1,9 @@
import { createSelector } from 'reselect';
+import { FilterItem } from '../../../models/filterItem';
import { RowModel } from '../../../models/rows';
import { GridState } from '../core/gridState';
import { sortedRowsSelector } from '../sorting/sortingSelector';
+import { FilterModelState } from './FilterModelState';
import { VisibleRowsState } from './visibleRowsState';
export const visibleRowsStateSelector = (state: GridState) => state.visibleRows;
@@ -19,3 +21,16 @@ export const visibleRowCountSelector = createSelector rows.length,
);
+
+export const filterStateSelector: (state: GridState) => FilterModelState = (state) => state.filter;
+
+export const activeFilterItemsSelector = createSelector(
+ filterStateSelector,
+ (filterModel) =>
+ filterModel.items?.filter((item) => item.value != null && item.value?.toString() !== ''), // allows to count false or 0
+);
+
+export const filterItemsCounterSelector = createSelector(
+ activeFilterItemsSelector,
+ (activeFilters) => activeFilters.length,
+);
diff --git a/packages/grid/_modules_/grid/hooks/features/filter/useFilter.ts b/packages/grid/_modules_/grid/hooks/features/filter/useFilter.ts
index 957a6d880de6b..ead805d3f90ec 100644
--- a/packages/grid/_modules_/grid/hooks/features/filter/useFilter.ts
+++ b/packages/grid/_modules_/grid/hooks/features/filter/useFilter.ts
@@ -5,12 +5,12 @@ import { buildCellParams } from '../../../utils/paramsUtils';
import { isEqual } from '../../../utils/utils';
import { useApiMethod } from '../../root/useApiMethod';
import { useLogger } from '../../utils/useLogger';
+import { optionsSelector } from '../../utils/useOptionsProp';
import { PreferencePanelsValue } from '../preferencesPanel/preferencesPanelValue';
import { filterableColumnsSelector } from '../columns/columnsSelector';
import { useGridSelector } from '../core/useGridSelector';
import { useGridState } from '../core/useGridState';
import { sortedRowsSelector } from '../sorting/sortingSelector';
-import { getInitialFilterState } from './FilterModelState';
import { getInitialVisibleRowsState } from './visibleRowsState';
export const useFilter = (apiRef: ApiRef): void => {
@@ -19,6 +19,7 @@ export const useFilter = (apiRef: ApiRef): void => {
const rows = useGridSelector(apiRef, sortedRowsSelector);
const filterableColumns = useGridSelector(apiRef, filterableColumnsSelector);
+ const { disableMultipleColumnsFiltering } = useGridSelector(apiRef, optionsSelector);
const clearFilteredRows = React.useCallback(() => {
setGridState((state) => ({
@@ -27,16 +28,6 @@ export const useFilter = (apiRef: ApiRef): void => {
}));
}, [setGridState]);
- const clearFilters = React.useCallback(() => {
- setGridState((state) => ({
- ...state,
- filter: getInitialFilterState(),
- }));
- clearFilteredRows();
- apiRef.current.upsertFilter({});
- forceUpdate();
- }, [apiRef, clearFilteredRows, forceUpdate, setGridState]);
-
const applyFilter = React.useCallback(
(filterItem: FilterItem, linkOperator: LinkOperator) => {
if (!filterItem.columnField || !filterItem.operatorValue || !filterItem.value) {
@@ -125,7 +116,9 @@ export const useFilter = (apiRef: ApiRef): void => {
item.columnField,
)!.filterOperators![0].value!;
}
-
+ if (disableMultipleColumnsFiltering && items.length > 1) {
+ items.length = 1;
+ }
const newState = {
...state,
filter: { ...state.filter, items },
@@ -134,7 +127,7 @@ export const useFilter = (apiRef: ApiRef): void => {
});
applyFilters();
},
- [apiRef, applyFilters, filterableColumns, setGridState],
+ [apiRef, applyFilters, disableMultipleColumnsFiltering, filterableColumns, setGridState],
);
const deleteFilter = React.useCallback(
@@ -169,9 +162,8 @@ export const useFilter = (apiRef: ApiRef): void => {
}
}
apiRef.current.showPreferences(PreferencePanelsValue.filters);
- forceUpdate();
},
- [apiRef, forceUpdate, gridState.filter.items],
+ [apiRef, gridState.filter.items],
);
const applyFilterLinkOperator = React.useCallback(
@@ -191,7 +183,6 @@ export const useFilter = (apiRef: ApiRef): void => {
applyFilterLinkOperator,
applyFilters,
upsertFilter,
- clearFilters,
deleteFilter,
showFilterPanel,
},
diff --git a/packages/grid/_modules_/grid/hooks/features/preferencesPanel/usePreferencesPanel.ts b/packages/grid/_modules_/grid/hooks/features/preferencesPanel/usePreferencesPanel.ts
index 95c25b34d51d2..df39e947588ba 100644
--- a/packages/grid/_modules_/grid/hooks/features/preferencesPanel/usePreferencesPanel.ts
+++ b/packages/grid/_modules_/grid/hooks/features/preferencesPanel/usePreferencesPanel.ts
@@ -1,7 +1,5 @@
import * as React from 'react';
-import { PREVENT_HIDE_PREFERENCES } from '../../../constants/eventsConstants';
import { ApiRef } from '../../../models/api/apiRef';
-import { useApiEventHandler } from '../../root/useApiEventHandler';
import { useApiMethod } from '../../root/useApiMethod';
import { useLogger } from '../../utils/useLogger';
import { useGridState } from '../core/useGridState';
@@ -12,32 +10,36 @@ export const usePreferencesPanel = (apiRef: ApiRef): void => {
const [, setGridState, forceUpdate] = useGridState(apiRef);
const hideTimeout = React.useRef();
- const showPreferences = React.useCallback(
- (newValue: PreferencePanelsValue) => {
- logger.debug('Opening Preferences Panel');
- setGridState((state) => ({
- ...state,
- preferencePanel: { ...state.preferencePanel, open: true, openedPanelValue: newValue },
- }));
- forceUpdate();
- },
- [forceUpdate, logger, setGridState],
- );
-
const hidePreferences = React.useCallback(() => {
logger.debug('Hiding Preferences Panel');
setGridState((state) => ({ ...state, preferencePanel: { open: false } }));
forceUpdate();
}, [forceUpdate, logger, setGridState]);
+ // This is to prevent the preferences from closing when you open a select box or another panel,
+ // The issue is in MUI core V4 => Fixed in V5
+ const dontHidePanel = React.useCallback(() => {
+ setImmediate(() => clearTimeout(hideTimeout.current));
+ }, []);
+
+ // This is a hack for the issue with Core V4, by delaying hiding the panel on the clickAwayListener,
+ // we can cancel the action if the trigger element still need the panel...
const hidePreferencesDelayed = React.useCallback(() => {
hideTimeout.current = setTimeout(hidePreferences, 100);
}, [hidePreferences]);
- // This is to prevent the preferences from closing when you open a select box, issue with MUI core V4 => Fixed in V5
- const dontHidePanel = React.useCallback(() => {
- setImmediate(() => clearTimeout(hideTimeout.current));
- }, []);
+ const showPreferences = React.useCallback(
+ (newValue: PreferencePanelsValue) => {
+ logger.debug('Opening Preferences Panel');
+ dontHidePanel();
+ setGridState((state) => ({
+ ...state,
+ preferencePanel: { ...state.preferencePanel, open: true, openedPanelValue: newValue },
+ }));
+ forceUpdate();
+ },
+ [dontHidePanel, forceUpdate, logger, setGridState],
+ );
useApiMethod(
apiRef,
@@ -48,5 +50,9 @@ export const usePreferencesPanel = (apiRef: ApiRef): void => {
'ColumnMenuApi',
);
- useApiEventHandler(apiRef!, PREVENT_HIDE_PREFERENCES, dontHidePanel);
+ React.useEffect(() => {
+ return () => {
+ clearTimeout(hideTimeout.current);
+ };
+ }, []);
};
diff --git a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts
index 706b9e5ac23a7..7ea8f21ab391e 100644
--- a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts
+++ b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts
@@ -36,6 +36,7 @@ export function useOptionsProp(apiRef: ApiRef, props: GridComponentProps): GridO
disableSelectionOnClick: props.disableSelectionOnClick,
disableMultipleColumnsSorting: props.disableMultipleColumnsSorting,
disableMultipleSelection: props.disableMultipleSelection,
+ disableMultipleColumnsFiltering: props.disableMultipleColumnsFiltering,
disableColumnResize: props.disableColumnResize,
disableColumnReorder: props.disableColumnReorder,
disableColumnFilter: props.disableColumnFilter,
@@ -86,6 +87,7 @@ export function useOptionsProp(apiRef: ApiRef, props: GridComponentProps): GridO
props.disableSelectionOnClick,
props.disableMultipleColumnsSorting,
props.disableMultipleSelection,
+ props.disableMultipleColumnsFiltering,
props.disableColumnResize,
props.disableColumnReorder,
props.disableColumnFilter,
diff --git a/packages/grid/_modules_/grid/models/api/columnApi.ts b/packages/grid/_modules_/grid/models/api/columnApi.ts
index 8114cc6be2672..8dcdf7931d299 100644
--- a/packages/grid/_modules_/grid/models/api/columnApi.ts
+++ b/packages/grid/_modules_/grid/models/api/columnApi.ts
@@ -49,6 +49,7 @@ export interface ColumnApi {
/**
* Allows to toggle a column.
* @param field
+ * @param forceHide Optional value, if not provided the column will toggle.
*/
- toggleColumn: (field: string, hide: boolean) => void;
+ toggleColumn: (field: string, forceHide?: boolean) => void;
}
diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx
index 224915c4bbd05..6e5597218f445 100644
--- a/packages/grid/_modules_/grid/models/gridOptions.tsx
+++ b/packages/grid/_modules_/grid/models/gridOptions.tsx
@@ -85,6 +85,11 @@ export interface GridOptions {
* @default false
*/
disableMultipleSelection?: boolean;
+ /**
+ * If `true`, filtering with multiple columns is disabled.
+ * @default false
+ */
+ disableMultipleColumnsFiltering?: boolean;
/**
* If `true`, sorting with multiple columns is disabled.
* @default false
diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx
index a57268bce0f37..bcfe634e497e8 100644
--- a/packages/grid/data-grid/src/DataGrid.tsx
+++ b/packages/grid/data-grid/src/DataGrid.tsx
@@ -6,6 +6,7 @@ import { GridComponent, GridComponentProps, classnames } from '../../_modules_/g
const FORCED_PROPS: Partial = {
disableColumnResize: true,
disableColumnReorder: true,
+ disableMultipleColumnsFiltering: true,
disableMultipleColumnsSorting: true,
disableMultipleSelection: true,
pagination: true,
@@ -16,6 +17,7 @@ export type DataGridProps = Omit<
GridComponentProps,
| 'disableColumnResize'
| 'disableColumnReorder'
+ | 'disableMultipleColumnsFiltering'
| 'disableMultipleColumnsSorting'
| 'disableMultipleSelection'
| 'licenseStatus'
@@ -25,6 +27,7 @@ export type DataGridProps = Omit<
> & {
disableColumnResize?: true;
disableColumnReorder?: true;
+ disableMultipleColumnsFiltering?: true;
disableMultipleColumnsSorting?: true;
disableMultipleSelection?: true;
pagination?: true;
@@ -106,6 +109,19 @@ const DataGrid2 = React.forwardRef(function DataG
}
return null;
}),
+ disableMultipleColumnsFiltering: chainPropTypes(PropTypes.bool, (props: any) => {
+ if (props.disableMultipleColumnsFiltering === false) {
+ throw new Error(
+ [
+ `Material-UI: \`\` is not a valid prop.`,
+ 'Only single column sorting is available in the MIT version.',
+ '',
+ 'You need to upgrade to the XGrid component to unlock this feature.',
+ ].join('\n'),
+ );
+ }
+ return null;
+ }),
disableMultipleColumnsSorting: chainPropTypes(PropTypes.bool, (props: any) => {
if (props.disableMultipleColumnsSorting === false) {
throw new Error(
diff --git a/packages/storybook/src/stories/grid-columns.stories.tsx b/packages/storybook/src/stories/grid-columns.stories.tsx
index 462d60b3100d3..0829cea675686 100644
--- a/packages/storybook/src/stories/grid-columns.stories.tsx
+++ b/packages/storybook/src/stories/grid-columns.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { ColDef, XGrid, ColTypeDef } from '@material-ui/x-grid';
import { withKnobs } from '@storybook/addon-knobs';
import CreateIcon from '@material-ui/icons/Create';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
import { useData } from '../hooks/useData';
export default {
diff --git a/packages/storybook/src/stories/grid-sorting.stories.tsx b/packages/storybook/src/stories/grid-sorting.stories.tsx
index 24ab0dbe26283..68c63cca0349f 100644
--- a/packages/storybook/src/stories/grid-sorting.stories.tsx
+++ b/packages/storybook/src/stories/grid-sorting.stories.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@material-ui/core';
-import { randomInt } from '@material-ui/x-grid-data-generator';
import * as React from 'react';
+import Button from '@material-ui/core/Button';
+import { randomInt } from '@material-ui/x-grid-data-generator';
import {
ColDef,
XGrid,
diff --git a/packages/storybook/src/stories/grid-state.stories.tsx b/packages/storybook/src/stories/grid-state.stories.tsx
index f13fbea2f92f4..f8f4f41701ec1 100644
--- a/packages/storybook/src/stories/grid-state.stories.tsx
+++ b/packages/storybook/src/stories/grid-state.stories.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core';
-import { useState } from 'react';
import * as React from 'react';
+import Button from '@material-ui/core/Button';
import { GridState, SortingState, useApiRef, XGrid } from '@material-ui/x-grid';
import { withKnobs } from '@storybook/addon-knobs';
import { StateChangeParams } from '../../../grid/_modules_/grid/models/params/stateChangeParams';
@@ -107,7 +106,7 @@ const defaultProps = {
};
export function InitialState() {
- const [gridState, setGridState] = useState>({
+ const [gridState, setGridState] = React.useState>({
sorting: { sortModel: [{ field: 'brand', sort: 'desc' }], sortedRows: [2, 0, 1] },
});