[DataGrid] Move column resizing to XGrid only

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,7 +12,7 @@ const rows = [
 export default function ColumnWidthGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
-      <DataGrid
+      <XGrid
         columns={[
           { field: 'id', resizable: false },
           { field: 'username' },

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,7 +12,7 @@ const rows = [
 export default function ColumnWidthGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
-      <DataGrid
+      <XGrid
         columns={[
           { field: 'id', resizable: false },
           { field: 'username' },

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

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

docs/src/pages/components/data-grid/columns/ColumnWidthGrid.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,7 +12,7 @@ const rows = [
 export default function ColumnWidthGrid() {
   return (
     <div style={{ height: 250, width: '100%' }}>
-      <DataGrid
+      <XGrid
         columns={[
           { field: 'id' },
           { field: 'username', width: 200 },

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

@@ -49,7 +49,7 @@ 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 sizing ⚡️
 
 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`.
@@ -68,6 +68,8 @@ To prevent the resizing of a column, set `resizable: false` in the `ColDef`.
 - https://www.jqwidgets.com/react/react-grid/#https://www.jqwidgets.com/react/react-grid/react-grid-columnsresize.htm
 -->
 
+Alternatively, to disable all columns resize, set the prop `disableColumnResize` to `true`.
+
 ## Column types
 
 To facilitate configuration of the columns, some column types are predefined.

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.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid } from '@material-ui/data-grid';
+import { ColDef, DataGrid } from '@material-ui/data-grid';
 
 function EnterpriseTest() {
   return (

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

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 // @ts-ignore
 import { createClientRender } from 'test/utils';
 import { expect } from 'chai';
-import { DataGrid } from '@material-ui/data-grid';
+import { DataGrid, RowsProp, Columns } from '@material-ui/data-grid';
 
 describe('<DataGrid />', () => {
   const render = createClientRender();
 
-  const defaultProps = {
+  const defaultProps: { rows: RowsProp; columns: Columns } = {
     rows: [
       {
         id: 0,
@@ -32,6 +32,16 @@ describe('<DataGrid />', () => {
 
     // Adapation of describeConformance()
     describe('Material-UI component API', () => {
+      it(`resizable true should throw error`, () => {
+        defaultProps.columns[0].resizable = true;
+        expect(() =>
+          render(
+            <div style={{ width: 300, height: 300 }}>
+              <DataGrid {...defaultProps} />
+            </div>,
+          ),
+        ).toThrow();
+      });
       it(`attaches the ref`, () => {
         const ref = React.createRef<HTMLDivElement>();
         const { container } = render(

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

@@ -1,31 +1,51 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { chainPropTypes } from '@material-ui/utils';
-import { GridComponent, GridComponentProps, classnames } from '@material-ui/x-grid-modules';
+import {
+  GridComponent,
+  GridComponentProps,
+  classnames,
+  // ColDef as XGridColDef,
+} from '@material-ui/x-grid-modules';
 
 const FORCED_PROPS: Partial<GridComponentProps> = {
   pagination: true,
   disableMultipleColumnsSorting: true,
   disableMultipleSelection: true,
+  disableColumnResize: true,
 };
 
 export type DataGridProps = Omit<
   GridComponentProps,
   | 'disableMultipleColumnsSorting'
   | 'disableMultipleSelection'
+  | 'disableColumnResize'
   | 'licenseStatus'
   | 'options'
   | 'pagination'
 > & {
   disableMultipleColumnsSorting?: true;
   disableMultipleSelection?: true;
+  disableColumnResize?: true;
   pagination?: true;
 };
 
 const MAX_PAGE_SIZE = 100;
 
 const DataGrid2 = React.forwardRef<HTMLDivElement, DataGridProps>(function DataGrid(props, ref) {
-  const { className, pageSize: pageSizeProp, ...other } = props;
+  const { className, pageSize: pageSizeProp, columns, ...other } = props;
+
+  const hasResizableColumns = columns.some((c) => c.resizable);
+  if (hasResizableColumns) {
+    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'),
+    );
+  }
 
   let pageSize = pageSizeProp;
   if (pageSize && pageSize > MAX_PAGE_SIZE) {
@@ -35,6 +55,7 @@ const DataGrid2 = React.forwardRef<HTMLDivElement, DataGridProps>(function DataG
   return (
     <GridComponent
       ref={ref}
+      columns={columns}
       className={classnames('MuiDataGrid-root', className)}
       pageSize={pageSize}
       {...other}
@@ -45,8 +66,20 @@ const DataGrid2 = React.forwardRef<HTMLDivElement, DataGridProps>(function DataG
 });
 
 DataGrid2.propTypes = {
-  disableMultipleColumnsSorting: chainPropTypes(PropTypes.number, (props) => {
-    if (props.pageSize && props.pageSize > MAX_PAGE_SIZE) {
+  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 +92,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/components/styled-wrappers/GridRootStyles.ts

@@ -17,6 +17,17 @@ export const useStyles = makeStyles(
         outline: 'none',
         display: 'flex',
         flexDirection: 'column',
+        '& *::-webkit-scrollbar-track': {
+          borderRadius: 10,
+        },
+        '& *::-webkit-scrollbar': {
+          width: 8,
+          height: 8,
+        },
+        '& *::-webkit-scrollbar-thumb': {
+          borderRadius: 10,
+          backgroundColor: borderColor,
+        },
         '& *, & *::before, & *::after': {
           boxSizing: 'inherit',
         },

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
@@ -245,7 +250,7 @@ export interface GridOptions {
 export const DEFAULT_GRID_OPTIONS: GridOptions = {
   rowHeight: 52,
   headerHeight: 56,
-  scrollbarSize: 15,
+  scrollbarSize: 10,
   columnBuffer: 2,
   rowsPerPageOptions: [25, 50, 100],
   pageSize: 100,

packages/storybook/.storybook/main.js

@@ -23,6 +23,9 @@ module.exports = {
     '@storybook/addon-storysource/register',
     '@storybook/addon-a11y/register',
   ],
+  typescript: {
+    check: true,
+  },
   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`,