From e8d79debf1029676b03d29826871c40b0f78774d Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 18 Jul 2021 11:54:54 +0530 Subject: [PATCH 1/6] add some missing grid options in docs --- docs/pages/api-docs/data-grid/data-grid.md | 6 ++++-- docs/pages/api-docs/data-grid/x-grid.md | 8 ++++++-- packages/grid/_modules_/grid/models/gridOptions.tsx | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/pages/api-docs/data-grid/data-grid.md b/docs/pages/api-docs/data-grid/data-grid.md index 302382efbf16b..96311dbf4a8b1 100644 --- a/docs/pages/api-docs/data-grid/data-grid.md +++ b/docs/pages/api-docs/data-grid/data-grid.md @@ -27,6 +27,7 @@ import { DataGrid } from '@material-ui/data-grid'; | components | GridSlotsComponent | | Overrideable components. | | componentsProps | GridSlotsComponentsProps | | Overrideable components props dynamically passed to the component at rendering. | | density | Density | standard | Sets the density of the grid. | +| disableColumnFilter | boolean | false | If `true`, column filters are disabled. | | disableColumnMenu | boolean | false | If `true`, the column menu is disabled. | | disableColumnSelector | boolean | false | If `true`, the column selector is disabled. | | disableDensitySelector | boolean | false | If `true`, the density selector is disabled. | @@ -34,6 +35,7 @@ import { DataGrid } from '@material-ui/data-grid'; | disableSelectionOnClick | boolean | false | If `true`, the selection on click on a row or cell is disabled. | | error | any | | An error that will turn the grid into its error state and display the error component. | | editRowsModel | GridEditRowsModel | undefined | Set the edit rows model of the grid. | +| filterMode | GridFeatureMode | client | Filtering can be processed on the server or client-side. Set it to `server` if you would like to handle filtering on the server-side. | | filterModel | GridFilterModel | | Set the filter model of the grid. | | getCellClassName | (params: GridCellParams) => string | | Function that applies CSS classes dynamically on cells. | | getRowClassName | (params: GridRowParams) => string | | Function that applies CSS classes dynamically on rows. | @@ -44,12 +46,12 @@ import { DataGrid } from '@material-ui/data-grid'; | hideFooterRowCount | boolean | false | If `true`, the row count in the footer is hidden. | | hideFooterSelectedRowCount | boolean | false | If `true`, the selected row count in the footer is hidden. | | icons | IconsOptions | | Set of icons used in the grid. | -| isCellEditable | (params: GridCellParams) => boolean | | Callback fired when a cell is rendered, returns true if the cell is editable. | +| isCellEditable | (params: GridCellParams) => boolean | | Callback fired when a cell is rendered, returns `true` if the cell is editable. | | isRowSelectable | (params: GridRowParams) => boolean | | Determines if a row can be selected. | | loading | boolean | false | If `true`, a loading overlay is displayed. | | localeText | GridLocaleText | | Set of text labels used in the grid. You can find all the translation keys supported in [the source](https://github.com/mui-org/material-ui-x/blob/HEAD/packages/grid/_modules_/grid/constants/localeTextConstants.ts) in the GitHub repository. | | logger | Logger | null | Pass a custom logger in the components that implements the 'Logger' interface. | -| logLevel | string | false | false | Allows to pass the logging level or false to turn off logging. | +| logLevel | string or boolean false | false | Allows to pass the logging level or false to turn off logging. | | nonce | string | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). | | onCellClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a click event comes from a cell element. | | onCellDoubleClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a double click event comes from a cell element. | diff --git a/docs/pages/api-docs/data-grid/x-grid.md b/docs/pages/api-docs/data-grid/x-grid.md index d701450049cb5..2de70a0c56ced 100644 --- a/docs/pages/api-docs/data-grid/x-grid.md +++ b/docs/pages/api-docs/data-grid/x-grid.md @@ -29,16 +29,20 @@ import { XGrid } from '@material-ui/x-grid'; | components | GridSlotsComponent | | Overrideable components slots. | | componentsProps | GridSlotsComponentsProps | | Overrideable components props dynamically passed to the component at rendering. | | density | Density | standard | Sets the density of the grid. | +| disableColumnFilter | boolean | false | If `true`, column filters are disabled. | | disableColumnMenu | boolean | false | If `true`, the column menu is disabled. | +| disableColumnReorder | boolean | false | If `true`, reordering columns is disabled. | | disableColumnSelector | boolean | false | If `true`, the column selector is disabled. | | disableColumnResize | boolean | false | If `true`, resizing columns is disabled. | | disableDensitySelector | boolean | false | If `true`, the density selector is disabled. | | disableExtendRowFullWidth | boolean | false | If `true`, rows will not be extended to fill the full width of the grid container. | +| disableMultipleColumnsFiltering | boolean | false | If `true`, filtering with multiple columns is disabled. | | disableMultipleColumnsSorting | boolean | false | If `true`, sorting with multiple columns is disabled. | | disableMultipleSelection | boolean | false | If `true`, multiple selection using the CTRL or CMD key is disabled. | | disableSelectionOnClick | boolean | false | If `true`, the selection on click on a row or cell is disabled. | | error | any | | An error that will turn the grid into its error state and display the error component. | | editRowsModel | GridEditRowsModel | undefined | Set the edit rows model of the grid. | +| filterMode | GridFeatureMode | client | Filtering can be processed on the server or client-side. Set it to `server` if you would like to handle filtering on the server-side. | | filterModel | GridFilterModel | | Set the filter model of the grid. | | getCellClassName | (params: GridCellParams) => string | | Function that applies CSS classes dynamically on cells. | | getRowClassName | (params: GridRowParams) => string | | Function that applies CSS classes dynamically on rows. | @@ -49,12 +53,12 @@ import { XGrid } from '@material-ui/x-grid'; | hideFooterRowCount | boolean | false | If `true`, the row count in the footer is hidden. | | hideFooterSelectedRowCount | boolean | false | If `true`, the selected row count in the footer is hidden. | | icons | IconsOptions | | Set of icons used in the grid. | -| isCellEditable | (params: GridCellParams) => boolean | | Callback fired when a cell is rendered, returns true if the cell is editable. | +| isCellEditable | (params: GridCellParams) => boolean | | Callback fired when a cell is rendered, returns `true` if the cell is editable. | | isRowSelectable | (params: GridRowParams) => boolean | | Determines if a row can be selected. | | loading | boolean | false | If `true`, a loading overlay is displayed.. | | localeText | GridLocaleText | | Set of text labels used in the grid. You can find all the translation keys supported in [the source](https://github.com/mui-org/material-ui-x/blob/HEAD/packages/grid/_modules_/grid/constants/localeTextConstants.ts) in the GitHub repository. | | logger | Logger | null | Pass a custom logger in the components that implements the 'Logger' interface. | -| logLevel | string | false | false | Allows to pass the logging level or false to turn off logging. | +| logLevel | string or boolean false | false | Allows to pass the logging level or false to turn off logging. | | nonce | string | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). | | onCellClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a click event comes from a cell element. | | onCellDoubleClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a double click event comes from a cell element. | diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx index c199f43f45d0b..e3e73d1306566 100644 --- a/packages/grid/_modules_/grid/models/gridOptions.tsx +++ b/packages/grid/_modules_/grid/models/gridOptions.tsx @@ -143,8 +143,8 @@ export interface GridOptions { editRowsModel?: GridEditRowsModel; /** * Filtering can be processed on the server or client-side. - * Set it to 'client' if you would like to handle filtering on the client-side. * Set it to 'server' if you would like to handle filtering on the server-side. + * @default "client" */ filterMode?: GridFeatureMode; /** From ca27c2755e4e859b049081cd82bb9c832ba28f04 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 18 Jul 2021 12:16:17 +0530 Subject: [PATCH 2/6] add missing onCell handlers in docs --- docs/pages/api-docs/data-grid/data-grid.md | 3 +++ docs/pages/api-docs/data-grid/x-grid.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/docs/pages/api-docs/data-grid/data-grid.md b/docs/pages/api-docs/data-grid/data-grid.md index 96311dbf4a8b1..e3a80f94454c5 100644 --- a/docs/pages/api-docs/data-grid/data-grid.md +++ b/docs/pages/api-docs/data-grid/data-grid.md @@ -53,8 +53,11 @@ import { DataGrid } from '@material-ui/data-grid'; | logger | Logger | null | Pass a custom logger in the components that implements the 'Logger' interface. | | logLevel | string or boolean false | false | Allows to pass the logging level or false to turn off logging. | | nonce | string | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). | +| onCellBlur | (params: GridCellParams, event: React.FocusEvent) => void | | Callback fired when the active element leaves a cell. | | onCellClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a click event comes from a cell element. | | onCellDoubleClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a double click event comes from a cell element. | +| onCellFocusOut | (params: GridCellParams, event?: MuiEvent) => void | | Callback fired when a cell loses focus. | +| onCellKeyDown | (params: GridCellParams, event: React.KeyboardEvent) => void | | Callback fired when a keydown event comes from a cell element. | | onCellOver | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a mouse over event comes from a cell element. | | onCellOut | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a mouse out comes from a cell element. | | onCellEnter | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a mouse enter event comes from a cell element. | diff --git a/docs/pages/api-docs/data-grid/x-grid.md b/docs/pages/api-docs/data-grid/x-grid.md index 2de70a0c56ced..c9c05b7b2d222 100644 --- a/docs/pages/api-docs/data-grid/x-grid.md +++ b/docs/pages/api-docs/data-grid/x-grid.md @@ -60,8 +60,11 @@ import { XGrid } from '@material-ui/x-grid'; | logger | Logger | null | Pass a custom logger in the components that implements the 'Logger' interface. | | logLevel | string or boolean false | false | Allows to pass the logging level or false to turn off logging. | | nonce | string | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). | +| onCellBlur | (params: GridCellParams, event: React.FocusEvent) => void | | Callback fired when the active element leaves a cell. | | onCellClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a click event comes from a cell element. | | onCellDoubleClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a double click event comes from a cell element. | +| onCellFocusOut | (params: GridCellParams, event?: MuiEvent) => void | | Callback fired when a cell loses focus. | +| onCellKeyDown | (params: GridCellParams, event: React.KeyboardEvent) => void | | Callback fired when a keydown event comes from a cell element. | | onCellOver | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a mouse over event comes from a cell element. | | onCellOut | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a mouse out comes from a cell element. | | onCellEnter | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a mouse enter event comes from a cell element. | From e0bf08e15385c082223a53da9791359abbf03532 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 18 Jul 2021 12:26:52 +0530 Subject: [PATCH 3/6] add onStateChange doc --- docs/pages/api-docs/data-grid/data-grid.md | 1 + docs/pages/api-docs/data-grid/x-grid.md | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/pages/api-docs/data-grid/data-grid.md b/docs/pages/api-docs/data-grid/data-grid.md index e3a80f94454c5..b8d22c4c6de1f 100644 --- a/docs/pages/api-docs/data-grid/data-grid.md +++ b/docs/pages/api-docs/data-grid/data-grid.md @@ -89,6 +89,7 @@ import { DataGrid } from '@material-ui/data-grid'; | onRowLeave | (param: GridRowParams, event: React.MouseEvent) => void | | Callback fired when a mouse leave event comes from a row container element. | | onSelectionModelChange | (param: GridSelectionModelChangeParams) => void | | Callback fired when the selection state of one or multiple rows changes. | | onSortModelChange | (param: GridSortModelParams) => void | | Callback fired when the sort model changes before a column is sorted. | +| onStateChange | (params: any) => void | | Callback fired when the state of the grid is updated. | | page | number | 1 | Set the current page. | | pageSize | number | 100 | Set the number of rows in one page. | | paginationMode | GridFeatureMode | 'client' | Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side. | diff --git a/docs/pages/api-docs/data-grid/x-grid.md b/docs/pages/api-docs/data-grid/x-grid.md index c9c05b7b2d222..daa890823a636 100644 --- a/docs/pages/api-docs/data-grid/x-grid.md +++ b/docs/pages/api-docs/data-grid/x-grid.md @@ -97,6 +97,7 @@ import { XGrid } from '@material-ui/x-grid'; | onRowsScrollEnd | (param: GridRowScrollEndParams) => void | | Callback fired when scrolling to the bottom of the grid viewport. | | onSelectionModelChange | (param: GridSelectionModelChangeParams) => void | | Callback fired when the selection state of one or multiple rows changes. | | onSortModelChange | (param: GridSortModelParams) => void | | Callback fired when the sort model changes before a column is sorted. | +| onStateChange | (params: any) => void | | Callback fired when the state of the grid is updated. | | page | number | 1 | Set the current page. | | pageSize | number | 100 | Set the number of rows in one page. | | pagination | boolean | false | If `true`, pagination is enabled. | From 46aceef6b7140b54ed87e18ae90f5d7c5168975b Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 20 Jul 2021 06:16:49 +0530 Subject: [PATCH 4/6] add single quotes --- docs/pages/api-docs/data-grid/data-grid.md | 2 +- docs/pages/api-docs/data-grid/x-grid.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/data-grid/data-grid.md b/docs/pages/api-docs/data-grid/data-grid.md index b8d22c4c6de1f..012c5beb52d69 100644 --- a/docs/pages/api-docs/data-grid/data-grid.md +++ b/docs/pages/api-docs/data-grid/data-grid.md @@ -35,7 +35,7 @@ import { DataGrid } from '@material-ui/data-grid'; | disableSelectionOnClick | boolean | false | If `true`, the selection on click on a row or cell is disabled. | | error | any | | An error that will turn the grid into its error state and display the error component. | | editRowsModel | GridEditRowsModel | undefined | Set the edit rows model of the grid. | -| filterMode | GridFeatureMode | client | Filtering can be processed on the server or client-side. Set it to `server` if you would like to handle filtering on the server-side. | +| filterMode | GridFeatureMode | 'client' | Filtering can be processed on the server or client-side. Set it to `server` if you would like to handle filtering on the server-side. | | filterModel | GridFilterModel | | Set the filter model of the grid. | | getCellClassName | (params: GridCellParams) => string | | Function that applies CSS classes dynamically on cells. | | getRowClassName | (params: GridRowParams) => string | | Function that applies CSS classes dynamically on rows. | diff --git a/docs/pages/api-docs/data-grid/x-grid.md b/docs/pages/api-docs/data-grid/x-grid.md index daa890823a636..36714c2a3e610 100644 --- a/docs/pages/api-docs/data-grid/x-grid.md +++ b/docs/pages/api-docs/data-grid/x-grid.md @@ -42,7 +42,7 @@ import { XGrid } from '@material-ui/x-grid'; | disableSelectionOnClick | boolean | false | If `true`, the selection on click on a row or cell is disabled. | | error | any | | An error that will turn the grid into its error state and display the error component. | | editRowsModel | GridEditRowsModel | undefined | Set the edit rows model of the grid. | -| filterMode | GridFeatureMode | client | Filtering can be processed on the server or client-side. Set it to `server` if you would like to handle filtering on the server-side. | +| filterMode | GridFeatureMode | 'client' | Filtering can be processed on the server or client-side. Set it to `server` if you would like to handle filtering on the server-side. | | filterModel | GridFilterModel | | Set the filter model of the grid. | | getCellClassName | (params: GridCellParams) => string | | Function that applies CSS classes dynamically on cells. | | getRowClassName | (params: GridRowParams) => string | | Function that applies CSS classes dynamically on rows. | From 624243244956b75a2d6a3d4a1e6e456c9869a8ab Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 20 Jul 2021 06:36:52 +0530 Subject: [PATCH 5/6] escape pipe in markdown --- docs/pages/api-docs/data-grid/data-grid.md | 2 +- docs/pages/api-docs/data-grid/x-grid.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/data-grid/data-grid.md b/docs/pages/api-docs/data-grid/data-grid.md index 012c5beb52d69..9a1700463aec9 100644 --- a/docs/pages/api-docs/data-grid/data-grid.md +++ b/docs/pages/api-docs/data-grid/data-grid.md @@ -51,7 +51,7 @@ import { DataGrid } from '@material-ui/data-grid'; | loading | boolean | false | If `true`, a loading overlay is displayed. | | localeText | GridLocaleText | | Set of text labels used in the grid. You can find all the translation keys supported in [the source](https://github.com/mui-org/material-ui-x/blob/HEAD/packages/grid/_modules_/grid/constants/localeTextConstants.ts) in the GitHub repository. | | logger | Logger | null | Pass a custom logger in the components that implements the 'Logger' interface. | -| logLevel | string or boolean false | false | Allows to pass the logging level or false to turn off logging. | +| logLevel | string \| false | false | Allows to pass the logging level or false to turn off logging. | | nonce | string | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). | | onCellBlur | (params: GridCellParams, event: React.FocusEvent) => void | | Callback fired when the active element leaves a cell. | | onCellClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a click event comes from a cell element. | diff --git a/docs/pages/api-docs/data-grid/x-grid.md b/docs/pages/api-docs/data-grid/x-grid.md index 36714c2a3e610..60c21a9d3a9b0 100644 --- a/docs/pages/api-docs/data-grid/x-grid.md +++ b/docs/pages/api-docs/data-grid/x-grid.md @@ -58,7 +58,7 @@ import { XGrid } from '@material-ui/x-grid'; | loading | boolean | false | If `true`, a loading overlay is displayed.. | | localeText | GridLocaleText | | Set of text labels used in the grid. You can find all the translation keys supported in [the source](https://github.com/mui-org/material-ui-x/blob/HEAD/packages/grid/_modules_/grid/constants/localeTextConstants.ts) in the GitHub repository. | | logger | Logger | null | Pass a custom logger in the components that implements the 'Logger' interface. | -| logLevel | string or boolean false | false | Allows to pass the logging level or false to turn off logging. | +| logLevel | string \| false | false | Allows to pass the logging level or false to turn off logging. | | nonce | string | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). | | onCellBlur | (params: GridCellParams, event: React.FocusEvent) => void | | Callback fired when the active element leaves a cell. | | onCellClick | (params: GridCellParams, event: React.MouseEvent) => void | | Callback fired when a click event comes from a cell element. | From 63432bd5473d84839a2ec1593eb2f4d4e9390613 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 22 Jul 2021 18:33:16 +0530 Subject: [PATCH 6/6] update prop arguments of onSelectionModelChange API in docs --- docs/pages/api-docs/data-grid/data-grid.md | 2 +- docs/pages/api-docs/data-grid/x-grid.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/data-grid/data-grid.md b/docs/pages/api-docs/data-grid/data-grid.md index 4397fd3edd3c5..c8990be480f9b 100644 --- a/docs/pages/api-docs/data-grid/data-grid.md +++ b/docs/pages/api-docs/data-grid/data-grid.md @@ -87,7 +87,7 @@ import { DataGrid } from '@material-ui/data-grid'; | onRowOut | (param: GridRowParams, event: React.MouseEvent) => void | | Callback fired when a mouse out comes from a row container element. | | onRowEnter | (param: GridRowParams, event: React.MouseEvent) => void | | Callback fired when a mouse enter comes from a row container element. | | onRowLeave | (param: GridRowParams, event: React.MouseEvent) => void | | Callback fired when a mouse leave event comes from a row container element. | -| onSelectionModelChange | (param: GridSelectionModelChangeParams) => void | | Callback fired when the selection state of one or multiple rows changes. | +| onSelectionModelChange | (model: GridSelectionModel) => void | | Callback fired when the selection state of one or multiple rows changes. | | onSortModelChange | (model: GridSortModel) => void | | Callback fired when the sort model changes before a column is sorted. | | page | number | 1 | Set the current page. | | pageSize | number | 100 | Set the number of rows in one page. | diff --git a/docs/pages/api-docs/data-grid/x-grid.md b/docs/pages/api-docs/data-grid/x-grid.md index 6e4d3d6f8d87a..08345a3936e47 100644 --- a/docs/pages/api-docs/data-grid/x-grid.md +++ b/docs/pages/api-docs/data-grid/x-grid.md @@ -95,7 +95,7 @@ import { XGrid } from '@material-ui/x-grid'; | onRowEnter | (param: GridRowParams, event: React.MouseEvent) => void | | Callback fired when a mouse enter comes from a row container element. | | onRowLeave | (param: GridRowParams, event: React.MouseEvent) => void | | Callback fired when a mouse leave event comes from a row container element. | | onRowsScrollEnd | (param: GridRowScrollEndParams) => void | | Callback fired when scrolling to the bottom of the grid viewport. | -| onSelectionModelChange | (param: GridSelectionModelChangeParams) => void | | Callback fired when the selection state of one or multiple rows changes. | +| onSelectionModelChange | (model: GridSelectionModel) => void | | Callback fired when the selection state of one or multiple rows changes. | | onSortModelChange | (model: GridSortModel) => void | | Callback fired when the sort model changes before a column is sorted. | | page | number | 1 | Set the current page. | | pageSize | number | 100 | Set the number of rows in one page. |