diff --git a/docs/pages/x/api/data-grid/data-grid-premium.js b/docs/pages/x/api/data-grid/data-grid-premium.js index f46f04bcfb444..21c8633b6132e 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.js +++ b/docs/pages/x/api/data-grid/data-grid-premium.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './data-grid-premium.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 2495f2b956eac..f9b71100e1c78 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -606,6 +606,446 @@ "import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';", "import { DataGridPremium } from '@mui/x-data-grid-premium';" ], + "slots": [ + { + "name": "headerFilterCell", + "description": "Component responsible for showing menu adornment in Header filter row", + "default": "GridHeaderFilterCell", + "class": null + }, + { + "name": "headerFilterMenu", + "description": "Component responsible for showing menu in Header filter row", + "default": "GridHeaderFilterMenu", + "class": null + }, + { + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip", + "class": null + }, + { + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell", + "class": "MuiDataGridPremium-cell" + }, + { + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell", + "class": null + }, + { + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton", + "class": null + }, + { + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.", + "default": "GridColumnMenu", + "class": null + }, + { + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders", + "class": "MuiDataGridPremium-columnHeaders" + }, + { + "name": "detailPanels", + "description": "Component responsible for rendering the detail panels.", + "default": "GridDetailPanels", + "class": "MuiDataGridPremium-detailPanels" + }, + { + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter", + "class": null + }, + { + "name": "footerRowCount", + "description": "Row count component rendered in the footer", + "default": "GridRowCount", + "class": null + }, + { + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null", + "class": null + }, + { + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay", + "class": null + }, + { + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay", + "class": null + }, + { + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay", + "class": null + }, + { + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination", + "class": null + }, + { + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel", + "class": null + }, + { + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel", + "class": null + }, + { + "name": "columnsManagement", + "description": "Component used inside Grid Columns panel to manage columns.", + "default": "GridColumnsManagement", + "class": "MuiDataGridPremium-columnsManagement" + }, + { + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel", + "class": "MuiDataGridPremium-panel" + }, + { + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow", + "class": "MuiDataGridPremium-row" + }, + { + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox", + "class": null + }, + { + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment", + "class": null + }, + { + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField", + "class": null + }, + { + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl", + "class": null + }, + { + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select", + "class": null + }, + { + "name": "baseSwitch", + "description": "The custom Switch component used in the grid.", + "default": "Switch", + "class": null + }, + { + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button", + "class": null + }, + { + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton", + "class": null + }, + { + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip", + "class": null + }, + { + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper", + "class": null + }, + { + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel", + "class": null + }, + { + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem", + "class": null + }, + { + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon", + "class": null + }, + { + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon", + "class": null + }, + { + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon", + "class": null + }, + { + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon", + "class": null + }, + { + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon", + "class": null + }, + { + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon", + "class": null + }, + { + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon", + "class": null + }, + { + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon", + "class": null + }, + { + "name": "densityComfortableIcon", + "description": "Icon displayed on the \"comfortable\" density option in the toolbar.", + "default": "GridViewStreamIcon", + "class": null + }, + { + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon", + "class": null + }, + { + "name": "moreActionsIcon", + "description": "Icon displayed on the `actions` column type to open the menu.", + "default": "GridMoreVertIcon", + "class": null + }, + { + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon", + "class": null + }, + { + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon", + "class": null + }, + { + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon", + "class": null + }, + { + "name": "rowReorderIcon", + "description": "Icon displayed on the `reorder` column type to reorder a row.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon", + "class": null + }, + { + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon", + "class": null + }, + { + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon", + "class": null + }, + { + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon", + "class": null + }, + { + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon", + "class": null + }, + { + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "columnMenuPinLeftIcon", + "description": "Icon displayed in column menu for left pinning", + "default": "GridPushPinLeftIcon", + "class": null + }, + { + "name": "columnMenuPinRightIcon", + "description": "Icon displayed in column menu for right pinning", + "default": "GridPushPinRightIcon", + "class": null + }, + { + "name": "columnMenuUngroupIcon", + "description": "Icon displayed in column menu for ungrouping", + "default": "GridWorkspacesIcon", + "class": null + }, + { + "name": "columnMenuGroupIcon", + "description": "Icon displayed in column menu for grouping", + "default": "GridGroupWorkIcon", + "class": null + }, + { + "name": "columnMenuAggregationIcon", + "description": "Icon displayed in column menu for aggregation", + "default": "GridFunctionsIcon", + "class": null + } + ], "classes": [ { "key": "actionsCell", @@ -661,12 +1101,6 @@ "description": "Styles applied to the icon of the boolean cell.", "isGlobal": false }, - { - "key": "cell", - "className": "MuiDataGridPremium-cell", - "description": "Styles applied to the cell element.", - "isGlobal": false - }, { "key": "cell--editable", "className": "MuiDataGridPremium-cell--editable", @@ -895,12 +1329,6 @@ "description": "Styles applied to the column headers wrapper if a column is being dragged.", "isGlobal": false }, - { - "key": "columnHeaders", - "className": "MuiDataGridPremium-columnHeaders", - "description": "Styles applied to the column headers.", - "isGlobal": false - }, { "key": "columnHeadersInner", "className": "MuiDataGridPremium-columnHeadersInner", @@ -961,12 +1389,6 @@ "description": "Styles applied to the column header separator if the side is \"right\".", "isGlobal": false }, - { - "key": "columnsManagement", - "className": "MuiDataGridPremium-columnsManagement", - "description": "Styles applied to the columns management body.", - "isGlobal": false - }, { "key": "columnsManagementFooter", "className": "MuiDataGridPremium-columnsManagementFooter", @@ -1003,12 +1425,6 @@ "description": "Styles applied to the detail panel element.", "isGlobal": false }, - { - "key": "detailPanels", - "className": "MuiDataGridPremium-detailPanels", - "description": "Styles applied to the detail panels wrapper element.", - "isGlobal": false - }, { "key": "detailPanelToggleCell", "className": "MuiDataGridPremium-detailPanelToggleCell", @@ -1195,12 +1611,6 @@ "description": "Styles applied to the overlay wrapper inner element.", "isGlobal": false }, - { - "key": "panel", - "className": "MuiDataGridPremium-panel", - "description": "Styles applied to the panel element.", - "isGlobal": false - }, { "key": "panelContent", "className": "MuiDataGridPremium-panelContent", @@ -1309,12 +1719,6 @@ "description": "Styles applied to the root element when user selection is disabled.", "isGlobal": false }, - { - "key": "row", - "className": "MuiDataGridPremium-row", - "description": "Styles applied to the row element.", - "isGlobal": false - }, { "key": "row--detailPanelExpanded", "className": "MuiDataGridPremium-row--detailPanelExpanded", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.js b/docs/pages/x/api/data-grid/data-grid-pro.js index 6a38d78eb2ee1..ca9a6f94ad7a5 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.js +++ b/docs/pages/x/api/data-grid/data-grid-pro.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './data-grid-pro.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index cb6929e29954a..d3e6c4e37e686 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -545,6 +545,428 @@ "import { DataGridPro } from '@mui/x-data-grid-pro';", "import { DataGridPro } from '@mui/x-data-grid-premium';" ], + "slots": [ + { + "name": "headerFilterCell", + "description": "Component responsible for showing menu adornment in Header filter row", + "default": "GridHeaderFilterCell", + "class": null + }, + { + "name": "headerFilterMenu", + "description": "Component responsible for showing menu in Header filter row", + "default": "GridHeaderFilterMenu", + "class": null + }, + { + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip", + "class": null + }, + { + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell", + "class": "MuiDataGridPro-cell" + }, + { + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell", + "class": null + }, + { + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton", + "class": null + }, + { + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.", + "default": "GridColumnMenu", + "class": null + }, + { + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders", + "class": "MuiDataGridPro-columnHeaders" + }, + { + "name": "detailPanels", + "description": "Component responsible for rendering the detail panels.", + "default": "GridDetailPanels", + "class": "MuiDataGridPro-detailPanels" + }, + { + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter", + "class": null + }, + { + "name": "footerRowCount", + "description": "Row count component rendered in the footer", + "default": "GridRowCount", + "class": null + }, + { + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null", + "class": null + }, + { + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay", + "class": null + }, + { + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay", + "class": null + }, + { + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay", + "class": null + }, + { + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination", + "class": null + }, + { + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel", + "class": null + }, + { + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel", + "class": null + }, + { + "name": "columnsManagement", + "description": "Component used inside Grid Columns panel to manage columns.", + "default": "GridColumnsManagement", + "class": "MuiDataGridPro-columnsManagement" + }, + { + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel", + "class": "MuiDataGridPro-panel" + }, + { + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow", + "class": "MuiDataGridPro-row" + }, + { + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox", + "class": null + }, + { + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment", + "class": null + }, + { + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField", + "class": null + }, + { + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl", + "class": null + }, + { + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select", + "class": null + }, + { + "name": "baseSwitch", + "description": "The custom Switch component used in the grid.", + "default": "Switch", + "class": null + }, + { + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button", + "class": null + }, + { + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton", + "class": null + }, + { + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip", + "class": null + }, + { + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper", + "class": null + }, + { + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel", + "class": null + }, + { + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem", + "class": null + }, + { + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon", + "class": null + }, + { + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon", + "class": null + }, + { + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon", + "class": null + }, + { + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon", + "class": null + }, + { + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon", + "class": null + }, + { + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon", + "class": null + }, + { + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon", + "class": null + }, + { + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon", + "class": null + }, + { + "name": "densityComfortableIcon", + "description": "Icon displayed on the \"comfortable\" density option in the toolbar.", + "default": "GridViewStreamIcon", + "class": null + }, + { + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon", + "class": null + }, + { + "name": "moreActionsIcon", + "description": "Icon displayed on the `actions` column type to open the menu.", + "default": "GridMoreVertIcon", + "class": null + }, + { + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon", + "class": null + }, + { + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon", + "class": null + }, + { + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon", + "class": null + }, + { + "name": "rowReorderIcon", + "description": "Icon displayed on the `reorder` column type to reorder a row.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon", + "class": null + }, + { + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon", + "class": null + }, + { + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon", + "class": null + }, + { + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon", + "class": null + }, + { + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon", + "class": null + }, + { + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "columnMenuPinLeftIcon", + "description": "Icon displayed in column menu for left pinning", + "default": "GridPushPinLeftIcon", + "class": null + }, + { + "name": "columnMenuPinRightIcon", + "description": "Icon displayed in column menu for right pinning", + "default": "GridPushPinRightIcon", + "class": null + } + ], "classes": [ { "key": "actionsCell", @@ -600,12 +1022,6 @@ "description": "Styles applied to the icon of the boolean cell.", "isGlobal": false }, - { - "key": "cell", - "className": "MuiDataGridPro-cell", - "description": "Styles applied to the cell element.", - "isGlobal": false - }, { "key": "cell--editable", "className": "MuiDataGridPro-cell--editable", @@ -834,12 +1250,6 @@ "description": "Styles applied to the column headers wrapper if a column is being dragged.", "isGlobal": false }, - { - "key": "columnHeaders", - "className": "MuiDataGridPro-columnHeaders", - "description": "Styles applied to the column headers.", - "isGlobal": false - }, { "key": "columnHeadersInner", "className": "MuiDataGridPro-columnHeadersInner", @@ -900,12 +1310,6 @@ "description": "Styles applied to the column header separator if the side is \"right\".", "isGlobal": false }, - { - "key": "columnsManagement", - "className": "MuiDataGridPro-columnsManagement", - "description": "Styles applied to the columns management body.", - "isGlobal": false - }, { "key": "columnsManagementFooter", "className": "MuiDataGridPro-columnsManagementFooter", @@ -942,12 +1346,6 @@ "description": "Styles applied to the detail panel element.", "isGlobal": false }, - { - "key": "detailPanels", - "className": "MuiDataGridPro-detailPanels", - "description": "Styles applied to the detail panels wrapper element.", - "isGlobal": false - }, { "key": "detailPanelToggleCell", "className": "MuiDataGridPro-detailPanelToggleCell", @@ -1134,12 +1532,6 @@ "description": "Styles applied to the overlay wrapper inner element.", "isGlobal": false }, - { - "key": "panel", - "className": "MuiDataGridPro-panel", - "description": "Styles applied to the panel element.", - "isGlobal": false - }, { "key": "panelContent", "className": "MuiDataGridPro-panelContent", @@ -1248,12 +1640,6 @@ "description": "Styles applied to the root element when user selection is disabled.", "isGlobal": false }, - { - "key": "row", - "className": "MuiDataGridPro-row", - "description": "Styles applied to the row element.", - "isGlobal": false - }, { "key": "row--detailPanelExpanded", "className": "MuiDataGridPro-row--detailPanelExpanded", diff --git a/docs/pages/x/api/data-grid/data-grid.js b/docs/pages/x/api/data-grid/data-grid.js index 87962cb94d641..c68d5ab94bbb1 100644 --- a/docs/pages/x/api/data-grid/data-grid.js +++ b/docs/pages/x/api/data-grid/data-grid.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './data-grid.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index bda17ab90d9af..2f53508705117 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -430,6 +430,404 @@ "import { DataGrid } from '@mui/x-data-grid-pro';", "import { DataGrid } from '@mui/x-data-grid-premium';" ], + "slots": [ + { + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip", + "class": null + }, + { + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell", + "class": "MuiDataGrid-cell" + }, + { + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell", + "class": null + }, + { + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton", + "class": null + }, + { + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots \"kebab\" icon in column headers.", + "default": "GridColumnMenu", + "class": null + }, + { + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders", + "class": "MuiDataGrid-columnHeaders" + }, + { + "name": "detailPanels", + "description": "Component responsible for rendering the detail panels.", + "default": "GridDetailPanels", + "class": "MuiDataGrid-detailPanels" + }, + { + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter", + "class": null + }, + { + "name": "footerRowCount", + "description": "Row count component rendered in the footer", + "default": "GridRowCount", + "class": null + }, + { + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null", + "class": null + }, + { + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay", + "class": null + }, + { + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay", + "class": null + }, + { + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay", + "class": null + }, + { + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination", + "class": null + }, + { + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel", + "class": null + }, + { + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel", + "class": null + }, + { + "name": "columnsManagement", + "description": "Component used inside Grid Columns panel to manage columns.", + "default": "GridColumnsManagement", + "class": "MuiDataGrid-columnsManagement" + }, + { + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel", + "class": "MuiDataGrid-panel" + }, + { + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow", + "class": "MuiDataGrid-row" + }, + { + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox", + "class": null + }, + { + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment", + "class": null + }, + { + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField", + "class": null + }, + { + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl", + "class": null + }, + { + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select", + "class": null + }, + { + "name": "baseSwitch", + "description": "The custom Switch component used in the grid.", + "default": "Switch", + "class": null + }, + { + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button", + "class": null + }, + { + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton", + "class": null + }, + { + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip", + "class": null + }, + { + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper", + "class": null + }, + { + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel", + "class": null + }, + { + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem", + "class": null + }, + { + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon", + "class": null + }, + { + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon", + "class": null + }, + { + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon", + "class": null + }, + { + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon", + "class": null + }, + { + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon", + "class": null + }, + { + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon", + "class": null + }, + { + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon", + "class": null + }, + { + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon", + "class": null + }, + { + "name": "densityComfortableIcon", + "description": "Icon displayed on the \"comfortable\" density option in the toolbar.", + "default": "GridViewStreamIcon", + "class": null + }, + { + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon", + "class": null + }, + { + "name": "moreActionsIcon", + "description": "Icon displayed on the `actions` column type to open the menu.", + "default": "GridMoreVertIcon", + "class": null + }, + { + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight", + "class": null + }, + { + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon", + "class": null + }, + { + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon", + "class": null + }, + { + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon", + "class": null + }, + { + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon", + "class": null + }, + { + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon", + "class": null + }, + { + "name": "rowReorderIcon", + "description": "Icon displayed on the `reorder` column type to reorder a row.", + "default": "GridDragIcon", + "class": null + }, + { + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon", + "class": null + }, + { + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon", + "class": null + }, + { + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon", + "class": null + }, + { + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon", + "class": null + }, + { + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon", + "class": null + }, + { + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon", + "class": null + }, + { + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon", + "class": null + }, + { + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon", + "class": null + }, + { + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon", + "class": null + }, + { + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon", + "class": null + } + ], "classes": [ { "key": "actionsCell", @@ -485,12 +883,6 @@ "description": "Styles applied to the icon of the boolean cell.", "isGlobal": false }, - { - "key": "cell", - "className": "MuiDataGrid-cell", - "description": "Styles applied to the cell element.", - "isGlobal": false - }, { "key": "cell--editable", "className": "MuiDataGrid-cell--editable", @@ -719,12 +1111,6 @@ "description": "Styles applied to the column headers wrapper if a column is being dragged.", "isGlobal": false }, - { - "key": "columnHeaders", - "className": "MuiDataGrid-columnHeaders", - "description": "Styles applied to the column headers.", - "isGlobal": false - }, { "key": "columnHeadersInner", "className": "MuiDataGrid-columnHeadersInner", @@ -785,12 +1171,6 @@ "description": "Styles applied to the column header separator if the side is \"right\".", "isGlobal": false }, - { - "key": "columnsManagement", - "className": "MuiDataGrid-columnsManagement", - "description": "Styles applied to the columns management body.", - "isGlobal": false - }, { "key": "columnsManagementFooter", "className": "MuiDataGrid-columnsManagementFooter", @@ -827,12 +1207,6 @@ "description": "Styles applied to the detail panel element.", "isGlobal": false }, - { - "key": "detailPanels", - "className": "MuiDataGrid-detailPanels", - "description": "Styles applied to the detail panels wrapper element.", - "isGlobal": false - }, { "key": "detailPanelToggleCell", "className": "MuiDataGrid-detailPanelToggleCell", @@ -1019,12 +1393,6 @@ "description": "Styles applied to the overlay wrapper inner element.", "isGlobal": false }, - { - "key": "panel", - "className": "MuiDataGrid-panel", - "description": "Styles applied to the panel element.", - "isGlobal": false - }, { "key": "panelContent", "className": "MuiDataGrid-panelContent", @@ -1133,12 +1501,6 @@ "description": "Styles applied to the root element when user selection is disabled.", "isGlobal": false }, - { - "key": "row", - "className": "MuiDataGrid-row", - "description": "Styles applied to the row element.", - "isGlobal": false - }, { "key": "row--detailPanelExpanded", "className": "MuiDataGrid-row--detailPanelExpanded", diff --git a/docs/pages/x/api/data-grid/grid-filter-form.js b/docs/pages/x/api/data-grid/grid-filter-form.js index 1d2c854371aca..32132e6fc5208 100644 --- a/docs/pages/x/api/data-grid/grid-filter-form.js +++ b/docs/pages/x/api/data-grid/grid-filter-form.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './grid-filter-form.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { diff --git a/docs/pages/x/api/data-grid/grid-filter-panel.js b/docs/pages/x/api/data-grid/grid-filter-panel.js index 433dcb578f953..67a6a124d4e39 100644 --- a/docs/pages/x/api/data-grid/grid-filter-panel.js +++ b/docs/pages/x/api/data-grid/grid-filter-panel.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './grid-filter-panel.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js index 14bb1387a7628..12ffb257502d1 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.js @@ -1,11 +1,12 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; import jsonPageContent from './grid-toolbar-quick-filter.json'; export default function Page(props) { const { descriptions, pageContent } = props; - return ; + return ; } Page.getInitialProps = () => { diff --git a/docs/src/modules/utils/dataGridLayoutConfig.tsx b/docs/src/modules/utils/dataGridLayoutConfig.tsx new file mode 100644 index 0000000000000..2c0e535c4287c --- /dev/null +++ b/docs/src/modules/utils/dataGridLayoutConfig.tsx @@ -0,0 +1,8 @@ +const defaultLayout = 'expanded'; +const layoutStorageKey = { + slots: 'dataGrid_apiPage_slots', + props: 'dataGrid_apiPage_props', + classes: 'dataGrid_apiPage_classes', +} as const; + +export default { defaultLayout, layoutStorageKey }; diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 29f089b94a47a..bab3316bffb2c 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -672,7 +672,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" }, - "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cell--editable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -847,10 +846,6 @@ "nodeName": "the column headers wrapper", "conditions": "a column is being dragged" }, - "columnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers" - }, "columnHeadersInner": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the column headers's inner element" @@ -895,10 +890,6 @@ "nodeName": "the column header separator", "conditions": "the side is "right"" }, - "columnsManagement": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the columns management body" - }, "columnsManagementFooter": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the columns management footer element" @@ -923,10 +914,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel element" }, - "detailPanels": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the detail panels wrapper element" - }, "detailPanelToggleCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel toggle cell element" @@ -1046,7 +1033,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the overlay wrapper inner element" }, - "panel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel element" }, "panelContent": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel content element" @@ -1117,7 +1103,6 @@ "nodeName": "the root element", "conditions": "user selection is disabled" }, - "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" }, "row--detailPanelExpanded": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the row", @@ -1239,5 +1224,80 @@ "withVerticalBorder": { "description": "Styles applied the grid if showColumnVerticalBorder={true}." } + }, + "slotDescriptions": { + "baseButton": "The custom Button component used in the grid.", + "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "baseChip": "The custom Chip component used in the grid.", + "baseFormControl": "The custom FormControl component used in the grid.", + "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputAdornment": "The custom InputAdornment component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", + "basePopper": "The custom Popper component used in the grid.", + "baseSelect": "The custom Select component used in the grid.", + "baseSelectOption": "The custom SelectOption component used in the grid.", + "baseSwitch": "The custom Switch component used in the grid.", + "baseTextField": "The custom TextField component used in the grid.", + "baseTooltip": "The custom Tooltip component used in the grid.", + "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "booleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "cell": "Component rendered for each cell.", + "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", + "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "columnMenuAggregationIcon": "Icon displayed in column menu for aggregation", + "columnMenuClearIcon": "Icon displayed in column menu for clearing values", + "columnMenuFilterIcon": "Icon displayed in column menu for filter", + "columnMenuGroupIcon": "Icon displayed in column menu for grouping", + "columnMenuHideIcon": "Icon displayed in column menu for hiding column", + "columnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "columnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "columnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnMenuUngroupIcon": "Icon displayed in column menu for ungrouping", + "columnReorderIcon": "Icon displayed on the column reorder button.", + "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "columnSelectorIcon": "Icon displayed on the column menu selector tab.", + "columnsManagement": "Component used inside Grid Columns panel to manage columns.", + "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "columnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "densityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "detailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "detailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "detailPanels": "Component responsible for rendering the detail panels.", + "exportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "filterPanel": "Filter panel component rendered when clicking the filter button.", + "filterPanelAddIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelDeleteIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelRemoveAllIcon": "Icon displayed for deleting all the active filters from filter panel.", + "footer": "Footer component rendered at the bottom of the grid viewport.", + "footerRowCount": "Row count component rendered in the footer", + "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "headerFilterCell": "Component responsible for showing menu adornment in Header filter row", + "headerFilterMenu": "Component responsible for showing menu in Header filter row", + "loadIcon": "Icon displayed on the input while processing.", + "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "pagination": "Pagination component rendered in the grid footer by default.", + "panel": "Panel component wrapping the filters and columns panels.", + "quickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "quickFilterIcon": "Icon displayed on the quick filter input.", + "row": "Component rendered for each row.", + "rowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "skeletonCell": "Component rendered for each skeleton cell.", + "toolbar": "Toolbar component rendered inside the Header component.", + "treeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "treeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed" } } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index 40ad5cf3b8eb7..8597b34ba271c 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -614,7 +614,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" }, - "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cell--editable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -789,10 +788,6 @@ "nodeName": "the column headers wrapper", "conditions": "a column is being dragged" }, - "columnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers" - }, "columnHeadersInner": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the column headers's inner element" @@ -837,10 +832,6 @@ "nodeName": "the column header separator", "conditions": "the side is "right"" }, - "columnsManagement": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the columns management body" - }, "columnsManagementFooter": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the columns management footer element" @@ -865,10 +856,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel element" }, - "detailPanels": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the detail panels wrapper element" - }, "detailPanelToggleCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel toggle cell element" @@ -988,7 +975,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the overlay wrapper inner element" }, - "panel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel element" }, "panelContent": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel content element" @@ -1059,7 +1045,6 @@ "nodeName": "the root element", "conditions": "user selection is disabled" }, - "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" }, "row--detailPanelExpanded": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the row", @@ -1181,5 +1166,77 @@ "withVerticalBorder": { "description": "Styles applied the grid if showColumnVerticalBorder={true}." } + }, + "slotDescriptions": { + "baseButton": "The custom Button component used in the grid.", + "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "baseChip": "The custom Chip component used in the grid.", + "baseFormControl": "The custom FormControl component used in the grid.", + "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputAdornment": "The custom InputAdornment component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", + "basePopper": "The custom Popper component used in the grid.", + "baseSelect": "The custom Select component used in the grid.", + "baseSelectOption": "The custom SelectOption component used in the grid.", + "baseSwitch": "The custom Switch component used in the grid.", + "baseTextField": "The custom TextField component used in the grid.", + "baseTooltip": "The custom Tooltip component used in the grid.", + "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "booleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "cell": "Component rendered for each cell.", + "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", + "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "columnMenuClearIcon": "Icon displayed in column menu for clearing values", + "columnMenuFilterIcon": "Icon displayed in column menu for filter", + "columnMenuHideIcon": "Icon displayed in column menu for hiding column", + "columnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "columnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "columnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnReorderIcon": "Icon displayed on the column reorder button.", + "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "columnSelectorIcon": "Icon displayed on the column menu selector tab.", + "columnsManagement": "Component used inside Grid Columns panel to manage columns.", + "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "columnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "densityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "detailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "detailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "detailPanels": "Component responsible for rendering the detail panels.", + "exportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "filterPanel": "Filter panel component rendered when clicking the filter button.", + "filterPanelAddIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelDeleteIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelRemoveAllIcon": "Icon displayed for deleting all the active filters from filter panel.", + "footer": "Footer component rendered at the bottom of the grid viewport.", + "footerRowCount": "Row count component rendered in the footer", + "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "headerFilterCell": "Component responsible for showing menu adornment in Header filter row", + "headerFilterMenu": "Component responsible for showing menu in Header filter row", + "loadIcon": "Icon displayed on the input while processing.", + "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "pagination": "Pagination component rendered in the grid footer by default.", + "panel": "Panel component wrapping the filters and columns panels.", + "quickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "quickFilterIcon": "Icon displayed on the quick filter input.", + "row": "Component rendered for each row.", + "rowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "skeletonCell": "Component rendered for each skeleton cell.", + "toolbar": "Toolbar component rendered inside the Header component.", + "treeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "treeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed" } } diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 9647209e15389..1bae2ca5a264d 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -480,7 +480,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon of the boolean cell" }, - "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "cell--editable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the cell element", @@ -655,10 +654,6 @@ "nodeName": "the column headers wrapper", "conditions": "a column is being dragged" }, - "columnHeaders": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the column headers" - }, "columnHeadersInner": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the column headers's inner element" @@ -703,10 +698,6 @@ "nodeName": "the column header separator", "conditions": "the side is "right"" }, - "columnsManagement": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the columns management body" - }, "columnsManagementFooter": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the columns management footer element" @@ -731,10 +722,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel element" }, - "detailPanels": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the detail panels wrapper element" - }, "detailPanelToggleCell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the detail panel toggle cell element" @@ -854,7 +841,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the overlay wrapper inner element" }, - "panel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel element" }, "panelContent": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel content element" @@ -925,7 +911,6 @@ "nodeName": "the root element", "conditions": "user selection is disabled" }, - "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" }, "row--detailPanelExpanded": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the row", @@ -1047,5 +1032,73 @@ "withVerticalBorder": { "description": "Styles applied the grid if showColumnVerticalBorder={true}." } + }, + "slotDescriptions": { + "baseButton": "The custom Button component used in the grid.", + "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "baseChip": "The custom Chip component used in the grid.", + "baseFormControl": "The custom FormControl component used in the grid.", + "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputAdornment": "The custom InputAdornment component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", + "basePopper": "The custom Popper component used in the grid.", + "baseSelect": "The custom Select component used in the grid.", + "baseSelectOption": "The custom SelectOption component used in the grid.", + "baseSwitch": "The custom Switch component used in the grid.", + "baseTextField": "The custom TextField component used in the grid.", + "baseTooltip": "The custom Tooltip component used in the grid.", + "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "booleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "cell": "Component rendered for each cell.", + "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", + "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "columnMenuClearIcon": "Icon displayed in column menu for clearing values", + "columnMenuFilterIcon": "Icon displayed in column menu for filter", + "columnMenuHideIcon": "Icon displayed in column menu for hiding column", + "columnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnReorderIcon": "Icon displayed on the column reorder button.", + "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "columnSelectorIcon": "Icon displayed on the column menu selector tab.", + "columnsManagement": "Component used inside Grid Columns panel to manage columns.", + "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "columnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "densityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "detailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "detailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "detailPanels": "Component responsible for rendering the detail panels.", + "exportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "filterPanel": "Filter panel component rendered when clicking the filter button.", + "filterPanelAddIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelDeleteIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelRemoveAllIcon": "Icon displayed for deleting all the active filters from filter panel.", + "footer": "Footer component rendered at the bottom of the grid viewport.", + "footerRowCount": "Row count component rendered in the footer", + "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "loadIcon": "Icon displayed on the input while processing.", + "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "pagination": "Pagination component rendered in the grid footer by default.", + "panel": "Panel component wrapping the filters and columns panels.", + "quickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "quickFilterIcon": "Icon displayed on the quick filter input.", + "row": "Component rendered for each row.", + "rowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "skeletonCell": "Component rendered for each skeleton cell.", + "toolbar": "Toolbar component rendered inside the Header component.", + "treeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "treeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed" } } diff --git a/scripts/buildApiDocs/gridSettings/getComponentInfo.ts b/scripts/buildApiDocs/gridSettings/getComponentInfo.ts index 5dc6883666362..62b495ebaa780 100644 --- a/scripts/buildApiDocs/gridSettings/getComponentInfo.ts +++ b/scripts/buildApiDocs/gridSettings/getComponentInfo.ts @@ -29,12 +29,14 @@ export function getComponentInfo(filename: string): ComponentInfo { !!srcInfo.src.match(/@ignore - internal hook\./); return { ...srcInfo, shouldSkip }; }, + slotInterfaceName: `${name.replace('DataGrid', 'Grid')}SlotsComponent`, getInheritance: () => null, // TODO: Support inheritance getDemos: () => [ { demoPathname: '/x/react-data-grid/#mit-version-free-forever', demoPageTitle: 'DataGrid' }, { demoPathname: '/x/react-data-grid/#pro-plan', demoPageTitle: 'DataGridPro' }, { demoPathname: '/x/react-data-grid/#premium-plan', demoPageTitle: 'DataGridPremium' }, ], + layoutConfigPath: 'docsx/src/modules/utils/dataGridLayoutConfig', }; }