[DataGrid] Move column resizing to XGrid only

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,13 +1,24 @@
 import * as React from 'react';
-import { DataGrid } from '@material-ui/data-grid';
+import { ColDef, DataGrid } from '@material-ui/data-grid';
 
 function EnterpriseTest() {
+  const cols: ColDef[] = [
+    {
+      field: 'name',
+      // @ts-expect-error Object literal may only specify known properties, and 'resizable' does not exist in type 'ColDef'.
+      resizable: true,
+    },
+    { field: 'id', resizable: false },
+    { field: 'age' },
+  ];
+
   return (
     <div>
       <DataGrid rows={[]} columns={[]} />
       <DataGrid rows={[]} columns={[]} pagination />
       {/* @ts-expect-error Type 'false' is not assignable to type 'true | undefined' */}
       <DataGrid pagination={false} />
+      <DataGrid rows={[]} columns={cols} />
     </div>
   );
 }

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

@@ -1,31 +1,45 @@
 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';
+
+export * from '@material-ui/x-grid-modules';
+export type DataGridColDef = Omit<XGridColDef, 'resizable'> & { resizable?: false };
+export interface ColDef extends DataGridColDef {}
 
 const FORCED_PROPS: Partial<GridComponentProps> = {
   pagination: true,
   disableMultipleColumnsSorting: true,
   disableMultipleSelection: true,
+  disableColumnResize: true,
 };
 
 export type DataGridProps = Omit<
   GridComponentProps,
   | 'disableMultipleColumnsSorting'
   | 'disableMultipleSelection'
+  | 'disableColumnResize'
   | 'licenseStatus'
   | 'options'
   | 'pagination'
+  | 'columns'
 > & {
   disableMultipleColumnsSorting?: true;
   disableMultipleSelection?: true;
+  disableColumnResize?: true;
   pagination?: true;
+  columns: ColDef[];
 };
 
 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;
 
   let pageSize = pageSizeProp;
   if (pageSize && pageSize > MAX_PAGE_SIZE) {
@@ -35,6 +49,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 +60,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 +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/data-grid/src/index.ts

@@ -1,2 +1 @@
-export * from '@material-ui/x-grid-modules';
 export * from './DataGrid';

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: 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`,

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,12 @@ 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: DataGridProps = {
+  const options: Partial<DataGridProps> = {
     onRowClick: (params) => action('onRowClick')(params),
     onCellClick: (params) => action('onCellClick')(params),
     onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
@@ -64,5 +63,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} />;
 };