diff --git a/.eslintrc.js b/.eslintrc.js index f523eea318721..de600b9a3e426 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -287,6 +287,7 @@ module.exports = { '!@mui/internal-*/**', // Exceptions (QUESTION: Keep or remove?) + '!@mui/x-data-grid/internals/demo', '!@mui/x-date-pickers/internals/demo', '!@mui/x-tree-view/hooks/useTreeViewApiRef', // TODO: export this from /ButtonBase in core. This will break after we move to package exports diff --git a/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js new file mode 100644 index 0000000000000..b008d4fa4cfd5 --- /dev/null +++ b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + ToolbarButton, + ColumnsPanelTrigger, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import ViewColumnIcon from '@mui/icons-material/ViewColumn'; + +function CustomToolbar() { + return ( + + + }> + + + + + ); +} + +export default function GridColumnsPanelTrigger() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx new file mode 100644 index 0000000000000..b008d4fa4cfd5 --- /dev/null +++ b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + ToolbarButton, + ColumnsPanelTrigger, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import ViewColumnIcon from '@mui/icons-material/ViewColumn'; + +function CustomToolbar() { + return ( + + + }> + + + + + ); +} + +export default function GridColumnsPanelTrigger() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx.preview b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx.preview new file mode 100644 index 0000000000000..7f29998cef137 --- /dev/null +++ b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/components/columns-panel/columns-panel.md b/docs/data/data-grid/components/columns-panel/columns-panel.md new file mode 100644 index 0000000000000..4bede5357e5b8 --- /dev/null +++ b/docs/data/data-grid/components/columns-panel/columns-panel.md @@ -0,0 +1,52 @@ +--- +title: React Data Grid - Columns Panel component +productId: x-data-grid +components: ColumnsPanelTrigger +packageName: '@mui/x-data-grid' +githubLabel: 'component: data grid' +--- + +# Data Grid - Columns Panel 🚧 + +

Customize the Data Grid's columns panel.

+ +:::warning +This component is incomplete. + +Currently, the Columns Panel Trigger is the only part of the Columns Panel component available. +Future versions of the Columns Panel component will make it possible to compose each of its parts to create a custom columns panel. + +In the meantime, it's still possible to deeply customize the panel's subcomponents using custom slots. +See [Custom subcomponents—Columns panel](/x/react-data-grid/components/#columns-panel) for more details. + +::: + +## Basic usage + +The demo below shows how to add a columns panel trigger to a custom toolbar. + +{{"demo": "GridColumnsPanelTrigger.js", "bg": "inline", "defaultCodeOpen": false}} + +## Anatomy + +```tsx +import { ColumnsPanelTrigger } from '@mui/x-data-grid'; + +; +``` + +### Columns Panel Trigger + +`` is a button that opens and closes the columns panel. +It renders the `baseButton` slot. + +## Custom elements + +Use the `render` prop to replace default elements. +See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example of a custom Columns Panel Trigger. + +## Accessibility + +### ARIA + +You must apply a text label or an `aria-label` attribute to the ``. diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md index f845012abba10..532fc01276155 100644 --- a/docs/data/data-grid/components/components.md +++ b/docs/data/data-grid/components/components.md @@ -50,6 +50,13 @@ As mentioned above, the column menu is a component slot that can be recomposed e ### Toolbar +:::warning + +The examples below use the ``, ``, and various toolbar button components. +These components will be deprecated in v8 and replaced by the new [Toolbar component](/x/react-data-grid/components/toolbar/). + +::: + To enable the toolbar you need to add the `showToolbar` prop to the Data Grid. This demo showcases how this can be achieved. diff --git a/docs/data/data-grid/components/export/GridExportMenu.js b/docs/data/data-grid/components/export/GridExportMenu.js new file mode 100644 index 0000000000000..1ac728a7bb864 --- /dev/null +++ b/docs/data/data-grid/components/export/GridExportMenu.js @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { + DataGridPremium, + Toolbar, + ToolbarButton, + ExportCsv, + ExportExcel, + ExportPrint, +} from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import FileDownloadIcon from '@mui/icons-material/FileDownload'; + +function ExportMenu() { + const [open, setOpen] = React.useState(false); + const triggerRef = React.useRef(null); + + return ( + + + setOpen(true)} + > + + + + setOpen(false)} + MenuListProps={{ + 'aria-labelledby': 'export-menu-trigger', + }} + > + }>Download as CSV + }>Download as Excel + }>Print + + + ); +} + +function CustomToolbar() { + return ( + + + + ); +} + +export default function GridExportMenu() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/export/GridExportMenu.tsx b/docs/data/data-grid/components/export/GridExportMenu.tsx new file mode 100644 index 0000000000000..0e7974e7e2080 --- /dev/null +++ b/docs/data/data-grid/components/export/GridExportMenu.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { + DataGridPremium, + Toolbar, + ToolbarButton, + ExportCsv, + ExportExcel, + ExportPrint, +} from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import FileDownloadIcon from '@mui/icons-material/FileDownload'; + +function ExportMenu() { + const [open, setOpen] = React.useState(false); + const triggerRef = React.useRef(null); + + return ( + + + setOpen(true)} + > + + + + setOpen(false)} + MenuListProps={{ + 'aria-labelledby': 'export-menu-trigger', + }} + > + }>Download as CSV + }>Download as Excel + }>Print + + + ); +} + +function CustomToolbar() { + return ( + + + + ); +} + +export default function GridExportMenu() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/export/GridExportMenu.tsx.preview b/docs/data/data-grid/components/export/GridExportMenu.tsx.preview new file mode 100644 index 0000000000000..c982a4a012992 --- /dev/null +++ b/docs/data/data-grid/components/export/GridExportMenu.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/components/export/GridExportTrigger.js b/docs/data/data-grid/components/export/GridExportTrigger.js new file mode 100644 index 0000000000000..3b3a2f831fa17 --- /dev/null +++ b/docs/data/data-grid/components/export/GridExportTrigger.js @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + ExportCsv, + ExportPrint, + ToolbarButton, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import FileDownloadIcon from '@mui/icons-material/FileDownload'; +import PrintIcon from '@mui/icons-material/Print'; + +function CustomToolbar() { + return ( + + + }> + + + + + }> + + + + + ); +} + +export default function GridExportTrigger() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/export/GridExportTrigger.tsx b/docs/data/data-grid/components/export/GridExportTrigger.tsx new file mode 100644 index 0000000000000..3b3a2f831fa17 --- /dev/null +++ b/docs/data/data-grid/components/export/GridExportTrigger.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + ExportCsv, + ExportPrint, + ToolbarButton, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import FileDownloadIcon from '@mui/icons-material/FileDownload'; +import PrintIcon from '@mui/icons-material/Print'; + +function CustomToolbar() { + return ( + + + }> + + + + + }> + + + + + ); +} + +export default function GridExportTrigger() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/export/GridExportTrigger.tsx.preview b/docs/data/data-grid/components/export/GridExportTrigger.tsx.preview new file mode 100644 index 0000000000000..7f29998cef137 --- /dev/null +++ b/docs/data/data-grid/components/export/GridExportTrigger.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/components/export/export.md b/docs/data/data-grid/components/export/export.md new file mode 100644 index 0000000000000..4844ed91f0b4b --- /dev/null +++ b/docs/data/data-grid/components/export/export.md @@ -0,0 +1,63 @@ +--- +title: React Data Grid - Export component +productId: x-data-grid +components: ExportPrint, ExportCsv, ExportExcel +packageName: '@mui/x-data-grid' +githubLabel: 'component: data grid' +--- + +# Data Grid - Export + +

Let users export the Data Grid for Excel, CSV, or printing.

+ +## Basic usage + +The demo below shows how to add export triggers to a custom toolbar. + +{{"demo": "GridExportTrigger.js", "bg": "inline", "defaultCodeOpen": false}} + +## Anatomy + +```tsx +import { ExportPrint, ExportCsv, ExportExcel } from '@mui/x-data-grid'; + + + + +``` + +### Export Print + +`` is a button that triggers a print export. +It renders the `baseButton` slot. + +### Export CSV + +`` is a button that triggers a CSV export. +It renders the `baseButton` slot. + +### Export Excel + +`` is a button that triggers an Excel export. +It renders the `baseButton` slot. + +## Recipes + +Below are some ways the Export components can be used. + +### Toolbar export menu + +The demo below shows how to display export options within a menu on the toolbar. + +{{"demo": "GridExportMenu.js", "bg": "inline", "defaultCodeOpen": false}} + +## Custom elements + +Use the `render` prop to replace default elements. +See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example of custom Export buttons. + +## Accessibility + +### ARIA + +You must apply a text label or an `aria-label` attribute to the ``, `` and `` components. diff --git a/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.js b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.js new file mode 100644 index 0000000000000..2b2e0bd8e73bf --- /dev/null +++ b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + ToolbarButton, + FilterPanelTrigger, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import FilterListIcon from '@mui/icons-material/FilterList'; + +function CustomToolbar() { + return ( + + + }> + + + + + ); +} + +export default function GridFilterPanelTrigger() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx new file mode 100644 index 0000000000000..2b2e0bd8e73bf --- /dev/null +++ b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + ToolbarButton, + FilterPanelTrigger, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import Tooltip from '@mui/material/Tooltip'; +import FilterListIcon from '@mui/icons-material/FilterList'; + +function CustomToolbar() { + return ( + + + }> + + + + + ); +} + +export default function GridFilterPanelTrigger() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx.preview b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx.preview new file mode 100644 index 0000000000000..7f29998cef137 --- /dev/null +++ b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/components/filter-panel/filter-panel.md b/docs/data/data-grid/components/filter-panel/filter-panel.md new file mode 100644 index 0000000000000..3a5d7eb78b149 --- /dev/null +++ b/docs/data/data-grid/components/filter-panel/filter-panel.md @@ -0,0 +1,53 @@ +--- +title: React Data Grid - Filter Panel component +productId: x-data-grid +components: FilterPanelTrigger +packageName: '@mui/x-data-grid' +githubLabel: 'component: data grid' +--- + +# Data Grid - Filter Panel 🚧 + +

Customize the Data Grid's filter panel.

+ +:::warning +This component is incomplete. + +Currently, the Filter Panel Trigger is the only part of the Filter Panel component available. +Future versions of the Filter Panel component will make it possible to compose each of its parts to create a custom filter panel. + +In the meantime, it's still possible to deeply customize the panel's subcomponents using custom slots. +See [Filter customization—Custom filter panel](/x/react-data-grid/filtering/customization/#custom-filter-panel) +for more details. + +::: + +## Basic usage + +The demo below shows how to add a filter panel trigger to a custom toolbar. + +{{"demo": "GridFilterPanelTrigger.js", "bg": "inline", "defaultCodeOpen": false}} + +## Anatomy + +```tsx +import { FilterPanelTrigger } from '@mui/x-data-grid'; + +; +``` + +### Filter Panel Trigger + +`` is a button that opens and closes the filter panel. +It renders the `baseButton` slot. + +## Custom elements + +Use the `render` prop to replace default elements. +See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example of a custom Filter Panel Trigger. + +## Accessibility + +### ARIA + +You must apply a text label or an `aria-label` attribute to the ``. diff --git a/docs/data/data-grid/components/quick-filter/GridQuickFilter.js b/docs/data/data-grid/components/quick-filter/GridQuickFilter.js new file mode 100644 index 0000000000000..a5318ad3ede9d --- /dev/null +++ b/docs/data/data-grid/components/quick-filter/GridQuickFilter.js @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + QuickFilter, + QuickFilterControl, + QuickFilterClear, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import InputAdornment from '@mui/material/InputAdornment'; +import TextField from '@mui/material/TextField'; +import CancelIcon from '@mui/icons-material/Cancel'; +import SearchIcon from '@mui/icons-material/Search'; + +function CustomToolbar() { + return ( + + + ( + + + + ), + endAdornment: other.value ? ( + + + + + + ) : null, + }} + /> + )} + /> + + + ); +} + +export default function GridQuickFilter() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx b/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx new file mode 100644 index 0000000000000..a5318ad3ede9d --- /dev/null +++ b/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { + DataGrid, + Toolbar, + QuickFilter, + QuickFilterControl, + QuickFilterClear, +} from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import InputAdornment from '@mui/material/InputAdornment'; +import TextField from '@mui/material/TextField'; +import CancelIcon from '@mui/icons-material/Cancel'; +import SearchIcon from '@mui/icons-material/Search'; + +function CustomToolbar() { + return ( + + + ( + + + + ), + endAdornment: other.value ? ( + + + + + + ) : null, + }} + /> + )} + /> + + + ); +} + +export default function GridQuickFilter() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 10, + maxColumns: 10, + }); + + return ( +
+ +
+ ); +} diff --git a/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx.preview b/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx.preview new file mode 100644 index 0000000000000..7f29998cef137 --- /dev/null +++ b/docs/data/data-grid/components/quick-filter/GridQuickFilter.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/components/quick-filter/quick-filter.md b/docs/data/data-grid/components/quick-filter/quick-filter.md new file mode 100644 index 0000000000000..987b4fccc847f --- /dev/null +++ b/docs/data/data-grid/components/quick-filter/quick-filter.md @@ -0,0 +1,61 @@ +--- +title: React Data Grid - Quick Filter component +productId: x-data-grid +components: QuickFilter, QuickFilterControl, QuickFilterClear +packageName: '@mui/x-data-grid' +githubLabel: 'component: data grid' +--- + +# Data Grid - Quick Filter + +

Provide users with a search field to filter data in the Data Grid.

+ +## Basic usage + +The demo below shows the default quick filter configuration. + +{{"demo": "GridQuickFilter.js", "bg": "inline", "defaultCodeOpen": false}} + +## Anatomy + +```tsx +import { QuickFilter, QuickFilterControl, QuickFilterClear } from '@mui/x-data-grid'; + + + + +; +``` + +### Quick Filter + +`` is the top level component that provides context to child components. +It does not render any DOM elements. + +### Quick Filter Control + +`` takes user input and filters row data. +It renders the `baseTextField` slot. + +### Quick Filter Clear + +`` is a button that resets the filter value. +It renders the `baseIconButton` slot. + +## Custom elements + +Use the `render` prop to replace default elements. +See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example of a custom Quick Filter. + +## Accessibility + +### ARIA + +- You must render a `