diff --git a/docs/data/data-grid/list-view/ListView.js b/docs/data/data-grid/list-view/ListView.js index a7ab930852afe..38405104013ac 100644 --- a/docs/data/data-grid/list-view/ListView.js +++ b/docs/data/data-grid/list-view/ListView.js @@ -1,17 +1,19 @@ import * as React from 'react'; -import { DataGridPro } from '@mui/x-data-grid-pro'; -import Box from '@mui/material/Box'; +import { DataGridPro, GridToolbarContainer } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; import Stack from '@mui/material/Stack'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; import IconButton from '@mui/material/IconButton'; import MessageIcon from '@mui/icons-material/Message'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import GridIcon from '@mui/icons-material/GridOn'; +import ListIcon from '@mui/icons-material/TableRowsOutlined'; function MessageAction(params) { - const handleMessage = () => { + const handleMessage = (event) => { + event.stopPropagation(); console.log(`send message to ${params.row.phone}`); }; return ( @@ -52,10 +54,50 @@ const listColDef = { const VISIBLE_FIELDS = ['avatar', 'name', 'position']; +function Toolbar({ view, onChangeView }) { + return ( + + { + if (newView) { + onChangeView(newView); + } + }} + > + + Grid + + + List + + + + ); +} + export default function ListView() { - const [isListView, setIsListView] = React.useState(true); + const [view, setView] = React.useState('list'); + const isListView = view === 'list'; - const { data } = useDemoData({ + const { data, loading } = useDemoData({ dataSet: 'Employee', rowLength: 20, visibleFields: VISIBLE_FIELDS, @@ -76,32 +118,25 @@ export default function ListView() { const rowHeight = isListView ? 64 : 52; return ( - - setIsListView(event.target.checked)} - /> - } - label="Enable list view" - /> - + - - - + slotProps={{ + toolbar: { + view, + onChangeView: setView, + }, + }} + sx={{ backgroundColor: 'background.paper' }} + /> + ); } diff --git a/docs/data/data-grid/list-view/ListView.tsx b/docs/data/data-grid/list-view/ListView.tsx index 40239d5a8e41a..def8aa893f4ea 100644 --- a/docs/data/data-grid/list-view/ListView.tsx +++ b/docs/data/data-grid/list-view/ListView.tsx @@ -5,19 +5,29 @@ import { GridListColDef, GridColDef, GridRowParams, + GridToolbarContainer, } from '@mui/x-data-grid-pro'; -import Box from '@mui/material/Box'; import { useDemoData } from '@mui/x-data-grid-generator'; import Stack from '@mui/material/Stack'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; import IconButton from '@mui/material/IconButton'; import MessageIcon from '@mui/icons-material/Message'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import GridIcon from '@mui/icons-material/GridOn'; +import ListIcon from '@mui/icons-material/TableRowsOutlined'; + +declare module '@mui/x-data-grid' { + interface ToolbarPropsOverrides { + view: 'grid' | 'list'; + onChangeView: (view: 'grid' | 'list') => void; + } +} function MessageAction(params: Pick) { - const handleMessage = () => { + const handleMessage = (event: React.MouseEvent) => { + event.stopPropagation(); console.log(`send message to ${params.row.phone}`); }; return ( @@ -58,10 +68,55 @@ const listColDef: GridListColDef = { const VISIBLE_FIELDS = ['avatar', 'name', 'position']; +type ToolbarProps = { + view: 'grid' | 'list'; + onChangeView: (view: 'grid' | 'list') => void; +}; + +function Toolbar({ view, onChangeView }: ToolbarProps) { + return ( + + { + if (newView) { + onChangeView(newView); + } + }} + > + + Grid + + + List + + + + ); +} + export default function ListView() { - const [isListView, setIsListView] = React.useState(true); + const [view, setView] = React.useState<'grid' | 'list'>('list'); + const isListView = view === 'list'; - const { data } = useDemoData({ + const { data, loading } = useDemoData({ dataSet: 'Employee', rowLength: 20, visibleFields: VISIBLE_FIELDS, @@ -82,32 +137,25 @@ export default function ListView() { const rowHeight = isListView ? 64 : 52; return ( - - setIsListView(event.target.checked)} - /> - } - label="Enable list view" - /> - + - - - + slotProps={{ + toolbar: { + view, + onChangeView: setView, + }, + }} + sx={{ backgroundColor: 'background.paper' }} + /> + ); } diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.js b/docs/data/data-grid/list-view/ListViewAdvanced.js index b27633b632708..f00ad6d33874f 100644 --- a/docs/data/data-grid/list-view/ListViewAdvanced.js +++ b/docs/data/data-grid/list-view/ListViewAdvanced.js @@ -13,6 +13,7 @@ import OpenIcon from '@mui/icons-material/Visibility'; import useMediaQuery from '@mui/material/useMediaQuery'; import CSSBaseline from '@mui/material/CssBaseline'; import { randomId } from '@mui/x-data-grid-generator'; +import { useTheme } from '@mui/material/styles'; import { FileIcon } from './components/FileIcon'; import { DetailsDrawer } from './components/DetailsDrawer'; import { ListCell } from './components/ListCell'; @@ -24,12 +25,16 @@ import { formatDate, formatSize, stringAvatar } from './utils'; import { ActionDrawer } from './components/ActionDrawer'; import { RenameDialog } from './components/RenameDialog'; -export default function ListViewAdvanced() { +export default function ListViewAdvanced(props) { // This is used only for the example - renders the drawer inside the container const containerRef = React.useRef(null); const container = () => containerRef.current; - const isListView = useMediaQuery('(min-width: 700px)'); + const theme = useTheme(); + const isBelowMd = useMediaQuery(theme.breakpoints.down('md')); + + const isDocsDemo = props.window !== undefined; + const isListView = isDocsDemo ? true : isBelowMd; const apiRef = useGridApiRef(); diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.tsx b/docs/data/data-grid/list-view/ListViewAdvanced.tsx index c53a525c0a919..8b9359a0a1ade 100644 --- a/docs/data/data-grid/list-view/ListViewAdvanced.tsx +++ b/docs/data/data-grid/list-view/ListViewAdvanced.tsx @@ -17,6 +17,7 @@ import OpenIcon from '@mui/icons-material/Visibility'; import useMediaQuery from '@mui/material/useMediaQuery'; import CSSBaseline from '@mui/material/CssBaseline'; import { randomId } from '@mui/x-data-grid-generator'; +import { useTheme } from '@mui/material/styles'; import { FileIcon } from './components/FileIcon'; import { DetailsDrawer } from './components/DetailsDrawer'; import { ListCell } from './components/ListCell'; @@ -37,12 +38,21 @@ declare module '@mui/x-data-grid' { } } -export default function ListViewAdvanced() { +interface Props { + // Injected by the documentation to work in an iframe. + window?: () => Window; +} + +export default function ListViewAdvanced(props: Props) { // This is used only for the example - renders the drawer inside the container const containerRef = React.useRef(null); const container = () => containerRef.current as HTMLElement; - const isListView = useMediaQuery('(min-width: 700px)'); + const theme = useTheme(); + const isBelowMd = useMediaQuery(theme.breakpoints.down('md')); + + const isDocsDemo = props.window !== undefined; + const isListView = isDocsDemo ? true : isBelowMd; const apiRef = useGridApiRef(); diff --git a/docs/data/data-grid/list-view/ListViewEdit.js b/docs/data/data-grid/list-view/ListViewEdit.js new file mode 100644 index 0000000000000..45284c99831c7 --- /dev/null +++ b/docs/data/data-grid/list-view/ListViewEdit.js @@ -0,0 +1,220 @@ +import * as React from 'react'; +import { DataGridPro } from '@mui/x-data-grid-pro'; +import Stack from '@mui/material/Stack'; +import Avatar from '@mui/material/Avatar'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import EditIcon from '@mui/icons-material/Edit'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import TextField from '@mui/material/TextField'; +import Button from '@mui/material/Button'; +import DialogActions from '@mui/material/DialogActions'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import { + randomId, + randomTraderName, + randomArrayItem, +} from '@mui/x-data-grid-generator'; + +const roles = ['Marketing', 'Finance', 'Development']; + +const randomRole = () => { + return randomArrayItem(roles); +}; + +const initialRows = [ + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#4caf50', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#2196f3', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#ff9800', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#9c27b0', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#f44336', + }, +]; + +const columns = [ + { field: 'name', headerName: 'Name', width: 180 }, + { + field: 'position', + headerName: 'Department', + width: 220, + type: 'singleSelect', + valueOptions: roles, + }, +]; + +function EditAction(props) { + const { row, onSave } = props; + const [editing, setEditing] = React.useState(false); + const [name, setName] = React.useState(row.name); + const [position, setPosition] = React.useState(row.position); + + const handleEdit = (event) => { + event.stopPropagation(); + setEditing(true); + }; + + const handleClose = () => { + setEditing(false); + }; + + const handleSave = (event) => { + event.preventDefault(); + onSave(row.id, { name, position }); + handleClose(); + }; + + React.useEffect(() => { + setName(row.name); + setPosition(row.position); + }, [row]); + + return ( + + + + + + + Edit Employee + + + Make changes to the employee's information. + + setName(event.target.value)} + /> + + Position + + + + + + + + + + ); +} + +function ListViewCell(props) { + const { row } = props; + + return ( + + + + + {row.name} + + + {row.position} + + + + + ); +} + +export default function ListViewEdit() { + const [rows, setRows] = React.useState(initialRows); + + const updateRow = React.useCallback((id, rowUpdates) => { + setRows((prevRows) => + prevRows.map((row) => (row.id === id ? { ...row, ...rowUpdates } : row)), + ); + }, []); + + const listColDef = React.useMemo( + () => ({ + field: 'listColumn', + renderCell: (params) => , + }), + [updateRow], + ); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/list-view/ListViewEdit.tsx b/docs/data/data-grid/list-view/ListViewEdit.tsx new file mode 100644 index 0000000000000..4299bee39d1dd --- /dev/null +++ b/docs/data/data-grid/list-view/ListViewEdit.tsx @@ -0,0 +1,236 @@ +import * as React from 'react'; +import { + DataGridPro, + GridRenderCellParams, + GridListColDef, + GridColDef, + GridRowParams, + GridRowModel, + GridRowsProp, +} from '@mui/x-data-grid-pro'; +import Stack from '@mui/material/Stack'; +import Avatar from '@mui/material/Avatar'; +import Typography from '@mui/material/Typography'; +import IconButton from '@mui/material/IconButton'; +import EditIcon from '@mui/icons-material/Edit'; +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import TextField from '@mui/material/TextField'; +import Button from '@mui/material/Button'; +import DialogActions from '@mui/material/DialogActions'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import { + randomId, + randomTraderName, + randomArrayItem, +} from '@mui/x-data-grid-generator'; + +const roles = ['Marketing', 'Finance', 'Development']; + +const randomRole = () => { + return randomArrayItem(roles); +}; + +const initialRows: GridRowsProp = [ + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#4caf50', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#2196f3', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#ff9800', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#9c27b0', + }, + { + id: randomId(), + name: randomTraderName(), + position: randomRole(), + avatar: '#f44336', + }, +]; + +const columns: GridColDef[] = [ + { field: 'name', headerName: 'Name', width: 180 }, + { + field: 'position', + headerName: 'Department', + width: 220, + type: 'singleSelect', + valueOptions: roles, + }, +]; + +interface EditActionProps extends Pick { + onSave: (id: string, rowUpdates: GridRowModel) => void; +} + +function EditAction(props: EditActionProps) { + const { row, onSave } = props; + const [editing, setEditing] = React.useState(false); + const [name, setName] = React.useState(row.name); + const [position, setPosition] = React.useState(row.position); + + const handleEdit = (event: React.MouseEvent) => { + event.stopPropagation(); + setEditing(true); + }; + + const handleClose = () => { + setEditing(false); + }; + + const handleSave = (event: React.FormEvent) => { + event.preventDefault(); + onSave(row.id, { name, position }); + handleClose(); + }; + + React.useEffect(() => { + setName(row.name); + setPosition(row.position); + }, [row]); + + return ( + + + + + + + Edit Employee + + + Make changes to the employee's information. + + setName(event.target.value)} + /> + + Position + + + + + + + + + + ); +} + +interface ListViewCellProps extends GridRenderCellParams { + onSave: (id: string, rowUpdates: GridRowModel) => void; +} + +function ListViewCell(props: ListViewCellProps) { + const { row } = props; + + return ( + + + + + {row.name} + + + {row.position} + + + + + ); +} + +export default function ListViewEdit() { + const [rows, setRows] = React.useState(initialRows); + + const updateRow = React.useCallback((id: string, rowUpdates: GridRowModel) => { + setRows((prevRows) => + prevRows.map((row) => (row.id === id ? { ...row, ...rowUpdates } : row)), + ); + }, []); + + const listColDef: GridListColDef = React.useMemo( + () => ({ + field: 'listColumn', + renderCell: (params) => , + }), + [updateRow], + ); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/list-view/ListViewEdit.tsx.preview b/docs/data/data-grid/list-view/ListViewEdit.tsx.preview new file mode 100644 index 0000000000000..09b26a2a275bb --- /dev/null +++ b/docs/data/data-grid/list-view/ListViewEdit.tsx.preview @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/list-view/ListViewMediaQuery.js b/docs/data/data-grid/list-view/ListViewMediaQuery.js new file mode 100644 index 0000000000000..44eae0ccd9cef --- /dev/null +++ b/docs/data/data-grid/list-view/ListViewMediaQuery.js @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { DataGridPro } from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Stack from '@mui/material/Stack'; +import Avatar from '@mui/material/Avatar'; +import Typography from '@mui/material/Typography'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import { useTheme } from '@mui/material/styles'; + +function ListViewCell(params) { + return ( + + + + + {params.row.name} + + + {params.row.position} + + + + ); +} + +const listColDef = { + field: 'listColumn', + renderCell: ListViewCell, +}; + +const VISIBLE_FIELDS = ['avatar', 'name', 'position']; + +export default function ListViewMediaQuery() { + const theme = useTheme(); + const isListView = useMediaQuery(theme.breakpoints.down('md')); + + const { data, loading } = useDemoData({ + dataSet: 'Employee', + rowLength: 5, + visibleFields: VISIBLE_FIELDS, + }); + + const rowHeight = isListView ? 64 : 52; + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/list-view/ListViewMediaQuery.tsx b/docs/data/data-grid/list-view/ListViewMediaQuery.tsx new file mode 100644 index 0000000000000..21605af8d10c1 --- /dev/null +++ b/docs/data/data-grid/list-view/ListViewMediaQuery.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import { + DataGridPro, + GridRenderCellParams, + GridListColDef, +} from '@mui/x-data-grid-pro'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Stack from '@mui/material/Stack'; +import Avatar from '@mui/material/Avatar'; +import Typography from '@mui/material/Typography'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import { useTheme } from '@mui/material/styles'; + +function ListViewCell(params: GridRenderCellParams) { + return ( + + + + + {params.row.name} + + + {params.row.position} + + + + ); +} + +const listColDef: GridListColDef = { + field: 'listColumn', + renderCell: ListViewCell, +}; + +const VISIBLE_FIELDS = ['avatar', 'name', 'position']; + +export default function ListViewMediaQuery() { + const theme = useTheme(); + const isListView = useMediaQuery(theme.breakpoints.down('md')); + + const { data, loading } = useDemoData({ + dataSet: 'Employee', + rowLength: 5, + visibleFields: VISIBLE_FIELDS, + }); + + const rowHeight = isListView ? 64 : 52; + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/list-view/ListViewMediaQuery.tsx.preview b/docs/data/data-grid/list-view/ListViewMediaQuery.tsx.preview new file mode 100644 index 0000000000000..7481bb780c233 --- /dev/null +++ b/docs/data/data-grid/list-view/ListViewMediaQuery.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/list-view/list-view.md b/docs/data/data-grid/list-view/list-view.md index 11f4b7ca3e88c..a644fa79c193a 100644 --- a/docs/data/data-grid/list-view/list-view.md +++ b/docs/data/data-grid/list-view/list-view.md @@ -16,14 +16,68 @@ In order to display data in a list view, a `unstable_listColumn` prop must be pr This feature is under development and is marked as **unstable**. While you can use the list view feature in production, the API could change in the future. ::: -{{"demo": "ListView.js", "bg": "inline"}} +```tsx +function ListViewCell(params: GridRenderCellParams) { + return <>{params.row.id}; +} + +const listColDef: GridListColDef = { + field: 'listColumn', + renderCell: ListViewCell, +}; + +; +``` + +{{"demo": "ListView.js", "bg": true}} + +## Enable with a media query + +Use the `useMediaQuery` hook from `@mui/material` to enable the list view feature at a specified breakpoint. + +The demo below automatically switches to a list layout when the viewport width is below the `md` breakpoint. + +{{"demo": "ListViewMediaQuery.js", "bg": "inline"}} + +## Editable rows + +The [editing feature](/x/react-data-grid/editing/) is not supported in list view, but it is possible to build an editing experience from within your custom cell renderer, as shown below. + +{{"demo": "ListViewEdit.js", "bg": true}} ## Advanced usage -The list view feature can be combined with [custom subcomponents](/x/react-data-grid/components/) to provide an improved user experience on small screens. +The list view feature can be combined with [custom subcomponents](/x/react-data-grid/components/) to provide an improved user experience on small screens, as shown below. -{{"demo": "ListViewAdvanced.js", "bg": "inline", "iframe": true, "maxWidth": 360, "height": 600, "hideToolbar": true}} +{{"demo": "ListViewAdvanced.js", "iframe": true, "maxWidth": 360, "height": 600}} -:::info -See the code for this demo in [CodeSandbox](https://codesandbox.io/p/sandbox/x-react-data-grid-list-view-zmkzhz). +## Feature compatibility + +The list view feature can be used in combination with the following features: + +- ✅ [Sorting](/x/react-data-grid/sorting/) +- ✅ [Filtering](/x/react-data-grid/filtering/) +- ✅ [Pagination](/x/react-data-grid/pagination/) +- ✅ [Row selection](/x/react-data-grid/row-selection/) +- ✅ [Multi filters](/x/react-data-grid/filtering/multi-filters/) [](/x/introduction/licensing/#pro-plan 'Pro plan') +- ✅ [Row pinning](/x/react-data-grid/row-pinning/) [](/x/introduction/licensing/#pro-plan 'Pro plan') +- ✅ [Cell selection](/x/react-data-grid/cell-selection/) [](/x/introduction/licensing/#premium-plan 'Premium plan') + +:::warning +Features not listed may not work as expected, or may not work at all. + +If you're using a feature that's listed above and it's not working as expected, please [open a bug report](https://github.com/mui/mui-x/issues/new?assignees=&labels=status%3A+waiting+for+maintainer%2Cbug+%F0%9F%90%9B&projects=&template=1.bug.yml). + +If you need to use list view with any other features, please [open a feature request](https://github.com/mui/mui-x/issues/new?assignees=&labels=status%3A+waiting+for+maintainer%2Cnew+feature&projects=&template=2.feature.yml). ::: + +## Selectors + +{{"component": "modules/components/SelectorsDocs.js", "category": "List View"}} + +## API + +- [DataGrid](/x/api/data-grid/data-grid/) +- [DataGridPro](/x/api/data-grid/data-grid-pro/) +- [DataGridPremium](/x/api/data-grid/data-grid-premium/) +- [GridListColDef](/x/api/data-grid/grid-list-col-def/) diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 7d373c9e2b9ac..c9befaae81ca9 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -188,6 +188,7 @@ const pages: MuiPage[] = [ }, { pathname: '/x/api/data-grid/grid-actions-col-def', title: 'GridActionsColDef' }, + { pathname: '/x/api/data-grid/grid-list-col-def', title: 'GridListColDef' }, { pathname: '/x/api/data-grid/grid-export-state-params', title: 'GridExportStateParams', diff --git a/docs/pages/x/api/data-grid/grid-list-col-def.js b/docs/pages/x/api/data-grid/grid-list-col-def.js new file mode 100644 index 0000000000000..a8a1718c20c21 --- /dev/null +++ b/docs/pages/x/api/data-grid/grid-list-col-def.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import InterfaceApiPage from 'docsx/src/modules/components/InterfaceApiPage'; +import layoutConfig from 'docsx/src/modules/utils/dataGridLayoutConfig'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './grid-list-col-def.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ( + + ); +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/data-grid/', + false, + /\.\/grid-list-col-def.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/data-grid/grid-list-col-def.json b/docs/pages/x/api/data-grid/grid-list-col-def.json new file mode 100644 index 0000000000000..bdb42bc4bb2f6 --- /dev/null +++ b/docs/pages/x/api/data-grid/grid-list-col-def.json @@ -0,0 +1,20 @@ +{ + "name": "GridListColDef", + "imports": [ + "import { GridListColDef } from '@mui/x-data-grid-premium'", + "import { GridListColDef } from '@mui/x-data-grid-pro'", + "import { GridListColDef } from '@mui/x-data-grid'" + ], + "demos": "", + "properties": { + "field": { "type": { "description": "string" }, "required": true }, + "align": { "type": { "description": "GridAlignment" } }, + "cellClassName": { "type": { "description": "GridCellClassNamePropType<R, V>" } }, + "display": { "type": { "description": "'text' | 'flex'" } }, + "renderCell": { + "type": { + "description": "(params: GridRenderCellParams<R, V, F>) => React.ReactNode" + } + } + } +} diff --git a/docs/pages/x/api/data-grid/index.md b/docs/pages/x/api/data-grid/index.md index 69408d9cbd9e3..59c68e9a9b1fe 100644 --- a/docs/pages/x/api/data-grid/index.md +++ b/docs/pages/x/api/data-grid/index.md @@ -17,6 +17,7 @@ - [GridColDef](/x/api/data-grid/grid-col-def/) - [GridSingleSelectColDef](/x/api/data-grid/grid-single-select-col-def/) - [GridActionsColDef](/x/api/data-grid/grid-actions-col-def/) +- [GridListColDef](/x/api/data-grid/grid-list-col-def/) - [GridExportStateParams](/x/api/data-grid/grid-export-state-params/) - [GridFilterItem](/x/api/data-grid/grid-filter-item/) - [GridFilterModel](/x/api/data-grid/grid-filter-model/) diff --git a/docs/scripts/createXTypeScriptProjects.ts b/docs/scripts/createXTypeScriptProjects.ts index 6acad90be81f7..4ec4f14886720 100644 --- a/docs/scripts/createXTypeScriptProjects.ts +++ b/docs/scripts/createXTypeScriptProjects.ts @@ -140,6 +140,7 @@ export const interfacesToDocument: InterfacesToDocumentType[] = [ 'GridColDef', 'GridSingleSelectColDef', 'GridActionsColDef', + 'GridListColDef', 'GridCsvExportOptions', 'GridPrintExportOptions', 'GridExcelExportOptions', diff --git a/docs/translations/api-docs/data-grid/grid-actions-col-def.json b/docs/translations/api-docs/data-grid/grid-actions-col-def.json index ec34f0c620938..82b30cb0bdb7a 100644 --- a/docs/translations/api-docs/data-grid/grid-actions-col-def.json +++ b/docs/translations/api-docs/data-grid/grid-actions-col-def.json @@ -2,21 +2,21 @@ "interfaceDescription": "Column Definition interface used for columns with the actions type.", "propertiesDescriptions": { "field": { - "description": "The column identifier. It's used to map with GridRowModel values." + "description": "The unique identifier of the column. Used to map with GridRowModel values." }, "getActions": { "description": "Function that returns the actions to be shown." }, "type": { "description": "The type of the column." }, "aggregable": { "description": "If true, the cells of the column can be aggregated based." }, - "align": { "description": "Allows to align the column values in cells." }, + "align": { "description": "Align cell content." }, "availableAggregationFunctions": { "description": "Limit the aggregation function usable on this column.
By default, the column will have all the aggregation functions that are compatible with its type." }, - "cellClassName": { "description": "Class name that will be added in cells for that column." }, + "cellClassName": { "description": "Class name added to cells in this column." }, "colSpan": { "description": "Number of columns a cell should span." }, "description": { - "description": "The description of the column rendered as tooltip if the column header name is not fully displayed." + "description": "The tooltip text shown when the column header name is truncated." }, "disableColumnMenu": { "description": "If true, the column menu is disabled for this column." @@ -31,12 +31,12 @@ "editable": { "description": "If true, the cells of the column are editable." }, "filterable": { "description": "If true, the column is filterable." }, "filterOperators": { "description": "Allows setting the filter operators for this column." }, - "flex": { "description": "If set, it indicates that a column has fluid width. Range [0, ∞)." }, + "flex": { "description": "The flex grow factor of the column. Must be a positive number." }, "getApplyQuickFilterFn": { "description": "The callback that generates a filtering function for a given quick filter value.
This function can return null to skip filtering for this value and column." }, "getSortComparator": { - "description": "Allows to use a different comparator function depending on the sort direction.
Takes precedence over sortComparator." + "description": "Provide an alternative comparator function for sorting.
Takes precedence over sortComparator." }, "groupable": { "description": "If true, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium." @@ -44,17 +44,13 @@ "groupingValueGetter": { "description": "Function that transforms a complex cell value into a key that be used for grouping the rows." }, - "headerAlign": { "description": "Header cell element alignment." }, - "headerClassName": { - "description": "Class name that will be added in the column header cell." - }, - "headerName": { "description": "The title of the column rendered in the column header cell." }, - "hideable": { - "description": "If false, removes the buttons for hiding this column." - }, + "headerAlign": { "description": "Align column header content." }, + "headerClassName": { "description": "Class name added to the column header cell." }, + "headerName": { "description": "The title displayed in the column header cell." }, + "hideable": { "description": "If false, removes the option to hide this column." }, "hideSortIcons": { "description": "Toggle the visibility of the sort icons." }, - "maxWidth": { "description": "Sets the maximum width of a column." }, - "minWidth": { "description": "Sets the minimum width of a column." }, + "maxWidth": { "description": "The maximum width of the column in pixels." }, + "minWidth": { "description": "The minimum width of the column in pixels." }, "pastedValueParser": { "description": "Function that takes the clipboard-pasted value and converts it to a value used internally." }, @@ -62,37 +58,33 @@ "description": "If false, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro." }, "preProcessEditCellProps": { - "description": "Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state." - }, - "renderCell": { - "description": "Allows to override the component rendered as cell for this column." + "description": "Callback fired when the edit props of the cell changes.
Processes the props before being saved into the state." }, + "renderCell": { "description": "Override the component rendered as cell for this column." }, "renderEditCell": { - "description": "Allows to override the component rendered in edit cell mode for this column." + "description": "Override the component rendered in edit cell mode for this column." }, - "renderHeader": { "description": "Allows to render a component in the column header cell." }, + "renderHeader": { "description": "Override the component rendered in the column header cell." }, "renderHeaderFilter": { "description": "Allows to render a component in the column header filter cell." }, - "resizable": { "description": "If true, the column is resizable." }, + "resizable": { "description": "If false, disables resizing for this column." }, "rowSpanValueGetter": { - "description": "Function that allows to provide a specific value to be used in row spanning." + "description": "Function that returns a specific value to be used in row spanning." }, - "sortable": { "description": "If true, the column is sortable." }, + "sortable": { "description": "If false, disables sorting for this column." }, "sortComparator": { "description": "A comparator function used to sort rows." }, "sortingOrder": { "description": "The order of the sorting sequence." }, - "valueFormatter": { - "description": "Function that allows to apply a formatter before rendering its value." - }, + "valueFormatter": { "description": "Formats the cell value before rendering." }, "valueGetter": { - "description": "Function that allows to get a specific data instead of field to render in the cell." + "description": "Function that returns specific data to render in the cell instead of using the field value." }, "valueParser": { "description": "Function that takes the user-entered value and converts it to a value used internally." }, "valueSetter": { - "description": "Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing." + "description": "Function that customizes how the entered value is stored in the row.
Only works with cell/row editing." }, - "width": { "description": "Set the width of the column." } + "width": { "description": "The width of the column in pixels." } } } diff --git a/docs/translations/api-docs/data-grid/grid-col-def.json b/docs/translations/api-docs/data-grid/grid-col-def.json index 1e63902cd79e5..8f68dabd83d64 100644 --- a/docs/translations/api-docs/data-grid/grid-col-def.json +++ b/docs/translations/api-docs/data-grid/grid-col-def.json @@ -2,19 +2,19 @@ "interfaceDescription": "Column Definition interface.", "propertiesDescriptions": { "field": { - "description": "The column identifier. It's used to map with GridRowModel values." + "description": "The unique identifier of the column. Used to map with GridRowModel values." }, "aggregable": { "description": "If true, the cells of the column can be aggregated based." }, - "align": { "description": "Allows to align the column values in cells." }, + "align": { "description": "Align cell content." }, "availableAggregationFunctions": { "description": "Limit the aggregation function usable on this column.
By default, the column will have all the aggregation functions that are compatible with its type." }, - "cellClassName": { "description": "Class name that will be added in cells for that column." }, + "cellClassName": { "description": "Class name added to cells in this column." }, "colSpan": { "description": "Number of columns a cell should span." }, "description": { - "description": "The description of the column rendered as tooltip if the column header name is not fully displayed." + "description": "The tooltip text shown when the column header name is truncated." }, "disableColumnMenu": { "description": "If true, the column menu is disabled for this column." @@ -29,12 +29,12 @@ "editable": { "description": "If true, the cells of the column are editable." }, "filterable": { "description": "If true, the column is filterable." }, "filterOperators": { "description": "Allows setting the filter operators for this column." }, - "flex": { "description": "If set, it indicates that a column has fluid width. Range [0, ∞)." }, + "flex": { "description": "The flex grow factor of the column. Must be a positive number." }, "getApplyQuickFilterFn": { "description": "The callback that generates a filtering function for a given quick filter value.
This function can return null to skip filtering for this value and column." }, "getSortComparator": { - "description": "Allows to use a different comparator function depending on the sort direction.
Takes precedence over sortComparator." + "description": "Provide an alternative comparator function for sorting.
Takes precedence over sortComparator." }, "groupable": { "description": "If true, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium." @@ -42,17 +42,13 @@ "groupingValueGetter": { "description": "Function that transforms a complex cell value into a key that be used for grouping the rows." }, - "headerAlign": { "description": "Header cell element alignment." }, - "headerClassName": { - "description": "Class name that will be added in the column header cell." - }, - "headerName": { "description": "The title of the column rendered in the column header cell." }, - "hideable": { - "description": "If false, removes the buttons for hiding this column." - }, + "headerAlign": { "description": "Align column header content." }, + "headerClassName": { "description": "Class name added to the column header cell." }, + "headerName": { "description": "The title displayed in the column header cell." }, + "hideable": { "description": "If false, removes the option to hide this column." }, "hideSortIcons": { "description": "Toggle the visibility of the sort icons." }, - "maxWidth": { "description": "Sets the maximum width of a column." }, - "minWidth": { "description": "Sets the minimum width of a column." }, + "maxWidth": { "description": "The maximum width of the column in pixels." }, + "minWidth": { "description": "The minimum width of the column in pixels." }, "pastedValueParser": { "description": "Function that takes the clipboard-pasted value and converts it to a value used internally." }, @@ -60,38 +56,34 @@ "description": "If false, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro." }, "preProcessEditCellProps": { - "description": "Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state." - }, - "renderCell": { - "description": "Allows to override the component rendered as cell for this column." + "description": "Callback fired when the edit props of the cell changes.
Processes the props before being saved into the state." }, + "renderCell": { "description": "Override the component rendered as cell for this column." }, "renderEditCell": { - "description": "Allows to override the component rendered in edit cell mode for this column." + "description": "Override the component rendered in edit cell mode for this column." }, - "renderHeader": { "description": "Allows to render a component in the column header cell." }, + "renderHeader": { "description": "Override the component rendered in the column header cell." }, "renderHeaderFilter": { "description": "Allows to render a component in the column header filter cell." }, - "resizable": { "description": "If true, the column is resizable." }, + "resizable": { "description": "If false, disables resizing for this column." }, "rowSpanValueGetter": { - "description": "Function that allows to provide a specific value to be used in row spanning." + "description": "Function that returns a specific value to be used in row spanning." }, - "sortable": { "description": "If true, the column is sortable." }, + "sortable": { "description": "If false, disables sorting for this column." }, "sortComparator": { "description": "A comparator function used to sort rows." }, "sortingOrder": { "description": "The order of the sorting sequence." }, "type": { "description": "The type of the column." }, - "valueFormatter": { - "description": "Function that allows to apply a formatter before rendering its value." - }, + "valueFormatter": { "description": "Formats the cell value before rendering." }, "valueGetter": { - "description": "Function that allows to get a specific data instead of field to render in the cell." + "description": "Function that returns specific data to render in the cell instead of using the field value." }, "valueParser": { "description": "Function that takes the user-entered value and converts it to a value used internally." }, "valueSetter": { - "description": "Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing." + "description": "Function that customizes how the entered value is stored in the row.
Only works with cell/row editing." }, - "width": { "description": "Set the width of the column." } + "width": { "description": "The width of the column in pixels." } } } diff --git a/docs/translations/api-docs/data-grid/grid-list-col-def.json b/docs/translations/api-docs/data-grid/grid-list-col-def.json new file mode 100644 index 0000000000000..7469b395322ac --- /dev/null +++ b/docs/translations/api-docs/data-grid/grid-list-col-def.json @@ -0,0 +1,14 @@ +{ + "interfaceDescription": "Column Definition interface used for the list view column.", + "propertiesDescriptions": { + "field": { + "description": "The unique identifier of the column. Used to map with GridRowModel values." + }, + "align": { "description": "Align cell content." }, + "cellClassName": { "description": "Class name added to cells in this column." }, + "display": { + "description": "Display mode for the cell:
- 'text': For text-based cells (default)
- 'flex': For cells with HTMLElement children" + }, + "renderCell": { "description": "Override the component rendered as cell for this column." } + } +} diff --git a/docs/translations/api-docs/data-grid/grid-single-select-col-def.json b/docs/translations/api-docs/data-grid/grid-single-select-col-def.json index 55fceed053c94..9521e0e8e4017 100644 --- a/docs/translations/api-docs/data-grid/grid-single-select-col-def.json +++ b/docs/translations/api-docs/data-grid/grid-single-select-col-def.json @@ -2,20 +2,20 @@ "interfaceDescription": "Column Definition interface used for columns with the singleSelect type.", "propertiesDescriptions": { "field": { - "description": "The column identifier. It's used to map with GridRowModel values." + "description": "The unique identifier of the column. Used to map with GridRowModel values." }, "type": { "description": "The type of the column." }, "aggregable": { "description": "If true, the cells of the column can be aggregated based." }, - "align": { "description": "Allows to align the column values in cells." }, + "align": { "description": "Align cell content." }, "availableAggregationFunctions": { "description": "Limit the aggregation function usable on this column.
By default, the column will have all the aggregation functions that are compatible with its type." }, - "cellClassName": { "description": "Class name that will be added in cells for that column." }, + "cellClassName": { "description": "Class name added to cells in this column." }, "colSpan": { "description": "Number of columns a cell should span." }, "description": { - "description": "The description of the column rendered as tooltip if the column header name is not fully displayed." + "description": "The tooltip text shown when the column header name is truncated." }, "disableColumnMenu": { "description": "If true, the column menu is disabled for this column." @@ -30,7 +30,7 @@ "editable": { "description": "If true, the cells of the column are editable." }, "filterable": { "description": "If true, the column is filterable." }, "filterOperators": { "description": "Allows setting the filter operators for this column." }, - "flex": { "description": "If set, it indicates that a column has fluid width. Range [0, ∞)." }, + "flex": { "description": "The flex grow factor of the column. Must be a positive number." }, "getApplyQuickFilterFn": { "description": "The callback that generates a filtering function for a given quick filter value.
This function can return null to skip filtering for this value and column." }, @@ -39,7 +39,7 @@ }, "getOptionValue": { "description": "Used to determine the value used for a value option." }, "getSortComparator": { - "description": "Allows to use a different comparator function depending on the sort direction.
Takes precedence over sortComparator." + "description": "Provide an alternative comparator function for sorting.
Takes precedence over sortComparator." }, "groupable": { "description": "If true, the rows can be grouped based on this column values (pro-plan only).
Only available in DataGridPremium." @@ -47,17 +47,13 @@ "groupingValueGetter": { "description": "Function that transforms a complex cell value into a key that be used for grouping the rows." }, - "headerAlign": { "description": "Header cell element alignment." }, - "headerClassName": { - "description": "Class name that will be added in the column header cell." - }, - "headerName": { "description": "The title of the column rendered in the column header cell." }, - "hideable": { - "description": "If false, removes the buttons for hiding this column." - }, + "headerAlign": { "description": "Align column header content." }, + "headerClassName": { "description": "Class name added to the column header cell." }, + "headerName": { "description": "The title displayed in the column header cell." }, + "hideable": { "description": "If false, removes the option to hide this column." }, "hideSortIcons": { "description": "Toggle the visibility of the sort icons." }, - "maxWidth": { "description": "Sets the maximum width of a column." }, - "minWidth": { "description": "Sets the minimum width of a column." }, + "maxWidth": { "description": "The maximum width of the column in pixels." }, + "minWidth": { "description": "The minimum width of the column in pixels." }, "pastedValueParser": { "description": "Function that takes the clipboard-pasted value and converts it to a value used internally." }, @@ -65,30 +61,26 @@ "description": "If false, the menu items for column pinning menu will not be rendered.
Only available in DataGridPro." }, "preProcessEditCellProps": { - "description": "Callback fired when the edit props of the cell changes.
It allows to process the props that saved into the state." - }, - "renderCell": { - "description": "Allows to override the component rendered as cell for this column." + "description": "Callback fired when the edit props of the cell changes.
Processes the props before being saved into the state." }, + "renderCell": { "description": "Override the component rendered as cell for this column." }, "renderEditCell": { - "description": "Allows to override the component rendered in edit cell mode for this column." + "description": "Override the component rendered in edit cell mode for this column." }, - "renderHeader": { "description": "Allows to render a component in the column header cell." }, + "renderHeader": { "description": "Override the component rendered in the column header cell." }, "renderHeaderFilter": { "description": "Allows to render a component in the column header filter cell." }, - "resizable": { "description": "If true, the column is resizable." }, + "resizable": { "description": "If false, disables resizing for this column." }, "rowSpanValueGetter": { - "description": "Function that allows to provide a specific value to be used in row spanning." + "description": "Function that returns a specific value to be used in row spanning." }, - "sortable": { "description": "If true, the column is sortable." }, + "sortable": { "description": "If false, disables sorting for this column." }, "sortComparator": { "description": "A comparator function used to sort rows." }, "sortingOrder": { "description": "The order of the sorting sequence." }, - "valueFormatter": { - "description": "Function that allows to apply a formatter before rendering its value." - }, + "valueFormatter": { "description": "Formats the cell value before rendering." }, "valueGetter": { - "description": "Function that allows to get a specific data instead of field to render in the cell." + "description": "Function that returns specific data to render in the cell instead of using the field value." }, "valueOptions": { "description": "To be used in combination with type: 'singleSelect'. This is an array (or a function returning an array) of the possible cell values and labels." @@ -97,8 +89,8 @@ "description": "Function that takes the user-entered value and converts it to a value used internally." }, "valueSetter": { - "description": "Function that allows to customize how the entered value is stored in the row.
It only works with cell/row editing." + "description": "Function that customizes how the entered value is stored in the row.
Only works with cell/row editing." }, - "width": { "description": "Set the width of the column." } + "width": { "description": "The width of the column in pixels." } } } diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx index 2c8c8cbce7a93..6c19ae5f9b372 100644 --- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx +++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx @@ -408,7 +408,7 @@ GridHeaderFilterCell.propTypes = { gridHasFiller: PropTypes.bool.isRequired, hasFocus: PropTypes.bool, /** - * Class name that will be added in the column header cell. + * Class name added to the column header cell. */ headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), headerFilterMenuRef: PropTypes.shape({ diff --git a/packages/x-data-grid/src/hooks/features/index.ts b/packages/x-data-grid/src/hooks/features/index.ts index 4bebafde94ae8..8660d879545fc 100644 --- a/packages/x-data-grid/src/hooks/features/index.ts +++ b/packages/x-data-grid/src/hooks/features/index.ts @@ -7,6 +7,7 @@ export * from './density'; export * from './editing'; export * from './filter'; export * from './focus'; +export * from './listView'; export * from './pagination'; export * from './preferencesPanel'; export * from './rows'; diff --git a/packages/x-data-grid/src/hooks/features/listView/gridListViewSelectors.ts b/packages/x-data-grid/src/hooks/features/listView/gridListViewSelectors.ts index a5e69fc079bb7..e4b9a591fea5f 100644 --- a/packages/x-data-grid/src/hooks/features/listView/gridListViewSelectors.ts +++ b/packages/x-data-grid/src/hooks/features/listView/gridListViewSelectors.ts @@ -1,6 +1,8 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity'; /** - * Get a list column definition + * Get the list column definition + * @category List View + * @ignore - Do not document */ export const gridListColumnSelector = (state: GridStateCommunity) => state.listViewColumn; diff --git a/packages/x-data-grid/src/hooks/features/listView/index.ts b/packages/x-data-grid/src/hooks/features/listView/index.ts new file mode 100644 index 0000000000000..e96a08afb4afd --- /dev/null +++ b/packages/x-data-grid/src/hooks/features/listView/index.ts @@ -0,0 +1 @@ +export * from './gridListViewSelectors'; diff --git a/packages/x-data-grid/src/models/colDef/gridColDef.ts b/packages/x-data-grid/src/models/colDef/gridColDef.ts index c7166347c4726..d0adec4028fc7 100644 --- a/packages/x-data-grid/src/models/colDef/gridColDef.ts +++ b/packages/x-data-grid/src/models/colDef/gridColDef.ts @@ -91,43 +91,43 @@ export type GridColSpanFn { /** - * The column identifier. It's used to map with [[GridRowModel]] values. + * The unique identifier of the column. Used to map with [[GridRowModel]] values. */ field: string; /** - * The title of the column rendered in the column header cell. + * The title displayed in the column header cell. */ headerName?: string; /** - * The description of the column rendered as tooltip if the column header name is not fully displayed. + * The tooltip text shown when the column header name is truncated. */ description?: string; /** - * Set the width of the column. + * The width of the column in pixels. * @default 100 */ width?: number; /** - * If set, it indicates that a column has fluid width. Range [0, ∞). + * The flex grow factor of the column. Must be a positive number. */ flex?: number; /** - * Sets the minimum width of a column. + * The minimum width of the column in pixels. * @default 50 */ minWidth?: number; /** - * Sets the maximum width of a column. + * The maximum width of the column in pixels. * @default Infinity */ maxWidth?: number; /** - * If `false`, removes the buttons for hiding this column. + * If `false`, removes the option to hide this column. * @default true */ hideable?: boolean; /** - * If `true`, the column is sortable. + * If `false`, disables sorting for this column. * @default true */ sortable?: boolean; @@ -136,7 +136,7 @@ export interface GridBaseColDef; /** - * Allows to use a different comparator function depending on the sort direction. + * Provide an alternative comparator function for sorting. * Takes precedence over `sortComparator`. * @param {GridSortDirection} sortDirection The direction of the sort. * @returns {GridComparatorFn} The comparator function to use. @@ -177,25 +177,25 @@ export interface GridBaseColDef; /** - * Function that allows to provide a specific value to be used in row spanning. + * Function that returns a specific value to be used in row spanning. */ rowSpanValueGetter?: GridValueGetter; /** - * Function that allows to customize how the entered value is stored in the row. - * It only works with cell/row editing. + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. * @returns {R} The row with the updated field. */ valueSetter?: GridValueSetter; /** - * Function that allows to apply a formatter before rendering its value. + * Formats the cell value before rendering. */ valueFormatter?: GridValueFormatter; /** @@ -204,7 +204,7 @@ export interface GridBaseColDef; /** - * Class name that will be added in cells for that column. + * Class name added to cells in this column. */ cellClassName?: GridCellClassNamePropType; /** @@ -214,21 +214,21 @@ export interface GridBaseColDef} params Object containing parameters for the renderer. * @returns {React.ReactNode} The element to be rendered. */ renderCell?: (params: GridRenderCellParams) => React.ReactNode; /** - * Allows to override the component rendered in edit cell mode for this column. + * Override the component rendered in edit cell mode for this column. * @param {GridRenderEditCellParams} params Object containing parameters for the renderer. * @returns {React.ReactNode} The element to be rendered. */ renderEditCell?: (params: GridRenderEditCellParams) => React.ReactNode; /** * Callback fired when the edit props of the cell changes. - * It allows to process the props that saved into the state. + * Processes the props before being saved into the state. * @param {GridPreProcessEditCellProps} params Object containing parameters of the cell being edited. * @returns {GridEditCellProps | Promise} The new edit cell props. */ @@ -236,18 +236,18 @@ export interface GridBaseColDef GridEditCellProps | Promise; /** - * Class name that will be added in the column header cell. + * Class name added to the column header cell. */ headerClassName?: GridColumnHeaderClassNamePropType; /** - * Allows to render a component in the column header cell. + * Override the component rendered in the column header cell. * @template R, V, F * @param {GridColumnHeaderParams} params Object containing parameters for the renderer. * @returns {React.ReactNode} The element to be rendered. */ renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; /** - * Header cell element alignment. + * Align column header content. */ headerAlign?: GridAlignment; /** diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index a9c1ad2bbf181..b9dab8f866b43 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -404,6 +404,7 @@ { "name": "GridLeafColumn", "kind": "Interface" }, { "name": "GridLeafNode", "kind": "Interface" }, { "name": "GridListColDef", "kind": "TypeAlias" }, + { "name": "gridListColumnSelector", "kind": "Variable" }, { "name": "GridLoadIcon", "kind": "Variable" }, { "name": "GridLoadingOverlay", "kind": "Variable" }, { "name": "GridLoadingOverlayProps", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index e3f48b5e8432e..4627916857c36 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -367,6 +367,7 @@ { "name": "GridLeafColumn", "kind": "Interface" }, { "name": "GridLeafNode", "kind": "Interface" }, { "name": "GridListColDef", "kind": "TypeAlias" }, + { "name": "gridListColumnSelector", "kind": "Variable" }, { "name": "GridLoadIcon", "kind": "Variable" }, { "name": "GridLoadingOverlay", "kind": "Variable" }, { "name": "GridLoadingOverlayProps", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 1f9473402f2f8..3c2ce59bc0097 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -329,6 +329,7 @@ { "name": "GridLeafColumn", "kind": "Interface" }, { "name": "GridLeafNode", "kind": "Interface" }, { "name": "GridListColDef", "kind": "TypeAlias" }, + { "name": "gridListColumnSelector", "kind": "Variable" }, { "name": "GridLoadIcon", "kind": "Variable" }, { "name": "GridLoadingOverlay", "kind": "Variable" }, { "name": "GridLoadingOverlayProps", "kind": "Interface" },