[DataGrid] Move column resizing to XGrid only (#257)

* fix #245, disable col resize on DataGrid

* fix proptypes in DataGrid

* cleanup resize prop on datagrid colDef

* prettier

* fix lint

* fix issue with prettier

* finish style and update doc

* fix resizable type issue

* fix PR review

* new line

* small fix

* fixing issue with netlify deploy

* fix lint

* check only on dev

* improve docs

* Update docs/src/pages/components/data-grid/overview/overview.md

* fix tests and resizable chec

* small details

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

docs/src/pages/components/data-grid/columns/ColumnSizingGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid } from '@material-ui/data-grid';
+import { XGrid } from '@material-ui/x-grid';
 
 const rows = [
   {
@@ -12,9 +12,9 @@ const rows = [
 export default function ColumnWidthGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
-      <DataGrid
+      <XGrid
         columns={[
-          { field: 'id', resizable: false },
+          { field: 'id' },
           { field: 'username' },
           { field: 'age', resizable: false },
         ]}

docs/src/pages/components/data-grid/columns/ColumnSizingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid } from '@material-ui/data-grid';
+import { XGrid } from '@material-ui/x-grid';
 
 const rows = [
   {
@@ -12,9 +12,9 @@ const rows = [
 export default function ColumnWidthGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
-      <DataGrid
+      <XGrid
         columns={[
-          { field: 'id', resizable: false },
+          { field: 'id' },
           { field: 'username' },
           { field: 'age', resizable: false },
         ]}

docs/src/pages/components/data-grid/columns/columns.md

@@ -49,10 +49,12 @@ To change the width of a column, use the `width` property available in `ColDef`.
 
 {{"demo": "pages/components/data-grid/columns/ColumnWidthGrid.js"}}
 
-## Column sizing
+## Column resizing ⚡️
+
+By default, `XGrid` allows all columns to be resized by dragging the right portion of the column separator.
 
-By default, all columns can be resized by dragging the right portion of the column.
 To prevent the resizing of a column, set `resizable: false` in the `ColDef`.
+Alternatively, to disable all columns resize, set the prop `disableColumnResize={true}`.
 
 {{"demo": "pages/components/data-grid/columns/ColumnSizingGrid.js"}}
 

docs/src/pages/components/data-grid/getting-started/getting-started.md

@@ -106,7 +106,7 @@ The data grid comes in 2 versions:
 - `DataGrid` **MIT licensed** as part of the community edition. It's an extension of `@material-ui/core`.
 - `XGrid` **Commercially licensed** as part of the X product line offering.
 
-The features only available in the commercial version are suffixed with a <span style="font-size: 28px">⚡️</span> icon.
+The features only available in the commercial version are suffixed with a <span style="font-size: 26px">⚡️</span> icon.
 
 <img src="/static/x/header-icon.png" width="454" height="239" alt="">
 
@@ -128,7 +128,7 @@ The following table summarizes the features available in the community `DataGrid
 |                                                                                         | Community | Enterprise ⚡️ |
 | --------------------------------------------------------------------------------------- | --------- | -------------- |
 | **Column**                                                                              |           |                |
-| [Column resizing](/components/data-grid/columns/#column-sizing)                         | ❌        | ✅             |
+| [Column resizing](/components/data-grid/columns/#column-resizing)                       | ❌        | ✅             |
 | [Column groups](/components/data-grid/columns/#column-groups)                           | 🚧        | 🚧             |
 | [Column reorder](/components/data-grid/columns/#column-reorder)                         | ❌        | 🚧             |
 | [Column sticky](/components/data-grid/columns/#column-sticky)                           | ❌        | 🚧             |

docs/src/pages/components/data-grid/overview/overview.md

@@ -17,7 +17,8 @@ The data grid comes in 2 versions:
 
 - `DataGrid` **MIT licensed** as part of the community edition. It's an extension of `@material-ui/core`.
 - `XGrid` **Commercially licensed** as part of the X product line offering.
-  The features only available in the commercial version are suffixed with a ⚡️ icon.
+
+The features only available in the commercial version are suffixed with a <span style="font-size: 26px">⚡️</span> icon.
 
 ### MIT version
 
@@ -49,7 +50,7 @@ import { XGrid } from '@material-ui/x-grid';
 - [Sorting](/components/data-grid/rows/#row-sorting) and [multi-sort](/components/data-grid/rows/#multi-column-sorting) ⚡️
 - [Selection](/components/data-grid/selection/)
 - Rows and column virtualization ⚡️
-- [Resizable columns](/components/data-grid/columns/)
+- [Resizable columns](/components/data-grid/columns/#column-resizing) ⚡️
 - 100% customizable
 - Server side data
 - Column hiding

packages/grid/data-grid/package.json

@@ -5,7 +5,7 @@
   "author": "Material-UI Team",
   "main": "dist/index-cjs.js",
   "module": "dist/index-esm.js",
-  "types": "dist/data-grid.all.d.ts",
+  "types": "dist/data-grid.d.ts",
   "files": [
     "dist/*"
   ],
@@ -31,7 +31,6 @@
     "@rollup/plugin-node-resolve": "^8.0.1",
     "rollup": "^2.6.1",
     "rollup-plugin-cleaner": "^1.0.0",
-    "rollup-plugin-command": "^1.1.3",
     "rollup-plugin-dts": "^1.4.7",
     "rollup-plugin-sourcemaps": "^0.6.2",
     "rollup-plugin-terser": "^5.3.0",

packages/grid/data-grid/rollup.config.js

@@ -4,7 +4,6 @@ import cleaner from 'rollup-plugin-cleaner';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import { terser } from 'rollup-plugin-terser';
 import dts from 'rollup-plugin-dts';
-import command from 'rollup-plugin-command';
 import pkg from './package.json';
 
 // dev build if watching, prod build if not
@@ -42,16 +41,6 @@ export default [
   {
     input: './dist/index.d.ts',
     output: [{ file: 'dist/data-grid.d.ts', format: 'es' }],
-    plugins: [
-      dts(),
-      command(
-        `cat ../x-grid-modules/dist/x-grid-modules.d.ts ./dist/data-grid.d.ts > ./dist/data-grid.all.d.ts`,
-        {
-          exitOnFail: true,
-          wait: true,
-        },
-      ),
-      !production && sourceMaps(),
-    ],
+    plugins: [dts(), !production && sourceMaps()],
   },
 ];

packages/grid/data-grid/src/DataGrid.test.tsx

@@ -8,7 +8,6 @@ import { DataGrid } from '@material-ui/data-grid';
 
 describe('<DataGrid />', () => {
   const render = createClientRender();
-
   const defaultProps = {
     rows: [
       {
@@ -21,7 +20,6 @@ describe('<DataGrid />', () => {
       { field: 'brand', width: 100 },
     ],
   };
-
   describe('layout', () => {
     before(function beforeHook() {
       if (/jsdom/.test(window.navigator.userAgent)) {

packages/grid/data-grid/src/DataGrid.tsx

@@ -4,19 +4,22 @@ import { chainPropTypes } from '@material-ui/utils';
 import { GridComponent, GridComponentProps, classnames } from '@material-ui/x-grid-modules';
 
 const FORCED_PROPS: Partial<GridComponentProps> = {
-  pagination: true,
+  disableColumnResize: true,
   disableMultipleColumnsSorting: true,
   disableMultipleSelection: true,
+  pagination: true,
 };
 
 export type DataGridProps = Omit<
   GridComponentProps,
+  | 'disableColumnResize'
   | 'disableMultipleColumnsSorting'
   | 'disableMultipleSelection'
   | 'licenseStatus'
   | 'options'
   | 'pagination'
 > & {
+  disableColumnResize?: true;
   disableMultipleColumnsSorting?: true;
   disableMultipleSelection?: true;
   pagination?: true;
@@ -45,8 +48,32 @@ const DataGrid2 = React.forwardRef<HTMLDivElement, DataGridProps>(function DataG
 });
 
 DataGrid2.propTypes = {
-  disableMultipleColumnsSorting: chainPropTypes(PropTypes.number, (props) => {
-    if (props.pageSize && props.pageSize > MAX_PAGE_SIZE) {
+  columns: chainPropTypes(PropTypes.any, (props) => {
+    if (props.columns && props.columns.some((column) => column.resizable)) {
+      throw new Error(
+        [
+          `Material-UI: \`column.resizable = true\` is not a valid prop.`,
+          'Column resizing is not available in the MIT version',
+          '',
+          'You need to upgrade to the XGrid component to unlock this feature.',
+        ].join('\n'),
+      );
+    }
+  }),
+  disableColumnResize: chainPropTypes(PropTypes.bool, (props) => {
+    if (props.disableColumnResize === false) {
+      throw new Error(
+        [
+          `Material-UI: \`<DataGrid disableColumnResize={false} />\` is not a valid prop.`,
+          'Column resizing is not available in the MIT version',
+          '',
+          'You need to upgrade to the XGrid component to unlock this feature.',
+        ].join('\n'),
+      );
+    }
+  }),
+  disableMultipleColumnsSorting: chainPropTypes(PropTypes.bool, (props) => {
+    if (props.disableMultipleColumnsSorting === false) {
       throw new Error(
         [
           `Material-UI: \`<DataGrid disableMultipleColumnsSorting={false} />\` is not a valid prop.`,
@@ -59,8 +86,8 @@ DataGrid2.propTypes = {
 
     return null;
   }),
-  disableMultipleSelection: chainPropTypes(PropTypes.number, (props) => {
-    if (props.pageSize && props.pageSize > MAX_PAGE_SIZE) {
+  disableMultipleSelection: chainPropTypes(PropTypes.bool, (props) => {
+    if (props.disableMultipleSelection === false) {
       throw new Error(
         [
           `Material-UI: \`<DataGrid disableMultipleSelection={false} />\` is not a valid prop.`,

packages/grid/x-grid-modules/src/components/column-header-item.tsx

@@ -20,15 +20,17 @@ const headerAlignPropToCss = {
 export const ColumnHeaderItem = React.memo(
   ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => {
     const api = React.useContext(ApiContext);
-    const { headerHeight, showColumnRightBorder } = React.useContext(OptionsContext);
+    const { headerHeight, showColumnRightBorder, disableColumnResize } = React.useContext(
+      OptionsContext,
+    );
 
     const cssClass = classnames(
       HEADER_CELL_CSS_CLASS,
       showColumnRightBorder ? 'MuiDataGrid-withBorder' : '',
       column.headerClassName,
-      column.headerAlign && column.headerAlign !== 'left'
-        ? headerAlignPropToCss[column.headerAlign]
-        : '',
+      column.headerAlign &&
+        column.headerAlign !== 'left' &&
+        headerAlignPropToCss[column.headerAlign],
       { 'MuiDataGrid-colCellSortable': column.sortable },
     );
 
@@ -89,7 +91,10 @@ export const ColumnHeaderItem = React.memo(
             hide={column.hideSortIcons}
           />
         )}
-        <ColumnHeaderSeparator resizable={column.resizable} onResize={handleResize} />
+        <ColumnHeaderSeparator
+          resizable={!disableColumnResize && column.resizable}
+          onResize={handleResize}
+        />
       </div>
     );
   },

packages/grid/x-grid-modules/src/hooks/utils/useOptionsProp.ts

@@ -18,6 +18,7 @@ export function useOptionsProp(props: GridComponentProps): [GridOptions, Functio
       disableSelectionOnClick: props.disableSelectionOnClick,
       disableMultipleColumnsSorting: props.disableMultipleColumnsSorting,
       disableMultipleSelection: props.disableMultipleSelection,
+      disableColumnResize: props.disableColumnResize,
       disableExtendRowFullWidth: props.disableExtendRowFullWidth,
       headerHeight: props.headerHeight,
       hideFooter: props.hideFooter,
@@ -61,6 +62,7 @@ export function useOptionsProp(props: GridComponentProps): [GridOptions, Functio
       props.disableSelectionOnClick,
       props.disableMultipleColumnsSorting,
       props.disableMultipleSelection,
+      props.disableColumnResize,
       props.disableExtendRowFullWidth,
       props.headerHeight,
       props.hideFooter,

packages/grid/x-grid-modules/src/models/gridOptions.tsx

@@ -70,6 +70,11 @@ export interface GridOptions {
    * @default false
    */
   disableMultipleColumnsSorting?: boolean;
+  /**
+   * If `true`, resizing columns is disabled.
+   * @default false
+   */
+  disableColumnResize?: boolean;
   /**
    * If `true`, the right border of the cells are displayed.
    * @default false

packages/storybook/.storybook/main.js

@@ -23,6 +23,9 @@ module.exports = {
     '@storybook/addon-storysource/register',
     '@storybook/addon-a11y/register',
   ],
+  typescript: {
+    check: __DEV__, // Netlify is breaking the deploy with this settings on. So deactivate on release
+  },
   webpackFinal: async config => {
     config.devtool = __DEV__ ? 'inline-source-map' : undefined;
     config.module.rules.push({

packages/storybook/src/stories/grid-columns.stories.tsx

@@ -163,6 +163,32 @@ export function HeaderComponent() {
   );
 }
 
+export function ColumnsAlign() {
+  const data = useData(100, 5);
+
+  const transformCols = React.useCallback((cols) => {
+    if (cols.length > 0) {
+      cols.forEach((col: ColDef, idx) => {
+        if (idx > 1 && idx % 2 === 1) {
+          col.align = 'right';
+          col.headerAlign = 'right';
+        } else if (idx > 1 && idx % 2 === 0) {
+          col.align = 'center';
+          col.headerAlign = 'center';
+        }
+        col.width = 180;
+      });
+    }
+    return cols;
+  }, []);
+
+  return (
+    <div className="grid-container">
+      <XGrid rows={data.rows} columns={transformCols(data.columns)} />
+    </div>
+  );
+}
+
 const priceColumnType: ColTypeDef = {
   extendType: 'number',
   valueFormatter: ({ value }) => `${value} USD`,

packages/storybook/src/stories/playground/data-grid.options.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, DataGridProps, SortDirection } from '@material-ui/data-grid';
+import { ColDef, DataGrid, DataGridProps, SortDirection } from '@material-ui/data-grid';
 import { array, boolean, number, withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
@@ -18,11 +18,11 @@ export default {
 };
 
 export const Options = () => {
-  const data = useData(2000, 200);
+  const { columns, rows } = useData(2000, 200);
   const rowsPerPageOptions = array('rowsPerPageOptions', ['25', '50', '100'], ', ');
   const sortingOrder = array('sortingOrder', ['asc', 'desc', 'null'], ', ');
 
-  const dataGridProps: DataGridProps = {
+  const dataGridProps: Partial<DataGridProps> = {
     onRowClick: (params) => action('onRowClick')(params),
     onCellClick: (params) => action('onCellClick')(params),
     onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
@@ -31,7 +31,6 @@ export const Options = () => {
     onPageChange: (params) => action('onPageChange')(params),
     onPageSizeChange: (params) => action('onPageSizeChange')(params),
     onSortModelChange: (params) => action('onSortModelChange')(params),
-
     pageSize: number('pageSize', 100),
     autoPageSize: boolean('autoPageSize', false),
     rowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
@@ -48,12 +47,32 @@ export const Options = () => {
     rowHeight: number('rowHeight', 52),
   };
 
-  return <DataGrid rows={data.rows} columns={data.columns} {...dataGridProps} />;
+  return <DataGrid rows={rows} columns={columns as ColDef[]} {...dataGridProps} />;
 };
 export const Events = () => {
-  const data = useData(2000, 200);
+  const { rows, columns } = useData(2000, 200);
+
+  const options: Partial<DataGridProps> = {
+    onRowClick: (params) => action('onRowClick')(params),
+    onCellClick: (params) => action('onCellClick')(params),
+    onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
+    onRowSelected: (params) => action('onRowSelected')(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
+    onPageChange: (params) => action('onPageChange')(params),
+    onPageSizeChange: (params) => action('onPageSizeChange')(params),
+    onSortModelChange: (params) => action('onSortModelChange')(params),
+  };
+
+  return <DataGrid rows={rows} columns={columns as ColDef[]} {...options} />;
+};
+
+export const ResizableValidation = () => {
+  const { rows, columns } = useData(2000, 200);
+  columns.forEach((c) => {
+    c.resizable = true;
+  });
 
-  const options: DataGridProps = {
+  const options: Partial<DataGridProps> = {
     onRowClick: (params) => action('onRowClick')(params),
     onCellClick: (params) => action('onCellClick')(params),
     onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
@@ -64,5 +83,5 @@ export const Events = () => {
     onSortModelChange: (params) => action('onSortModelChange')(params),
   };
 
-  return <DataGrid rows={data.rows} columns={data.columns} {...options} />;
+  return <DataGrid rows={rows} columns={columns as ColDef[]} {...options} />;
 };