Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add missing API docs #2167

Merged
merged 7 commits into from
Jul 22, 2021
Merged

[docs] Add missing API docs #2167

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e8d79de
add some missing grid options in docs
ZeeshanTamboli Jul 18, 2021
ca27c27
add missing onCell handlers in docs
ZeeshanTamboli Jul 18, 2021
e0bf08e
add onStateChange doc
ZeeshanTamboli Jul 18, 2021
46aceef
add single quotes
ZeeshanTamboli Jul 20, 2021
6242432
escape pipe in markdown
ZeeshanTamboli Jul 20, 2021
78502dd
merge master branch and resolve conflicts
ZeeshanTamboli Jul 22, 2021
63432bd
update prop arguments of onSelectionModelChange API in docs
ZeeshanTamboli Jul 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions docs/pages/api-docs/data-grid/data-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,15 @@ import { DataGrid } from '@material-ui/data-grid';
| <span class="prop-name">components</span> | <span class="prop-type">GridSlotsComponent</span> | | Overrideable components. |
| <span class="prop-name">componentsProps</span> | <span class="prop-type">GridSlotsComponentsProps</span> | | Overrideable components props dynamically passed to the component at rendering. |
| <span class="prop-name">density</span> | <span class="prop-type">Density</span> | standard | Sets the density of the grid. |
| <span class="prop-name">disableColumnFilter</span> | <span class="prop-type">boolean</span> | false | If `true`, column filters are disabled. |
| <span class="prop-name">disableColumnMenu</span> | <span class="prop-type">boolean</span> | false | If `true`, the column menu is disabled. |
| <span class="prop-name">disableColumnSelector</span> | <span class="prop-type">boolean</span> | false | If `true`, the column selector is disabled. |
| <span class="prop-name">disableDensitySelector</span> | <span class="prop-type">boolean</span> | false | If `true`, the density selector is disabled. |
| <span class="prop-name">disableExtendRowFullWidth</span> | <span class="prop-type">boolean</span> | false | If `true`, rows will not be extended to fill the full width of the grid container. |
| <span class="prop-name">disableSelectionOnClick</span> | <span class="prop-type">boolean</span> | false | If `true`, the selection on click on a row or cell is disabled. |
| <span class="prop-name">error</span> | <span class="prop-type">any</span> | | An error that will turn the grid into its error state and display the error component. |
| <span class="prop-name">editRowsModel</span> | <span class="prop-type">GridEditRowsModel</span> | undefined | Set the edit rows model of the grid. |
| <span class="prop-name">filterMode</span> | <span class="prop-type">GridFeatureMode</span> | 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. |
ZeeshanTamboli marked this conversation as resolved.
Show resolved Hide resolved
| <span class="prop-name">filterModel</span> | <span class="prop-type">GridFilterModel</span> | | Set the filter model of the grid. |
| <span class="prop-name">getCellClassName</span> | <span class="prop-type">(params: GridCellParams) => string</span> | | Function that applies CSS classes dynamically on cells. |
| <span class="prop-name">getRowClassName</span> | <span class="prop-type">(params: GridRowParams) => string</span> | | Function that applies CSS classes dynamically on rows. |
Expand All @@ -44,15 +46,18 @@ import { DataGrid } from '@material-ui/data-grid';
| <span class="prop-name">hideFooterRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the row count in the footer is hidden. |
| <span class="prop-name">hideFooterSelectedRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the selected row count in the footer is hidden. |
| <span class="prop-name">icons</span> | <span class="prop-type">IconsOptions</span> | | Set of icons used in the grid. |
| <span class="prop-name">isCellEditable</span> | <span class="prop-type">(params: GridCellParams) => boolean</span> | | Callback fired when a cell is rendered, returns true if the cell is editable. |
| <span class="prop-name">isCellEditable</span> | <span class="prop-type">(params: GridCellParams) => boolean</span> | | Callback fired when a cell is rendered, returns `true` if the cell is editable. |
| <span class="prop-name">isRowSelectable</span> | <span class="prop-type">(params: GridRowParams) => boolean</span> | | Determines if a row can be selected. |
| <span class="prop-name">loading</span> | <span class="prop-type">boolean</span> | false | If `true`, a loading overlay is displayed. |
| <span class="prop-name">localeText</span> | <span class="prop-type">GridLocaleText</span> | | 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. |
| <span class="prop-name">logger</span> | <span class="prop-type">Logger</span> | null | Pass a custom logger in the components that implements the 'Logger' interface. |
| <span class="prop-name">logLevel</span> | <span class="prop-type">string | false</span> | false | Allows to pass the logging level or false to turn off logging. |
| <span class="prop-name">logLevel</span> | <span class="prop-type">string or boolean false</span> | false | Allows to pass the logging level or false to turn off logging. |
ZeeshanTamboli marked this conversation as resolved.
Show resolved Hide resolved
| <span class="prop-name">nonce</span> | <span class="prop-type">string</span> | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). |
| <span class="prop-name">onCellBlur</span> | <span class="prop-type">(params: GridCellParams, event: React.FocusEvent) => void</span> | | Callback fired when the active element leaves a cell. |
| <span class="prop-name">onCellClick</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a click event comes from a cell element. |
| <span class="prop-name">onCellDoubleClick</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a double click event comes from a cell element. |
| <span class="prop-name">onCellFocusOut</span> | <span class="prop-type">(params: GridCellParams, event?: MuiEvent<MouseEvent>) => void</span> | | Callback fired when a cell loses focus. |
| <span class="prop-name">onCellKeyDown</span> | <span class="prop-type">(params: GridCellParams, event: React.KeyboardEvent) => void</span> | | Callback fired when a keydown event comes from a cell element. |
| <span class="prop-name">onCellOver</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse over event comes from a cell element. |
| <span class="prop-name">onCellOut</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse out comes from a cell element. |
| <span class="prop-name">onCellEnter</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a cell element. |
Expand Down Expand Up @@ -84,6 +89,7 @@ import { DataGrid } from '@material-ui/data-grid';
| <span class="prop-name">onRowLeave</span> | <span class="prop-type">(param: GridRowParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse leave event comes from a row container element. |
| <span class="prop-name">onSelectionModelChange</span> | <span class="prop-type">(param: GridSelectionModelChangeParams) => void</span> | | Callback fired when the selection state of one or multiple rows changes. |
| <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(param: GridSortModelParams) => void</span> | | Callback fired when the sort model changes before a column is sorted. |
| <span class="prop-name">onStateChange</span> | <span class="prop-type">(params: any) => void</span> | | Callback fired when the state of the grid is updated. |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Private API

Copy link
Member

@m4theushw m4theushw Jul 19, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's private we should consider removing this prop. It's not used internally.

Copy link
Member Author

@ZeeshanTamboli ZeeshanTamboli Jul 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see it being used here https://github.com/mui-org/material-ui-x/blob/e6bed6b36d362810e49af90e4c6271d3c41ba93c/packages/grid/_modules_/grid/hooks/features/core/useGridApi.ts#L38
Am I incorrect?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was talking about the prop. We don't use it internally. XGrid's users could still get state updates by subscribing to GRID_STATE_CHANGE.

Copy link
Member

@oliviertassinari oliviertassinari Jul 20, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@m4theushw We have mentioned it in some of the issues. I think that we should consider it experimental at this point (not documented). It's unclear what problem it solves.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So based on this conversation there are 2 things:

  1. Remove the doc and the prop both.
  2. Only remove the doc.

What do we do?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In any case, I removed this API from docs.

| <span class="prop-name">page</span> | <span class="prop-type">number</span> | 1 | Set the current page. |
| <span class="prop-name">pageSize</span> | <span class="prop-type">number</span> | 100 | Set the number of rows in one page. |
| <span class="prop-name">paginationMode</span> | <span class="prop-type">GridFeatureMode</span> | '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. |
Expand Down
12 changes: 10 additions & 2 deletions docs/pages/api-docs/data-grid/x-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,20 @@ import { XGrid } from '@material-ui/x-grid';
| <span class="prop-name">components</span> | <span class="prop-type">GridSlotsComponent</span> | | Overrideable components slots. |
| <span class="prop-name">componentsProps</span> | <span class="prop-type">GridSlotsComponentsProps</span> | | Overrideable components props dynamically passed to the component at rendering. |
| <span class="prop-name">density</span> | <span class="prop-type">Density</span> | standard | Sets the density of the grid. |
| <span class="prop-name">disableColumnFilter</span> | <span class="prop-type">boolean</span> | false | If `true`, column filters are disabled. |
| <span class="prop-name">disableColumnMenu</span> | <span class="prop-type">boolean</span> | false | If `true`, the column menu is disabled. |
| <span class="prop-name">disableColumnReorder</span> | <span class="prop-type">boolean</span> | false | If `true`, reordering columns is disabled. |
| <span class="prop-name">disableColumnSelector</span> | <span class="prop-type">boolean</span> | false | If `true`, the column selector is disabled. |
| <span class="prop-name">disableColumnResize</span> | <span class="prop-type">boolean</span> | false | If `true`, resizing columns is disabled. |
| <span class="prop-name">disableDensitySelector</span> | <span class="prop-type">boolean</span> | false | If `true`, the density selector is disabled. |
| <span class="prop-name">disableExtendRowFullWidth</span> | <span class="prop-type">boolean</span> | false | If `true`, rows will not be extended to fill the full width of the grid container. |
| <span class="prop-name">disableMultipleColumnsFiltering</span> | <span class="prop-type">boolean</span> | false | If `true`, filtering with multiple columns is disabled. |
| <span class="prop-name">disableMultipleColumnsSorting</span> | <span class="prop-type">boolean</span> | false | If `true`, sorting with multiple columns is disabled. |
| <span class="prop-name">disableMultipleSelection</span> | <span class="prop-type">boolean</span> | false | If `true`, multiple selection using the CTRL or CMD key is disabled. |
| <span class="prop-name">disableSelectionOnClick</span> | <span class="prop-type">boolean</span> | false | If `true`, the selection on click on a row or cell is disabled. |
| <span class="prop-name">error</span> | <span class="prop-type">any</span> | | An error that will turn the grid into its error state and display the error component. |
| <span class="prop-name">editRowsModel</span> | <span class="prop-type">GridEditRowsModel</span> | undefined | Set the edit rows model of the grid. |
| <span class="prop-name">filterMode</span> | <span class="prop-type">GridFeatureMode</span> | 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. |
| <span class="prop-name">filterModel</span> | <span class="prop-type">GridFilterModel</span> | | Set the filter model of the grid. |
| <span class="prop-name">getCellClassName</span> | <span class="prop-type">(params: GridCellParams) => string</span> | | Function that applies CSS classes dynamically on cells. |
| <span class="prop-name">getRowClassName</span> | <span class="prop-type">(params: GridRowParams) => string</span> | | Function that applies CSS classes dynamically on rows. |
Expand All @@ -49,15 +53,18 @@ import { XGrid } from '@material-ui/x-grid';
| <span class="prop-name">hideFooterRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the row count in the footer is hidden. |
| <span class="prop-name">hideFooterSelectedRowCount</span> | <span class="prop-type">boolean</span> | false | If `true`, the selected row count in the footer is hidden. |
| <span class="prop-name">icons</span> | <span class="prop-type">IconsOptions</span> | | Set of icons used in the grid. |
| <span class="prop-name">isCellEditable</span> | <span class="prop-type">(params: GridCellParams) => boolean</span> | | Callback fired when a cell is rendered, returns true if the cell is editable. |
| <span class="prop-name">isCellEditable</span> | <span class="prop-type">(params: GridCellParams) => boolean</span> | | Callback fired when a cell is rendered, returns `true` if the cell is editable. |
| <span class="prop-name">isRowSelectable</span> | <span class="prop-type">(params: GridRowParams) => boolean</span> | | Determines if a row can be selected. |
| <span class="prop-name">loading</span> | <span class="prop-type">boolean</span> | false | If `true`, a loading overlay is displayed.. |
| <span class="prop-name">localeText</span> | <span class="prop-type">GridLocaleText</span> | | 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. |
| <span class="prop-name">logger</span> | <span class="prop-type">Logger</span> | null | Pass a custom logger in the components that implements the 'Logger' interface. |
| <span class="prop-name">logLevel</span> | <span class="prop-type">string | false</span> | false | Allows to pass the logging level or false to turn off logging. |
| <span class="prop-name">logLevel</span> | <span class="prop-type">string or boolean false</span> | false | Allows to pass the logging level or false to turn off logging. |
| <span class="prop-name">nonce</span> | <span class="prop-type">string</span> | | Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). |
| <span class="prop-name">onCellBlur</span> | <span class="prop-type">(params: GridCellParams, event: React.FocusEvent) => void</span> | | Callback fired when the active element leaves a cell. |
| <span class="prop-name">onCellClick</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a click event comes from a cell element. |
| <span class="prop-name">onCellDoubleClick</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a double click event comes from a cell element. |
| <span class="prop-name">onCellFocusOut</span> | <span class="prop-type">(params: GridCellParams, event?: MuiEvent<MouseEvent>) => void</span> | | Callback fired when a cell loses focus. |
| <span class="prop-name">onCellKeyDown</span> | <span class="prop-type">(params: GridCellParams, event: React.KeyboardEvent) => void</span> | | Callback fired when a keydown event comes from a cell element. |
| <span class="prop-name">onCellOver</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse over event comes from a cell element. |
| <span class="prop-name">onCellOut</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse out comes from a cell element. |
| <span class="prop-name">onCellEnter</span> | <span class="prop-type">(params: GridCellParams, event: React.MouseEvent) => void</span> | | Callback fired when a mouse enter event comes from a cell element. |
Expand Down Expand Up @@ -90,6 +97,7 @@ import { XGrid } from '@material-ui/x-grid';
| <span class="prop-name">onRowsScrollEnd</span> | <span class="prop-type">(param: GridRowScrollEndParams) => void</span> | | Callback fired when scrolling to the bottom of the grid viewport. |
| <span class="prop-name">onSelectionModelChange</span> | <span class="prop-type">(param: GridSelectionModelChangeParams) => void</span> | | Callback fired when the selection state of one or multiple rows changes. |
| <span class="prop-name">onSortModelChange</span> | <span class="prop-type">(param: GridSortModelParams) => void</span> | | Callback fired when the sort model changes before a column is sorted. |
| <span class="prop-name">onStateChange</span> | <span class="prop-type">(params: any) => void</span> | | Callback fired when the state of the grid is updated. |
ZeeshanTamboli marked this conversation as resolved.
Show resolved Hide resolved
| <span class="prop-name">page</span> | <span class="prop-type">number</span> | 1 | Set the current page. |
| <span class="prop-name">pageSize</span> | <span class="prop-type">number</span> | 100 | Set the number of rows in one page. |
| <span class="prop-name">pagination</span> | <span class="prop-type">boolean</span> | false | If `true`, pagination is enabled. |
Expand Down
2 changes: 1 addition & 1 deletion packages/grid/_modules_/grid/models/gridOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still seem relevant, why remove it?

Copy link
Member Author

@ZeeshanTamboli ZeeshanTamboli Jul 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default is client, so I added @default. I removed it from here as I thought we need not explicitly set it to client because it is default.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the core, these comments are used in boolean props. There, the default value goes to @default and the comment only mentions what the non-default value does.

image

I don't have any preference here, as long as we keep consistency: remove from all other feature mode props or keep this line.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case, we can move slower: only add the default mention, it's already an improvement.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I already have added the @default tag.

* Set it to 'server' if you would like to handle filtering on the server-side.
* @default "client"
*/
filterMode?: GridFeatureMode;
/**
Expand Down