diff --git a/docs/src/pages/components/data-grid/columns/ColumnSizingGrid.js b/docs/src/pages/components/data-grid/columns/ColumnSizingGrid.js index 473be8ddc1662..dd6742fc0a181 100644 --- a/docs/src/pages/components/data-grid/columns/ColumnSizingGrid.js +++ b/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 (
- - ⚡️ icon. +The features only available in the commercial version are suffixed with a ⚡️ icon. @@ -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) | ❌ | 🚧 | diff --git a/docs/src/pages/components/data-grid/overview/overview.md b/docs/src/pages/components/data-grid/overview/overview.md index 038eaed135e97..feb3d03d74617 100644 --- a/docs/src/pages/components/data-grid/overview/overview.md +++ b/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 ⚡️ 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 diff --git a/packages/grid/data-grid/package.json b/packages/grid/data-grid/package.json index d498c5d235e4c..5d0fef002d835 100644 --- a/packages/grid/data-grid/package.json +++ b/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", diff --git a/packages/grid/data-grid/rollup.config.js b/packages/grid/data-grid/rollup.config.js index 08e6b94838523..9f7547dbc9a68 100644 --- a/packages/grid/data-grid/rollup.config.js +++ b/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()], }, ]; diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx index 519e402fac8d3..ac8bee43361a6 100644 --- a/packages/grid/data-grid/src/DataGrid.test.tsx +++ b/packages/grid/data-grid/src/DataGrid.test.tsx @@ -8,7 +8,6 @@ import { DataGrid } from '@material-ui/data-grid'; describe('', () => { const render = createClientRender(); - const defaultProps = { rows: [ { @@ -21,7 +20,6 @@ describe('', () => { { field: 'brand', width: 100 }, ], }; - describe('layout', () => { before(function beforeHook() { if (/jsdom/.test(window.navigator.userAgent)) { diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index bae2546a4c300..f4a5f1123d40e 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/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 = { - 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(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: \`\` 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: \`\` 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: \`\` is not a valid prop.`, diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx index 5359cadb0a432..2d952dacfa036 100644 --- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx +++ b/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} /> )} - +
); }, diff --git a/packages/grid/x-grid-modules/src/hooks/utils/useOptionsProp.ts b/packages/grid/x-grid-modules/src/hooks/utils/useOptionsProp.ts index f70d77ea2f733..6885e7a685d5c 100644 --- a/packages/grid/x-grid-modules/src/hooks/utils/useOptionsProp.ts +++ b/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, diff --git a/packages/grid/x-grid-modules/src/models/gridOptions.tsx b/packages/grid/x-grid-modules/src/models/gridOptions.tsx index 767d04d4f92c3..21494e9150844 100644 --- a/packages/grid/x-grid-modules/src/models/gridOptions.tsx +++ b/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 diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index 9b2ae97376fbc..25188bebcda91 100644 --- a/packages/storybook/.storybook/main.js +++ b/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({ diff --git a/packages/storybook/src/stories/grid-columns.stories.tsx b/packages/storybook/src/stories/grid-columns.stories.tsx index 22b2a3e9d2cc3..30a18144938b2 100644 --- a/packages/storybook/src/stories/grid-columns.stories.tsx +++ b/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 ( +
+ +
+ ); +} + const priceColumnType: ColTypeDef = { extendType: 'number', valueFormatter: ({ value }) => `${value} USD`, diff --git a/packages/storybook/src/stories/playground/data-grid.options.stories.tsx b/packages/storybook/src/stories/playground/data-grid.options.stories.tsx index 228341268b81f..0c6b9e0272a49 100644 --- a/packages/storybook/src/stories/playground/data-grid.options.stories.tsx +++ b/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 = { 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 ; + return ; }; export const Events = () => { - const data = useData(2000, 200); + const { rows, columns } = useData(2000, 200); + + const options: Partial = { + 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 ; +}; + +export const ResizableValidation = () => { + const { rows, columns } = useData(2000, 200); + columns.forEach((c) => { + c.resizable = true; + }); - const options: DataGridProps = { + const options: Partial = { 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 ; + return ; };