From e62c845553115c289fdfb850bf95850f5f8057f7 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 13 Apr 2026 19:25:55 +0200 Subject: [PATCH 1/5] [POC] Wire @mui/internal-docs-infra types pipeline for Gauge page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Experimental port of base-ui PR #2932's approach to mui-x: - Per-page `types..ts` entry colocated with the API page. Calls `createTypes(import.meta.url, Gauge)` which the webpack loader `@mui/internal-docs-infra/pipeline/loadPrecomputedTypes` rewrites at build time with fully-resolved component type metadata. - `docs/src/modules/api-docs/createTypes.tsx` factory binds mui-x's placeholder `ReferenceTable` to the shared docs-infra pipeline via `createTypesFactory` / `createMultipleTypesFactory`. - `docs/src/modules/api-docs/ReferenceTable.tsx` — minimal POC renderer; not styled to match ApiPage yet, just dumps props to a ``. - `docs/next.config.ts` — webpack rule matching `docs/pages/x/api/**/types.*.ts` and piping through `loadPrecomputedTypes` after the default babel loader. - `docs/pages/x/api/charts/gauge.js` — swapped out for a thin wrapper that renders `` instead of reading `gauge.json`. - `tsconfig.json` — `extends` changed from `@mui/monorepo/tsconfig.json` to `./node_modules/@mui/monorepo/tsconfig.json`. The docs-infra loader's extends resolver uses `path.resolve(projectPath, raw.extends)` and can't handle node_modules package specifiers (upstream bug). Results (local `pnpm dev`): - Gauge page compiles in ~8s on cold load, ~140ms on subsequent reloads. - `createMultipleTypes` form didn't populate `type.props` for a single non-namespace component — had to drop to `createTypes` (singular). - 22 Gauge props resolved (value, cornerRadius, startAngle, endAngle, width, height, sx, classes, etc.) and rendered in the POC table. Known limitations (POC scope, deliberately out of scope): - DataGrid is too large: extraction took ~99s before hitting a wasm RuntimeError / memory-access-out-of-bounds. TS Language Service can't handle its full inheritance chain at this size. - Events, selectors, interface pages, exports, grid-api: untouched. - ReferenceTable is a placeholder — no styling, no slot/class sections, no mdx/description rendering beyond raw ReactNode. - `types.*.md` sidecar files are generated by the loader and currently committed; should move to .gitignore once the approach is validated. - Translation JSON files are unused by the new page. --- docs/next.config.ts | 15 + docs/pages/x/api/charts/gauge.js | 23 +- docs/pages/x/api/charts/types.gauge.md | 364 +++++++++++++++++++ docs/pages/x/api/charts/types.gauge.ts | 7 + docs/src/modules/api-docs/ReferenceTable.tsx | 85 +++++ docs/src/modules/api-docs/createTypes.tsx | 33 ++ tsconfig.json | 2 +- 7 files changed, 512 insertions(+), 17 deletions(-) create mode 100644 docs/pages/x/api/charts/types.gauge.md create mode 100644 docs/pages/x/api/charts/types.gauge.ts create mode 100644 docs/src/modules/api-docs/ReferenceTable.tsx create mode 100644 docs/src/modules/api-docs/createTypes.tsx diff --git a/docs/next.config.ts b/docs/next.config.ts index 7a5ccb7bd699a..12ec3569feea4 100644 --- a/docs/next.config.ts +++ b/docs/next.config.ts @@ -5,6 +5,7 @@ import * as semver from 'semver'; import { createRequire } from 'module'; import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { withDeploymentConfig } from '@mui/internal-docs-infra/withDocsInfra'; +import type { LoaderOptions as PrecomputedTypesLoaderOptions } from '@mui/internal-docs-infra/pipeline/loadPrecomputedTypes'; import { findPages } from './src/modules/utils/find'; import { LANGUAGES, LANGUAGES_SSR, LANGUAGES_IGNORE_PAGES, LANGUAGES_IN_PROGRESS } from './config'; import { SOURCE_CODE_REPO, SOURCE_GITHUB_BRANCH } from './constants'; @@ -166,6 +167,20 @@ export default withDeploymentConfig({ include: [/(@mui[\\/]monorepo)$/, /(@mui[\\/]monorepo)[\\/](?!.*node_modules)/], use: options.defaultLoaders.babel, }, + // New types pipeline (POC) — intercept `types.*.ts` next to API pages and + // precompute props metadata at build time via the docs-infra loader. + { + test: /[/\\]docs[/\\]pages[/\\]x[/\\]api[/\\].+[/\\]types\..*\.ts$/, + use: [ + options.defaultLoaders.babel, + { + loader: '@mui/internal-docs-infra/pipeline/loadPrecomputedTypes', + options: { + socketDir: '.next/docs-infra', + } satisfies PrecomputedTypesLoaderOptions, + }, + ], + }, { test: /\.(ts|tsx)$/, loader: 'string-replace-loader', diff --git a/docs/pages/x/api/charts/gauge.js b/docs/pages/x/api/charts/gauge.js index 5d6787746d9c8..e174c4166b571 100644 --- a/docs/pages/x/api/charts/gauge.js +++ b/docs/pages/x/api/charts/gauge.js @@ -1,20 +1,11 @@ import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './gauge.json'; +import { TypesGauge } from './types.gauge'; -export default function Page(props) { - const { descriptions } = props; - return ; -} - -export async function getStaticProps() { - const req = require.context( - 'docsx/translations/api-docs/charts/gauge', - false, - /\.\/gauge.*\.json$/, +export default function Page() { + return ( +
+

Gauge — new types pipeline POC

+ +
); - const descriptions = mapApiPageTranslations(req); - - return { props: { descriptions } }; } diff --git a/docs/pages/x/api/charts/types.gauge.md b/docs/pages/x/api/charts/types.gauge.md new file mode 100644 index 0000000000000..d0f5b4bb69987 --- /dev/null +++ b/docs/pages/x/api/charts/types.gauge.md @@ -0,0 +1,364 @@ +# Charts + +[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/charts/types.gauge.md' + +## API Reference + +### Gauge + +**Gauge Props:** + +| Prop | Type | Default | Description | +| :------------ | :------------------------------------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| value | `number \| null` | - | The value of the gauge. Set to `null` to not display a value. | +| classes | `Partial` | - | - | +| cornerRadius | `number \| string` | `0` | The radius applied to arc corners (similar to border radius). Set it to '50%' to get rounded arc. | +| cx | `number \| string` | - | The x coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the width the drawing area. | +| cy | `number \| string` | - | The y coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the height the drawing area. | +| desc | `string` | - | The description of the chart. Used to provide an accessible description for the chart. | +| endAngle | `number` | `360` | The end angle (deg). | +| height | `number` | - | The height of the chart in px. If not defined, it takes the height of the parent element. | +| innerRadius | `number \| string` | `'80%'` | The radius between circle center and the beginning of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area. | +| margin | `Partial \| number` | - | The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. | +| outerRadius | `number \| string` | `'100%'` | The radius between circle center and the end of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area. | +| skipAnimation | `boolean` | - | If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting. | +| startAngle | `number` | `0` | The start angle (deg). | +| sx | `SxProps` | - | - | +| text | `string \| ((params: GaugeFormatterParams) => string \| null)` | - | - | +| title | `string` | - | The title of the chart. Used to provide an accessible label for the chart. | +| valueMax | `number` | `100` | The maximal value of the gauge. | +| valueMin | `number` | `0` | The minimal value of the gauge. | +| width | `number` | - | The width of the chart in px. If not defined, it takes the width of the parent element. | +| id | `string` | - | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | +| children | `React.ReactNode` | - | - | +| className | `string` | - | - | + +### GaugeContainer + +**GaugeContainer Props:** + +| Prop | Type | Default | Description | +| :------------ | :------------------------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| value | `number \| null` | - | The value of the gauge. Set to `null` to not display a value. | +| cornerRadius | `number \| string` | `0` | The radius applied to arc corners (similar to border radius). Set it to '50%' to get rounded arc. | +| cx | `number \| string` | - | The x coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the width the drawing area. | +| cy | `number \| string` | - | The y coordinate of the arc center. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the height the drawing area. | +| desc | `string` | - | The description of the chart. Used to provide an accessible description for the chart. | +| endAngle | `number` | `360` | The end angle (deg). | +| height | `number` | - | The height of the chart in px. If not defined, it takes the height of the parent element. | +| innerRadius | `number \| string` | `'80%'` | The radius between circle center and the beginning of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area. | +| margin | `Partial \| number` | - | The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. | +| outerRadius | `number \| string` | `'100%'` | The radius between circle center and the end of the arc. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the maximal radius that fit into the drawing area. | +| skipAnimation | `boolean` | - | If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting. | +| startAngle | `number` | `0` | The start angle (deg). | +| sx | `SxProps` | - | - | +| title | `string` | - | The title of the chart. Used to provide an accessible label for the chart. | +| valueMax | `number` | `100` | The maximal value of the gauge. | +| valueMin | `number` | `0` | The minimal value of the gauge. | +| width | `number` | - | The width of the chart in px. If not defined, it takes the width of the parent element. | +| id | `string` | - | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | +| children | `React.ReactNode` | - | - | +| className | `string` | - | - | + +### GaugeReferenceArc + +### GaugeValueArc + +**GaugeValueArc Props:** + +| Prop | Type | Default | Description | +| :------------ | :-------- | :------ | :---------- | +| skipAnimation | `boolean` | - | - | + +### GaugeValueText + +**GaugeValueText Props:** + +| Prop | Type | Default | Description | +| :--------------- | :------------------------------------------------------------- | :------ | :------------------------------------- | +| lineHeight | `number` | - | Height of a text line (in `em`). | +| needsComputation | `boolean` | `false` | If `true`, the line width is computed. | +| ownerState | `any` | - | - | +| text | `string \| ((params: GaugeFormatterParams) => string \| null)` | - | - | +| style | `ChartsTextStyle` | - | Style applied to text elements. | + +### useGaugeState + +**useGaugeState Return Value:** + +```tsx +type ReturnValue = { + value: number | null; + valueMin: number; + valueMax: number; + startAngle: number; + endAngle: number; + innerRadius: number; + outerRadius: number; + cornerRadius: number; + cx: number; + cy: number; + maxRadius: number; + valueAngle: number | null; +}; +``` + +## Additional Types + +### gaugeClasses + +```typescript +type gaugeClasses = { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the arc displaying the value. */ + valueArc: string; + /** Styles applied to the arc displaying the range of available values. */ + referenceArc: string; + /** Styles applied to the value text. */ + valueText: string; +}; +``` + +### GaugeClasses + +```typescript +type GaugeClasses = { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the arc displaying the value. */ + valueArc: string; + /** Styles applied to the arc displaying the range of available values. */ + referenceArc: string; + /** Styles applied to the value text. */ + valueText: string; +}; +``` + +### GaugeClassKey + +```typescript +type GaugeClassKey = 'root' | 'valueArc' | 'referenceArc' | 'valueText'; +``` + +### GaugeContainerProps + +```typescript +type GaugeContainerProps = { + children?: React.ReactNode; + className?: string; + /** + * The title of the chart. + * Used to provide an accessible label for the chart. + */ + title?: string; + /** + * The description of the chart. + * Used to provide an accessible description for the chart. + */ + desc?: string; + sx?: SxProps; + /** + * This prop is used to help implement the accessibility logic. + * If you don't provide this prop. It falls back to a randomly generated id. + */ + id?: string; + /** The height of the chart in px. If not defined, it takes the height of the parent element. */ + height?: number; + /** The width of the chart in px. If not defined, it takes the width of the parent element. */ + width?: number; + /** + * The margin between the SVG and the drawing area. + * It's used for leaving some space for extra information such as the x- and y-axis or legend. + * + * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. + */ + margin?: Partial | number; + /** + * If `true`, animations are skipped. + * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting. + */ + skipAnimation?: boolean; + /** + * The value of the gauge. + * Set to `null` to not display a value. + */ + value?: number | null; + /** + * The minimal value of the gauge. + * @default 0 + */ + valueMin?: number; + /** + * The maximal value of the gauge. + * @default 100 + */ + valueMax?: number; + /** + * The start angle (deg). + * @default 0 + */ + startAngle?: number; + /** + * The end angle (deg). + * @default 360 + */ + endAngle?: number; + /** + * The radius between circle center and the beginning of the arc. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the maximal radius that fit into the drawing area. + * @default '80%' + */ + innerRadius?: number | string; + /** + * The radius between circle center and the end of the arc. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the maximal radius that fit into the drawing area. + * @default '100%' + */ + outerRadius?: number | string; + /** + * The radius applied to arc corners (similar to border radius). + * Set it to '50%' to get rounded arc. + * @default 0 + */ + cornerRadius?: number | string; + /** + * The x coordinate of the arc center. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the width the drawing area. + */ + cx?: number | string; + /** + * The y coordinate of the arc center. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the height the drawing area. + */ + cy?: number | string; +}; +``` + +### GaugeFormatterParams + +```typescript +type GaugeFormatterParams = { value: number | null; valueMin: number; valueMax: number }; +``` + +### GaugeProps + +```typescript +type GaugeProps = { + classes?: Partial; + children?: React.ReactNode; + className?: string; + /** + * The title of the chart. + * Used to provide an accessible label for the chart. + */ + title?: string; + /** + * The description of the chart. + * Used to provide an accessible description for the chart. + */ + desc?: string; + sx?: SxProps; + /** + * This prop is used to help implement the accessibility logic. + * If you don't provide this prop. It falls back to a randomly generated id. + */ + id?: string; + /** The height of the chart in px. If not defined, it takes the height of the parent element. */ + height?: number; + /** The width of the chart in px. If not defined, it takes the width of the parent element. */ + width?: number; + /** + * The margin between the SVG and the drawing area. + * It's used for leaving some space for extra information such as the x- and y-axis or legend. + * + * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`. + */ + margin?: Partial | number; + /** + * If `true`, animations are skipped. + * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting. + */ + skipAnimation?: boolean; + /** + * The value of the gauge. + * Set to `null` to not display a value. + */ + value?: number | null; + /** + * The minimal value of the gauge. + * @default 0 + */ + valueMin?: number; + /** + * The maximal value of the gauge. + * @default 100 + */ + valueMax?: number; + /** + * The start angle (deg). + * @default 0 + */ + startAngle?: number; + /** + * The end angle (deg). + * @default 360 + */ + endAngle?: number; + /** + * The radius between circle center and the beginning of the arc. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the maximal radius that fit into the drawing area. + * @default '80%' + */ + innerRadius?: number | string; + /** + * The radius between circle center and the end of the arc. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the maximal radius that fit into the drawing area. + * @default '100%' + */ + outerRadius?: number | string; + /** + * The radius applied to arc corners (similar to border radius). + * Set it to '50%' to get rounded arc. + * @default 0 + */ + cornerRadius?: number | string; + /** + * The x coordinate of the arc center. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the width the drawing area. + */ + cx?: number | string; + /** + * The y coordinate of the arc center. + * Can be a number (in px) or a string with a percentage such as '50%'. + * The '100%' is the height the drawing area. + */ + cy?: number | string; + text?: string | ((params: GaugeFormatterParams) => string | null); +}; +``` + +### GaugeValueTextProps + +```typescript +type GaugeValueTextProps = { + text?: string | ((params: GaugeFormatterParams) => string | null); + /** Style applied to text elements. */ + style?: ChartsTextStyle; + /** Height of a text line (in `em`). */ + lineHeight?: number; + ownerState?: any; + /** + * If `true`, the line width is computed. + * @default false + */ + needsComputation?: boolean; +}; +``` diff --git a/docs/pages/x/api/charts/types.gauge.ts b/docs/pages/x/api/charts/types.gauge.ts new file mode 100644 index 0000000000000..1125003d5ab6b --- /dev/null +++ b/docs/pages/x/api/charts/types.gauge.ts @@ -0,0 +1,7 @@ +// POC entry for the new types pipeline. At build time the loader +// `@mui/internal-docs-infra/pipeline/loadPrecomputedTypes` rewrites the +// `createTypes` call below with fully resolved type metadata. +import { Gauge } from '@mui/x-charts/Gauge'; +import { createTypes } from 'docsx/src/modules/api-docs/createTypes'; + +export const TypesGauge = createTypes(import.meta.url, Gauge); diff --git a/docs/src/modules/api-docs/ReferenceTable.tsx b/docs/src/modules/api-docs/ReferenceTable.tsx new file mode 100644 index 0000000000000..157c9c88f29a3 --- /dev/null +++ b/docs/src/modules/api-docs/ReferenceTable.tsx @@ -0,0 +1,85 @@ +/** + * Minimal API reference table used by the new `@mui/internal-docs-infra` types pipeline. + * + * This is a POC implementation. It consumes the enhanced type metadata emitted by the + * loader (`loadPrecomputedTypes`) and renders a simple `
` of props. + * + * Real version should reuse the existing ApiPage styling / section layout, but for the + * spike we only need the prop table to render. + */ +import * as React from 'react'; +import type { TypesTableProps } from '@mui/internal-docs-infra/useTypes'; + +export function ReferenceTable(props: TypesTableProps<{}>) { + const { type, additionalTypes } = props; + + if (!type) { + if (additionalTypes && additionalTypes.length > 0) { + return ( +
+ {additionalTypes.map((meta, i) => ( + + ))} +
+ ); + } + return null; + } + + // type is a wrapper of shape { type, name, data, slug }. The real metadata lives + // in `type.data` (shape depends on `type.type` — 'component', 'hook', 'function', ...). + const componentMeta = (type as any).data ?? (type as any); + const propsMap: Record = componentMeta.props ?? {}; + const propNames = Object.keys(propsMap).sort(); + + return ( +
+ {componentMeta.description ?
{componentMeta.description}
: null} + {propNames.length > 0 ? ( +
+ + + + + + + + + + {propNames.map((name) => { + const p = propsMap[name]; + return ( + + + + + + + ); + })} + +
NameTypeDefaultDescription
{name}{p.optional === false ? '*' : ''}{p.shortType ?? p.type}{p.default ?? '-'}{p.description}
+ ) : ( +

No props detected.

+ )} + {additionalTypes && additionalTypes.length > 0 ? ( +
+

Additional types

+ {additionalTypes.map((meta, i) => ( + + ))} +
+ ) : null} + + ); +} + +function AdditionalTypeBlock({ meta }: { meta: any }) { + return ( +
+

{meta.name}

+ {meta.type ? 
{meta.type}
: null} + {meta.description ?
{meta.description}
: null} +
+ ); +} diff --git a/docs/src/modules/api-docs/createTypes.tsx b/docs/src/modules/api-docs/createTypes.tsx new file mode 100644 index 0000000000000..24bf8dd798953 --- /dev/null +++ b/docs/src/modules/api-docs/createTypes.tsx @@ -0,0 +1,33 @@ +/** + * Factory wrappers around `@mui/internal-docs-infra/abstractCreateTypes` — bind mui-x's + * own reference-table UI to the shared docs-infra pipeline. + * + * Consumers (per-component `types.ts` files colocated with doc pages) call + * `createMultipleTypes(import.meta.url, { Component })`. At build time the webpack loader + * `@mui/internal-docs-infra/pipeline/loadPrecomputedTypes` rewrites that call with a + * precomputed `meta` argument describing the component's resolved types. + */ +import * as React from 'react'; +import { + createTypesFactory, + createMultipleTypesFactory, +} from '@mui/internal-docs-infra/abstractCreateTypes'; +import { ReferenceTable } from './ReferenceTable'; + +function TypePre(props: { children: React.ReactNode }) { + return 
{props.children}
; +} + +function InlineCode(props: { children?: React.ReactNode; className?: string }) { + return {props.children}; +} + +const factoryOptions = { + TypesTable: ReferenceTable, + TypePre, + ShortTypeCode: InlineCode, + DefaultCode: InlineCode, +}; + +export const createTypes = createTypesFactory(factoryOptions); +export const createMultipleTypes = createMultipleTypesFactory(factoryOptions); diff --git a/tsconfig.json b/tsconfig.json index 98e51581654fb..d62845e3f4325 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "@mui/monorepo/tsconfig.json", + "extends": "./node_modules/@mui/monorepo/tsconfig.json", "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "moduleResolution": "bundler", From efe32b0bf9bcd6c40fcb54a990934ad81277c535 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 13 Apr 2026 19:54:26 +0200 Subject: [PATCH 2/5] =?UTF-8?q?Flatten=20root=20tsconfig=20=E2=80=94=20dro?= =?UTF-8?q?p=20@mui/monorepo=20extends?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Inline the compilerOptions previously inherited via `extends: "@mui/monorepo/tsconfig.json"` so the root tsconfig is self-contained. Unblocks `@mui/internal-docs-infra/pipeline/loadPrecomputedTypes`, whose `loadTypescriptConfig` walk resolves `extends` as a literal relative path and can't handle node_modules package specifiers. Inlined from monorepo tsconfig: target, forceConsistentCasingInFileNames, noEmit, module, experimentalDecorators, allowSyntheticDefaultImports, noErrorTruncation. Not inlined (already explicitly set by mui-x): lib, jsx, strict, allowJs, moduleResolution. Dropped entirely: the monorepo's `paths` map for `@mui/material`, `@mui/lab`, `@mui/system`, etc. — mui-x installs those as real packages so TS resolves them via node_modules without mapping. Verified: `tsc` passes cleanly for x-charts, x-data-grid, x-date-pickers, x-tree-view. `pnpm docs:api`-equivalent Gauge POC still resolves 22 props via the new types pipeline in ~8s cold / ~140ms warm. --- tsconfig.json | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index d62845e3f4325..33f4609f5388d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,18 @@ { - "extends": "./node_modules/@mui/monorepo/tsconfig.json", + // Previously: "extends": "@mui/monorepo/tsconfig.json". Flattened so that tools + // which resolve `extends` as a relative path (notably the `loadTypescriptConfig` + // walk inside `@mui/internal-docs-infra/pipeline/loadPrecomputedTypes`) don't + // choke on the node_modules package specifier. "compilerOptions": { + // --- Inlined from @mui/monorepo/tsconfig.json --- + "target": "es2022", + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "module": "preserve", + "experimentalDecorators": true, + "allowSyntheticDefaultImports": true, + "noErrorTruncation": false, + // --- mui-x-specific overrides --- "lib": ["dom", "dom.iterable", "esnext"], "moduleResolution": "bundler", // Already tested with eslint From b5b84016bd9bbce67eb861411bed14b9a724821f Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 13 Apr 2026 20:44:47 +0200 Subject: [PATCH 3/5] Diagnose docs-infra OOM on DataGrid + file upstream memoization fix MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a DataGrid `types.data-grid.ts` entry as a POC repro and a diagnosis writeup at `scripts/docs-infra-oom-repro.md`. Root cause: `formatInlineTypeAsHast` in `@mui/internal-docs-infra/pipeline/loadServerTypes/typeHighlighting.mjs` is not memoized. For DataGrid, instrumentation showed: - 1947 total calls - 5 unique input strings - each call re-runs Oniguruma's TextMate regex VM on the same text Oniguruma runs inside a fixed-size WASM linear memory buffer. Repeated allocations on identical inputs fragment the heap until it overruns with `RuntimeError: memory access out of bounds` at wasm://wasm/001ce0fe — which is the vscode-oniguruma wasm blob used by @wooorm/starry-night, not tsgo as first suspected. Upstream fix filed as mui-public branch `jcquintas/fix-highlightTypes-memoization` (commit e60dafa2). Wraps formatInlineTypeAsHast with a process-lifetime `Map` keyed on `(unionPrintWidth, typeText)` plus a structuredClone on read so downstream mutations don't poison the cache. Adds 4 regression tests under `typeHighlighting > memoization`. Verified end-to-end with the same patch applied locally to mui-x's installed node_modules copy: /x/api/data-grid/data-grid 63s (was: crash after ~100s) /x/api/charts/gauge 8s cold / 140ms warm (unchanged) Separate issues surfaced while investigating (filed/to-file separately): 1. typescript-api-extractor/dist/parsers/typeResolver.js:295 silently downgrades TypeFlag.TemplateLiteral types to `any`. Correctness bug. 2. DataGrid's extracted shape is wrong even with the OOM fixed. Only surfaces 1 prop (`pagination`) and ~40 `BasePropsOverrides` augmentation interfaces. The generic ForwardRefExoticComponent signature isn't being instantiated to its resolved prop type. 3. loadTypescriptConfig.mts `extends` resolver — already worked around in commit efe32b0bf9 (root tsconfig flattening). --- docs/pages/x/api/data-grid/data-grid.js | 24 +- docs/pages/x/api/data-grid/types.data-grid.md | 15781 ++++++++++++++++ docs/pages/x/api/data-grid/types.data-grid.ts | 8 + scripts/docs-infra-oom-repro.md | 118 + 4 files changed, 15914 insertions(+), 17 deletions(-) create mode 100644 docs/pages/x/api/data-grid/types.data-grid.md create mode 100644 docs/pages/x/api/data-grid/types.data-grid.ts create mode 100644 scripts/docs-infra-oom-repro.md diff --git a/docs/pages/x/api/data-grid/data-grid.js b/docs/pages/x/api/data-grid/data-grid.js index c422a7a5d7421..68e729c2ba9b7 100644 --- a/docs/pages/x/api/data-grid/data-grid.js +++ b/docs/pages/x/api/data-grid/data-grid.js @@ -1,21 +1,11 @@ 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'; +import { TypesDataGrid } from './types.data-grid'; -export default function Page(props) { - const { descriptions } = props; - return ; -} - -export async function getStaticProps() { - const req = require.context( - 'docsx/translations/api-docs/data-grid/data-grid', - false, - /\.\/data-grid.*\.json$/, +export default function Page() { + return ( +
+

DataGrid — new types pipeline POC (diagnostic)

+ +
); - const descriptions = mapApiPageTranslations(req); - - return { props: { descriptions } }; } diff --git a/docs/pages/x/api/data-grid/types.data-grid.md b/docs/pages/x/api/data-grid/types.data-grid.md new file mode 100644 index 0000000000000..ac7442ae6a2fb --- /dev/null +++ b/docs/pages/x/api/data-grid/types.data-grid.md @@ -0,0 +1,15781 @@ +# Data Grid + +[//]: types.ts '<-- Autogenerated By (do not edit the following markdown directly), run: pnpm docs:validate pages/x/api/data-grid/types.data-grid.md' + +## API Reference + +### checkGridRowIdIsValid + +A helper function to check if the id provided is valid. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :------------------ | :-------------------------------------- | :-------------------------------------------------- | :------------------------------------------------ | +| id | `GridRowId` | - | Id as \[\[GridRowId]]. | +| row | `GridRowModel \| Partial` | - | Row as \[\[GridRowModel]]. | +| detailErrorMessage? | `string` | `"A row was provided without id in the rows prop:"` | A custom error message to display for invalid IDs | + +**Return Value:** + +```tsx +type ReturnValue = void; +``` + +### createRowSelectionManager + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------- | :------ | :---------- | +| model | `GridRowSelectionModel` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = RowSelectionManager; +``` + +### DataGrid + +Features: + +- [DataGrid](https://mui.com/x/react-data-grid/features/) + +API: + +- [DataGrid API](https://mui.com/x/api/data-grid/data-grid/) + +**DataGrid Props:** + +| Prop | Type | Default | Description | +| :--------- | :----- | :------ | :---------- | +| pagination | `true` | - | - | + +### GetApplyFilterFn + +**Parameters:** + +| Parameter | Type | Default | Description | +| :--------- | :------------------------------------ | :------ | :---------- | +| filterItem | `GridFilterItem` | - | - | +| column | `GridColDef` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = ApplyFilterFn | null; +``` + +### GetApplyQuickFilterFn + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :----------------------------------------- | :------ | :---------- | +| value | `any` | - | - | +| colDef | `GridStateColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridApplyQuickFilter | null; +``` + +### getDataGridUtilityClass + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------- | :------ | :---------- | +| slot | `string` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = string; +``` + +### getDefaultGridFilterModel + +**Return Value:** + +```tsx +type ReturnValue = GridFilterModel; +``` + +### getGridBooleanOperators + +**Return Value:** + +```tsx +type ReturnValue = GridFilterOperator[]; +``` + +### getGridDateOperators + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :-------- | :------ | :---------- | +| showTime? | `boolean` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridFilterOperator[]; +``` + +### getGridDefaultColumnTypes + +**Return Value:** + +```tsx +type ReturnValue = GridColumnTypesRecord; +``` + +### getGridNumericOperators + +**Return Value:** + +```tsx +type ReturnValue = GridFilterOperator< + any, + string | number | null, + any, + { + item: GridFilterItem; + applyValue: (value: GridFilterItem) => void; + apiRef: RefObject; + inputRef?: React.Ref; + focusElementRef?: React.Ref; + headerFilterMenu?: React.ReactNode; + clearButton?: React.ReactNode; + isFilterActive?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + tabIndex?: number; + disabled?: boolean; + className?: string; + slotProps?: { root: GridFilterInputSlotProps }; + type?: 'number'; + } +>[]; +``` + +### getGridNumericQuickFilterFn + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------------------------------- | :------ | :---------- | +| value | `any` | - | - | +| colDef | `GridStateColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridApplyQuickFilter | null; +``` + +### getGridSingleSelectOperators + +**Return Value:** + +```tsx +type ReturnValue = GridFilterOperator[]; +``` + +### getGridStringOperators + +**Parameters:** + +| Parameter | Type | Default | Description | +| :----------- | :-------- | :------ | :---------- | +| disableTrim? | `boolean` | `false` | - | + +**Return Value:** + +```tsx +type ReturnValue = GridFilterOperator< + any, + string | number | null, + any, + GridFilterInputValueProps +>[]; +``` + +### getGridStringQuickFilterFn + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------- | :------ | :---------- | +| value | `any` | - | - | +| colDef | `GridStateColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridApplyQuickFilter | null; +``` + +### GridActionsCell + +**GridActionsCell Props:** + +| Prop | Type | Default | Description | +| :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| value | `V` | - | The cell value. If the column has `valueGetter`, use `params.row` to directly access the fields. | +| api | `GridApiCommunity` | - | - | +| cellMode\* | `GridCellMode` | - | The mode of the cell. | +| colDef\* | `GridStateColDef` | - | The column of the row that the current cell belongs to. | +| field\* | `string` | - | The column field of the cell that triggered the event. | +| formattedValue | `F` | - | The cell value formatted with the column valueFormatter. | +| hasFocus\* | `boolean` | - | If true, the cell is the active element. | +| isEditable | `boolean` | - | If true, the cell is editable. | +| onMenuClose | `((params: GridRowParams, event?: React.MouseEvent \| React.KeyboardEvent \| MouseEvent \| TouchEvent) => boolean)` | - | Callback to fire before the menu gets closed. Use this callback to prevent the menu from closing. | +| onMenuOpen | `((params: GridRowParams, event: React.MouseEvent) => boolean)` | - | Callback to fire before the menu gets opened. Use this callback to prevent the menu from opening. | +| position | `MenuPosition` | - | - | +| row\* | `GridValidRowModel` | - | The row model of the row that the current cell belongs to. | +| rowNode\* | `GridTreeNodeWithRender` | - | The node of the row that the current cell belongs to. | +| suppressChildrenValidation | `boolean` | `false` | If true, the children passed to the component will not be validated. If false, only `GridActionsCellItem` and `React.Fragment` are allowed as children. Only use this prop if you know what you are doing. | +| tabIndex\* | `0 \| -1` | - | the tabIndex value. | +| id\* | `GridRowId` | - | The grid row id. | +| children\* | `React.ReactNode` | - | - | + +### GridAddIcon + +**GridAddIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridArrowDownwardIcon + +**GridArrowDownwardIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridArrowUpwardIcon + +**GridArrowUpwardIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridBody + +**GridBody Props:** + +| Prop | Type | Default | Description | +| :------- | :---------------- | :------ | :---------- | +| children | `React.ReactNode` | - | - | + +### GridCellClassFn + +A function used to process cellClassName params. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------------ | :------ | :---------- | +| params | `GridCellParams` | - | - | + +**Return Value:** + +The class name to be added to the cell. + +```tsx +type ReturnValue = string; +``` + +### GridCheckCircleIcon + +**GridCheckCircleIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridCheckIcon + +**GridCheckIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridClearIcon + +**GridClearIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridCloseIcon + +**GridCloseIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridColSpanFn + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------ | :------ | :---------- | +| value | `V` | - | - | +| row | `GridValidRowModel` | - | - | +| column | `GridColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number | undefined; +``` + +### gridColumnDefinitionsSelector + +Get an array of column definitions in the order rendered on screen.. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridStateColDef[]; +``` + +### gridColumnFieldsSelector + +Get an array of column fields in the order rendered on screen. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = string[]; +``` + +### GridColumnGroupHeaderClassFn + +A function used to process headerClassName params. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------- | :------ | :---------- | +| params | `GridColumnGroupHeaderParams` | - | - | + +**Return Value:** + +The class name to be added to the column group header cell. + +```tsx +type ReturnValue = string; +``` + +### gridColumnGroupsHeaderMaxDepthSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridColumnGroupsHeaderStructureSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridGroupingStructure[][]; +``` + +### gridColumnGroupsLookupSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnGroupLookup; +``` + +### gridColumnGroupsUnwrappedModelSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = { [columnField: string]: string[] }; +``` + +### GridColumnHeaderClassFn + +A function used to process headerClassName params. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------------------- | :------ | :---------- | +| params | `GridColumnHeaderParams` | - | - | + +**Return Value:** + +The class name to be added to the column header cell. + +```tsx +type ReturnValue = string; +``` + +### GridColumnHeaderFilterIconButton + +**GridColumnHeaderFilterIconButton Props:** + +| Prop | Type | Default | Description | +| :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- | +| onClick | `((params: GridColumnHeaderParams, event: React.MouseEvent) => void)` | - | - | +| counter | `number` | - | - | +| field\* | `string` | - | - | + +### GridColumnHeaderItem + +**GridColumnHeaderItem Props:** + +| Prop | Type | Default | Description | +| :----------------- | :-------------------- | :------ | :---------- | +| colDef\* | `GridStateColDef` | - | - | +| colIndex\* | `number` | - | - | +| columnMenuOpen\* | `boolean` | - | - | +| disableReorder | `boolean` | - | - | +| filterItemsCounter | `number` | - | - | +| hasFocus | `boolean` | - | - | +| headerHeight\* | `number` | - | - | +| isDragging\* | `boolean` | - | - | +| isLast\* | `boolean` | - | - | +| isResizing\* | `boolean` | - | - | +| isSiblingFocused\* | `boolean` | - | - | +| pinnedOffset | `number` | - | - | +| pinnedPosition | `unknown` | - | - | +| separatorSide | `unknown` | - | - | +| showLeftBorder\* | `boolean` | - | - | +| showRightBorder\* | `boolean` | - | - | +| sortDirection\* | `GridSortDirection` | - | - | +| sortIndex | `number` | - | - | +| tabIndex\* | `0 \| -1` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridColumnHeaderMenu + +**GridColumnHeaderMenu Props:** + +| Prop | Type | Default | Description | +| :-------------------- | :-------------------------------------- | :------ | :---------- | +| open\* | `boolean` | - | - | +| ContentComponent\* | `React.JSXElementConstructor` | - | - | +| columnMenuButtonId | `string` | - | - | +| columnMenuId | `string` | - | - | +| contentComponentProps | `any` | - | - | +| field\* | `string` | - | - | +| onExited | `((node: HTMLElement \| null) => void)` | - | - | +| target\* | `HTMLElement \| null` | - | - | + +### GridColumnHeaderTitle + +**GridColumnHeaderTitle Props:** + +| Prop | Type | Default | Description | +| :------------ | :---------------- | :------ | :---------- | +| label\* | `string` | - | - | +| columnWidth\* | `number` | - | - | +| description | `React.ReactNode` | - | - | + +### GridColumnIcon + +**GridColumnIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridColumnLookupSelector + +Get the columns as a lookup (an object containing the field for keys and the definition for values). + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnLookup; +``` + +### GridColumnMenu + +**GridColumnMenu Props:** + +| Prop | Type | Default | Description | +| :--------- | :------------------------------------------------------------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| open\* | `boolean` | - | - | +| colDef\* | `GridColDef` | - | - | +| hideMenu\* | `((event: React.SyntheticEvent) => void)` | - | - | +| labelledby | `string` | - | - | +| slotProps | `{ [key: string]: GridColumnMenuSlotProps }` | - | Could be used to pass new props or override props specific to a column menu component e.g. `displayOrder` | +| slots | `{ [key: string]: React.JSXElementConstructor \| null }` | - | `slots` could be used to add new and (or) override useOnMount column menu items If you register a nee component you must pass it's `displayOrder` in `slotProps` or it will be placed in the end of the list | +| id | `string` | - | - | + +### GridColumnMenuColumnsItem + +**GridColumnMenuColumnsItem Props:** + +| Prop | Type | Default | Description | +| :-------- | :----------------------------------------------------- | :------ | :---------- | +| onClick\* | `((event: React.MouseEvent) => void)` | - | - | +| colDef\* | `GridColDef` | - | - | + +### GridColumnMenuFilterItem + +**GridColumnMenuFilterItem Props:** + +| Prop | Type | Default | Description | +| :-------- | :----------------------------------------------------- | :------ | :---------- | +| onClick\* | `((event: React.MouseEvent) => void)` | - | - | +| colDef\* | `GridColDef` | - | - | + +### GridColumnMenuHideItem + +**GridColumnMenuHideItem Props:** + +| Prop | Type | Default | Description | +| :-------- | :----------------------------------------------------- | :------ | :---------- | +| onClick\* | `((event: React.MouseEvent) => void)` | - | - | +| colDef\* | `GridColDef` | - | - | + +### GridColumnMenuManageItem + +**GridColumnMenuManageItem Props:** + +| Prop | Type | Default | Description | +| :-------- | :----------------------------------------------------- | :------ | :---------- | +| onClick\* | `((event: React.MouseEvent) => void)` | - | - | +| colDef\* | `GridColDef` | - | - | + +### gridColumnMenuSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnMenuState; +``` + +### GridColumnMenuSortItem + +**GridColumnMenuSortItem Props:** + +| Prop | Type | Default | Description | +| :-------- | :----------------------------------------------------- | :------ | :---------- | +| onClick\* | `((event: React.MouseEvent) => void)` | - | - | +| colDef\* | `GridColDef` | - | - | + +### gridColumnPositionsSelector + +Get the left position in pixel of each visible columns relative to the left of the first column. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number[]; +``` + +### gridColumnResizeSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnResizeState; +``` + +### GridColumnsManagement + +**GridColumnsManagement Props:** + +| Prop | Type | Default | Description | +| :-------------------- | :------------------------------------------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| autoFocusSearchField | `boolean` | `true` | If `true`, the column search field will be focused automatically. If `false`, the first column switch input will be focused automatically. This helps to avoid input keyboard panel to popup automatically on touch devices. | +| disableResetButton | `boolean` | `false` | If `true`, the `Reset` button will not be disabled | +| disableShowHideToggle | `boolean` | `false` | If `true`, the `Show/Hide all` toggle checkbox will not be displayed. | +| getTogglableColumns | `((columns: GridColDef[]) => string[])` | - | Returns the list of togglable columns. If used, only those columns will be displayed in the panel which are passed as the return value of the function. | +| searchDebounceMs | `number` | `150` | The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu. | +| searchInputProps | `Partial` | - | - | +| searchPredicate | `((column: GridColDef, searchValue: string) => boolean)` | - | - | +| sort | `'asc' \| 'desc'` | - | - | +| toggleAllMode | `'all' \| 'filteredOnly'` | `'all'` | Changes the behavior of the `Show/Hide All` toggle when the search field is used: `all`: Will toggle all columns.`filteredOnly`: Will only toggle columns that match the search criteria. | + +### GridColumnsPanel + +### gridColumnsStateSelector + +Get the columns state + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnsState; +``` + +### gridColumnsTotalWidthSelector + +Get the summed width of all the visible columns. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### GridColumnUnsortedIcon + +**GridColumnUnsortedIcon Props:** + +| Prop | Type | Default | Description | +| :------------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| sortingOrder\* | `GridSortDirection[]` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridColumnVisibilityModelSelector + +Get the column visibility model, containing the visibility status of each column. +If a column is not registered in the model, it is visible. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnVisibilityModel; +``` + +### GridComparatorFn + +The type of the sort comparison function. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :---------- | :---------------------- | :------ | :---------- | +| v1 | `V` | - | - | +| v2 | `V` | - | - | +| cellParams1 | `GridSortCellParams` | - | - | +| cellParams2 | `GridSortCellParams` | - | - | + +**Return Value:** + +The result of the comparison. + +```tsx +type ReturnValue = number; +``` + +### GridContextProvider + +**GridContextProvider Props:** + +| Prop | Type | Default | Description | +| :-------------- | :----------------------------------- | :------ | :---------- | +| configuration\* | `GridConfiguration` | - | - | +| privateApiRef\* | `RefObject` | - | - | +| props\* | `{}` | - | - | +| children\* | `React.ReactNode` | - | - | + +### GridCsvExportMenuItem + +**GridCsvExportMenuItem Props:** + +| Prop | Type | Default | Description | +| :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- | +| hideMenu | `(() => void)` | - | - | +| options | `{ delimiter?: string; fileName?: string; utf8WithBom?: boolean; includeHeaders?: boolean; includeColumnGroupsHeaders?: boolean; getRowsToExport?: ((params: GridCsvGetRowsToExportParams) => GridRowId[]); shouldAppendQuotes?: boolean; escapeFormulas?: boolean; fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | - | - | + +### gridDataRowIdsSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowId[]; +``` + +### GridDataSourceCacheDefault + +**Constructor Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------- | :------ | :---------- | +| \_\_0 | `GridDataSourceCacheDefaultConfig` | - | - | + +**Methods:** + +```typescript +function set(key: GridGetRowsParams, value: GridGetRowsResponse): void; +``` + +```typescript +function get(key: GridGetRowsParams): GridGetRowsResponse | undefined; +``` + +```typescript +function clear(): void; +``` + +### gridDateComparator + +**Parameters:** + +| Parameter | Type | Default | Description | +| :---------- | :------------------- | :------ | :---------- | +| v1 | `any` | - | - | +| v2 | `any` | - | - | +| cellParams1 | `GridSortCellParams` | - | - | +| cellParams2 | `GridSortCellParams` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridDateFormatter + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------- | :------ | :---------- | +| value | `never` | - | - | +| row | `GridValidRowModel` | - | - | +| column | `GridColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = any; +``` + +### gridDateTimeFormatter + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------- | :------ | :---------- | +| value | `never` | - | - | +| row | `GridValidRowModel` | - | - | +| column | `GridColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = any; +``` + +### GridDeleteForeverIcon + +**GridDeleteForeverIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridDeleteIcon + +**GridDeleteIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridDensityFactorSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridDensitySelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridDensity; +``` + +### gridDimensionsSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridDimensions; +``` + +### GridDownloadIcon + +**GridDownloadIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridDragIcon + +**GridDragIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridEditBooleanCell + +**GridEditBooleanCell Props:** + +| Prop | Type | Default | Description | +| :---------------- | :---------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- | +| value | `V` | - | The cell value. If the column has `valueGetter`, use `params.row` to directly access the fields. | +| onValueChange | `((event: React.ChangeEvent, newValue: boolean) => void \| Promise)` | - | Callback called when the value is changed by the user. | +| api\* | `GridApiCommunity` | - | GridApi that let you manipulate the grid. | +| cellMode\* | `GridCellMode` | - | The mode of the cell. | +| changeReason | `'debouncedSetEditCellValue' \| 'setEditCellValue'` | - | - | +| colDef\* | `GridStateColDef` | - | The column of the row that the current cell belongs to. | +| field\* | `string` | - | The column field of the cell that triggered the event. | +| formattedValue | `F` | - | The cell value formatted with the column valueFormatter. | +| hasFocus\* | `boolean` | - | If true, the cell is the active element. | +| isEditable | `boolean` | - | If true, the cell is editable. | +| isProcessingProps | `boolean` | - | - | +| isValidating | `boolean` | - | - | +| row\* | `any` | - | The row model of the row that the current cell belongs to. | +| rowNode\* | `GridTreeNodeWithRender` | - | The node of the row that the current cell belongs to. | +| tabIndex\* | `0 \| -1` | - | the tabIndex value. | +| id\* | `GridRowId` | - | The grid row id. | + +### gridEditCellStateSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>, { rowId: GridRowId; field: string }]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridEditCellProps; +``` + +### GridEditDateCell + +**GridEditDateCell Props:** + +| Prop | Type | Default | Description | +| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- | +| value | `V` | - | The cell value. If the column has `valueGetter`, use `params.row` to directly access the fields. | +| onValueChange | `((event: React.ChangeEvent, newValue: Date \| null) => void \| Promise)` | - | Callback called when the value is changed by the user. | +| api\* | `GridApiCommunity` | - | GridApi that let you manipulate the grid. | +| cellMode\* | `GridCellMode` | - | The mode of the cell. | +| changeReason | `'debouncedSetEditCellValue' \| 'setEditCellValue'` | - | - | +| colDef\* | `GridStateColDef` | - | The column of the row that the current cell belongs to. | +| field\* | `string` | - | The column field of the cell that triggered the event. | +| formattedValue | `F` | - | The cell value formatted with the column valueFormatter. | +| hasFocus\* | `boolean` | - | If true, the cell is the active element. | +| isEditable | `boolean` | - | If true, the cell is editable. | +| isProcessingProps | `boolean` | - | - | +| isValidating | `boolean` | - | - | +| row\* | `any` | - | The row model of the row that the current cell belongs to. | +| rowNode\* | `GridTreeNodeWithRender` | - | The node of the row that the current cell belongs to. | +| slotProps | `{ root?: Partial & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref; inputRef?: React.Ref; fullWidth?: boolean; type?: React.HTMLInputTypeAttribute; value?: string; onChange: React.ChangeEventHandler; disabled?: boolean; endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; slotProps?: { htmlInput?: React.InputHTMLAttributes } } & BaseInputPropsOverrides> }` | - | - | +| tabIndex\* | `0 \| -1` | - | the tabIndex value. | +| id\* | `GridRowId` | - | The grid row id. | + +### GridEditLongTextCell + +**GridEditLongTextCell Props:** + +| Prop | Type | Default | Description | +| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- | +| value | `string \| null` | - | The cell value. If the column has `valueGetter`, use `params.row` to directly access the fields. | +| onValueChange | `((event: React.ChangeEvent, newValue: string) => void \| Promise)` | - | Callback called when the value is changed by the user. | +| api\* | `GridApiCommunity` | - | GridApi that let you manipulate the grid. | +| cellMode\* | `GridCellMode` | - | The mode of the cell. | +| changeReason | `'debouncedSetEditCellValue' \| 'setEditCellValue'` | - | - | +| colDef\* | `GridStateColDef` | - | The column of the row that the current cell belongs to. | +| debounceMs | `number` | - | - | +| field\* | `string` | - | The column field of the cell that triggered the event. | +| formattedValue | `string \| null` | - | The cell value formatted with the column valueFormatter. | +| hasFocus\* | `boolean` | - | If true, the cell is the active element. | +| isEditable | `boolean` | - | If true, the cell is editable. | +| isProcessingProps | `boolean` | - | - | +| isValidating | `boolean` | - | - | +| row\* | `any` | - | The row model of the row that the current cell belongs to. | +| rowNode\* | `GridTreeNodeWithRender` | - | The node of the row that the current cell belongs to. | +| slotProps | `{ root?: GridSkeletonCellProps; value?: GridSkeletonCellProps; popper?: Partial & { className?: string; style?: React.CSSProperties } & { role?: string; ref?: Ref; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement } & BasePopperPropsOverrides>; popperContent?: GridSkeletonCellProps; textarea?: Partial & { className?: string; style?: React.CSSProperties } & { ref?: React.Ref; inputRef?: React.Ref; fullWidth?: boolean; value?: string; onChange: React.ChangeEventHandler; onKeyDown?: React.KeyboardEventHandler; disabled?: boolean; autoFocus?: boolean; minRows?: number; maxRows?: number } & BaseTextareaPropsOverrides> }` | - | Props passed to internal components. | +| tabIndex\* | `0 \| -1` | - | the tabIndex value. | +| id\* | `GridRowId` | - | The grid row id. | + +### gridEditRowsStateSelector + +Select the row editing state. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridEditingState; +``` + +### GridEditSingleSelectCell + +**GridEditSingleSelectCell Props:** + +| Prop | Type | Default | Description | +| :---------------- | :------------------------------------------------------------------------ | :------ | :--------------------------------------------------------------------------------------------------- | +| value | `V` | - | The cell value. If the column has `valueGetter`, use `params.row` to directly access the fields. | +| onValueChange | `((event: React.SyntheticEvent, newValue: any) => void \| Promise)` | - | Callback called when the value is changed by the user. | +| api\* | `GridApiCommunity` | - | GridApi that let you manipulate the grid. | +| cellMode\* | `GridCellMode` | - | The mode of the cell. | +| changeReason | `'debouncedSetEditCellValue' \| 'setEditCellValue'` | - | - | +| colDef\* | `GridStateColDef` | - | The column of the row that the current cell belongs to. | +| field\* | `string` | - | The column field of the cell that triggered the event. | +| formattedValue | `F` | - | The cell value formatted with the column valueFormatter. | +| hasFocus\* | `boolean` | - | If true, the cell is the active element. | +| initialOpen | `boolean` | - | If true, the select opens by useOnMount. | +| isEditable | `boolean` | - | If true, the cell is editable. | +| isProcessingProps | `boolean` | - | - | +| isValidating | `boolean` | - | - | +| row\* | `any` | - | The row model of the row that the current cell belongs to. | +| rowNode\* | `GridTreeNodeWithRender` | - | The node of the row that the current cell belongs to. | +| tabIndex\* | `0 \| -1` | - | the tabIndex value. | +| id\* | `GridRowId` | - | The grid row id. | + +### GridEventListener + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------- | :------ | :---------- | +| params | `any \| undefined` | - | - | +| event | `{ defaultMuiPrevented?: boolean }` | - | - | +| details | `GridCallbackDetails` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = void; +``` + +### GridEventPublisher + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- | +| params | `GridEventPublisherArg<'columnHeaderFocus' \| 'columnGroupHeaderFocus' \| 'resize' \| 'menuOpen' \| 'columnResize' \| 'rootMount' \| 'unmount' \| 'stateChange' \| 'viewportInnerSizeChange' \| 'debouncedResize' \| 'activeStrategyProcessorChange' \| 'strategyAvailabilityChange' \| 'columnsChange' \| 'columnWidthChange' \| 'columnResizeStart' \| 'columnResizeStop' \| 'columnOrderChange' \| 'rowsSet' \| 'filteredRowsSet' \| 'sortedRowsSet' \| 'aggregationLookupSet' \| 'rowExpansionChange' \| 'renderedRowsIntervalChange' \| 'cellModeChange' \| 'cellModesModelChange' \| 'rowModesModelChange' \| 'cellEditStart' \| 'cellEditStop' \| 'rowEditStart' \| 'rowEditStop' \| 'cellFocusIn' \| 'cellFocusOut' \| 'scrollPositionChange' \| 'virtualScrollerContentSizeChange' \| 'virtualScrollerWheel' \| 'virtualScrollerTouchMove' \| 'rowsScrollEndIntersection' \| 'headerSelectionCheckboxChange' \| 'rowSelectionCheckboxChange' \| 'clipboardCopy' \| 'preferencePanelClose' \| 'preferencePanelOpen' \| 'menuClose' \| 'rowClick' \| 'rowDoubleClick' \| 'rowMouseEnter' \| 'rowMouseLeave' \| 'rowMouseOut' \| 'rowMouseOver' \| 'rowDragStart' \| 'rowDragOver' \| 'rowDragEnd' \| 'columnHeaderClick' \| 'columnHeaderContextMenu' \| 'columnHeaderDoubleClick' \| 'columnHeaderOver' \| 'columnHeaderOut' \| 'columnHeaderEnter' \| 'columnHeaderLeave' \| 'columnHeaderKeyDown' \| 'columnHeaderBlur' \| 'columnHeaderDragStart' \| 'columnHeaderDragEnter' \| 'columnHeaderDragOver' \| 'columnHeaderDragEnd' \| 'columnHeaderDragEndNative' \| 'columnSeparatorDoubleClick' \| 'columnSeparatorMouseDown' \| 'columnIndexChange' \| 'headerFilterClick' \| 'headerFilterKeyDown' \| 'headerFilterMouseDown' \| 'headerFilterBlur' \| 'columnGroupHeaderKeyDown' \| 'columnGroupHeaderBlur' \| 'cellClick' \| 'cellDoubleClick' \| 'cellMouseDown' \| 'cellMouseUp' \| 'cellMouseOver' \| 'cellKeyDown' \| 'cellKeyUp' \| 'cellDragEnter' \| 'cellDragOver' \| 'paginationModelChange' \| 'filterModelChange' \| 'sortModelChange' \| 'rowSelectionChange' \| 'columnVisibilityModelChange' \| 'rowCountChange' \| 'densityChange' \| 'paginationMetaChange', {} \| { params: GridColumnHeaderParams; event: React.FocusEvent } \| { params: GridColumnGroupHeaderParams; event: React.FocusEvent } \| { params: ElementSize } \| { params: GridMenuParams } \| { params: GridColumnResizeParams; event: MouseEvent } \| { params: HTMLElement } \| { params: any } \| { params: 'sorting' \| 'dataSourceRowsUpdate' \| 'rowTreeCreation' \| 'filtering' \| 'visibleRowsLookupCreation' } \| { params: string[] } \| { params: GridColumnResizeParams; event: MouseEvent \| {} } \| { params: { field: string }; event: React.MouseEvent } \| { params: null; event: MouseEvent } \| { params: GridColumnOrderChangeParams } \| { params: GridGroupNode } \| { params: GridRenderContext } \| { params: GridCellParams } \| { params: GridCellModesModel } \| { params: GridRowModesModel } \| { params: GridCellEditStartParams; event: React.MouseEvent \| React.KeyboardEvent } \| { params: GridCellEditStopParams; event: MuiBaseEvent } \| { params: GridRowEditStartParams; event: React.MouseEvent \| React.KeyboardEvent } \| { params: GridRowEditStopParams; event: MuiBaseEvent } \| { params: GridCellParams; event: MuiBaseEvent } \| { params: GridScrollParams; event: React.UIEvent \| MuiBaseEvent } \| { params: { columnsTotalWidth: number; contentHeight: number } } \| { params: {}; event: React.WheelEvent } \| { params: {}; event: React.TouchEvent } \| { params: GridHeaderSelectionCheckboxParams } \| { params: GridRowSelectionCheckboxParams; event: React.ChangeEvent } \| { params: string } \| { params: GridPreferencePanelParams } \| { params: GridRowParams; event: React.MouseEvent } \| { params: GridRowParams; event: React.DragEvent } \| { params: GridRowParams; event: DragEvent } \| { params: GridColumnHeaderParams; event: React.MouseEvent } \| { params: GridColumnHeaderParams; event: React.KeyboardEvent } \| { params: GridColumnHeaderParams; event: React.DragEvent } \| { params: GridColumnHeaderParams; event: DragEvent } \| { params: GridColumnGroupHeaderParams; event: React.KeyboardEvent } \| { params: GridCellParams; event: React.MouseEvent } \| { params: GridCellParams; event: React.KeyboardEvent } \| { params: GridCellParams; event: React.DragEvent } \| { params: GridPaginationModel } \| { params: GridFilterModel } \| { params: GridSortItem[] } \| { params: GridRowSelectionModel } \| { params: GridColumnVisibilityModel } \| { params: number } \| { params: GridDensity } \| { params: GridPaginationMeta }>` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = void; +``` + +### gridExpandedRowCountSelector + +Get the amount of rows accessible after the filtering process. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridExpandedSortedRowEntriesSelector + +Get the id and the model of the rows accessible after the filtering process. +Does not contain the collapsed children. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowEntry[]; +``` + +### gridExpandedSortedRowIdsSelector + +Get the id of the rows accessible after the filtering process. +Does not contain the collapsed children. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowId[]; +``` + +### GridExpandMoreIcon + +**GridExpandMoreIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridFilterableColumnDefinitionsSelector + +Get the filterable columns as an array. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridStateColDef[]; +``` + +### gridFilterableColumnLookupSelector + +Get the filterable columns as a lookup (an object containing the field for keys and the definition for values). + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnLookup; +``` + +### GridFilterAltIcon + +**GridFilterAltIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridFilteredDescendantRowCountSelector + +Get the amount of descendant rows accessible after the filtering process. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridFilteredRowCountSelector + +Get the amount of rows accessible after the filtering process. +Includes top level and descendant rows. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridFilteredSortedRowEntriesSelector + +Get the id and the model of the rows accessible after the filtering process. +Contains the collapsed children. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowEntry[]; +``` + +### gridFilteredSortedRowIdsSelector + +Get the id of the rows accessible after the filtering process. +Contains the collapsed children. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowId[]; +``` + +### gridFilteredSortedTopLevelRowEntriesSelector + +Get the id and the model of the top level rows accessible after the filtering process. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowEntry[]; +``` + +### gridFilteredTopLevelRowCountSelector + +Get the amount of top level rows accessible after the filtering process. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### GridFilterInputBoolean + +**GridFilterInputBoolean Props:** + +| Prop | Type | Default | Description | +| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- | +| apiRef\* | `RefObject` | - | - | +| applyValue\* | `((value: GridFilterItem) => void)` | - | - | +| clearButton | `React.ReactNode` | - | - | +| focusElementRef | `React.Ref` | - | - | +| headerFilterMenu | `React.ReactNode` | - | - | +| isFilterActive | `boolean` | - | It is `true` if the filter either has a value or an operator with no value required is selected (for example `isEmpty`) | +| item\* | `GridFilterItem` | - | - | +| onBlur | `React.FocusEventHandler` | - | - | +| onFocus | `React.FocusEventHandler` | - | - | +| slotProps | `{ root: TextFieldProps }` | - | - | +| tabIndex | `number` | - | - | +| disabled | `boolean` | - | - | +| inputRef | `React.Ref` | - | - | +| className | `string` | - | - | + +### GridFilterInputDate + +**GridFilterInputDate Props:** + +| Prop | Type | Default | Description | +| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- | +| apiRef | `RefObject` | - | - | +| applyValue | `((value: GridFilterItem) => void)` | - | - | +| clearButton | `React.ReactNode` | - | - | +| focusElementRef | `React.Ref` | - | - | +| headerFilterMenu | `React.ReactNode` | - | - | +| isFilterActive | `boolean` | - | It is `true` if the filter either has a value or an operator with no value required is selected (for example `isEmpty`) | +| item | `GridFilterItem` | - | - | +| onBlur | `React.FocusEventHandler` | - | - | +| onFocus | `React.FocusEventHandler` | - | - | +| slotProps | `{ root: TextFieldProps }` | - | - | +| tabIndex | `number` | - | - | +| type | `'date' \| 'datetime-local'` | - | - | +| disabled | `boolean` | - | - | +| inputRef | `React.Ref` | - | - | +| className | `string` | - | - | + +### GridFilterInputMultipleSingleSelect + +**GridFilterInputMultipleSingleSelect Props:** + +| Prop | Type | Default | Description | +| :--------------- | :------------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------- | +| apiRef | `RefObject` | - | - | +| applyValue | `((value: GridFilterItem) => void)` | - | - | +| clearButton | `React.ReactNode` | - | - | +| focusElementRef | `React.Ref` | - | - | +| headerFilterMenu | `React.ReactNode` | - | - | +| isFilterActive | `boolean` | - | It is `true` if the filter either has a value or an operator with no value required is selected (for example `isEmpty`) | +| item | `GridFilterItem` | - | - | +| onBlur | `React.FocusEventHandler` | - | - | +| onFocus | `React.FocusEventHandler` | - | - | +| slotProps | `{ root: Omit, 'options'> }` | - | - | +| tabIndex | `number` | - | - | +| type | `'singleSelect'` | - | - | +| disabled | `boolean` | - | - | +| inputRef | `React.Ref` | - | - | +| className | `string` | - | - | + +### GridFilterInputMultipleValue + +**GridFilterInputMultipleValue Props:** + +| Prop | Type | Default | Description | +| :--------------- | :------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------- | +| apiRef | `RefObject` | - | - | +| applyValue | `((value: GridFilterItem) => void)` | - | - | +| clearButton | `React.ReactNode` | - | - | +| focusElementRef | `React.Ref` | - | - | +| headerFilterMenu | `React.ReactNode` | - | - | +| isFilterActive | `boolean` | - | It is `true` if the filter either has a value or an operator with no value required is selected (for example `isEmpty`) | +| item | `GridFilterItem` | - | - | +| onBlur | `React.FocusEventHandler` | - | - | +| onFocus | `React.FocusEventHandler` | - | - | +| slotProps | `{ root: Omit, 'options'> }` | - | - | +| tabIndex | `number` | - | - | +| type | `'text' \| 'number' \| 'date' \| 'datetime-local'` | - | - | +| disabled | `boolean` | - | - | +| inputRef | `React.Ref` | - | - | +| className | `string` | - | - | + +### GridFilterInputSingleSelect + +**GridFilterInputSingleSelect Props:** + +| Prop | Type | Default | Description | +| :--------------- | :---------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- | +| apiRef | `RefObject` | - | - | +| applyValue | `((value: GridFilterItem) => void)` | - | - | +| clearButton | `React.ReactNode` | - | - | +| focusElementRef | `React.Ref` | - | - | +| headerFilterMenu | `React.ReactNode` | - | - | +| isFilterActive | `boolean` | - | It is `true` if the filter either has a value or an operator with no value required is selected (for example `isEmpty`) | +| item | `GridFilterItem` | - | - | +| onBlur | `React.FocusEventHandler` | - | - | +| onFocus | `React.FocusEventHandler` | - | - | +| slotProps | `{ root: TextFieldProps }` | - | - | +| tabIndex | `number` | - | - | +| type | `'singleSelect'` | - | - | +| disabled | `boolean` | - | - | +| inputRef | `React.Ref` | - | - | +| className | `string` | - | - | + +### GridFilterInputValue + +**GridFilterInputValue Props:** + +| Prop | Type | Default | Description | +| :--------------- | :------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------- | +| apiRef | `RefObject` | - | - | +| applyValue | `((value: GridFilterItem) => void)` | - | - | +| clearButton | `React.ReactNode` | - | - | +| focusElementRef | `React.Ref` | - | - | +| headerFilterMenu | `React.ReactNode` | - | - | +| isFilterActive | `boolean` | - | It is `true` if the filter either has a value or an operator with no value required is selected (for example `isEmpty`) | +| item | `GridFilterItem` | - | - | +| onBlur | `React.FocusEventHandler` | - | - | +| onFocus | `React.FocusEventHandler` | - | - | +| slotProps | `{ root: TextFieldProps }` | - | - | +| tabIndex | `number` | - | - | +| type | `'text' \| 'number' \| 'date' \| 'datetime-local'` | - | - | +| disabled | `boolean` | - | - | +| inputRef | `React.Ref` | - | - | +| className | `string` | - | - | + +### GridFilterListIcon + +**GridFilterListIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridFilterModelSelector + +Get the current filter model. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridFilterModel; +``` + +### gridFocusCellSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridCellCoordinates | null; +``` + +### gridFocusColumnGroupHeaderSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnGroupIdentifier | null; +``` + +### gridFocusColumnHeaderFilterSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnIdentifier | null; +``` + +### gridFocusColumnHeaderSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnIdentifier | null; +``` + +### gridFocusStateSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridFocusState; +``` + +### GridFooterPlaceholder + +### GridGetRowsError + +**Static Methods:** + +```typescript +function isError(error: unknown): boolean; +``` + +Indicates whether the argument provided is a built-in Error instance or not. + +```typescript +function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void; +``` + +Creates a `.stack` property on `targetObject`, which when accessed returns +a string representing the location in the code at which +`Error.captureStackTrace()` was called. + +```js +const myObject = {}; +Error.captureStackTrace(myObject); +myObject.stack; // Similar to `new Error().stack` +``` + +The first line of the trace will be prefixed with +`${myObject.name}: ${myObject.message}`. + +The optional `constructorOpt` argument accepts a function. If given, all frames +above `constructorOpt`, including `constructorOpt`, will be omitted from the +generated stack trace. + +The `constructorOpt` argument is useful for hiding implementation +details of error generation from the user. For instance: + +```js +function a() { + b(); +} + +function b() { + c(); +} + +function c() { + // Create an error without stack trace to avoid calculating the stack trace twice. + const { stackTraceLimit } = Error; + Error.stackTraceLimit = 0; + const error = new Error(); + Error.stackTraceLimit = stackTraceLimit; + + // Capture the stack trace above function b + Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace + throw error; +} + +a(); +``` + +```typescript +function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any; +``` + +**Constructor Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :-------------------------------------------------------------- | :------ | :---------- | +| options | `{ message: string; params: GridGetRowsParams; cause?: Error }` | - | - | + +**Properties:** + +| Property | Type | Modifiers | Description | +| :-------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| params | `{ sortModel: GridSortItem[]; filterModel: GridFilterModel; paginationModel?: GridPaginationModel; start: number \| string; end: number }` | readonly | The parameters used in the failed request | +| cause? | `Error` | readonly | The original error that caused this error | +| name | `string` | - | - | +| message | `string` | - | - | +| stack? | `string` | - | - | +| stackTraceLimit | `number` | static | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The useOnMount value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | + +### GridHeader + +### gridHeaderFilteringEditFieldSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = string | null; +``` + +### gridHeaderFilteringEnabledSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean; +``` + +### gridHeaderFilteringMenuSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = string | null; +``` + +### gridHeaderFilteringStateSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridHeaderFilteringState; +``` + +### GridKeyboardArrowRight + +**GridKeyboardArrowRight Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridLoadIcon + +**GridLoadIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridLongTextCell + +**GridLongTextCell Props:** + +| Prop | Type | Default | Description | +| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------- | +| value | `string \| null` | - | The cell value. If the column has `valueGetter`, use `params.row` to directly access the fields. | +| api\* | `GridApiCommunity` | - | GridApi that let you manipulate the grid. | +| cellMode\* | `GridCellMode` | - | The mode of the cell. | +| colDef\* | `GridStateColDef` | - | The column of the row that the current cell belongs to. | +| field\* | `string` | - | The column field of the cell that triggered the event. | +| formattedValue | `string \| null` | - | The cell value formatted with the column valueFormatter. | +| hasFocus\* | `boolean` | - | If true, the cell is the active element. | +| isEditable | `boolean` | - | If true, the cell is editable. | +| renderContent | `((value: string \| null) => React.ReactNode)` | - | A function to customize the content rendered in the popup. | +| row\* | `any` | - | The row model of the row that the current cell belongs to. | +| rowNode\* | `GridTreeNodeWithRender` | - | The node of the row that the current cell belongs to. | +| slotProps | `{ root?: GridSkeletonCellProps; content?: GridSkeletonCellProps; expandButton?: React.ButtonHTMLAttributes; collapseButton?: React.ButtonHTMLAttributes; popper?: Partial & { className?: string; style?: React.CSSProperties } & { role?: string; ref?: Ref; open: boolean; children?: React.ReactNode; clickAwayTouchEvent?: false \| ClickAwayTouchEventHandler; clickAwayMouseEvent?: false \| ClickAwayMouseEventHandler; flip?: boolean; focusTrap?: boolean; onExited?: ((node: HTMLElement \| null) => void); onClickAway?: ((event: MouseEvent \| TouchEvent) => void); onDidShow?: (() => void); onDidHide?: (() => void); id?: string; target?: Element \| null; transition?: boolean; placement?: Placement } & BasePopperPropsOverrides>; popperContent?: GridSkeletonCellProps }` | - | Props passed to internal components. | +| tabIndex\* | `0 \| -1` | - | the tabIndex value. | +| id\* | `GridRowId` | - | The grid row id. | + +### GridLongTextCellCollapseIcon + +**GridLongTextCellCollapseIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridLongTextCellExpandIcon + +**GridLongTextCellExpandIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridMenu + +**GridMenu Props:** + +| Prop | Type | Default | Description | +| :--------- | :-------------------------------------------------------------------- | :------ | :---------- | +| open\* | `boolean` | - | - | +| onClose\* | `((event?: React.KeyboardEvent \| MouseEvent \| TouchEvent) => void)` | - | - | +| onExited | `((node: HTMLElement \| null) => void)` | - | - | +| position | `MenuPosition` | - | - | +| target\* | `HTMLElement \| null` | - | - | +| children\* | `React.ReactNode` | - | - | +| className | `string` | - | - | + +### GridMenuIcon + +**GridMenuIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridMoreVertIcon + +**GridMoreVertIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridNumberComparator + +**Parameters:** + +| Parameter | Type | Default | Description | +| :---------- | :------------------- | :------ | :---------- | +| v1 | `any` | - | - | +| v2 | `any` | - | - | +| cellParams1 | `GridSortCellParams` | - | - | +| cellParams2 | `GridSortCellParams` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridPageCountSelector + +Get the amount of pages needed to display all the rows if the pagination is enabled + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridPageSelector + +Get the index of the page to render if the pagination is enabled + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridPageSizeSelector + +Get the maximum amount of rows to display on a single page if the pagination is enabled + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridPaginatedVisibleSortedGridRowEntriesSelector + +Get the id and the model of each row to include in the current page if the pagination is enabled. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowEntry[]; +``` + +### gridPaginatedVisibleSortedGridRowIdsSelector + +Get the id of each row to include in the current page if the pagination is enabled. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowId[]; +``` + +### GridPagination + +### gridPaginationMetaSelector + +Get the pagination meta + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridPaginationMeta; +``` + +### gridPaginationModelSelector + +Get the pagination model + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridPaginationModel; +``` + +### gridPaginationRowCountSelector + +Get the row count + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridPaginationRowRangeSelector + +Get the index of the first and the last row to include in the current page if the pagination is enabled. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = { firstRowIndex: number; lastRowIndex: number } | null; +``` + +### GridPanelContent + +**GridPanelContent Props:** + +| Prop | Type | Default | Description | +| :--- | :--------------- | :------ | :---------- | +| sx | `SxProps` | - | - | + +### GridPanelFooter + +**GridPanelFooter Props:** + +| Prop | Type | Default | Description | +| :--- | :--------------- | :------ | :---------- | +| sx | `SxProps` | - | - | + +### GridPanelHeader + +**GridPanelHeader Props:** + +| Prop | Type | Default | Description | +| :--- | :--------------- | :------ | :---------- | +| sx | `SxProps` | - | - | + +### gridPinnedColumnsSelector + +Get the visible pinned columns model. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridPinnedColumnFields; +``` + +### GridPortalWrapper + +**GridPortalWrapper Props:** + +| Prop | Type | Default | Description | +| :--------- | :---------------- | :------ | :---------- | +| children\* | `React.ReactNode` | - | - | + +### gridPreferencePanelStateSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridPreferencePanelState; +``` + +### GridPrintExportMenuItem + +**GridPrintExportMenuItem Props:** + +| Prop | Type | Default | Description | +| :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :---------- | +| hideMenu | `(() => void)` | - | - | +| options | `{ fileName?: string; hideToolbar?: boolean; hideFooter?: boolean; includeCheckboxes?: boolean; copyStyles?: boolean; bodyClassName?: string; pageStyle?: string \| (() => string); getRowsToExport?: ((params: GridPrintGetRowsToExportParams) => GridRowId[]); fields?: string[]; allColumns?: boolean; disableToolbarButton?: boolean }` | - | - | + +### gridQuickFilterValuesSelector + +Get the current quick filter values. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = any[] | undefined; +``` + +### GridRedoIcon + +**GridRedoIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridRemoveIcon + +**GridRemoveIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridResizingColumnFieldSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = string; +``` + +### gridRowCountSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridRowGroupingNameSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = string; +``` + +### GridRowIdGetter + +The function to retrieve the id of a \[\[GridRowModel]]. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------ | :------ | :---------- | +| row | `GridValidRowModel` | - | - | + +**Return Value:** + +The id of the row. + +```tsx +type ReturnValue = GridRowId; +``` + +### gridRowIdSelector + +Get the row id for a given row + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `GridValidRowModel` | - | - | + +**Return Value:** + +The row id + +```tsx +type ReturnValue = GridRowId; +``` + +### gridRowIsEditingSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>, { rowId: GridRowId; editMode: GridEditMode }]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean; +``` + +### gridRowMaximumTreeDepthSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridRowNodeSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :-------------------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>, GridRowId]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridTreeNode; +``` + +### gridRowSelectionCountSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridRowSelectionIdsSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = Map; +``` + +### gridRowSelectionManagerSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = RowSelectionManager; +``` + +### gridRowSelectionStateSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowSelectionModel; +``` + +### gridRowSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :-------------------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>, GridRowId]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridValidRowModel; +``` + +### gridRowsLoadingSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean | undefined; +``` + +### gridRowsLookupSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowIdToModelLookup; +``` + +### gridRowsMetaSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowsMetaState; +``` + +### gridRowTreeDepthsSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridTreeDepths; +``` + +### gridRowTreeSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowTreeConfig; +``` + +### GridScrollFn + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :----------------- | :------ | :---------- | +| v | `GridScrollParams` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = void; +``` + +### GridSearchIcon + +**GridSearchIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridSeparatorIcon + +**GridSeparatorIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridSkeletonCell + +**GridSkeletonCell Props:** + +| Prop | Type | Default | Description | +| :----- | :----------------- | :------ | :---------------------------------------------------------------------------------- | +| empty | `boolean` | `false` | If `true`, the cell will not display the skeleton but still reserve the cell space. | +| field | `string` | - | - | +| height | `number \| 'auto'` | - | - | +| type | `GridColType` | - | - | +| width | `number \| string` | - | - | +| align | `string` | - | - | + +### gridSortedRowEntriesSelector + +Get the id and the model of the rows after the sorting process. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowEntry[]; +``` + +### gridSortedRowIdsSelector + +Get the id of the rows after the sorting process. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridRowId[]; +``` + +### gridSortModelSelector + +Get the current sorting model. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridSortItem[]; +``` + +### gridStringOrNumberComparator + +**Parameters:** + +| Parameter | Type | Default | Description | +| :---------- | :------------------- | :------ | :---------- | +| v1 | `any` | - | - | +| v2 | `any` | - | - | +| cellParams1 | `GridSortCellParams` | - | - | +| cellParams2 | `GridSortCellParams` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### gridTabIndexCellSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridCellCoordinates | null; +``` + +### gridTabIndexColumnGroupHeaderSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnGroupIdentifier | null; +``` + +### gridTabIndexColumnHeaderFilterSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnIdentifier | null; +``` + +### gridTabIndexColumnHeaderSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridColumnIdentifier | null; +``` + +### gridTabIndexStateSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridTabIndexState; +``` + +### GridTableRowsIcon + +**GridTableRowsIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridToolbarQuickFilter + +**GridToolbarQuickFilter Props:** + +| Prop | Type | Default | Description | +| :------------------- | :---------------------------- | :--------------------------------------- | :------------------------------------------------------------------------------------------------ | +| debounceMs | `number` | `150` | The debounce time in milliseconds. | +| quickFilterFormatter | `((values: any[]) => string)` | `(values: string[]) => values.join(' ')` | Function responsible for formatting values of quick filter in a string when the model is modified | +| quickFilterParser | `((input: string) => any[])` | `(searchText: string) => searchText | + +.split(' ') +.filter((word) => word !== '')`| Function responsible for parsing text input in an array of independent values for quick filtering. | +| slotProps |`{ root: TextFieldProps }` | - | - | +| className |`string` | - | - | + +### gridTopLevelRowCountSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = number; +``` + +### GridTripleDotsVerticalIcon + +**GridTripleDotsVerticalIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridUndoIcon + +**GridUndoIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridUpdateRowError + +**Static Methods:** + +```typescript +function isError(error: unknown): boolean; +``` + +Indicates whether the argument provided is a built-in Error instance or not. + +```typescript +function captureStackTrace(targetObject: {}, constructorOpt?: Function | undefined): void; +``` + +Creates a `.stack` property on `targetObject`, which when accessed returns +a string representing the location in the code at which +`Error.captureStackTrace()` was called. + +```js +const myObject = {}; +Error.captureStackTrace(myObject); +myObject.stack; // Similar to `new Error().stack` +``` + +The first line of the trace will be prefixed with +`${myObject.name}: ${myObject.message}`. + +The optional `constructorOpt` argument accepts a function. If given, all frames +above `constructorOpt`, including `constructorOpt`, will be omitted from the +generated stack trace. + +The `constructorOpt` argument is useful for hiding implementation +details of error generation from the user. For instance: + +```js +function a() { + b(); +} + +function b() { + c(); +} + +function c() { + // Create an error without stack trace to avoid calculating the stack trace twice. + const { stackTraceLimit } = Error; + Error.stackTraceLimit = 0; + const error = new Error(); + Error.stackTraceLimit = stackTraceLimit; + + // Capture the stack trace above function b + Error.captureStackTrace(error, b); // Neither function c, nor b is included in the stack trace + throw error; +} + +a(); +``` + +```typescript +function prepareStackTrace(err: Error, stackTraces: NodeJS.CallSite[]): any; +``` + +**Constructor Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------------------------------- | :------ | :---------- | +| options | `{ message: string; params: GridUpdateRowParams; cause?: Error }` | - | - | + +**Properties:** + +| Property | Type | Modifiers | Description | +| :-------------- | :-------------------------------------------------------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| params | `{ rowId: GridRowId; updatedRow: GridRowModel; previousRow: GridRowModel }` | readonly | The parameters used in the failed request | +| cause? | `Error` | readonly | The original error that caused this error | +| name | `string` | - | - | +| message | `string` | - | - | +| stack? | `string` | - | - | +| stackTraceLimit | `number` | static | The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or `Error.captureStackTrace(obj)`). The useOnMount value is `10` but may be set to any valid JavaScript number. Changes will affect any stack trace captured _after_ the value has been changed. If set to a non-number value, or set to a negative number, stack traces will not capture any frames. | + +### GridValueFormatter + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------ | :------ | :---------- | +| value | `TValue` | - | - | +| row | `GridValidRowModel` | - | - | +| column | `GridColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = F; +``` + +### GridValueGetter + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------ | :------ | :---------- | +| value | `TValue` | - | - | +| row | `GridValidRowModel` | - | - | +| column | `GridColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = V; +``` + +### GridValueParser + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------ | :------ | :---------- | +| value | `F \| undefined` | - | - | +| row | `GridValidRowModel \| undefined` | - | - | +| column | `GridColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = V; +``` + +### GridValueSetter + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------ | :------ | :---------- | +| value | `V` | - | - | +| row | `GridValidRowModel` | - | - | +| column | `GridColDef` | - | - | +| apiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridValidRowModel; +``` + +### GridViewColumnIcon + +**GridViewColumnIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridViewHeadlineIcon + +**GridViewHeadlineIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### GridViewStreamIcon + +**GridViewStreamIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridVirtualizationColumnEnabledSelector + +Get the enabled state for column virtualization + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean; +``` + +### gridVirtualizationEnabledSelector + +Get the enabled state for virtualization + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean; +``` + +### gridVirtualizationRowEnabledSelector + +Get the enabled state for row virtualization + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean; +``` + +### gridVirtualizationSelector + +Get the columns state + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject<{ state: GridStateCommunity } \| null>` | - | - | +| args? | `unknown` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridVirtualizationState; +``` + +### GridVisibilityOffIcon + +**GridVisibilityOffIcon Props:** + +| Prop | Type | Default | Description | +| :---------- | :-------------------------------------------- | :------ | :---------- | +| color | `string` | - | - | +| fontSize | `'small' \| 'medium' \| 'large' \| 'inherit'` | - | - | +| titleAccess | `string` | - | - | +| className | `string` | - | - | +| style | `React.CSSProperties` | - | - | + +### gridVisibleColumnDefinitionsSelector + +Get the visible columns as a lookup (an object containing the field for keys and the definition for values). + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = GridStateColDef[]; +``` + +### gridVisibleColumnFieldsSelector + +Get the field of each visible column. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = string[]; +``` + +### gridVisiblePinnedColumnDefinitionsSelector + +Get the visible pinned columns. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +| Property | Type | Description | +| :------- | :------------------ | :---------- | +| `left` | `GridStateColDef[]` | - | +| `right` | `GridStateColDef[]` | - | + +### gridVisibleRowsSelector + +Get the rows, range and rowIndex lookup map after filtering and sorting. +Does not contain the collapsed children. + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------------------------------------------- | :------ | :---------- | +| args | `[React.RefObject<{ state: GridStateCommunity } \| null>]` | - | - | + +**Return Value:** + +| Property | Type | Description | +| :---------------- | :-------------------------------------------------------- | :---------- | +| `rows` | `GridRowEntry[]` | - | +| `range` | `{ firstRowIndex: number; lastRowIndex: number } \| null` | - | +| `rowIdToIndexMap` | `Map` | - | + +### isAutogeneratedRow + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------- | :------ | :---------- | +| row | `GridRowModel` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean; +``` + +### isLeaf + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------- | :------ | :---------- | +| node | `GridColumnNode` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = boolean; +``` + +### OutputSelector + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------ | :------ | :---------- | +| apiRef | `RefObject<{ state: State } \| null>` | - | - | +| args? | `Args` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = Result; +``` + +### QuickFilter + +The top level Quick Filter component that provides context to child components. +It renders a `
` element. + +Demos: + +- [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/) + +API: + +- [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/) + +**QuickFilter Props:** + +| Prop | Type | Default | Description | +| :--------------- | :---------------------------------------------------------- | :---------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- | +| debounceMs | `number` | `150` | The debounce time in milliseconds. | +| defaultExpanded | `boolean` | `false` | The useOnMount expanded state of the quick filter control. | +| expanded | `boolean` | - | The expanded state of the quick filter control. | +| formatter | `((values: any[]) => string)` | `(values: string[]) => values.join(' ')` | Function responsible for formatting values of quick filter in a string when the model is modified | +| onExpandedChange | `((expanded: boolean) => void)` | - | Callback function that is called when the quick filter input is expanded or collapsed. | +| parser | `((input: string) => any[])` | `(searchText: string) => searchText.split(' ').filter((word) => word !== '')` | Function responsible for parsing text input in an array of independent values for quick filtering. | +| className | `string \| ((state: QuickFilterState) => string)` | - | Override or extend the styles applied to the component. | +| render | `RenderProp, QuickFilterState>` | - | A function to customize rendering of the component. | + +### renderActionsCell + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------------------------ | :------ | :---------- | +| params | `GridRenderCellParams` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = React.JSX.Element; +``` + +### renderEditBooleanCell + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------- | :------ | :---------- | +| params | `GridEditBooleanCellProps` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = React.JSX.Element; +``` + +### renderEditDateCell + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------------------------------- | :------ | :---------- | +| params | `GridRenderEditCellParams` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = React.JSX.Element; +``` + +### renderEditInputCell + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :----------------------- | :------ | :---------- | +| params | `GridEditInputCellProps` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = React.JSX.Element; +``` + +### renderEditLongTextCell + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :-------------------------- | :------ | :---------- | +| params | `GridEditLongTextCellProps` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = React.JSX.Element; +``` + +### renderEditSingleSelectCell + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------ | :------ | :---------- | +| params | `GridEditSingleSelectCellProps` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = React.JSX.Element; +``` + +### renderLongTextCell + +**Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------- | :------ | :---------- | +| params | `GridLongTextCellProps` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = React.JSX.Element; +``` + +### unstable_resetCleanupTracking + +**Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useFirstRender + +**useFirstRender Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------- | :------ | :---------- | +| callback | `(() => void)` | - | - | + +**useFirstRender Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useGridApiContext + +**useGridApiContext Return Value:** + +```tsx +type ReturnValue = React.RefObject; +``` + +### useGridApiMethod + +**useGridApiMethod Parameters:** + +| Parameter | Type | Default | Description | +| :------------ | :------------------------------------------------------------------------------------------ | :------ | :---------- | +| privateApiRef | `RefObject` | - | - | +| apiMethods | `Partial \| Partial>` | - | - | +| visibility | `'public' \| 'private'` | - | - | + +**useGridApiMethod Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useGridApiRef + +Hook that instantiate a \[\[GridApiRef]]. + +**useGridApiRef Return Value:** + +```tsx +type ReturnValue = React.RefObject; +``` + +### useGridEvent + +**useGridEvent Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject` | - | - | +| eventName | `'columnHeaderFocus' \| 'columnGroupHeaderFocus' \| 'resize' \| 'menuOpen' \| 'columnResize' \| 'rootMount' \| 'unmount' \| 'stateChange' \| 'viewportInnerSizeChange' \| 'debouncedResize' \| 'activeStrategyProcessorChange' \| 'strategyAvailabilityChange' \| 'columnsChange' \| 'columnWidthChange' \| 'columnResizeStart' \| 'columnResizeStop' \| 'columnOrderChange' \| 'rowsSet' \| 'filteredRowsSet' \| 'sortedRowsSet' \| 'aggregationLookupSet' \| 'rowExpansionChange' \| 'renderedRowsIntervalChange' \| 'cellModeChange' \| 'cellModesModelChange' \| 'rowModesModelChange' \| 'cellEditStart' \| 'cellEditStop' \| 'rowEditStart' \| 'rowEditStop' \| 'cellFocusIn' \| 'cellFocusOut' \| 'scrollPositionChange' \| 'virtualScrollerContentSizeChange' \| 'virtualScrollerWheel' \| 'virtualScrollerTouchMove' \| 'rowsScrollEndIntersection' \| 'headerSelectionCheckboxChange' \| 'rowSelectionCheckboxChange' \| 'clipboardCopy' \| 'preferencePanelClose' \| 'preferencePanelOpen' \| 'menuClose' \| 'rowClick' \| 'rowDoubleClick' \| 'rowMouseEnter' \| 'rowMouseLeave' \| 'rowMouseOut' \| 'rowMouseOver' \| 'rowDragStart' \| 'rowDragOver' \| 'rowDragEnd' \| 'columnHeaderClick' \| 'columnHeaderContextMenu' \| 'columnHeaderDoubleClick' \| 'columnHeaderOver' \| 'columnHeaderOut' \| 'columnHeaderEnter' \| 'columnHeaderLeave' \| 'columnHeaderKeyDown' \| 'columnHeaderBlur' \| 'columnHeaderDragStart' \| 'columnHeaderDragEnter' \| 'columnHeaderDragOver' \| 'columnHeaderDragEnd' \| 'columnHeaderDragEndNative' \| 'columnSeparatorDoubleClick' \| 'columnSeparatorMouseDown' \| 'columnIndexChange' \| 'headerFilterClick' \| 'headerFilterKeyDown' \| 'headerFilterMouseDown' \| 'headerFilterBlur' \| 'columnGroupHeaderKeyDown' \| 'columnGroupHeaderBlur' \| 'cellClick' \| 'cellDoubleClick' \| 'cellMouseDown' \| 'cellMouseUp' \| 'cellMouseOver' \| 'cellKeyDown' \| 'cellKeyUp' \| 'cellDragEnter' \| 'cellDragOver' \| 'paginationModelChange' \| 'filterModelChange' \| 'sortModelChange' \| 'rowSelectionChange' \| 'columnVisibilityModelChange' \| 'rowCountChange' \| 'densityChange' \| 'paginationMetaChange'` | - | - | +| handler | `GridEventListener<'columnHeaderFocus' \| 'columnGroupHeaderFocus' \| 'resize' \| 'menuOpen' \| 'columnResize' \| 'rootMount' \| 'unmount' \| 'stateChange' \| 'viewportInnerSizeChange' \| 'debouncedResize' \| 'activeStrategyProcessorChange' \| 'strategyAvailabilityChange' \| 'columnsChange' \| 'columnWidthChange' \| 'columnResizeStart' \| 'columnResizeStop' \| 'columnOrderChange' \| 'rowsSet' \| 'filteredRowsSet' \| 'sortedRowsSet' \| 'aggregationLookupSet' \| 'rowExpansionChange' \| 'renderedRowsIntervalChange' \| 'cellModeChange' \| 'cellModesModelChange' \| 'rowModesModelChange' \| 'cellEditStart' \| 'cellEditStop' \| 'rowEditStart' \| 'rowEditStop' \| 'cellFocusIn' \| 'cellFocusOut' \| 'scrollPositionChange' \| 'virtualScrollerContentSizeChange' \| 'virtualScrollerWheel' \| 'virtualScrollerTouchMove' \| 'rowsScrollEndIntersection' \| 'headerSelectionCheckboxChange' \| 'rowSelectionCheckboxChange' \| 'clipboardCopy' \| 'preferencePanelClose' \| 'preferencePanelOpen' \| 'menuClose' \| 'rowClick' \| 'rowDoubleClick' \| 'rowMouseEnter' \| 'rowMouseLeave' \| 'rowMouseOut' \| 'rowMouseOver' \| 'rowDragStart' \| 'rowDragOver' \| 'rowDragEnd' \| 'columnHeaderClick' \| 'columnHeaderContextMenu' \| 'columnHeaderDoubleClick' \| 'columnHeaderOver' \| 'columnHeaderOut' \| 'columnHeaderEnter' \| 'columnHeaderLeave' \| 'columnHeaderKeyDown' \| 'columnHeaderBlur' \| 'columnHeaderDragStart' \| 'columnHeaderDragEnter' \| 'columnHeaderDragOver' \| 'columnHeaderDragEnd' \| 'columnHeaderDragEndNative' \| 'columnSeparatorDoubleClick' \| 'columnSeparatorMouseDown' \| 'columnIndexChange' \| 'headerFilterClick' \| 'headerFilterKeyDown' \| 'headerFilterMouseDown' \| 'headerFilterBlur' \| 'columnGroupHeaderKeyDown' \| 'columnGroupHeaderBlur' \| 'cellClick' \| 'cellDoubleClick' \| 'cellMouseDown' \| 'cellMouseUp' \| 'cellMouseOver' \| 'cellKeyDown' \| 'cellKeyUp' \| 'cellDragEnter' \| 'cellDragOver' \| 'paginationModelChange' \| 'filterModelChange' \| 'sortModelChange' \| 'rowSelectionChange' \| 'columnVisibilityModelChange' \| 'rowCountChange' \| 'densityChange' \| 'paginationMetaChange'>` | - | - | +| options | `EventListenerOptions` | - | - | + +**useGridEvent Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useGridEventPriority + +**useGridEventPriority Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject` | - | - | +| eventName | `'columnHeaderFocus' \| 'columnGroupHeaderFocus' \| 'resize' \| 'menuOpen' \| 'columnResize' \| 'rootMount' \| 'unmount' \| 'stateChange' \| 'viewportInnerSizeChange' \| 'debouncedResize' \| 'activeStrategyProcessorChange' \| 'strategyAvailabilityChange' \| 'columnsChange' \| 'columnWidthChange' \| 'columnResizeStart' \| 'columnResizeStop' \| 'columnOrderChange' \| 'rowsSet' \| 'filteredRowsSet' \| 'sortedRowsSet' \| 'aggregationLookupSet' \| 'rowExpansionChange' \| 'renderedRowsIntervalChange' \| 'cellModeChange' \| 'cellModesModelChange' \| 'rowModesModelChange' \| 'cellEditStart' \| 'cellEditStop' \| 'rowEditStart' \| 'rowEditStop' \| 'cellFocusIn' \| 'cellFocusOut' \| 'scrollPositionChange' \| 'virtualScrollerContentSizeChange' \| 'virtualScrollerWheel' \| 'virtualScrollerTouchMove' \| 'rowsScrollEndIntersection' \| 'headerSelectionCheckboxChange' \| 'rowSelectionCheckboxChange' \| 'clipboardCopy' \| 'preferencePanelClose' \| 'preferencePanelOpen' \| 'menuClose' \| 'rowClick' \| 'rowDoubleClick' \| 'rowMouseEnter' \| 'rowMouseLeave' \| 'rowMouseOut' \| 'rowMouseOver' \| 'rowDragStart' \| 'rowDragOver' \| 'rowDragEnd' \| 'columnHeaderClick' \| 'columnHeaderContextMenu' \| 'columnHeaderDoubleClick' \| 'columnHeaderOver' \| 'columnHeaderOut' \| 'columnHeaderEnter' \| 'columnHeaderLeave' \| 'columnHeaderKeyDown' \| 'columnHeaderBlur' \| 'columnHeaderDragStart' \| 'columnHeaderDragEnter' \| 'columnHeaderDragOver' \| 'columnHeaderDragEnd' \| 'columnHeaderDragEndNative' \| 'columnSeparatorDoubleClick' \| 'columnSeparatorMouseDown' \| 'columnIndexChange' \| 'headerFilterClick' \| 'headerFilterKeyDown' \| 'headerFilterMouseDown' \| 'headerFilterBlur' \| 'columnGroupHeaderKeyDown' \| 'columnGroupHeaderBlur' \| 'cellClick' \| 'cellDoubleClick' \| 'cellMouseDown' \| 'cellMouseUp' \| 'cellMouseOver' \| 'cellKeyDown' \| 'cellKeyUp' \| 'cellDragEnter' \| 'cellDragOver' \| 'paginationModelChange' \| 'filterModelChange' \| 'sortModelChange' \| 'rowSelectionChange' \| 'columnVisibilityModelChange' \| 'rowCountChange' \| 'densityChange' \| 'paginationMetaChange'` | - | - | +| handler | `GridEventListener<'columnHeaderFocus' \| 'columnGroupHeaderFocus' \| 'resize' \| 'menuOpen' \| 'columnResize' \| 'rootMount' \| 'unmount' \| 'stateChange' \| 'viewportInnerSizeChange' \| 'debouncedResize' \| 'activeStrategyProcessorChange' \| 'strategyAvailabilityChange' \| 'columnsChange' \| 'columnWidthChange' \| 'columnResizeStart' \| 'columnResizeStop' \| 'columnOrderChange' \| 'rowsSet' \| 'filteredRowsSet' \| 'sortedRowsSet' \| 'aggregationLookupSet' \| 'rowExpansionChange' \| 'renderedRowsIntervalChange' \| 'cellModeChange' \| 'cellModesModelChange' \| 'rowModesModelChange' \| 'cellEditStart' \| 'cellEditStop' \| 'rowEditStart' \| 'rowEditStop' \| 'cellFocusIn' \| 'cellFocusOut' \| 'scrollPositionChange' \| 'virtualScrollerContentSizeChange' \| 'virtualScrollerWheel' \| 'virtualScrollerTouchMove' \| 'rowsScrollEndIntersection' \| 'headerSelectionCheckboxChange' \| 'rowSelectionCheckboxChange' \| 'clipboardCopy' \| 'preferencePanelClose' \| 'preferencePanelOpen' \| 'menuClose' \| 'rowClick' \| 'rowDoubleClick' \| 'rowMouseEnter' \| 'rowMouseLeave' \| 'rowMouseOut' \| 'rowMouseOver' \| 'rowDragStart' \| 'rowDragOver' \| 'rowDragEnd' \| 'columnHeaderClick' \| 'columnHeaderContextMenu' \| 'columnHeaderDoubleClick' \| 'columnHeaderOver' \| 'columnHeaderOut' \| 'columnHeaderEnter' \| 'columnHeaderLeave' \| 'columnHeaderKeyDown' \| 'columnHeaderBlur' \| 'columnHeaderDragStart' \| 'columnHeaderDragEnter' \| 'columnHeaderDragOver' \| 'columnHeaderDragEnd' \| 'columnHeaderDragEndNative' \| 'columnSeparatorDoubleClick' \| 'columnSeparatorMouseDown' \| 'columnIndexChange' \| 'headerFilterClick' \| 'headerFilterKeyDown' \| 'headerFilterMouseDown' \| 'headerFilterBlur' \| 'columnGroupHeaderKeyDown' \| 'columnGroupHeaderBlur' \| 'cellClick' \| 'cellDoubleClick' \| 'cellMouseDown' \| 'cellMouseUp' \| 'cellMouseOver' \| 'cellKeyDown' \| 'cellKeyUp' \| 'cellDragEnter' \| 'cellDragOver' \| 'paginationModelChange' \| 'filterModelChange' \| 'sortModelChange' \| 'rowSelectionChange' \| 'columnVisibilityModelChange' \| 'rowCountChange' \| 'densityChange' \| 'paginationMetaChange'>` | - | - | + +**useGridEventPriority Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useGridLogger + +**useGridLogger Parameters:** + +| Parameter | Type | Default | Description | +| :------------ | :-------------------------------- | :------ | :---------- | +| privateApiRef | `RefObject` | - | - | +| name | `string` | - | - | + +**useGridLogger Return Value:** + +```tsx +type ReturnValue = Logger; +``` + +### useGridNativeEventListener + +**useGridNativeEventListener Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | :---------- | +| apiRef | `RefObject` | - | - | +| ref | `(() => HTMLElement \| null \| undefined)` | - | - | +| eventName | `'input' \| 'progress' \| 'select' \| 'error' \| 'toggle' \| 'resize' \| 'copy' \| 'ended' \| 'seeking' \| 'load' \| 'pause' \| 'play' \| 'close' \| 'reset' \| 'submit' \| 'focus' \| 'fullscreenchange' \| 'fullscreenerror' \| 'abort' \| 'animationcancel' \| 'animationend' \| 'animationiteration' \| 'animationstart' \| 'auxclick' \| 'beforeinput' \| 'beforematch' \| 'beforetoggle' \| 'blur' \| 'cancel' \| 'canplay' \| 'canplaythrough' \| 'change' \| 'click' \| 'compositionend' \| 'compositionstart' \| 'compositionupdate' \| 'contextlost' \| 'contextmenu' \| 'contextrestored' \| 'cuechange' \| 'cut' \| 'dblclick' \| 'drag' \| 'dragend' \| 'dragenter' \| 'dragleave' \| 'dragover' \| 'dragstart' \| 'drop' \| 'durationchange' \| 'emptied' \| 'focusin' \| 'focusout' \| 'formdata' \| 'gotpointercapture' \| 'invalid' \| 'keydown' \| 'keypress' \| 'keyup' \| 'loadeddata' \| 'loadedmetadata' \| 'loadstart' \| 'lostpointercapture' \| 'mousedown' \| 'mouseenter' \| 'mouseleave' \| 'mousemove' \| 'mouseout' \| 'mouseover' \| 'mouseup' \| 'paste' \| 'playing' \| 'pointercancel' \| 'pointerdown' \| 'pointerenter' \| 'pointerleave' \| 'pointermove' \| 'pointerout' \| 'pointerover' \| 'pointerrawupdate' \| 'pointerup' \| 'ratechange' \| 'scroll' \| 'scrollend' \| 'securitypolicyviolation' \| 'seeked' \| 'selectionchange' \| 'selectstart' \| 'slotchange' \| 'stalled' \| 'suspend' \| 'timeupdate' \| 'touchcancel' \| 'touchend' \| 'touchmove' \| 'touchstart' \| 'transitioncancel' \| 'transitionend' \| 'transitionrun' \| 'transitionstart' \| 'volumechange' \| 'waiting' \| 'webkitanimationend' \| 'webkitanimationiteration' \| 'webkitanimationstart' \| 'webkittransitionend' \| 'wheel'` | - | - | +| handler | `((event: Event \| MouseEvent \| UIEvent \| ClipboardEvent \| CompositionEvent \| FocusEvent \| InputEvent \| SubmitEvent \| KeyboardEvent \| DragEvent \| TouchEvent \| PointerEvent \| WheelEvent \| AnimationEvent \| ToggleEvent \| TransitionEvent \| ProgressEvent \| ErrorEvent \| FormDataEvent \| SecurityPolicyViolationEvent) => any)` | - | - | +| options | `AddEventListenerOptions` | - | - | + +**useGridNativeEventListener Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useGridRootProps + +**useGridRootProps Return Value:** + +```tsx +type ReturnValue = DataGridProcessedProps; +``` + +### useGridSelector + +**useGridSelector Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------------------------ | :------ | :---------- | +| apiRef | `RefObject` | - | - | +| selector | `((apiRef: RefObject) => T)` | - | - | +| args | `undefined` | - | - | +| equals | `((a: U, b: U) => boolean)` | - | - | + +**useGridSelector Return Value:** + +```tsx +type ReturnValue = T; +``` + +### useGridVirtualization + +**useGridVirtualization Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :----------------------------------- | :------ | :---------- | +| apiRef | `RefObject` | - | - | +| rootProps | `RootProps` | - | - | + +**useGridVirtualization Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useRunOnce + +Runs an effect once, when `condition` is true. + +**useRunOnce Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :--------------------- | :------ | :---------- | +| condition | `boolean` | - | - | +| effect | `React.EffectCallback` | - | - | + +**useRunOnce Return Value:** + +```tsx +type ReturnValue = void; +``` + +### useRunOncePerLoop + +**useRunOncePerLoop Parameters:** + +| Parameter | Type | Default | Description | +| :-------- | :------------------------ | :------ | :---------- | +| callback | `((args: any[]) => void)` | - | - | + +**useRunOncePerLoop Return Value:** + +| Property | Type | Description | +| :------- | :-------------------- | :---------- | +| schedule | `((args: P) => void)` | - | +| cancel | `(() => boolean)` | - | + +### virtualizationStateInitializer + +**Parameters:** + +| Parameter | Type | Default | Description | +| :------------ | :----------------------------------- | :------ | :---------- | +| state | `DeepPartial` | - | - | +| props | `RootProps` | - | - | +| privateApiRef | `RefObject` | - | - | + +**Return Value:** + +```tsx +type ReturnValue = DeepPartial; +``` + +## Additional Types + +### BaseAutocompletePropsOverrides + +```typescript +type BaseAutocompletePropsOverrides = { + material?: Partial>; +}; +``` + +### BaseBadgePropsOverrides + +```typescript +type BaseBadgePropsOverrides = { material?: Partial }; +``` + +### BaseButtonPropsOverrides + +```typescript +type BaseButtonPropsOverrides = { material?: Partial }; +``` + +### BaseCheckboxPropsOverrides + +```typescript +type BaseCheckboxPropsOverrides = { material?: Partial }; +``` + +### BaseChipPropsOverrides + +```typescript +type BaseChipPropsOverrides = { material?: Partial }; +``` + +### BaseCircularProgressPropsOverrides + +```typescript +type BaseCircularProgressPropsOverrides = { material?: Partial }; +``` + +### BaseDividerPropsOverrides + +```typescript +type BaseDividerPropsOverrides = { material?: Partial }; +``` + +### BaseIconButtonPropsOverrides + +```typescript +type BaseIconButtonPropsOverrides = { material?: Partial }; +``` + +### BaseIconPropsOverrides + +```typescript +type BaseIconPropsOverrides = {}; +``` + +### BaseInputLabelPropsOverrides + +```typescript +type BaseInputLabelPropsOverrides = {}; +``` + +### BaseInputPropsOverrides + +```typescript +type BaseInputPropsOverrides = { material?: Partial }; +``` + +### BaseLinearProgressPropsOverrides + +```typescript +type BaseLinearProgressPropsOverrides = { material?: Partial }; +``` + +### BaseMenuItemPropsOverrides + +```typescript +type BaseMenuItemPropsOverrides = { material?: Partial }; +``` + +### BaseMenuListPropsOverrides + +```typescript +type BaseMenuListPropsOverrides = { material?: Partial }; +``` + +### BasePaginationPropsOverrides + +```typescript +type BasePaginationPropsOverrides = { material?: Partial }; +``` + +### BasePopperPropsOverrides + +```typescript +type BasePopperPropsOverrides = { material?: Partial }; +``` + +### BaseSelectOptionPropsOverrides + +```typescript +type BaseSelectOptionPropsOverrides = {}; +``` + +### BaseSelectPropsOverrides + +```typescript +type BaseSelectPropsOverrides = { material?: Partial }; +``` + +### BaseSkeletonPropsOverrides + +```typescript +type BaseSkeletonPropsOverrides = { material?: Partial }; +``` + +### BaseSwitchPropsOverrides + +```typescript +type BaseSwitchPropsOverrides = { material?: Partial }; +``` + +### BaseTabsPropsOverrides + +```typescript +type BaseTabsPropsOverrides = { material?: Partial }; +``` + +### BaseTextareaPropsOverrides + +```typescript +type BaseTextareaPropsOverrides = { material?: Partial }; +``` + +### BaseTextFieldPropsOverrides + +```typescript +type BaseTextFieldPropsOverrides = { material?: Partial }; +``` + +### BaseToggleButtonPropsOverrides + +```typescript +type BaseToggleButtonPropsOverrides = { material?: Partial }; +``` + +### BaseTooltipPropsOverrides + +```typescript +type BaseTooltipPropsOverrides = { material?: Partial }; +``` + +### BottomContainerPropsOverrides + +```typescript +type BottomContainerPropsOverrides = {}; +``` + +### CellPropsOverrides + +```typescript +type CellPropsOverrides = {}; +``` + +### ColumnHeaderFilterIconButtonProps + +```typescript +type ColumnHeaderFilterIconButtonProps = { + field: string; + counter?: number; + onClick?: ( + params: GridColumnHeaderParams, + event: React.MouseEvent, + ) => void; +}; +``` + +### ColumnHeaderFilterIconButtonPropsOverrides + +```typescript +type ColumnHeaderFilterIconButtonPropsOverrides = {}; +``` + +### ColumnHeaderSortIconPropsOverrides + +```typescript +type ColumnHeaderSortIconPropsOverrides = {}; +``` + +### ColumnMenuPropsOverrides + +```typescript +type ColumnMenuPropsOverrides = {}; +``` + +### ColumnsManagementPropsOverrides + +```typescript +type ColumnsManagementPropsOverrides = {}; +``` + +### ColumnsPanelPropsOverrides + +```typescript +type ColumnsPanelPropsOverrides = {}; +``` + +### ColumnsPanelState + +```typescript +type ColumnsPanelState = { + /** If `true`, the columns panel is open. */ + open: boolean; +}; +``` + +### ColumnsPanelTrigger + +A button that opens and closes the columns panel. +It renders the `baseButton` slot. + +Demos: + +- [Columns Panel](https://mui.com/x/react-data-grid/components/columns-panel/) + +API: + +- [ColumnsPanelTrigger API](https://mui.com/x/api/data-grid/columns-panel-trigger/) + +```typescript +type ColumnsPanelTrigger = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; +``` + +### ColumnsPanelTriggerProps + +```typescript +type ColumnsPanelTriggerProps = { + startIcon?: React.ReactNode; + children?: React.ReactNode; + style?: React.CSSProperties; + ref?: Ref; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + material?: Partial; + /** A function to customize rendering of the component. */ + render?: RenderProp< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + ref?: Ref; + children?: React.ReactNode; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + startIcon?: React.ReactNode; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + } & BaseButtonPropsOverrides, + ColumnsPanelState + >; + /** Override or extend the styles applied to the component. */ + className?: string | ((state: ColumnsPanelState) => string); +}; +``` + +### COMFORTABLE_DENSITY_FACTOR + +```typescript +type COMFORTABLE_DENSITY_FACTOR = 1.3; +``` + +### COMPACT_DENSITY_FACTOR + +```typescript +type COMPACT_DENSITY_FACTOR = 0.7; +``` + +### CursorCoordinates + +```typescript +type CursorCoordinates = { x: number; y: number }; +``` + +### DATA_GRID_PROPS_DEFAULT_VALUES + +The useOnMount values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid. + +```typescript +type DATA_GRID_PROPS_DEFAULT_VALUES = DataGridPropsWithDefaultValues; +``` + +### DataGridProps + +The props users can give to the Data Grid component. + +```typescript +type DataGridProps = { pagination?: true }; +``` + +### DEFAULT_GRID_AUTOSIZE_OPTIONS + +```typescript +type DEFAULT_GRID_AUTOSIZE_OPTIONS = { + includeHeaders: boolean; + includeHeaderFilters: boolean; + includeOutliers: boolean; + outliersFactor: number; + expand: boolean; + disableColumnVirtualization: boolean; +}; +``` + +### DEFAULT_GRID_COL_TYPE_KEY + +```typescript +type DEFAULT_GRID_COL_TYPE_KEY = 'string'; +``` + +### DetailPanelsPropsOverrides + +```typescript +type DetailPanelsPropsOverrides = {}; +``` + +### ElementSize + +The size of a container. + +```typescript +type ElementSize = { + /** The height of a container or HTMLElement. */ + height: number; + /** The width of a container or HTMLElement. */ + width: number; +}; +``` + +### EMPTY_PINNED_COLUMN_FIELDS + +```typescript +type EMPTY_PINNED_COLUMN_FIELDS = { left: never[]; right: never[] }; +``` + +### EMPTY_RENDER_CONTEXT + +```typescript +type EMPTY_RENDER_CONTEXT = { + firstRowIndex: number; + lastRowIndex: number; + firstColumnIndex: number; + lastColumnIndex: number; +}; +``` + +### ExportCsv + +A button that triggers a CSV export. +It renders the `baseButton` slot. + +Demos: + +- [Export](https://mui.com/x/react-data-grid/components/export/) + +API: + +- [ExportCsv API](https://mui.com/x/api/data-grid/export-csv/) + +```typescript +type ExportCsv = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; +``` + +### ExportCsvProps + +```typescript +type ExportCsvProps = React.DOMAttributes & { + className?: string; + style?: React.CSSProperties; +} & { + ref?: Ref; + children?: React.ReactNode; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + startIcon?: React.ReactNode; + tabIndex?: number; + title?: string; + touchRippleRef?: any; +} & BaseButtonPropsOverrides & { + render?: RenderProp< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + ref?: Ref; + children?: React.ReactNode; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + startIcon?: React.ReactNode; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + } & BaseButtonPropsOverrides + >; + options?: GridCsvExportOptions; + }; +``` + +### ExportPrint + +A button that triggers a print export. +It renders the `baseButton` slot. + +Demos: + +- [Export](https://mui.com/x/react-data-grid/components/export/) + +API: + +- [ExportPrint API](https://mui.com/x/api/data-grid/export-print/) + +```typescript +type ExportPrint = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; +``` + +### ExportPrintProps + +```typescript +type ExportPrintProps = React.DOMAttributes & { + className?: string; + style?: React.CSSProperties; +} & { + ref?: Ref; + children?: React.ReactNode; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + startIcon?: React.ReactNode; + tabIndex?: number; + title?: string; + touchRippleRef?: any; +} & BaseButtonPropsOverrides & { + render?: RenderProp< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + ref?: Ref; + children?: React.ReactNode; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + startIcon?: React.ReactNode; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + } & BaseButtonPropsOverrides + >; + options?: GridPrintExportOptions; + }; +``` + +### FilterColumnsArgs + +```typescript +type FilterColumnsArgs = { + field: string; + columns: GridStateColDef[]; + currentFilters: GridFilterItem[]; +}; +``` + +### FilterPanelPropsOverrides + +```typescript +type FilterPanelPropsOverrides = {}; +``` + +### FilterPanelState + +```typescript +type FilterPanelState = { + /** If `true`, the filter panel is open. */ + open: boolean; + /** The number of active filters. */ + filterCount: number; +}; +``` + +### FilterPanelTrigger + +A button that opens and closes the filter panel. +It renders the `baseButton` slot. + +Demos: + +- [Filter Panel](https://mui.com/x/react-data-grid/components/filter-panel/) + +API: + +- [FilterPanelTrigger API](https://mui.com/x/api/data-grid/filter-panel-trigger/) + +```typescript +type FilterPanelTrigger = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; +``` + +### FilterPanelTriggerProps + +```typescript +type FilterPanelTriggerProps = { + startIcon?: React.ReactNode; + children?: React.ReactNode; + style?: React.CSSProperties; + ref?: Ref; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + material?: Partial; + /** A function to customize rendering of the component. */ + render?: RenderProp< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + ref?: Ref; + children?: React.ReactNode; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + startIcon?: React.ReactNode; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + } & BaseButtonPropsOverrides, + FilterPanelState + >; + /** A function to customize rendering of the component. */ + className?: string | ((state: FilterPanelState) => string); +}; +``` + +### FooterPropsOverrides + +```typescript +type FooterPropsOverrides = {}; +``` + +### FooterRowCountOverrides + +```typescript +type FooterRowCountOverrides = {}; +``` + +### GetColumnForNewFilterArgs + +```typescript +type GetColumnForNewFilterArgs = { currentFilters: GridFilterItem[]; columns: GridStateColDef[] }; +``` + +### GRID_ACTIONS_COL_DEF + +```typescript +type GRID_ACTIONS_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: (sortDirection: GridSortDirection) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: any[]; +}; +``` + +### GRID_ACTIONS_COLUMN_TYPE + +```typescript +type GRID_ACTIONS_COLUMN_TYPE = 'actions'; +``` + +### GRID_BOOLEAN_COL_DEF + +```typescript +type GRID_BOOLEAN_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: ( + sortDirection: GridSortDirection, + ) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: (boolean | null)[]; +}; +``` + +### GRID_CHECKBOX_SELECTION_COL_DEF + +```typescript +type GRID_CHECKBOX_SELECTION_COL_DEF = GridColDef; +``` + +### GRID_CHECKBOX_SELECTION_FIELD + +```typescript +type GRID_CHECKBOX_SELECTION_FIELD = '__check__'; +``` + +### GRID_COLUMN_MENU_SLOT_PROPS + +```typescript +type GRID_COLUMN_MENU_SLOT_PROPS = { + columnMenuSortItem: { displayOrder: number }; + columnMenuFilterItem: { displayOrder: number }; + columnMenuColumnsItem: { displayOrder: number }; +}; +``` + +### GRID_COLUMN_MENU_SLOTS + +```typescript +type GRID_COLUMN_MENU_SLOTS = { + columnMenuSortItem: GridColumnMenuSortItem; + columnMenuFilterItem: GridColumnMenuFilterItem; + columnMenuColumnsItem: GridColumnMenuColumnsItem; +}; +``` + +### GRID_DATE_COL_DEF + +```typescript +type GRID_DATE_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: (sortDirection: GridSortDirection) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: Date[]; +}; +``` + +### GRID_DATETIME_COL_DEF + +```typescript +type GRID_DATETIME_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: (sortDirection: GridSortDirection) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: Date[]; +}; +``` + +### GRID_DEFAULT_LOCALE_TEXT + +```typescript +type GRID_DEFAULT_LOCALE_TEXT = GridLocaleText; +``` + +### GRID_EXPERIMENTAL_ENABLED + +```typescript +type GRID_EXPERIMENTAL_ENABLED = false; +``` + +### GRID_LONG_TEXT_COL_DEF + +```typescript +type GRID_LONG_TEXT_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: ( + sortDirection: GridSortDirection, + ) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: (string | null)[]; +}; +``` + +### GRID_NUMERIC_COL_DEF + +```typescript +type GRID_NUMERIC_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: ( + sortDirection: GridSortDirection, + ) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: ( + params: GridColumnHeaderParams, + ) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: (string | number | null)[]; +}; +``` + +### GRID_ROOT_GROUP_ID + +```typescript +type GRID_ROOT_GROUP_ID = GridRowId; +``` + +### GRID_SINGLE_SELECT_COL_DEF + +```typescript +type GRID_SINGLE_SELECT_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'singleSelect' + */ + type: 'singleSelect'; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Used to determine the label displayed for a given value option. + * @default {defaultGetOptionLabel} + * @returns The text to be displayed. + */ + getOptionLabel: (value: ValueOptions) => string; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** 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. */ + valueOptions?: ValueOptions[] | ((params: GridValueOptionsParams) => ValueOptions[]); + /** + * Used to determine the value used for a value option. + * @default {defaultGetOptionValue} + * @returns The value to be used. + */ + getOptionValue: (value: ValueOptions) => any; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: (sortDirection: GridSortDirection) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: any[]; +}; +``` + +### GRID_STRING_COL_DEF + +TODO: Move pro and premium properties outside of this Community file + +```typescript +type GRID_STRING_COL_DEF = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: ( + params: GridRenderCellParams, + ) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: (sortDirection: GridSortDirection) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: any[]; +}; +``` + +### GridActionsCellItem + +```typescript +type GridActionsCellItem = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + | (GridActionsCellItemCommonProps & { + showInMenu: true; + closeMenuOnClick?: boolean; + closeMenu?: () => void; + label: React.ReactNode; + } & Omit< + React.DOMAttributes & { + className?: string; + style?: React.CSSProperties; + } & { + autoFocus?: boolean; + children?: React.ReactNode; + inert?: boolean; + disabled?: boolean; + iconStart?: React.ReactNode; + iconEnd?: React.ReactNode; + selected?: boolean; + value?: number | string | string[]; + style?: React.CSSProperties; + } & BaseMenuItemPropsOverrides, + 'component' + > & + React.RefAttributes) + | (Omit< + { + icon?: React.JSXElementConstructor | React.ReactNode; + component?: React.ElementType; + showInMenu?: false; + icon: ReactElement; + label: string; + children?: React.ReactNode; + className?: string; + style?: React.CSSProperties; + ref?: Ref; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + label?: string; + color?: 'default' | 'inherit' | 'primary'; + edge?: 'start' | 'end' | false; + material?: Partial; + }, + 'ref' + > & + React.RefAttributes) + >; +``` + +### GridActionsCellItemProps + +```typescript +type GridActionsCellItemProps = ( + | { + showInMenu?: false; + label: string; + ref?: Ref; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + label?: string; + color?: 'default' | 'inherit' | 'primary'; + edge?: 'start' | 'end' | false; + material?: Partial; + } + | { + showInMenu: true; + closeMenuOnClick?: boolean; + closeMenu?: () => void; + label: React.ReactNode; + value?: number | string | string[]; + material?: Partial; + autoFocus?: boolean; + inert?: boolean; + iconStart?: React.ReactNode; + iconEnd?: React.ReactNode; + selected?: boolean; + } +) & { + icon?: React.JSXElementConstructor | React.ReactNode; + /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */ + component?: React.ElementType; + icon: ReactElement; + children?: React.ReactNode; + className?: string; + style?: React.CSSProperties; + disabled?: boolean; +}; +``` + +### GridActionsColDef + +Column Definition interface used for columns with the `actions` type. + +```typescript +type GridActionsColDef = { + /** + * The type of the column. + * @default 'actions' + */ + type: 'actions'; + /** + * Function that returns the actions to be shown. + * @returns An array of [[GridActionsCell]] elements. + * @deprecated Use `renderCell` instead + * @example + * // Before + * getActions: (params) => [ + * , + * , + * ], + * // After + * renderCell: (params) => ( + * + * + * + * + * ), + */ + getActions: (params: GridRowParams) => ReactElement[]; + /** The unique identifier of the column. Used to map with [[GridRowModel]] values. */ + field: string; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: (sortDirection: GridSortDirection) => GridComparatorFn | undefined; + /** Align cell content. */ + align?: GridAlignment; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: (params: GridRenderCellParams) => React.ReactNode; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: V[]; +}; +``` + +### GridAlignment + +Alignment used in position elements in Cells. + +```typescript +type GridAlignment = 'left' | 'right' | 'center'; +``` + +### GridApi + +The full grid API. + +```typescript +type GridApi = GridApiCommunity; +``` + +### GridApiCommon + +```typescript +type GridApiCommon< + GridState extends GridStateCommunity = GridStateCommunity, + GridInitialState extends GridInitialStateCommunity = GridInitialStateCommunity, +> = {}; +``` + +### GridApiContext + +```typescript +type GridApiContext = React.Context; +``` + +### GridAutoGeneratedGroupNode + +```typescript +type GridAutoGeneratedGroupNode = { + /** + * If `true`, this node has been automatically generated by the grid. + * In the row grouping, all groups are auto-generated + * In the tree data, some groups can be passed in the rows + */ + isAutoGenerated: true; + type: 'group'; + /** The key used to group the children of this row. */ + groupingKey: GridKeyValue | null; + /** + * The field used to group the children of this row. + * Is `null` if no field has been used to group the children of this row. + */ + groupingField: string | null; + /** + * The id of the body children nodes. + * Only contains the children of type "group" and "leaf". + */ + children: GridRowId[]; + /** The id of the footer child node. */ + footerId?: GridRowId | null; + /** + * The id of the children nodes, grouped by grouping field and grouping key. + * Only contains the children of type "group" and "leaf". + * Empty for flat tree. + */ + childrenFromPath: GridChildrenFromPathLookup; + /** + * If `true`, the children of this group are not visible. + * @default false + */ + childrenExpanded?: boolean; + /** The id of the group containing this node (null for the root group). */ + parent: GridRowId | null; + /** + * If `true`, this row is pinned. + * @default false + */ + isPinned?: boolean; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### GridAutoGeneratedPinnedRowNode + +```typescript +type GridAutoGeneratedPinnedRowNode = { + /** If `true`, this node has been automatically generated by the grid. */ + isAutoGenerated: false; + type: 'pinnedRow'; + /** + * The id of the group containing this node. + * Is always equal to `GRID_ROOT_GROUP_ID`. + */ + parent: GridRowId; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### GridAutosizeOptions + +```typescript +type GridAutosizeOptions = { + /** The columns to autosize. By default, applies to all columns. */ + columns?: string[]; + /** + * If true, include the header widths in the calculation. + * @default false + */ + includeHeaders?: boolean; + /** + * If true, include header filter widths in the calculation. + * Only applies when header filters are enabled. + * @default false + */ + includeHeaderFilters?: boolean; + /** + * If true, width outliers will be ignored. + * @default false + */ + includeOutliers?: boolean; + /** + * The IQR factor range to detect outliers. + * @default 1.5 + */ + outliersFactor?: number; + /** + * If the total width is less than the available width, expand columns to fill it. + * @default false + */ + expand?: boolean; + /** + * If false, column virtualization is not disabled while resizing. + * @default true + */ + disableColumnVirtualization?: boolean; +}; +``` + +### GridBaseIconProps + +```typescript +type GridBaseIconProps = React.DOMAttributes & { + className?: string; + style?: React.CSSProperties; +} & { + fontSize?: 'small' | 'medium' | 'large' | 'inherit'; + color?: string; + titleAccess?: string; +} & BaseIconPropsOverrides; +``` + +### GridBasicGroupNode + +```typescript +type GridBasicGroupNode = { + type: 'group'; + /** The key used to group the children of this row. */ + groupingKey: GridKeyValue | null; + /** + * The field used to group the children of this row. + * Is `null` if no field has been used to group the children of this row. + */ + groupingField: string | null; + /** + * The id of the body children nodes. + * Only contains the children of type "group" and "leaf". + */ + children: GridRowId[]; + /** The id of the footer child node. */ + footerId?: GridRowId | null; + /** + * The id of the children nodes, grouped by grouping field and grouping key. + * Only contains the children of type "group" and "leaf". + * Empty for flat tree. + */ + childrenFromPath: GridChildrenFromPathLookup; + /** + * If `true`, the children of this group are not visible. + * @default false + */ + childrenExpanded?: boolean; + /** The id of the group containing this node (null for the root group). */ + parent: GridRowId | null; + /** + * If `true`, this row is pinned. + * @default false + */ + isPinned?: boolean; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### GridBooleanCell + +```typescript +type GridBooleanCell = React.MemoExoticComponent; +``` + +### GridCallbackDetails + +Additional details passed to the callbacks + +```typescript +type GridCallbackDetails = { + /** The reason for this callback to have been called. */ + reason?: + | 'setPaginationModel' + | 'upsertFilterItem' + | 'upsertFilterItems' + | 'deleteFilterItem' + | 'restoreState' + | 'changeLogicOperator' + | 'removeAllFilterItems' + | 'addSkeletonRows' + | 'stateRestorePreProcessing' + | 'singleRowSelection' + | 'multipleRowsSelection'; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommon; +}; +``` + +### GridCell + +```typescript +type GridCell = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + React.HTMLAttributes & { + align: GridAlignment; + className?: string; + colIndex: number; + column: GridStateColDef; + row: GridRowModel; + rowId: GridRowId; + rowNode: GridTreeNode; + width: number; + colSpan?: number; + disableDragEvents?: boolean; + isNotVisible: boolean; + pinnedOffset?: number; + pinnedPosition: unknown; + showRightBorder: boolean; + showLeftBorder: boolean; + onClick?: React.MouseEventHandler; + onDoubleClick?: React.MouseEventHandler; + onMouseEnter?: React.MouseEventHandler; + onMouseDown?: React.MouseEventHandler; + onMouseLeave?: React.MouseEventHandler; + onMouseUp?: React.MouseEventHandler; + onMouseOver?: React.MouseEventHandler; + onKeyUp?: React.KeyboardEventHandler; + onKeyDown?: React.KeyboardEventHandler; + onDragEnter?: React.DragEventHandler; + onDragOver?: React.DragEventHandler; + onFocus?: React.FocusEventHandler; + children?: React.ReactNode; + style?: React.CSSProperties; + } & React.RefAttributes + >; +``` + +### GridCellCheckboxForwardRef + +```typescript +type GridCellCheckboxForwardRef = + | React.ForwardRefExoticComponent> + | React.ForwardRefExoticComponent< + GridRenderCellParams & + React.RefAttributes + >; +``` + +### GridCellCheckboxRenderer + +```typescript +type GridCellCheckboxRenderer = + | React.ForwardRefExoticComponent> + | React.ForwardRefExoticComponent< + GridRenderCellParams & + React.RefAttributes + >; +``` + +### GridCellClassNamePropType + +The union type representing the \[\[GridColDef]] cell class type. + +```typescript +type GridCellClassNamePropType = + | string + | GridCellClassFn; +``` + +### GridCellCoordinates + +The coordinates of a cell represented by their row ID and column field. + +```typescript +type GridCellCoordinates = { id: GridRowId; field: string }; +``` + +### GridCellEditStartParams + +Params passed to the `cellEditStart` event. + +```typescript +type GridCellEditStartParams = { + /** The reason for this event to be triggered. */ + reason?: unknown; + /** + * If the reason is related to a keyboard event, it contains which key was pressed. + * @deprecated No longer needed. + */ + key?: string; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: V; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: F; + /** The row model of the row that the current cell belongs to. */ + row: R; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNode; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; +}; +``` + +### GridCellEditStartReasons + +| Member | Value | Description | +| :--------------- | :----------------- | :---------- | +| enterKeyDown | `enterKeyDown` | - | +| cellDoubleClick | `cellDoubleClick` | - | +| printableKeyDown | `printableKeyDown` | - | +| deleteKeyDown | `deleteKeyDown` | - | +| pasteKeyDown | `pasteKeyDown` | - | + +### GridCellEditStopParams + +Params passed to the \`cellEditStop event. + +```typescript +type GridCellEditStopParams = { + /** The reason for this event to be triggered. */ + reason?: unknown; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: V; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: F; + /** The row model of the row that the current cell belongs to. */ + row: R; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNode; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; +}; +``` + +### GridCellEditStopReasons + +| Member | Value | Description | +| :-------------- | :---------------- | :---------- | +| cellFocusOut | `cellFocusOut` | - | +| escapeKeyDown | `escapeKeyDown` | - | +| enterKeyDown | `enterKeyDown` | - | +| tabKeyDown | `tabKeyDown` | - | +| shiftTabKeyDown | `shiftTabKeyDown` | - | + +### GridCellEventLookup + +```typescript +type GridCellEventLookup = { + /** Fired when a cell is clicked. */ + cellClick: { + params: GridCellParams; + event: React.MouseEvent; + }; + /** Fired when a cell is double-clicked. */ + cellDoubleClick: { + params: GridCellParams; + event: React.MouseEvent; + }; + /** Fired when a `mousedown` event happens in a cell. */ + cellMouseDown: { + params: GridCellParams; + event: React.MouseEvent; + }; + /** Fired when a `mouseup` event happens in a cell. */ + cellMouseUp: { + params: GridCellParams; + event: React.MouseEvent; + }; + /** Fired when a `mouseover` event happens in a cell. */ + cellMouseOver: { + params: GridCellParams; + event: React.MouseEvent; + }; + /** Fired when a `keydown` event happens in a cell. */ + cellKeyDown: { + params: GridCellParams; + event: React.KeyboardEvent; + }; + /** Fired when a `keyup` event happens in a cell. */ + cellKeyUp: { + params: GridCellParams; + event: React.KeyboardEvent; + }; + /** + * Fired when the dragged cell enters a valid drop target. It's mapped to the `dragend` DOM event. + * @ignore - do not document. + */ + cellDragEnter: { + params: GridCellParams; + event: React.DragEvent; + }; + /** + * Fired while an element or text selection is dragged over the cell. + * It's mapped to the `dragover` DOM event. + * @ignore - do not document. + */ + cellDragOver: { + params: GridCellParams; + event: React.DragEvent; + }; +}; +``` + +### GridCellIndexCoordinates + +The coordinates of cell represented by their row and column indexes. + +```typescript +type GridCellIndexCoordinates = { colIndex: number; rowIndex: number }; +``` + +### GridCellMode + +The mode of the cell. + +```typescript +type GridCellMode = 'edit' | 'view'; +``` + +### GridCellModes + +| Member | Value | Description | +| :----- | :----- | :---------- | +| Edit | `edit` | - | +| View | `view` | - | + +### GridCellModesModel + +```typescript +type GridCellModesModel = { [key: string]: Record }; +``` + +### GridCellParams + +Object passed as parameter in the column \[\[GridColDef]] cell renderer. + +```typescript +type GridCellParams< + R extends GridValidRowModel = any, + V = unknown, + F = V, + N extends GridTreeNode = GridTreeNode, +> = { + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: V; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: F; + /** The row model of the row that the current cell belongs to. */ + row: R; + /** The node of the row that the current cell belongs to. */ + rowNode: N; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; +}; +``` + +### GridCellProps + +```typescript +type GridCellProps = React.HTMLAttributes & { + align: GridAlignment; + className?: string; + colIndex: number; + column: GridStateColDef; + row: GridRowModel; + rowId: GridRowId; + rowNode: GridTreeNode; + width: number; + colSpan?: number; + disableDragEvents?: boolean; + isNotVisible: boolean; + pinnedOffset?: number; + pinnedPosition: unknown; + showRightBorder: boolean; + showLeftBorder: boolean; + onClick?: React.MouseEventHandler; + onDoubleClick?: React.MouseEventHandler; + onMouseEnter?: React.MouseEventHandler; + onMouseDown?: React.MouseEventHandler; + onMouseLeave?: React.MouseEventHandler; + onMouseUp?: React.MouseEventHandler; + onMouseOver?: React.MouseEventHandler; + onKeyUp?: React.KeyboardEventHandler; + onKeyDown?: React.KeyboardEventHandler; + onDragEnter?: React.DragEventHandler; + onDragOver?: React.DragEventHandler; + onFocus?: React.FocusEventHandler; + children?: React.ReactNode; + style?: React.CSSProperties; +}; +``` + +### GridChildrenFromPathLookup + +```typescript +type GridChildrenFromPathLookup = { [groupingField: string]: { [groupingKey: string]: GridRowId } }; +``` + +### gridClasses + +```typescript +type gridClasses = Record< + | 'main' + | 'menu' + | 'autoHeight' + | 'rowCount' + | 'cell' + | 'columnHeaders' + | 'toolbar' + | 'pinnedRows' + | 'columnsManagement' + | 'panel' + | 'row' + | 'rowReorderIcon' + | 'aiAssistantPanelTitle' + | 'scrollbar' + | 'overlay' + | 'paper' + | 'selectedRowCount' + | 'aiAssistantPanel' + | 'aiAssistantPanelHeader' + | 'aiAssistantPanelTitleContainer' + | 'aiAssistantPanelBody' + | 'aiAssistantPanelConversationTitle' + | 'aiAssistantPanelEmptyText' + | 'aiAssistantPanelFooter' + | 'aiAssistantPanelConversation' + | 'aiAssistantPanelConversationList' + | 'aiAssistantPanelSuggestions' + | 'aiAssistantPanelSuggestionsList' + | 'aiAssistantPanelSuggestionsItem' + | 'aiAssistantPanelSuggestionsLabel' + | 'actionsCell' + | 'aggregationColumnHeader' + | 'aggregationColumnHeader--alignLeft' + | 'aggregationColumnHeader--alignCenter' + | 'aggregationColumnHeader--alignRight' + | 'aggregationColumnHeaderLabel' + | 'aggregationRowOverlayWrapper' + | 'autosizing' + | 'withSidePanel' + | 'booleanCell' + | 'cell--editable' + | 'cell--editing' + | 'cell--flex' + | 'cell--textCenter' + | 'cell--textLeft' + | 'cell--textRight' + | 'cell--rangeTop' + | 'cell--rangeBottom' + | 'cell--rangeLeft' + | 'cell--rangeRight' + | 'cell--withFillHandle' + | 'cell--fillPreview' + | 'cell--fillPreviewTop' + | 'cell--fillPreviewBottom' + | 'cell--fillPreviewLeft' + | 'cell--fillPreviewRight' + | 'cell--pinnedLeft' + | 'cell--pinnedRight' + | 'cell--selectionMode' + | 'cellCheckbox' + | 'cellEmpty' + | 'cellSkeleton' + | 'cellOffsetLeft' + | 'checkboxInput' + | 'columnHeader' + | 'collapsible' + | 'collapsibleIcon' + | 'collapsibleTrigger' + | 'collapsiblePanel' + | 'columnHeader--alignCenter' + | 'columnHeader--alignLeft' + | 'columnHeader--alignRight' + | 'columnHeader--dragging' + | 'columnHeader--moving' + | 'columnHeader--numeric' + | 'columnHeader--sortable' + | 'columnHeader--sorted' + | 'columnHeader--filtered' + | 'columnHeader--pinnedLeft' + | 'columnHeader--pinnedRight' + | 'columnHeader--last' + | 'columnHeader--siblingFocused' + | 'columnHeaderFilterInput' + | 'columnHeaderFilterOperatorLabel' + | 'columnHeaderCheckbox' + | 'columnHeaderDraggableContainer' + | 'rowReorderCellPlaceholder' + | 'columnHeaderTitle' + | 'columnHeaderTitleContainer' + | 'columnHeaderTitleContainerContent' + | 'columnHeader--filledGroup' + | 'columnHeader--emptyGroup' + | 'columnHeader--filter' + | 'columnSeparator--resizable' + | 'columnSeparator--resizing' + | 'columnSeparator--sideLeft' + | 'columnSeparator--sideRight' + | 'columnSeparator' + | 'columnsManagementRow' + | 'columnsManagementHeader' + | 'columnsManagementSearchInput' + | 'columnsManagementFooter' + | 'columnsManagementScrollArea' + | 'columnsManagementEmptyText' + | 'contentFiller' + | 'container--top' + | 'container--bottom' + | 'detailPanel' + | 'detailPanelToggleCell' + | 'detailPanelToggleCell--expanded' + | 'footerCell' + | 'panelHeader' + | 'panelWrapper' + | 'panelContent' + | 'panelFooter' + | 'editBooleanCell' + | 'filler' + | 'filler--borderBottom' + | 'filler--pinnedLeft' + | 'filler--pinnedRight' + | 'filler--horizontal' + | 'filterForm' + | 'filterFormDeleteIcon' + | 'filterFormLogicOperatorInput' + | 'filterFormColumnInput' + | 'filterFormOperatorInput' + | 'filterFormValueInput' + | 'editInputCell' + | 'longTextCell' + | 'longTextCellContent' + | 'longTextCellExpandButton' + | 'longTextCellCollapseButton' + | 'longTextCellPopup' + | 'longTextCellPopperContent' + | 'editLongTextCell' + | 'editLongTextCellValue' + | 'editLongTextCellPopup' + | 'editLongTextCellPopperContent' + | 'editLongTextCellTextarea' + | 'filterIcon' + | 'footerContainer' + | 'iconButtonContainer' + | 'iconSeparator' + | 'headerFilterRow' + | 'mainContent' + | 'main--hasPinnedRight' + | 'main--hiddenContent' + | 'menuIcon' + | 'menuIconButton' + | 'menuOpen' + | 'menuList' + | 'overlayWrapper' + | 'overlayWrapperInner' + | 'virtualScroller' + | 'virtualScroller--hasScrollX' + | 'virtualScrollerContent' + | 'virtualScrollerContent--overflowed' + | 'virtualScrollerRenderZone' + | 'resizablePanelHandle' + | 'resizablePanelHandle--horizontal' + | 'resizablePanelHandle--vertical' + | 'root' + | 'root--densityStandard' + | 'root--densityComfortable' + | 'root--densityCompact' + | 'root--disableUserSelection' + | 'root--noToolbar' + | 'virtualizer--layoutControlled' + | 'row--editable' + | 'row--editing' + | 'row--dragging' + | 'row--beingDragged' + | 'row--firstVisible' + | 'row--lastVisible' + | 'row--dynamicHeight' + | 'row--detailPanelExpanded' + | 'row--borderBottom' + | 'rowReorderCellContainer' + | 'rowReorderCell' + | 'rowReorderCell--draggable' + | 'rowSkeleton' + | 'scrollArea' + | 'scrollArea--left' + | 'scrollArea--right' + | 'scrollArea--up' + | 'scrollArea--down' + | 'scrollbar--horizontal' + | 'scrollbar--vertical' + | 'scrollbarFiller' + | 'scrollbarFiller--pinnedRight' + | 'scrollShadow' + | 'scrollShadow--horizontal' + | 'scrollShadow--vertical' + | 'sortButton' + | 'sortIcon' + | 'toolbarLabel' + | 'toolbarDivider' + | 'shadowScrollArea' + | 'sidebar' + | 'sidebarHeader' + | 'toolbarContainer' + | 'toolbarFilterList' + | 'toolbarQuickFilter' + | 'toolbarQuickFilterTrigger' + | 'toolbarQuickFilterControl' + | 'withVerticalBorder' + | 'withBorderColor' + | 'cell--withRightBorder' + | 'cell--withLeftBorder' + | 'columnHeader--withRightBorder' + | 'columnHeader--withLeftBorder' + | 'treeDataGroupingCell' + | 'treeDataGroupingCellToggle' + | 'treeDataGroupingCellLoadingContainer' + | 'groupingCriteriaCell' + | 'groupingCriteriaCellToggle' + | 'groupingCriteriaCellLoadingContainer' + | 'pinnedRows--top' + | 'pinnedRows--bottom' + | 'pivotPanelAvailableFields' + | 'pivotPanelBody' + | 'pivotPanelField' + | 'pivotPanelFieldActionContainer' + | 'pivotPanelFieldCheckbox' + | 'pivotPanelFieldDragIcon' + | 'pivotPanelFieldList' + | 'pivotPanelFieldName' + | 'pivotPanelField--sorted' + | 'pivotPanelHeader' + | 'pivotPanelPlaceholder' + | 'pivotPanelScrollArea' + | 'pivotPanelSearchContainer' + | 'pivotPanelSection' + | 'pivotPanelSectionTitle' + | 'pivotPanelSections' + | 'pivotPanelSwitch' + | 'pivotPanelSwitchLabel' + | 'prompt' + | 'promptContent' + | 'promptText' + | 'promptFeedback' + | 'promptChangeList' + | 'promptChangesToggle' + | 'promptChangesToggleIcon' + | 'promptIconContainer' + | 'promptIcon' + | 'promptError' + | 'promptAction', + string +>; +``` + +### GridClasses + +```typescript +type GridClasses = {}; +``` + +### GridClassKey + +```typescript +type GridClassKey = + | 'main' + | 'menu' + | 'autoHeight' + | 'rowCount' + | 'cell' + | 'columnHeaders' + | 'toolbar' + | 'pinnedRows' + | 'columnsManagement' + | 'panel' + | 'row' + | 'rowReorderIcon' + | 'aiAssistantPanelTitle' + | 'scrollbar' + | 'overlay' + | 'paper' + | 'selectedRowCount' + | 'aiAssistantPanel' + | 'aiAssistantPanelHeader' + | 'aiAssistantPanelTitleContainer' + | 'aiAssistantPanelBody' + | 'aiAssistantPanelConversationTitle' + | 'aiAssistantPanelEmptyText' + | 'aiAssistantPanelFooter' + | 'aiAssistantPanelConversation' + | 'aiAssistantPanelConversationList' + | 'aiAssistantPanelSuggestions' + | 'aiAssistantPanelSuggestionsList' + | 'aiAssistantPanelSuggestionsItem' + | 'aiAssistantPanelSuggestionsLabel' + | 'actionsCell' + | 'aggregationColumnHeader' + | 'aggregationColumnHeader--alignLeft' + | 'aggregationColumnHeader--alignCenter' + | 'aggregationColumnHeader--alignRight' + | 'aggregationColumnHeaderLabel' + | 'aggregationRowOverlayWrapper' + | 'autosizing' + | 'withSidePanel' + | 'booleanCell' + | 'cell--editable' + | 'cell--editing' + | 'cell--flex' + | 'cell--textCenter' + | 'cell--textLeft' + | 'cell--textRight' + | 'cell--rangeTop' + | 'cell--rangeBottom' + | 'cell--rangeLeft' + | 'cell--rangeRight' + | 'cell--withFillHandle' + | 'cell--fillPreview' + | 'cell--fillPreviewTop' + | 'cell--fillPreviewBottom' + | 'cell--fillPreviewLeft' + | 'cell--fillPreviewRight' + | 'cell--pinnedLeft' + | 'cell--pinnedRight' + | 'cell--selectionMode' + | 'cellCheckbox' + | 'cellEmpty' + | 'cellSkeleton' + | 'cellOffsetLeft' + | 'checkboxInput' + | 'columnHeader' + | 'collapsible' + | 'collapsibleIcon' + | 'collapsibleTrigger' + | 'collapsiblePanel' + | 'columnHeader--alignCenter' + | 'columnHeader--alignLeft' + | 'columnHeader--alignRight' + | 'columnHeader--dragging' + | 'columnHeader--moving' + | 'columnHeader--numeric' + | 'columnHeader--sortable' + | 'columnHeader--sorted' + | 'columnHeader--filtered' + | 'columnHeader--pinnedLeft' + | 'columnHeader--pinnedRight' + | 'columnHeader--last' + | 'columnHeader--siblingFocused' + | 'columnHeaderFilterInput' + | 'columnHeaderFilterOperatorLabel' + | 'columnHeaderCheckbox' + | 'columnHeaderDraggableContainer' + | 'rowReorderCellPlaceholder' + | 'columnHeaderTitle' + | 'columnHeaderTitleContainer' + | 'columnHeaderTitleContainerContent' + | 'columnHeader--filledGroup' + | 'columnHeader--emptyGroup' + | 'columnHeader--filter' + | 'columnSeparator--resizable' + | 'columnSeparator--resizing' + | 'columnSeparator--sideLeft' + | 'columnSeparator--sideRight' + | 'columnSeparator' + | 'columnsManagementRow' + | 'columnsManagementHeader' + | 'columnsManagementSearchInput' + | 'columnsManagementFooter' + | 'columnsManagementScrollArea' + | 'columnsManagementEmptyText' + | 'contentFiller' + | 'container--top' + | 'container--bottom' + | 'detailPanel' + | 'detailPanelToggleCell' + | 'detailPanelToggleCell--expanded' + | 'footerCell' + | 'panelHeader' + | 'panelWrapper' + | 'panelContent' + | 'panelFooter' + | 'editBooleanCell' + | 'filler' + | 'filler--borderBottom' + | 'filler--pinnedLeft' + | 'filler--pinnedRight' + | 'filler--horizontal' + | 'filterForm' + | 'filterFormDeleteIcon' + | 'filterFormLogicOperatorInput' + | 'filterFormColumnInput' + | 'filterFormOperatorInput' + | 'filterFormValueInput' + | 'editInputCell' + | 'longTextCell' + | 'longTextCellContent' + | 'longTextCellExpandButton' + | 'longTextCellCollapseButton' + | 'longTextCellPopup' + | 'longTextCellPopperContent' + | 'editLongTextCell' + | 'editLongTextCellValue' + | 'editLongTextCellPopup' + | 'editLongTextCellPopperContent' + | 'editLongTextCellTextarea' + | 'filterIcon' + | 'footerContainer' + | 'iconButtonContainer' + | 'iconSeparator' + | 'headerFilterRow' + | 'mainContent' + | 'main--hasPinnedRight' + | 'main--hiddenContent' + | 'menuIcon' + | 'menuIconButton' + | 'menuOpen' + | 'menuList' + | 'overlayWrapper' + | 'overlayWrapperInner' + | 'virtualScroller' + | 'virtualScroller--hasScrollX' + | 'virtualScrollerContent' + | 'virtualScrollerContent--overflowed' + | 'virtualScrollerRenderZone' + | 'resizablePanelHandle' + | 'resizablePanelHandle--horizontal' + | 'resizablePanelHandle--vertical' + | 'root' + | 'root--densityStandard' + | 'root--densityComfortable' + | 'root--densityCompact' + | 'root--disableUserSelection' + | 'root--noToolbar' + | 'virtualizer--layoutControlled' + | 'row--editable' + | 'row--editing' + | 'row--dragging' + | 'row--beingDragged' + | 'row--firstVisible' + | 'row--lastVisible' + | 'row--dynamicHeight' + | 'row--detailPanelExpanded' + | 'row--borderBottom' + | 'rowReorderCellContainer' + | 'rowReorderCell' + | 'rowReorderCell--draggable' + | 'rowSkeleton' + | 'scrollArea' + | 'scrollArea--left' + | 'scrollArea--right' + | 'scrollArea--up' + | 'scrollArea--down' + | 'scrollbar--horizontal' + | 'scrollbar--vertical' + | 'scrollbarFiller' + | 'scrollbarFiller--pinnedRight' + | 'scrollShadow' + | 'scrollShadow--horizontal' + | 'scrollShadow--vertical' + | 'sortButton' + | 'sortIcon' + | 'toolbarLabel' + | 'toolbarDivider' + | 'shadowScrollArea' + | 'sidebar' + | 'sidebarHeader' + | 'toolbarContainer' + | 'toolbarFilterList' + | 'toolbarQuickFilter' + | 'toolbarQuickFilterTrigger' + | 'toolbarQuickFilterControl' + | 'withVerticalBorder' + | 'withBorderColor' + | 'cell--withRightBorder' + | 'cell--withLeftBorder' + | 'columnHeader--withRightBorder' + | 'columnHeader--withLeftBorder' + | 'treeDataGroupingCell' + | 'treeDataGroupingCellToggle' + | 'treeDataGroupingCellLoadingContainer' + | 'groupingCriteriaCell' + | 'groupingCriteriaCellToggle' + | 'groupingCriteriaCellLoadingContainer' + | 'pinnedRows--top' + | 'pinnedRows--bottom' + | 'pivotPanelAvailableFields' + | 'pivotPanelBody' + | 'pivotPanelField' + | 'pivotPanelFieldActionContainer' + | 'pivotPanelFieldCheckbox' + | 'pivotPanelFieldDragIcon' + | 'pivotPanelFieldList' + | 'pivotPanelFieldName' + | 'pivotPanelField--sorted' + | 'pivotPanelHeader' + | 'pivotPanelPlaceholder' + | 'pivotPanelScrollArea' + | 'pivotPanelSearchContainer' + | 'pivotPanelSection' + | 'pivotPanelSectionTitle' + | 'pivotPanelSections' + | 'pivotPanelSwitch' + | 'pivotPanelSwitchLabel' + | 'prompt' + | 'promptContent' + | 'promptText' + | 'promptFeedback' + | 'promptChangeList' + | 'promptChangesToggle' + | 'promptChangesToggleIcon' + | 'promptIconContainer' + | 'promptIcon' + | 'promptError' + | 'promptAction'; +``` + +### GridColDef + +Column Definition interface. + +```typescript +type GridColDef = + | GridBaseColDef + | GridActionsColDef + | GridSingleSelectColDef; +``` + +### GridColType + +```typescript +type GridColType = + | 'string' + | 'number' + | 'boolean' + | 'date' + | 'dateTime' + | 'singleSelect' + | 'actions' + | 'custom' + | 'longText'; +``` + +### GridColTypeDef + +```typescript +type GridColTypeDef = { + /** The flex grow factor of the column. Must be a positive number. */ + flex?: number; + /** + * The type of the column. + * @default 'string' + * @see + */ + type?: GridColType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; + /** Class name added to the column header cell. */ + headerClassName?: GridColumnHeaderClassNamePropType; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: (params: GridRenderCellParams) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; + /** + * The maximum width of the column in pixels. + * @default Infinity + */ + maxWidth?: number; + /** + * The minimum width of the column in pixels. + * @default 50 + */ + minWidth?: number; + /** + * The width of the column in pixels. + * @default 100 + */ + width?: number; + /** + * If `true`, the column menu is disabled for this column. + * @default false + */ + disableColumnMenu?: boolean; + /** The order of the sorting sequence. */ + sortingOrder?: GridSortDirection[]; + /** + * Number of columns a cell should span. + * @default 1 + */ + colSpan?: number | GridColSpanFn; + /** + * If `false`, removes the option to hide this column. + * @default true + */ + hideable?: boolean; + /** + * If `false`, disables sorting for this column. + * @default true + */ + sortable?: boolean; + /** + * If `false`, disables resizing for this column. + * @default true + */ + resizable?: boolean; + /** + * If `true`, the cells of the column are editable. + * @default false + */ + editable?: boolean; + /** + * If `true`, the rows can be grouped based on this column values (pro-plan only). + * Only available in DataGridPremium. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-premium` (need to modify how we handle column types default values). + * @default true + */ + groupable?: boolean; + /** + * If `false`, the menu items for column pinning menu will not be rendered. + * Only available in DataGridPro. + * TODO: Use module augmentation to move it to `@mui/x-data-grid-pro` (need to modify how we handle column types default values). + * @default true + */ + pinnable?: boolean; + /** A comparator function used to sort rows. */ + sortComparator?: GridComparatorFn; + /** + * Provide an alternative comparator function for sorting. + * Takes precedence over `sortComparator`. + * @returns The comparator function to use. + */ + getSortComparator?: (sortDirection: GridSortDirection) => GridComparatorFn | undefined; + /** Function that returns specific data to render in the cell instead of using the field value. */ + valueGetter?: GridValueGetter; + /** Function that returns a specific value to be used in row spanning. */ + rowSpanValueGetter?: GridValueGetter; + /** + * Function that customizes how the entered value is stored in the row. + * Only works with cell/row editing. + * @returns The row with the updated field. + */ + valueSetter?: GridValueSetter; + /** Formats the cell value before rendering. */ + valueFormatter?: GridValueFormatter; + /** + * Function that takes the user-entered value and converts it to a value used internally. + * @returns The converted value to use internally. + */ + valueParser?: GridValueParser; + /** + * Override the component rendered in edit cell mode for this column. + * @returns The element to be rendered. + */ + renderEditCell?: ( + params: GridRenderEditCellParams, + ) => React.ReactNode; + /** + * Callback fired when the edit props of the cell changes. + * Processes the props before being saved into the state. + * @returns The new edit cell props. + */ + preProcessEditCellProps?: ( + params: GridPreProcessEditCellProps, + ) => GridEditCellProps | Promise; + /** + * Override the component rendered in the column header cell. + * @template + * @returns The element to be rendered. + */ + renderHeader?: (params: GridColumnHeaderParams) => React.ReactNode; + /** + * Toggle the visibility of the sort icons. + * @default false + */ + hideSortIcons?: boolean; + /** + * If `true`, the column is filterable. + * @default true + */ + filterable?: boolean; + /** Allows setting the filter operators for this column. */ + filterOperators?: GridFilterOperator[]; + /** + * 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. + * @returns The function to call to check if a row pass this filter value or not. + */ + getApplyQuickFilterFn?: GetApplyQuickFilterFn; + /** + * If `true`, this column cannot be reordered. + * @default false + */ + disableReorder?: boolean; + /** + * If `true`, this column will not be included in exports. + * @default false + */ + disableExport?: boolean; + /** Example values that can be used by the grid to get more context about the column. */ + examples?: V[]; +}; +``` + +### GridColumnApi + +The column API interface that is available in the grid \[\[apiRef]]. +TODO: Differentiate interfaces based on the plan + +```typescript +type GridColumnApi = { + /** + * Returns the [[GridColDef]] for the given `field`. + * @returns The [[GridStateColDef]]. + */ + getColumn: (field: string) => GridStateColDef; + /** + * Returns an array of [[GridColDef]] containing all the column definitions. + * @returns An array of [[GridStateColDef]]. + */ + getAllColumns: () => GridStateColDef[]; + /** + * Returns the currently visible columns. + * @returns An array of [[GridStateColDef]]. + */ + getVisibleColumns: () => GridStateColDef[]; + /** + * Returns the index position of a column. By default, only the visible columns are considered. + * Pass `false` to `useVisibleColumns` to consider all columns. + * @returns The index position. + */ + getColumnIndex: (field: string, useVisibleColumns?: boolean) => number; + /** + * Returns the left-position of a column relative to the inner border of the grid. + * @returns The position in pixels. + */ + getColumnPosition: (field: string) => number; + /** Updates the definition of multiple columns at the same time. */ + updateColumns: (cols: GridColDef[]) => void; + /** Sets the column visibility model to the one given by `model`. */ + setColumnVisibilityModel: (model: GridColumnVisibilityModel) => void; + /** Changes the visibility of the column referred by `field`. */ + setColumnVisibility: (field: string, isVisible: boolean) => void; + /** Updates the width of a column. */ + setColumnWidth: (field: string, width: number) => void; + /** + * Gets the index of a column relative to the columns that are reachable by scroll. + * @returns The index of the column. + */ + getColumnIndexRelativeToVisibleColumns: (field: string) => number; +}; +``` + +### GridColumnDimensions + +```typescript +type GridColumnDimensions = { flex?: number; maxWidth?: number; minWidth?: number; width?: number }; +``` + +### GridColumnGroup + +```typescript +type GridColumnGroup = { + /** A unique string identifying the group. */ + groupId: string; + /** The groups and columns included in this group. */ + children: GridColumnNode[]; + /** + * If `true`, allows reordering columns outside of the group. + * @default false + */ + freeReordering?: boolean; + /** + * Allows to render a component in the column group header cell. + * @returns The element to be rendered. + */ + renderHeaderGroup?: (params: GridColumnGroupHeaderParams) => React.ReactNode; + /** Class name that will be added in the column group header cell. */ + headerClassName?: GridColumnGroupHeaderClassNamePropType; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; + /** Align column header content. */ + headerAlign?: GridAlignment; +}; +``` + +### GridColumnGroupHeaderClassNamePropType + +The union type representing the \[\[GridColDef]] column header class type. + +```typescript +type GridColumnGroupHeaderClassNamePropType = string | GridColumnGroupHeaderClassFn; +``` + +### GridColumnGroupHeaderEventLookup + +```typescript +type GridColumnGroupHeaderEventLookup = { + /** Fired when a key is pressed in a column group header. It's mapped do the `keydown` DOM event. */ + columnGroupHeaderKeyDown: { + params: GridColumnGroupHeaderParams; + event: React.KeyboardEvent; + }; + /** + * Fired when a column group header gains focus. + * @ignore - do not document. + */ + columnGroupHeaderFocus: { + params: GridColumnGroupHeaderParams; + event: React.FocusEvent; + }; + /** + * Fired when a column group header loses focus. + * @ignore - do not document. + */ + columnGroupHeaderBlur: { + params: GridColumnGroupHeaderParams; + event: React.FocusEvent; + }; +}; +``` + +### GridColumnGroupHeaderParams + +Object passed as parameter in the column group header renderer. + +```typescript +type GridColumnGroupHeaderParams = { + /** A unique string identifying the group. */ + groupId: string | null; + /** The number parent the group have. */ + depth: number; + /** The maximal depth among visible columns. */ + maxDepth: number; + /** The column fields included in the group (including nested ones). */ + fields: string[]; + /** The column index (0 based). */ + colIndex: number; + /** Indicate if the group is the last one for the given depth. */ + isLastColumn: boolean; + /** The title displayed in the column header cell. */ + headerName?: string; + /** The tooltip text shown when the column header name is truncated. */ + description?: string; +}; +``` + +### GridColumnGroupIdentifier + +```typescript +type GridColumnGroupIdentifier = { field: string; depth: number }; +``` + +### GridColumnGroupingModel + +```typescript +type GridColumnGroupingModel = GridColumnGroup[]; +``` + +### gridColumnGroupingSelector + +```typescript +type gridColumnGroupingSelector = ( + apiRef: RefObject<{ state: GridStateCommunity } | null>, + args?: unknown, +) => GridColumnsGroupingState; +``` + +### GridColumnHeaderClassNamePropType + +The union type representing the \[\[GridColDef]] column header class type. + +```typescript +type GridColumnHeaderClassNamePropType = string | GridColumnHeaderClassFn; +``` + +### GridColumnHeaderEventLookup + +```typescript +type GridColumnHeaderEventLookup = { + /** Fired when a column header is clicked */ + columnHeaderClick: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** Fired when the user attempts to open a context menu in the column header. */ + columnHeaderContextMenu: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** Fired when a column header is double-clicked. */ + columnHeaderDoubleClick: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** + * Fired when a `mouseover` event happens in a column header. + * @ignore - do not document. + */ + columnHeaderOver: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** + * Fired when a `mouseout` event happens in a column header. + * @ignore - do not document. + */ + columnHeaderOut: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** + * Fired when a `mouseenter` event happens in a column header. + * @ignore - do not document. + */ + columnHeaderEnter: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** + * Fired when a `mouseleave` event happens in a column header. + * @ignore - do not document.* + */ + columnHeaderLeave: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** Fired when a key is pressed in a column header. It's mapped do the `keydown` DOM event. */ + columnHeaderKeyDown: { + params: GridColumnHeaderParams; + event: React.KeyboardEvent; + }; + /** + * Fired when a column header gains focus. + * @ignore - do not document. + */ + columnHeaderFocus: { + params: GridColumnHeaderParams; + event: React.FocusEvent; + }; + /** + * Fired when a column header loses focus. + * @ignore - do not document. + */ + columnHeaderBlur: { + params: GridColumnHeaderParams; + event: React.FocusEvent; + }; + /** + * Fired when the user starts dragging a column header. It's mapped to the `dragstart` DOM event. + * @ignore - do not document. + */ + columnHeaderDragStart: { + params: GridColumnHeaderParams; + event: React.DragEvent; + }; + /** + * Fired when the dragged column header enters a valid drop target. + * It's mapped to the `dragend` DOM event. + * @ignore - do not document. + */ + columnHeaderDragEnter: { + params: GridColumnHeaderParams; + event: React.DragEvent; + }; + /** + * Fired while an element or text selection is dragged over the column header. + * It's mapped to the `dragover` DOM event. + * @ignore - do not document. + */ + columnHeaderDragOver: { + params: GridColumnHeaderParams; + event: React.DragEvent; + }; + /** + * Fired when the dragging of a column header ends. + * @ignore - do not document. + */ + columnHeaderDragEnd: { + params: GridColumnHeaderParams; + event: React.DragEvent; + }; + /** + * Fired when the dragging of a column header ends. + * Same as `columnHeaderDragEnd`, but also fires when the DOM element is unmounted. + * @ignore - do not document. + */ + columnHeaderDragEndNative: { + params: GridColumnHeaderParams; + event: DragEvent; + }; + /** + * Fired when a `dblclick` DOM event happens in the column header separator. + * @ignore - do not document. + */ + columnSeparatorDoubleClick: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** + * Fired when a `mousedown` DOM event happens in the column header separator. + * @ignore - do not document. + */ + columnSeparatorMouseDown: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** + * Fired when the index of a column changes. + * @ignore - do not document. + */ + columnIndexChange: { params: GridColumnOrderChangeParams }; +}; +``` + +### GridColumnHeaderIndexCoordinates + +The coordinates of column header represented by their row and column indexes. + +```typescript +type GridColumnHeaderIndexCoordinates = { colIndex: number }; +``` + +### GridColumnHeaderMenuProps + +```typescript +type GridColumnHeaderMenuProps = { + columnMenuId?: string; + columnMenuButtonId?: string; + ContentComponent: React.JSXElementConstructor; + contentComponentProps?: any; + field: string; + open: boolean; + target: HTMLElement | null; + onExited?: (node: HTMLElement | null) => void; +}; +``` + +### GridColumnHeaderParams + +Object passed as parameter in the column \[\[GridColDef]] header renderer. + +```typescript +type GridColumnHeaderParams = { + /** The column field of the column that triggered the event */ + field: string; + /** The column of the current header component. */ + colDef: GridStateColDef; +}; +``` + +### GridColumnHeaders + +```typescript +type GridColumnHeaders = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; +``` + +### GridColumnHeaderSeparator + +```typescript +type GridColumnHeaderSeparator = React.MemoExoticComponent; +``` + +### GridColumnHeaderSeparatorProps + +```typescript +type GridColumnHeaderSeparatorProps = { + resizable: boolean; + resizing: boolean; + height: number; + side?: unknown; +}; +``` + +### GridColumnHeaderSeparatorSides + +| Member | Value | Description | +| :----- | :------ | :---------- | +| Left | `left` | - | +| Right | `right` | - | + +### GridColumnHeaderSortIcon + +```typescript +type GridColumnHeaderSortIcon = React.MemoExoticComponent; +``` + +### GridColumnHeaderSortIconProps + +```typescript +type GridColumnHeaderSortIconProps = { + children?: React.ReactNode; + onClick?: + | ((event: React.MouseEvent) => void) + | ((event: React.MouseEvent) => void); + className?: string; + style?: React.CSSProperties; + ref?: Ref; + disabled?: boolean; + id?: string; + role?: string; + size?: 'small' | 'medium' | 'large'; + tabIndex?: number; + title?: string; + touchRippleRef?: any; + label?: string; + color?: 'default' | 'inherit' | 'primary'; + edge?: 'start' | 'end' | false; + material?: Partial; + field: string; + direction: GridSortDirection; + index?: number; + sortingOrder: GridSortDirection[]; +}; +``` + +### GridColumnHeadersProps + +```typescript +type GridColumnHeadersProps = { + ref?: React.Ref; + visibleColumns: GridStateColDef[]; + sortColumnLookup: GridSortColumnLookup; + filterColumnLookup: GridFilterActiveItemsLookup; + columnHeaderTabIndexState: GridColumnIdentifier | null; + columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null; + columnHeaderFocus: GridColumnIdentifier | null; + columnGroupHeaderFocus: GridColumnGroupIdentifier | null; + headerGroupingMaxDepth: number; + columnMenuState: GridColumnMenuState; + columnVisibility: GridColumnVisibilityModel; + columnGroupsHeaderStructure: GridGroupingStructure[][]; + hasOtherElementInTabSequence: boolean; +}; +``` + +### GridColumnHeaderTitleProps + +```typescript +type GridColumnHeaderTitleProps = { + label: string; + columnWidth: number; + description?: React.ReactNode; +}; +``` + +### GridColumnIdentifier + +```typescript +type GridColumnIdentifier = { field: string }; +``` + +### GridColumnLookup + +```typescript +type GridColumnLookup = { [field: string]: GridStateColDef }; +``` + +### GridColumnMenuApi + +The column menu API interface that is available in the grid \[\[apiRef]]. + +```typescript +type GridColumnMenuApi = { + /** Display the column menu under the `field` column. */ + showColumnMenu: (field: string) => void; + /** Hides the column menu that is open. */ + hideColumnMenu: () => void; + /** Toggles the column menu under the `field` column. */ + toggleColumnMenu: (field: string) => void; +}; +``` + +### GridColumnMenuContainer + +```typescript +type GridColumnMenuContainer = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + GridColumnMenuContainerProps & React.RefAttributes + >; +``` + +### GridColumnMenuContainerProps + +```typescript +type GridColumnMenuContainerProps = { + hideMenu: (event: React.SyntheticEvent) => void; + colDef: GridColDef; + open: boolean; + id?: string; + labelledby?: string; +}; +``` + +### GridColumnMenuItemProps + +```typescript +type GridColumnMenuItemProps = { + [key: string]: any; + colDef: GridColDef; + onClick: (event: React.MouseEvent) => void; +}; +``` + +### GridColumnMenuProps + +```typescript +type GridColumnMenuProps = { + id?: string; + /** + * `slots` could be used to add new and (or) override default column menu items + * If you register a nee component you must pass it's `displayOrder` in `slotProps` + * or it will be placed in the end of the list + */ + slots?: { [key: string]: React.JSXElementConstructor | null }; + /** + * Could be used to pass new props or override props specific to a column menu component + * e.g. `displayOrder` + */ + slotProps?: { [key: string]: GridColumnMenuSlotProps }; + hideMenu: (event: React.SyntheticEvent) => void; + colDef: GridColDef; + open: boolean; + labelledby?: string; +}; +``` + +### GridColumnMenuRootProps + +```typescript +type GridColumnMenuRootProps = { + /** + * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlots: { [key: string]: React.JSXElementConstructor }; + /** + * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlotProps: { [key: string]: GridColumnMenuSlotProps }; + /** + * `slots` could be used to add new and (or) override default column menu items + * If you register a nee component you must pass it's `displayOrder` in `slotProps` + * or it will be placed in the end of the list + */ + slots?: { [key: string]: React.JSXElementConstructor | null }; + /** + * Could be used to pass new props or override props specific to a column menu component + * e.g. `displayOrder` + */ + slotProps?: { [key: string]: GridColumnMenuSlotProps }; +}; +``` + +### GridColumnMenuSlotProps + +```typescript +type GridColumnMenuSlotProps = { + [key: string]: any; + /** + * Every item has a `displayOrder` based which it will be placed before or after other + * items in the column menu, `array.prototype.sort` is applied to sort the items. + * Note: If same `displayOrder` is applied to two or more items they will be sorted + * based on the definition order + * @default 100 + */ + displayOrder?: number; +}; +``` + +### GridColumnMenuState + +```typescript +type GridColumnMenuState = { open: boolean; field?: string }; +``` + +### GridColumnNode + +```typescript +type GridColumnNode = GridColumnGroup | GridLeafColumn; +``` + +### GridColumnOrderChangeParams + +Object passed as parameter of the column order change event. + +```typescript +type GridColumnOrderChangeParams = { + /** The column of the current header component. */ + column: GridColDef; + /** The target column index. */ + targetIndex: number; + /** The old column index. */ + oldIndex: number; +}; +``` + +### GridColumnPinningState + +```typescript +type GridColumnPinningState = { left?: string[]; right?: string[] }; +``` + +### GridColumnRawLookup + +```typescript +type GridColumnRawLookup = { [field: string]: GridStateColDef | GridColDef }; +``` + +### GridColumnReorderApi + +```typescript +type GridColumnReorderApi = { + /** Moves a column from its original position to the position given by `targetIndexPosition`. */ + setColumnIndex: (field: string, targetIndexPosition: number) => void; +}; +``` + +### GridColumnResizeApi + +The Resize API interface that is available in the grid `apiRef`. + +```typescript +type GridColumnResizeApi = { + /** + * Auto-size the columns of the grid based on the cells' content and the space available. + * @returns A promise that resolves when autosizing is completed + */ + autosizeColumns: (options?: GridAutosizeOptions) => Promise; +}; +``` + +### GridColumnResizeParams + +Object passed as parameter of the column resize event. + +```typescript +type GridColumnResizeParams = { + /** The HTMLElement column header element. */ + element?: HTMLElement | null; + /** The column of the current header component. */ + colDef: GridStateColDef; + /** The width of the column. */ + width: number; +}; +``` + +### GridColumnResizeState + +```typescript +type GridColumnResizeState = { resizingColumnField: string }; +``` + +### GridColumnsGroupingState + +```typescript +type GridColumnsGroupingState = { + lookup: GridColumnGroupLookup; + headerStructure: GridGroupingStructure[][]; + unwrappedGroupingModel: { [columnField: string]: string[] }; + maxDepth: number; +}; +``` + +### GridColumnsInitialState + +```typescript +type GridColumnsInitialState = { + columnVisibilityModel?: GridColumnVisibilityModel; + orderedFields?: string[]; + dimensions?: Record; +}; +``` + +### GridColumnsManagementProps + +```typescript +type GridColumnsManagementProps = { + sort?: 'asc' | 'desc'; + searchPredicate?: (column: GridColDef, searchValue: string) => boolean; + searchInputProps?: Partial; + /** + * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu. + * @default 150 + */ + searchDebounceMs?: number; + /** + * If `true`, the column search field will be focused automatically. + * If `false`, the first column switch input will be focused automatically. + * This helps to avoid input keyboard panel to popup automatically on touch devices. + * @default true + */ + autoFocusSearchField?: boolean; + /** + * If `true`, the `Show/Hide all` toggle checkbox will not be displayed. + * @default false + */ + disableShowHideToggle?: boolean; + /** + * If `true`, the `Reset` button will not be disabled + * @default false + */ + disableResetButton?: boolean; + /** + * Changes the behavior of the `Show/Hide All` toggle when the search field is used: + * - `all`: Will toggle all columns. + * - `filteredOnly`: Will only toggle columns that match the search criteria. + * @default 'all' + */ + toggleAllMode?: 'all' | 'filteredOnly'; + /** + * Returns the list of togglable columns. + * If used, only those columns will be displayed in the panel + * which are passed as the return value of the function. + * @returns The list of togglable columns' field names. + */ + getTogglableColumns?: (columns: GridColDef[]) => string[]; +}; +``` + +### GridColumnsMeta + +Meta Info about columns. + +```typescript +type GridColumnsMeta = { totalWidth: number; positions: number[] }; +``` + +### GridColumnsPanelProps + +```typescript +type GridColumnsPanelProps = {}; +``` + +### GridColumnsRawState + +```typescript +type GridColumnsRawState = { + columnVisibilityModel: GridColumnVisibilityModel; + orderedFields: string[]; + initialColumnVisibilityModel: GridColumnVisibilityModel; + lookup: GridColumnRawLookup; +}; +``` + +### GridColumnsRenderContext + +```typescript +type GridColumnsRenderContext = { firstColumnIndex: number; lastColumnIndex: number }; +``` + +### GridColumnsState + +```typescript +type GridColumnsState = { + orderedFields: string[]; + lookup: GridColumnLookup; + columnVisibilityModel: GridColumnVisibilityModel; + initialColumnVisibilityModel: GridColumnVisibilityModel; +}; +``` + +### GridColumnTypes + +```typescript +type GridColumnTypes = { + string: 'string'; + number: 'number'; + date: 'date'; + dateTime: 'dateTime'; + boolean: 'boolean'; + singleSelect: 'singleSelect'; + actions: 'actions'; + custom: 'custom'; + longText: 'longText'; +}; +``` + +### GridColumnTypesRecord + +```typescript +type GridColumnTypesRecord = { + string: GridColTypeDef; + number: GridColTypeDef; + boolean: GridColTypeDef; + date: GridColTypeDef; + dateTime: GridColTypeDef; + singleSelect: GridColTypeDef; + actions: GridColTypeDef; + custom: GridColTypeDef; + longText: GridColTypeDef; +}; +``` + +### GridColumnUnsortedIconProps + +```typescript +type GridColumnUnsortedIconProps = { + sortingOrder: GridSortDirection[]; + className?: string; + style?: React.CSSProperties; + fontSize?: 'small' | 'medium' | 'large' | 'inherit'; + color?: string; + titleAccess?: string; +}; +``` + +### GridColumnVisibilityModel + +```typescript +type GridColumnVisibilityModel = { [key: string]: boolean }; +``` + +### GridControlledStateEventLookup + +```typescript +type GridControlledStateEventLookup = { + /** Fired when the pagination model changes. */ + paginationModelChange: { params: GridPaginationModel }; + /** Fired when the filter model changes. */ + filterModelChange: { params: GridFilterModel }; + /** Fired when the sort model changes. */ + sortModelChange: { params: GridSortItem[] }; + /** Fired when the selection state of one or multiple rows changes. */ + rowSelectionChange: { params: GridRowSelectionModel }; + /** Fired when the column visibility model changes. */ + columnVisibilityModelChange: { params: GridColumnVisibilityModel }; + /** Fired when the row count change. */ + rowCountChange: { params: number }; + /** Fired when the density changes. */ + densityChange: { params: GridDensity }; + /** Fired when the pagination meta change. */ + paginationMetaChange: { params: GridPaginationMeta }; +}; +``` + +### GridControlledStateReasonLookup + +```typescript +type GridControlledStateReasonLookup = { + filter: + | 'upsertFilterItem' + | 'upsertFilterItems' + | 'deleteFilterItem' + | 'changeLogicOperator' + | 'restoreState' + | 'removeAllFilterItems'; + pagination: 'setPaginationModel' | 'stateRestorePreProcessing'; + rows: 'addSkeletonRows'; + rowSelection: 'singleRowSelection' | 'multipleRowsSelection'; +}; +``` + +### GridCoreApi + +The core API interface that is available in the grid `apiRef`. + +```typescript +type GridCoreApi = { + /** + * The React ref of the grid root container div element. + * @ignore - do not document. + */ + rootElementRef: React.RefObject; + /** + * Registers a handler for an event. + * @returns A function to unsubscribe from this event. + */ + subscribeEvent: < + E extends + | 'columnHeaderFocus' + | 'columnGroupHeaderFocus' + | 'resize' + | 'menuOpen' + | 'columnResize' + | 'rootMount' + | 'unmount' + | 'stateChange' + | 'viewportInnerSizeChange' + | 'debouncedResize' + | 'activeStrategyProcessorChange' + | 'strategyAvailabilityChange' + | 'columnsChange' + | 'columnWidthChange' + | 'columnResizeStart' + | 'columnResizeStop' + | 'columnOrderChange' + | 'rowsSet' + | 'filteredRowsSet' + | 'sortedRowsSet' + | 'aggregationLookupSet' + | 'rowExpansionChange' + | 'renderedRowsIntervalChange' + | 'cellModeChange' + | 'cellModesModelChange' + | 'rowModesModelChange' + | 'cellEditStart' + | 'cellEditStop' + | 'rowEditStart' + | 'rowEditStop' + | 'cellFocusIn' + | 'cellFocusOut' + | 'scrollPositionChange' + | 'virtualScrollerContentSizeChange' + | 'virtualScrollerWheel' + | 'virtualScrollerTouchMove' + | 'rowsScrollEndIntersection' + | 'headerSelectionCheckboxChange' + | 'rowSelectionCheckboxChange' + | 'clipboardCopy' + | 'preferencePanelClose' + | 'preferencePanelOpen' + | 'menuClose' + | 'rowClick' + | 'rowDoubleClick' + | 'rowMouseEnter' + | 'rowMouseLeave' + | 'rowMouseOut' + | 'rowMouseOver' + | 'rowDragStart' + | 'rowDragOver' + | 'rowDragEnd' + | 'columnHeaderClick' + | 'columnHeaderContextMenu' + | 'columnHeaderDoubleClick' + | 'columnHeaderOver' + | 'columnHeaderOut' + | 'columnHeaderEnter' + | 'columnHeaderLeave' + | 'columnHeaderKeyDown' + | 'columnHeaderBlur' + | 'columnHeaderDragStart' + | 'columnHeaderDragEnter' + | 'columnHeaderDragOver' + | 'columnHeaderDragEnd' + | 'columnHeaderDragEndNative' + | 'columnSeparatorDoubleClick' + | 'columnSeparatorMouseDown' + | 'columnIndexChange' + | 'headerFilterClick' + | 'headerFilterKeyDown' + | 'headerFilterMouseDown' + | 'headerFilterBlur' + | 'columnGroupHeaderKeyDown' + | 'columnGroupHeaderBlur' + | 'cellClick' + | 'cellDoubleClick' + | 'cellMouseDown' + | 'cellMouseUp' + | 'cellMouseOver' + | 'cellKeyDown' + | 'cellKeyUp' + | 'cellDragEnter' + | 'cellDragOver' + | 'paginationModelChange' + | 'filterModelChange' + | 'sortModelChange' + | 'rowSelectionChange' + | 'columnVisibilityModelChange' + | 'rowCountChange' + | 'densityChange' + | 'paginationMetaChange', + >( + event: E, + handler: GridEventListener, + options?: EventListenerOptions, + ) => () => void; + /** Emits an event. */ + publishEvent: GridEventPublisher; + /** + * Unique identifier for each component instance in a page. + * @ignore - do not document. + */ + instanceId: { id: number }; + /** + * The pub/sub store containing a reference to the public state. + * @ignore - do not document. + */ + store: Store; +}; +``` + +### GridCsvExportApi + +The CSV export API interface that is available in the grid \[\[apiRef]]. + +```typescript +type GridCsvExportApi = { + /** + * Returns the grid data as a CSV string. + * This method is used internally by `exportDataAsCsv`. + * @returns The data in the CSV format. + */ + getDataAsCsv: (options?: GridCsvExportOptions) => string; + /** Downloads and exports a CSV of the grid's data. */ + exportDataAsCsv: (options?: GridCsvExportOptions) => void; +}; +``` + +### GridCsvExportMenuItemProps + +```typescript +type GridCsvExportMenuItemProps = { + hideMenu?: () => void; + options?: { + delimiter?: string; + fileName?: string; + utf8WithBom?: boolean; + includeHeaders?: boolean; + includeColumnGroupsHeaders?: boolean; + getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[]; + shouldAppendQuotes?: boolean; + escapeFormulas?: boolean; + fields?: string[]; + allColumns?: boolean; + disableToolbarButton?: boolean; + }; +}; +``` + +### GridCsvExportOptions + +The options to apply on the CSV export. + +```typescript +type GridCsvExportOptions = { + /** + * The character used to separate fields. + * @default ',' + */ + delimiter?: string; + /** + * The string used as the file name. + * @default document.title + */ + fileName?: string; + /** + * If `true`, the UTF-8 Byte Order Mark (BOM) prefixes the exported file. + * This can allow Excel to automatically detect file encoding as UTF-8. + * @default false + */ + utf8WithBom?: boolean; + /** + * If `true`, the CSV will include the column headers and column groups. + * Use `includeColumnGroupsHeaders` to control whether the column groups are included. + * @default true + */ + includeHeaders?: boolean; + /** + * If `true`, the CSV will include the column groups. + * @default true + * @see + */ + includeColumnGroupsHeaders?: boolean; + /** + * Function that returns the list of row ids to export on the order they should be exported. + * @returns The list of row ids to export. + */ + getRowsToExport?: (params: GridCsvGetRowsToExportParams) => GridRowId[]; + /** + * @default true + * @ignore If `false`, the quotes will not be appended to the cell value. + */ + shouldAppendQuotes?: boolean; + /** + * If `false`, the formulas in the cells will not be escaped. + * It is not recommended to disable this option as it exposes the user to potential CSV injection attacks. + * See https://owasp.org/www-community/attacks/CSV_Injection for more information. + * @default true + */ + escapeFormulas?: boolean; + /** + * The columns exported. + * This should only be used if you want to restrict the columns exports. + */ + fields?: string[]; + /** + * If `true`, the hidden columns will also be exported. + * @default false + */ + allColumns?: boolean; +}; +``` + +### GridCsvGetRowsToExportParams + +```typescript +type GridCsvGetRowsToExportParams = { + /** The API of the grid. */ + apiRef: RefObject; +}; +``` + +### GridDataGroupNode + +```typescript +type GridDataGroupNode = { + /** + * If `true`, this node has been automatically generated by the grid. + * In the row grouping, all groups are auto-generated + * In the tree data, some groups can be passed in the rows + */ + isAutoGenerated: false; + type: 'group'; + /** The key used to group the children of this row. */ + groupingKey: GridKeyValue | null; + /** + * The field used to group the children of this row. + * Is `null` if no field has been used to group the children of this row. + */ + groupingField: string | null; + /** + * The id of the body children nodes. + * Only contains the children of type "group" and "leaf". + */ + children: GridRowId[]; + /** The id of the footer child node. */ + footerId?: GridRowId | null; + /** + * The id of the children nodes, grouped by grouping field and grouping key. + * Only contains the children of type "group" and "leaf". + * Empty for flat tree. + */ + childrenFromPath: GridChildrenFromPathLookup; + /** + * If `true`, the children of this group are not visible. + * @default false + */ + childrenExpanded?: boolean; + /** The id of the group containing this node (null for the root group). */ + parent: GridRowId | null; + /** + * If `true`, this row is pinned. + * @default false + */ + isPinned?: boolean; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### GridDataPinnedRowNode + +```typescript +type GridDataPinnedRowNode = { + /** If `true`, this node has been automatically generated by the grid. */ + isAutoGenerated: true; + type: 'pinnedRow'; + /** + * The id of the group containing this node. + * Is always equal to `GRID_ROOT_GROUP_ID`. + */ + parent: GridRowId; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### GridDataSource + +```typescript +type GridDataSource = { + /** + * This method will be called when the grid needs to fetch some rows. + * @returns A promise that resolves to the data of type [GridGetRowsResponse]. + */ + getRows: getRows; + /** + * This method will be called when the user updates a row. + * @returns If resolved (synced on the backend), the grid will update the row and mutate the cache. + */ + updateRow?: updateRow; +}; +``` + +### GridDataSourceApi + +```typescript +type GridDataSourceApi = { + /** The data source API. */ + dataSource: { + /** + * Fetches the rows from the server. + * If no `parentId` option is provided, it fetches the root rows. + * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.). + * @returns A promise that resolves when the rows are fetched. + */ + fetchRows: ( + parentId?: GridRowId, + params?: GridDataSourceFetchRowsParams, + ) => Promise; + /** The data source cache object. */ + cache: GridDataSourceCache; + /** + * Syncs the row with the server and updates in the grid. + * @returns The updated row or `undefined` if `dataSource.updateRow` is not passed. + */ + editRow: (params: GridUpdateRowParams) => Promise | undefined; + }; +}; +``` + +### GridDataSourceApiBase + +```typescript +type GridDataSourceApiBase = { + fetchRows: ( + parentId?: GridRowId, + params?: GridDataSourceFetchRowsParams, + ) => Promise; + cache: GridDataSourceCache; + editRow: (params: GridUpdateRowParams) => Promise | undefined; +}; +``` + +### GridDataSourceCache + +```typescript +type GridDataSourceCache = { + /** Set the cache entry for the given key. */ + set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void; + /** + * Get the cache entry for the given key. + * @returns The value stored in the cache. + */ + get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined; + /** Clear the cache. */ + clear: () => void; +}; +``` + +### GridDataSourceCacheDefaultConfig + +```typescript +type GridDataSourceCacheDefaultConfig = { + /** + * Time To Live for each cache entry in milliseconds. + * After this time the cache entry will become stale and the next query will result in cache miss. + * @default 300_000 (5 minutes) + */ + ttl?: number; + /** + * Function to generate a cache key from the params. + * @default `getKeyDefault()` + * @returns The cache key. + */ + getKey?: (params: GridGetRowsParams) => string; +}; +``` + +### GridDataSourceGroupNode + +```typescript +type GridDataSourceGroupNode = { + /** Number of children this node has on the server. Equals to `-1` if there are some children but the count is unknown. */ + serverChildrenCount: number; + /** The cached path to be passed on as `groupKey` to the server. */ + path: string[]; + /** + * If `true`, this node has been automatically generated by the grid. + * In the row grouping, all groups are auto-generated + * In the tree data, some groups can be passed in the rows + */ + isAutoGenerated: false; + type: 'group'; + /** The key used to group the children of this row. */ + groupingKey: GridKeyValue | null; + /** + * The field used to group the children of this row. + * Is `null` if no field has been used to group the children of this row. + */ + groupingField: string | null; + /** + * The id of the body children nodes. + * Only contains the children of type "group" and "leaf". + */ + children: GridRowId[]; + /** The id of the footer child node. */ + footerId?: GridRowId | null; + /** + * The id of the children nodes, grouped by grouping field and grouping key. + * Only contains the children of type "group" and "leaf". + * Empty for flat tree. + */ + childrenFromPath: GridChildrenFromPathLookup; + /** + * If `true`, the children of this group are not visible. + * @default false + */ + childrenExpanded?: boolean; + /** The id of the group containing this node (null for the root group). */ + parent: GridRowId | null; + /** + * If `true`, this row is pinned. + * @default false + */ + isPinned?: boolean; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### GridDensity + +Available densities. + +```typescript +type GridDensity = 'compact' | 'standard' | 'comfortable'; +``` + +### GridDensityApi + +The density API interface that is available in the grid `apiRef`. + +```typescript +type GridDensityApi = { + /** Sets the density of the grid. */ + setDensity: (density: GridDensity) => void; +}; +``` + +### GridDensityOption + +```typescript +type GridDensityOption = { icon: ReactElement; label: string; value: GridDensity }; +``` + +### GridDensityState + +```typescript +type GridDensityState = GridDensity; +``` + +### GridDimensions + +```typescript +type GridDimensions = { + /** Height of one column header. */ + headerHeight: number; + /** Height of one column group header. */ + groupHeaderHeight: number; + /** Height of header filters. */ + headerFilterHeight: number; + /** Height of all the column headers. */ + headersTotalHeight: number; + /** Indicates that the dimensions have been initialized. */ + isReady: boolean; + /** The root container size. */ + root: Size; + /** The viewport size including scrollbars. */ + viewportOuterSize: Size; + /** The viewport size not including scrollbars. */ + viewportInnerSize: Size; + /** The size of the main content (unpinned rows & columns). */ + contentSize: Size; + /** The minimum size to display the grid, including all pinned sections and headers. */ + minimumSize: Size; + /** Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column. */ + hasScrollX: boolean; + /** Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row. */ + hasScrollY: boolean; + /** + * Size of the scrollbar used to scroll the rows in pixel. + * It is defined even when the scrollbar is currently not needed. + */ + scrollbarSize: number; + /** Width of a row. At least as wide as `viewportOuterSize.width`. */ + rowWidth: number; + /** Height of a row. */ + rowHeight: number; + /** Size of all the columns. */ + columnsTotalWidth: number; + /** Size of left pinned columns. */ + leftPinnedWidth: number; + /** Size of right pinned columns. */ + rightPinnedWidth: number; + /** Size of the top container. */ + topContainerHeight: number; + /** Size of the bottom container. */ + bottomContainerHeight: number; + /** Indicates that the container takes the height of its content. */ + autoHeight: boolean; + /** Minimal height to display the content area. */ + minimalContentHeight: string | number | undefined; +}; +``` + +### GridDimensionsApi + +```typescript +type GridDimensionsApi = { + /** + * Returns the dimensions of the grid + * @returns The dimension information of the grid. If `null`, the grid is not ready yet. + */ + getRootDimensions: () => GridDimensions; +}; +``` + +### GridDimensionsState + +```typescript +type GridDimensionsState = { + /** Height of one column header. */ + headerHeight: number; + /** Height of one column group header. */ + groupHeaderHeight: number; + /** Height of header filters. */ + headerFilterHeight: number; + /** Height of all the column headers. */ + headersTotalHeight: number; + /** Indicates that the dimensions have been initialized. */ + isReady: boolean; + /** The root container size. */ + root: Size; + /** The viewport size including scrollbars. */ + viewportOuterSize: Size; + /** The viewport size not including scrollbars. */ + viewportInnerSize: Size; + /** The size of the main content (unpinned rows & columns). */ + contentSize: Size; + /** The minimum size to display the grid, including all pinned sections and headers. */ + minimumSize: Size; + /** Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column. */ + hasScrollX: boolean; + /** Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row. */ + hasScrollY: boolean; + /** + * Size of the scrollbar used to scroll the rows in pixel. + * It is defined even when the scrollbar is currently not needed. + */ + scrollbarSize: number; + /** Width of a row. At least as wide as `viewportOuterSize.width`. */ + rowWidth: number; + /** Height of a row. */ + rowHeight: number; + /** Size of all the columns. */ + columnsTotalWidth: number; + /** Size of left pinned columns. */ + leftPinnedWidth: number; + /** Size of right pinned columns. */ + rightPinnedWidth: number; + /** Size of the top container. */ + topContainerHeight: number; + /** Size of the bottom container. */ + bottomContainerHeight: number; + /** Indicates that the container takes the height of its content. */ + autoHeight: boolean; + /** Minimal height to display the content area. */ + minimalContentHeight: string | number | undefined; +}; +``` + +### GridEditBooleanCellProps + +```typescript +type GridEditBooleanCellProps = { + [prop: string]: any; + /** + * Callback called when the value is changed by the user. + * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue` + */ + onValueChange?: ( + event: React.ChangeEvent, + newValue: boolean, + ) => void | Promise; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: V; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: F; + /** The row model of the row that the current cell belongs to. */ + row: any; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNodeWithRender; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + isValidating?: boolean; + isProcessingProps?: boolean; + changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue'; +}; +``` + +### GridEditCellProps + +```typescript +type GridEditCellProps = { + [prop: string]: any; + value?: V; + isValidating?: boolean; + isProcessingProps?: boolean; + changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue'; +}; +``` + +### GridEditCellValueParams + +Params passed to `apiRef.current.setEditCellValue`. + +```typescript +type GridEditCellValueParams = { + /** The row id. */ + id: GridRowId; + /** The field. */ + field: string; + /** The new value for the cell. */ + value: any; + /** The debounce time in milliseconds. */ + debounceMs?: number; + /** TBD */ + unstable_skipValueParser?: boolean; +}; +``` + +### GridEditDateCellProps + +```typescript +type GridEditDateCellProps = { + [prop: string]: any; + /** + * Callback called when the value is changed by the user. + * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue` + */ + onValueChange?: ( + event: React.ChangeEvent, + newValue: Date | null, + ) => void | Promise; + slotProps?: { + root?: Partial< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + ref?: React.Ref; + inputRef?: React.Ref; + fullWidth?: boolean; + type?: React.HTMLInputTypeAttribute; + value?: string; + onChange: React.ChangeEventHandler; + disabled?: boolean; + endAdornment?: React.ReactNode; + startAdornment?: React.ReactNode; + slotProps?: { htmlInput?: React.InputHTMLAttributes }; + } & BaseInputPropsOverrides + >; + }; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: V; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: F; + /** The row model of the row that the current cell belongs to. */ + row: any; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNodeWithRender; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + isValidating?: boolean; + isProcessingProps?: boolean; + changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue'; +}; +``` + +### GridEditingApi + +The editing API interface that is available in the grid `apiRef`. + +```typescript +type GridEditingApi = { + /** + * Gets the mode of a cell. + * @returns Returns `"edit"` or `"view"`. + */ + getCellMode: (id: GridRowId, field: string) => GridCellMode; + /** Puts the cell corresponding to the given row id and field into edit mode. */ + startCellEditMode: startCellEditMode; + /** + * Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored. + * If `params.ignoreModifications` is `true` it will discard the modifications made. + */ + stopCellEditMode: stopCellEditMode; + /** + * Controls if a cell is editable. + * @returns A boolean value determining if the cell is editable. + */ + isCellEditable: (params: GridCellParams) => boolean; + /** + * Sets the value of the edit cell. + * Commonly used inside the edit cell component. + * @returns A promise with the validation status. + */ + setEditCellValue: ( + params: GridEditCellValueParams, + event?: MuiBaseEvent, + ) => void | Promise; + /** + * Returns the row with the values that were set by editing the cells. + * In row editing, `field` is ignored and all fields are considered. + * @returns The row with edited values. + */ + getRowWithUpdatedValues: (id: GridRowId, field: string) => GridValidRowModel; + /** + * Gets the meta information for the edit cell. + * @ignore - do not document. + */ + unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta | null; + /** + * Gets the mode of a row. + * @returns Returns `"edit"` or `"view"`. + */ + getRowMode: (id: GridRowId) => GridRowMode; + /** Puts the row corresponding to the given id into edit mode. */ + startRowEditMode: startRowEditMode; + /** + * Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored. + * If `params.ignoreModifications` is `true` it will discard the modifications made. + */ + stopRowEditMode: stopRowEditMode; +}; +``` + +### GridEditingState + +```typescript +type GridEditingState = { [rowId: string]: GridEditRowProps }; +``` + +### GridEditInputCell + +```typescript +type GridEditInputCell = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; +``` + +### GridEditInputCellProps + +```typescript +type GridEditInputCellProps = { + [prop: string]: any; + debounceMs?: number; + /** + * Callback called when the value is changed by the user. + * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue` + */ + onValueChange?: ( + event: React.ChangeEvent, + newValue: string, + ) => void | Promise; + slotProps?: { + root?: Partial< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + ref?: React.Ref; + inputRef?: React.Ref; + fullWidth?: boolean; + type?: React.HTMLInputTypeAttribute; + value?: string; + onChange: React.ChangeEventHandler; + disabled?: boolean; + endAdornment?: React.ReactNode; + startAdornment?: React.ReactNode; + slotProps?: { htmlInput?: React.InputHTMLAttributes }; + } & BaseInputPropsOverrides + >; + }; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: V; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: F; + /** The row model of the row that the current cell belongs to. */ + row: any; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNodeWithRender; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + isValidating?: boolean; + isProcessingProps?: boolean; + changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue'; +}; +``` + +### GridEditLongTextCellProps + +```typescript +type GridEditLongTextCellProps = { + [prop: string]: any; + debounceMs?: number; + /** + * Callback called when the value is changed by the user. + * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue` + */ + onValueChange?: ( + event: React.ChangeEvent, + newValue: string, + ) => void | Promise; + /** Props passed to internal components. */ + slotProps?: { + root?: React.HTMLAttributes; + value?: React.HTMLAttributes; + popper?: Partial< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + role?: string; + ref?: Ref; + open: boolean; + children?: React.ReactNode; + clickAwayTouchEvent?: false | ClickAwayTouchEventHandler; + clickAwayMouseEvent?: false | ClickAwayMouseEventHandler; + flip?: boolean; + focusTrap?: boolean; + onExited?: (node: HTMLElement | null) => void; + onClickAway?: (event: MouseEvent | TouchEvent) => void; + onDidShow?: () => void; + onDidHide?: () => void; + id?: string; + target?: Element | null; + transition?: boolean; + placement?: Placement; + } & BasePopperPropsOverrides + >; + popperContent?: React.HTMLAttributes; + textarea?: Partial< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + ref?: React.Ref; + inputRef?: React.Ref; + fullWidth?: boolean; + value?: string; + onChange: React.ChangeEventHandler; + onKeyDown?: React.KeyboardEventHandler; + disabled?: boolean; + autoFocus?: boolean; + minRows?: number; + maxRows?: number; + } & BaseTextareaPropsOverrides + >; + }; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: string | null; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: string | null; + /** The row model of the row that the current cell belongs to. */ + row: any; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNodeWithRender; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + isValidating?: boolean; + isProcessingProps?: boolean; + changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue'; +}; +``` + +### GridEditMode + +```typescript +type GridEditMode = 'cell' | 'row'; +``` + +### GridEditModes + +| Member | Value | Description | +| :----- | :----- | :---------- | +| Cell | `cell` | - | +| Row | `row` | - | + +### GridEditRowApi + +```typescript +type GridEditRowApi = { + /** + * Gets the mode of a cell. + * @returns Returns `"edit"` or `"view"`. + */ + getCellMode: (id: GridRowId, field: string) => GridCellMode; + /** Puts the cell corresponding to the given row id and field into edit mode. */ + startCellEditMode: startCellEditMode; + /** + * Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored. + * If `params.ignoreModifications` is `true` it will discard the modifications made. + */ + stopCellEditMode: stopCellEditMode; + /** + * Controls if a cell is editable. + * @returns A boolean value determining if the cell is editable. + */ + isCellEditable: (params: GridCellParams) => boolean; + /** + * Sets the value of the edit cell. + * Commonly used inside the edit cell component. + * @returns A promise with the validation status. + */ + setEditCellValue: ( + params: GridEditCellValueParams, + event?: MuiBaseEvent, + ) => void | Promise; + /** + * Returns the row with the values that were set by editing the cells. + * In row editing, `field` is ignored and all fields are considered. + * @returns The row with edited values. + */ + getRowWithUpdatedValues: (id: GridRowId, field: string) => GridValidRowModel; + /** + * Gets the meta information for the edit cell. + * @ignore - do not document. + */ + unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta | null; + /** + * Gets the mode of a row. + * @returns Returns `"edit"` or `"view"`. + */ + getRowMode: (id: GridRowId) => GridRowMode; + /** Puts the row corresponding to the given id into edit mode. */ + startRowEditMode: startRowEditMode; + /** + * Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored. + * If `params.ignoreModifications` is `true` it will discard the modifications made. + */ + stopRowEditMode: stopRowEditMode; +}; +``` + +### GridEditRowProps + +```typescript +type GridEditRowProps = { [field: string]: GridEditCellProps }; +``` + +### GridEditSingleSelectCellProps + +```typescript +type GridEditSingleSelectCellProps = { + [prop: string]: any; + /** + * Callback called when the value is changed by the user. + * @returns A promise to be awaited before calling `apiRef.current.setEditCellValue` + */ + onValueChange?: (event: React.SyntheticEvent, newValue: any) => void | Promise; + /** If true, the select opens by default. */ + initialOpen?: boolean; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: V; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: F; + /** The row model of the row that the current cell belongs to. */ + row: any; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNodeWithRender; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; + isValidating?: boolean; + isProcessingProps?: boolean; + changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue'; +}; +``` + +### GridEventLookup + +```typescript +type GridEventLookup = {}; +``` + +### GridEvents + +```typescript +type GridEvents = + | 'columnHeaderFocus' + | 'columnGroupHeaderFocus' + | 'resize' + | 'menuOpen' + | 'columnResize' + | 'rootMount' + | 'unmount' + | 'stateChange' + | 'viewportInnerSizeChange' + | 'debouncedResize' + | 'activeStrategyProcessorChange' + | 'strategyAvailabilityChange' + | 'columnsChange' + | 'columnWidthChange' + | 'columnResizeStart' + | 'columnResizeStop' + | 'columnOrderChange' + | 'rowsSet' + | 'filteredRowsSet' + | 'sortedRowsSet' + | 'aggregationLookupSet' + | 'rowExpansionChange' + | 'renderedRowsIntervalChange' + | 'cellModeChange' + | 'cellModesModelChange' + | 'rowModesModelChange' + | 'cellEditStart' + | 'cellEditStop' + | 'rowEditStart' + | 'rowEditStop' + | 'cellFocusIn' + | 'cellFocusOut' + | 'scrollPositionChange' + | 'virtualScrollerContentSizeChange' + | 'virtualScrollerWheel' + | 'virtualScrollerTouchMove' + | 'rowsScrollEndIntersection' + | 'headerSelectionCheckboxChange' + | 'rowSelectionCheckboxChange' + | 'clipboardCopy' + | 'preferencePanelClose' + | 'preferencePanelOpen' + | 'menuClose' + | 'rowClick' + | 'rowDoubleClick' + | 'rowMouseEnter' + | 'rowMouseLeave' + | 'rowMouseOut' + | 'rowMouseOver' + | 'rowDragStart' + | 'rowDragOver' + | 'rowDragEnd' + | 'columnHeaderClick' + | 'columnHeaderContextMenu' + | 'columnHeaderDoubleClick' + | 'columnHeaderOver' + | 'columnHeaderOut' + | 'columnHeaderEnter' + | 'columnHeaderLeave' + | 'columnHeaderKeyDown' + | 'columnHeaderBlur' + | 'columnHeaderDragStart' + | 'columnHeaderDragEnter' + | 'columnHeaderDragOver' + | 'columnHeaderDragEnd' + | 'columnHeaderDragEndNative' + | 'columnSeparatorDoubleClick' + | 'columnSeparatorMouseDown' + | 'columnIndexChange' + | 'headerFilterClick' + | 'headerFilterKeyDown' + | 'headerFilterMouseDown' + | 'headerFilterBlur' + | 'columnGroupHeaderKeyDown' + | 'columnGroupHeaderBlur' + | 'cellClick' + | 'cellDoubleClick' + | 'cellMouseDown' + | 'cellMouseUp' + | 'cellMouseOver' + | 'cellKeyDown' + | 'cellKeyUp' + | 'cellDragEnter' + | 'cellDragOver' + | 'paginationModelChange' + | 'filterModelChange' + | 'sortModelChange' + | 'rowSelectionChange' + | 'columnVisibilityModelChange' + | 'rowCountChange' + | 'densityChange' + | 'paginationMetaChange'; +``` + +### gridExpandedSortedRowIndexLookupSelector + +Get the index lookup for expanded (visible) rows only. +Does not include collapsed children. + +```typescript +type gridExpandedSortedRowIndexLookupSelector = ( + args: [React.RefObject<{ state: GridStateCommunity } | null>], +) => Record; +``` + +### GridExperimentalFeatures + +```typescript +type GridExperimentalFeatures = { + /** + * Emits a warning if the cell receives focus without also syncing the focus state. + * Only works if NODE_ENV=test. + */ + warnIfFocusStateIsNotSynced: boolean; + /** + * Sets the layout mode of the virtualizer. + * - `'uncontrolled'` (default): the browser controls scrolling and the virtualizer + * positions rows using a filler element. + * - `'controlled'`: the virtualizer controls scrolling by translating the viewport, + * enabling features such as sticky pinned rows and columns without extra DOM cost. + * @default 'uncontrolled' + */ + virtualizerLayoutMode: 'controlled' | 'uncontrolled'; +}; +``` + +### GridExportDisplayOptions + +```typescript +type GridExportDisplayOptions = { + /** + * If `true`, this export option will be removed from the GridToolbarExport menu. + * @default false + */ + disableToolbarButton?: boolean; +}; +``` + +### GridExportExtension + +Available export extensions. + +```typescript +type GridExportExtension = 'csv'; +``` + +### GridExportFormat + +Available export formats. + +```typescript +type GridExportFormat = 'csv' | 'print'; +``` + +### GridExportMenuItemProps + +```typescript +type GridExportMenuItemProps = { + hideMenu?: () => void; + options?: Options & GridExportDisplayOptions; +}; +``` + +### GridExportOptions + +The options applicable to any export format. + +```typescript +type GridExportOptions = { + /** + * The columns exported. + * This should only be used if you want to restrict the columns exports. + */ + fields?: string[]; + /** + * If `true`, the hidden columns will also be exported. + * @default false + */ + allColumns?: boolean; +}; +``` + +### GridExportStateParams + +Object passed as parameter in the `exportState()` grid API method. + +```typescript +type GridExportStateParams = { + /** + * By default, the grid exports all the models. + * You can switch this property to `true` to only exports models that are either controlled, initialized or modified. + * For instance, with this property, if you don't control or initialize the `filterModel` and you did not apply any filter, the model won't be exported. + * Note that the column dimensions are not a model. The grid only exports the dimensions of the modified columns even when `exportOnlyDirtyModels` is false. + * @default false + */ + exportOnlyDirtyModels?: boolean; +}; +``` + +### GridFeatureMode + +```typescript +type GridFeatureMode = 'client' | 'server'; +``` + +### GridFileExportOptions + +The options applicable to any document export format (CSV and Excel). + +```typescript +type GridFileExportOptions = { + /** + * The string used as the file name. + * @default document.title + */ + fileName?: string; + /** + * If `true`, the first row of the file will include the headers of the grid. + * @default true + */ + includeHeaders?: boolean; + /** + * Function that returns the list of row ids to export on the order they should be exported. + * @returns The list of row ids to export. + */ + getRowsToExport?: (params: GridGetRowsToExportParams) => GridRowId[]; + /** + * If `false`, the formulas in the cells will not be escaped. + * It is not recommended to disable this option as it exposes the user to potential CSV injection attacks. + * See https://owasp.org/www-community/attacks/CSV_Injection for more information. + * @default true + */ + escapeFormulas?: boolean; + /** + * The columns exported. + * This should only be used if you want to restrict the columns exports. + */ + fields?: string[]; + /** + * If `true`, the hidden columns will also be exported. + * @default false + */ + allColumns?: boolean; +}; +``` + +### GridFilterActiveItemsLookup + +```typescript +type GridFilterActiveItemsLookup = { [field: string]: GridFilterItem[] }; +``` + +### gridFilterActiveItemsLookupSelector + +```typescript +type gridFilterActiveItemsLookupSelector = ( + args: [React.RefObject<{ state: GridStateCommunity } | null>], +) => GridFilterActiveItemsLookup; +``` + +### gridFilterActiveItemsSelector + +```typescript +type gridFilterActiveItemsSelector = ( + args: [React.RefObject<{ state: GridStateCommunity } | null>], +) => GridFilterItem[]; +``` + +### GridFilterApi + +The filter API interface that is available in the grid \[\[apiRef]]. + +```typescript +type GridFilterApi = { + /** Shows the filter panel. If `targetColumnField` is given, a filter for this field is also added. */ + showFilterPanel: (targetColumnField?: string, panelId?: string, labelId?: string) => void; + /** Hides the filter panel. */ + hideFilterPanel: () => void; + /** Updates or inserts a [[GridFilterItem]]. */ + upsertFilterItem: (item: GridFilterItem) => void; + /** Updates or inserts many [[GridFilterItem]]. */ + upsertFilterItems: (items: GridFilterItem[]) => void; + /** + * Applies all filters on all rows. + * @ignore - do not document. + */ + unstable_applyFilters: () => void; + /** Deletes a [[GridFilterItem]]. */ + deleteFilterItem: (item: GridFilterItem) => void; + /** Changes the [[GridLogicOperator]] used to connect the filters. */ + setFilterLogicOperator: (operator: unknown) => void; + /** Sets the filter model to the one given by `model`. */ + setFilterModel: ( + model: GridFilterModel, + reason?: + | 'upsertFilterItem' + | 'upsertFilterItems' + | 'deleteFilterItem' + | 'restoreState' + | 'changeLogicOperator' + | 'removeAllFilterItems', + ) => void; + /** Set the quick filter values to the one given by `values` */ + setQuickFilterValues: (values: any[]) => void; + /** Returns the value of the `ignoreDiacritics` prop. */ + ignoreDiacritics: boolean; + /** + * Returns the filter state for the given filter model without applying it to the Data Grid. + * @returns The filter state. + */ + getFilterState: (filterModel: GridFilterModel) => GridFilterState; +}; +``` + +### gridFilteredDescendantCountLookupSelector + +```typescript +type gridFilteredDescendantCountLookupSelector = ( + args: [React.RefObject<{ state: GridStateCommunity } | null>], +) => Record; +``` + +### gridFilteredRowsLookupSelector + +```typescript +type gridFilteredRowsLookupSelector = ( + args: [React.RefObject<{ state: GridStateCommunity } | null>], +) => Record; +``` + +### GridFilterForm + +```typescript +type GridFilterForm = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent>; +``` + +### GridFilterFormProps + +```typescript +type GridFilterFormProps = { + /** The [[GridFilterItem]] representing this form. */ + item: GridFilterItem; + /** + * If `true`, the logic operator field is rendered. + * The field will be invisible if `showMultiFilterOperators` is also `true`. + */ + hasMultipleFilters: boolean; + /** If `true`, the logic operator field is visible. */ + showMultiFilterOperators?: boolean; + /** If `true`, disables the logic operator field but still renders it. */ + disableMultiFilterOperator?: boolean; + /** + * A ref allowing to set imperative focus. + * It can be passed to the el + */ + focusElementRef?: React.Ref; + /** Callback called when the operator, column field or value is changed. */ + applyFilterChanges: (item: GridFilterItem) => void; + /** Callback called when the logic operator is changed. */ + applyMultiFilterOperatorChanges: (operator: unknown) => void; + /** Callback called when the delete button is clicked. */ + deleteFilter: (item: GridFilterItem) => void; + /** + * Allows to filter the columns displayed in the filter form. + * @returns The filtered fields array. + */ + filterColumns?: (args: FilterColumnsArgs) => string[]; + /** + * Sets the available logic operators. + * @default [GridLogicOperator.And, GridLogicOperator.Or] + */ + logicOperators?: unknown[]; + /** + * Changes how the options in the columns selector should be ordered. + * If not specified, the order is derived from the `columns` prop. + */ + columnsSort?: 'asc' | 'desc'; + /** + * Props passed to the delete icon. + * @default {} + */ + deleteIconProps?: any; + /** + * Props passed to the logic operator input component. + * @default {} + */ + logicOperatorInputProps?: any; + /** + * Props passed to the operator input component. + * @default {} + */ + operatorInputProps?: any; + /** + * Props passed to the column input component. + * @default {} + */ + columnInputProps?: any; + /** + * `true` if the filter is disabled/read only. + * i.e. `colDef.fiterable = false` but passed in `filterModel` + * @default false + */ + readOnly?: boolean; + /** + * Props passed to the value input component. + * @default {} + */ + valueInputProps?: any; + /** @ignore - do not document. */ + children?: React.ReactNode; +}; +``` + +### GridFilterInitialState + +```typescript +type GridFilterInitialState = { filterModel?: GridFilterModel }; +``` + +### GridFilterInputBooleanProps + +```typescript +type GridFilterInputBooleanProps = { + item: GridFilterItem; + applyValue: (value: GridFilterItem) => void; + apiRef: RefObject; + inputRef?: React.Ref; + focusElementRef?: React.Ref; + headerFilterMenu?: React.ReactNode; + clearButton?: React.ReactNode; + /** + * It is `true` if the filter either has a value or an operator with no value + * required is selected (for example `isEmpty`) + */ + isFilterActive?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + tabIndex?: number; + disabled?: boolean; + className?: string; + slotProps?: { root: TextFieldProps }; +}; +``` + +### GridFilterInputDateProps + +```typescript +type GridFilterInputDateProps = { + item: GridFilterItem; + applyValue: (value: GridFilterItem) => void; + apiRef: RefObject; + inputRef?: React.Ref; + focusElementRef?: React.Ref; + headerFilterMenu?: React.ReactNode; + clearButton?: React.ReactNode; + /** + * It is `true` if the filter either has a value or an operator with no value + * required is selected (for example `isEmpty`) + */ + isFilterActive?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + tabIndex?: number; + disabled?: boolean; + className?: string; + slotProps?: { root: TextFieldProps }; + type?: 'date' | 'datetime-local'; +}; +``` + +### GridFilterInputMultipleSingleSelectProps + +```typescript +type GridFilterInputMultipleSingleSelectProps = { + item: GridFilterItem; + applyValue: (value: GridFilterItem) => void; + apiRef: RefObject; + inputRef?: React.Ref; + focusElementRef?: React.Ref; + headerFilterMenu?: React.ReactNode; + clearButton?: React.ReactNode; + /** + * It is `true` if the filter either has a value or an operator with no value + * required is selected (for example `isEmpty`) + */ + isFilterActive?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + tabIndex?: number; + disabled?: boolean; + className?: string; + slotProps?: { root: Omit, 'options'> }; + type?: 'singleSelect'; +}; +``` + +### GridFilterInputMultipleValueProps + +```typescript +type GridFilterInputMultipleValueProps = { + item: GridFilterItem; + applyValue: (value: GridFilterItem) => void; + apiRef: RefObject; + inputRef?: React.Ref; + focusElementRef?: React.Ref; + headerFilterMenu?: React.ReactNode; + clearButton?: React.ReactNode; + /** + * It is `true` if the filter either has a value or an operator with no value + * required is selected (for example `isEmpty`) + */ + isFilterActive?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + tabIndex?: number; + disabled?: boolean; + className?: string; + slotProps?: { root: Omit, 'options'> }; + type?: 'text' | 'number' | 'date' | 'datetime-local'; +}; +``` + +### GridFilterInputSingleSelectProps + +```typescript +type GridFilterInputSingleSelectProps = { + item: GridFilterItem; + applyValue: (value: GridFilterItem) => void; + apiRef: RefObject; + inputRef?: React.Ref; + focusElementRef?: React.Ref; + headerFilterMenu?: React.ReactNode; + clearButton?: React.ReactNode; + /** + * It is `true` if the filter either has a value or an operator with no value + * required is selected (for example `isEmpty`) + */ + isFilterActive?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + tabIndex?: number; + disabled?: boolean; + className?: string; + slotProps?: { root: TextFieldProps }; + type?: 'singleSelect'; +}; +``` + +### GridFilterInputValueProps + +```typescript +type GridFilterInputValueProps< + T extends GridFilterInputSlotProps = GridFilterInputSlotProps, + Api extends GridApiCommon = GridApiCommunity, +> = { + item: GridFilterItem; + applyValue: (value: GridFilterItem) => void; + apiRef: RefObject; + inputRef?: React.Ref; + focusElementRef?: React.Ref; + headerFilterMenu?: React.ReactNode; + clearButton?: React.ReactNode; + /** + * It is `true` if the filter either has a value or an operator with no value + * required is selected (for example `isEmpty`) + */ + isFilterActive?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + tabIndex?: number; + disabled?: boolean; + className?: string; + slotProps?: { root: T }; +}; +``` + +### GridFilterItem + +Filter item definition interface. + +```typescript +type GridFilterItem = { + /** + * Must be unique. + * Only useful when the model contains several items. + */ + id?: number | string; + /** The column from which we want to filter the rows. */ + field: string; + /** + * The filtering value. + * The operator filtering function will decide for each row if the row values is correct compared to this value. + */ + value?: any; + /** + * The name of the operator we want to apply. + * A custom operator is supported by providing any string value. + */ + operator: + | 'contains' + | 'doesNotContain' + | 'equals' + | 'doesNotEqual' + | 'startsWith' + | 'endsWith' + | '=' + | '!=' + | '>' + | '>=' + | '<' + | '<=' + | 'is' + | 'not' + | 'after' + | 'onOrAfter' + | 'before' + | 'onOrBefore' + | 'isEmpty' + | 'isNotEmpty' + | 'isAnyOf' + | string; +}; +``` + +### GridFilterModel + +Model describing the filters to apply to the grid. + +```typescript +type GridFilterModel = { + /** @default [] */ + items: GridFilterItem[]; + /** + * - `GridLogicOperator.And`: the row must pass all the filter items. + * - `GridLogicOperator.Or`: the row must pass at least on filter item. + * @default GridLogicOperator.And + */ + logicOperator?: unknown; + /** + * values used to quick filter rows + * @default [] + */ + quickFilterValues?: any[]; + /** + * - `GridLogicOperator.And`: the row must pass all the values. + * - `GridLogicOperator.Or`: the row must pass at least one value. + * @default GridLogicOperator.And + */ + quickFilterLogicOperator?: unknown; + /** + * If `false`, the quick filter will also consider cell values from hidden columns. + * @default true + */ + quickFilterExcludeHiddenColumns?: boolean; +}; +``` + +### GridFilterOperator + +Filter operator definition interface. + +```typescript +type GridFilterOperator< + R extends GridValidRowModel = any, + V = any, + F = V, + I extends GridFilterInputValueProps = GridFilterInputValueProps, +> = { + /** The label of the filter operator. */ + label?: string; + /** The label of the filter shown in header filter row. */ + headerLabel?: string; + /** + * The name of the filter operator. + * It will be matched with the `operator` property of the filter items. + */ + value: + | 'contains' + | 'doesNotContain' + | 'equals' + | 'doesNotEqual' + | 'startsWith' + | 'endsWith' + | '=' + | '!=' + | '>' + | '>=' + | '<' + | '<=' + | 'is' + | 'not' + | 'after' + | 'onOrAfter' + | 'before' + | 'onOrBefore' + | 'isEmpty' + | 'isNotEmpty' + | 'isAnyOf' + | string; + /** + * The callback that generates a filtering function for a given filter item and column. + * This function can return `null` to skip filtering for this item and column. + * @returns The function to call to check if a row pass this filter item or not. + */ + getApplyFilterFn: GetApplyFilterFn; + /** The input component to render in the filter panel for this filter operator. */ + InputComponent?: React.JSXElementConstructor; + /** The props to pass to the input component in the filter panel for this filter operator. */ + InputComponentProps?: Partial; + /** + * Converts the value of a filter item to a human-readable form. + * @returns The value formatted to be displayed in the UI of filter button tooltip. + */ + getValueAsString?: (value: any) => string; + /** + * If `false`, filter operator doesn't require user-entered value to work. + * Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`) + * @default true + */ + requiresFilterValue?: boolean; +}; +``` + +### GridFilterPanel + +```typescript +type GridFilterPanel = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent>; +``` + +### GridFilterState + +```typescript +type GridFilterState = { + filterModel: GridFilterModel; + /** + * Filtering status for each row. + * A row is filtered if it is passing the filters, whether its parents are expanded or not. + * All the rows are filtered except the ones registered in this lookup with `false` values. + * This is the equivalent of the `visibleRowsLookup` if all the groups were expanded. + */ + filteredRowsLookup: Record; + /** + * Amount of children that are passing the filters or have children that are passing the filter (does not count grand children). + * If a row is not registered in this lookup, it is supposed to have no descendant passing the filters. + * If `GridDataSource` is being used to load the data, the value is `-1` if there are some children but the count is unknown. + */ + filteredChildrenCountLookup: Record; + /** + * Amount of descendants that are passing the filters. + * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...). + * For the Row grouping by column, it does not include the intermediate depth levels (= amount of descendant of maximum depth). + * If a row is not registered in this lookup, it is supposed to have no descendant passing the filters. + */ + filteredDescendantCountLookup: Record; +}; +``` + +### GridFocusApi + +```typescript +type GridFocusApi = { + /** Sets the focus to the cell at the given `id` and `field`. */ + setCellFocus: (id: GridRowId, field: string) => void; + /** Sets the focus to the column header at the given `field`. */ + setColumnHeaderFocus: (field: string, event?: MuiBaseEvent) => void; + /** Sets the focus to the column header filter at the given `field`. */ + setColumnHeaderFilterFocus: (field: string, event?: MuiBaseEvent) => void; +}; +``` + +### GridFocusState + +```typescript +type GridFocusState = { + cell: GridCellCoordinates | null; + columnHeader: GridColumnIdentifier | null; + columnHeaderFilter: GridColumnIdentifier | null; + columnGroupHeader: GridColumnGroupIdentifier | null; +}; +``` + +### GridFooter + +```typescript +type GridFooter = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + React.HTMLAttributes & { + sx?: SxProps; + } & React.RefAttributes + >; +``` + +### GridFooterContainer + +```typescript +type GridFooterContainer = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + React.HTMLAttributes & { + sx?: SxProps; + } & React.RefAttributes + >; +``` + +### GridFooterContainerProps + +```typescript +type GridFooterContainerProps = React.HTMLAttributes & { sx?: SxProps }; +``` + +### GridFooterNode + +```typescript +type GridFooterNode = { + type: 'footer'; + /** The id of the group containing this node. */ + parent: GridRowId; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### GridGenericColumnMenu + +```typescript +type GridGenericColumnMenu = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + GridGenericColumnMenuProps & React.RefAttributes + >; +``` + +### GridGenericColumnMenuProps + +```typescript +type GridGenericColumnMenuProps = { + /** + * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlots: { [key: string]: React.JSXElementConstructor }; + /** + * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages + * @ignore - do not document. + */ + defaultSlotProps: { [key: string]: GridColumnMenuSlotProps }; + /** + * `slots` could be used to add new and (or) override default column menu items + * If you register a nee component you must pass it's `displayOrder` in `slotProps` + * or it will be placed in the end of the list + */ + slots?: { [key: string]: React.JSXElementConstructor | null }; + /** + * Could be used to pass new props or override props specific to a column menu component + * e.g. `displayOrder` + */ + slotProps?: { [key: string]: GridColumnMenuSlotProps }; + hideMenu: (event: React.SyntheticEvent) => void; + colDef: GridColDef; + open: boolean; + id?: string; + labelledby?: string; +}; +``` + +### GridGetRowsParams + +```typescript +type GridGetRowsParams = { + sortModel: GridSortItem[]; + filterModel: GridFilterModel; + /** Alternate to `start` and `end`, maps to `GridPaginationModel` interface. */ + paginationModel?: GridPaginationModel; + /** First row index to fetch (number) or cursor information (number | string). */ + start: number | string; + /** Last row index to fetch. */ + end: number; +}; +``` + +### GridGetRowsResponse + +```typescript +type GridGetRowsResponse = { + rows: GridValidRowModel[]; + /** + * To reflect updates in total `rowCount` (optional). + * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront. + */ + rowCount?: number; + /** + * Additional `pageInfo` for advanced use-cases. + * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server. + */ + pageInfo?: { hasNextPage?: boolean; nextCursor?: string }; +}; +``` + +### GridGetRowsToExportParams + +```typescript +type GridGetRowsToExportParams = { + /** The API of the grid. */ + apiRef: RefObject; +}; +``` + +### GridGroupNode + +```typescript +type GridGroupNode = GridDataGroupNode | GridAutoGeneratedGroupNode; +``` + +### gridHasColSpanSelector + +Checks if some column has a colSpan field. + +```typescript +type gridHasColSpanSelector = ( + args: [React.RefObject<{ state: GridStateCommunity } | null>], +) => boolean; +``` + +### GridHeaderCheckbox + +```typescript +type GridHeaderCheckbox = + | React.ForwardRefExoticComponent> + | React.ForwardRefExoticComponent< + GridColumnHeaderParams & React.RefAttributes + >; +``` + +### GridHeaderFilterEventLookup + +```typescript +type GridHeaderFilterEventLookup = { + /** + * Fired when a column header filter is clicked + * @ignore - do not document. + */ + headerFilterClick: { + params: GridColumnHeaderParams; + event: React.MouseEvent; + }; + /** + * Fired when a key is pressed in a column header filter. It's mapped to the `keydown` DOM event. + * @ignore - do not document. + */ + headerFilterKeyDown: { + params: GridColumnHeaderParams; + event: React.KeyboardEvent; + }; + /** + * Fired when a mouse is pressed in a column header filter. It's mapped to the `mousedown` DOM event. + * @ignore - do not document. + */ + headerFilterMouseDown: { + params: GridColumnHeaderParams; + event: React.KeyboardEvent; + }; + /** + * Fired when a column header filter is blurred. + * @ignore - do not document. + */ + headerFilterBlur: { + params: GridColumnHeaderParams; + event: React.KeyboardEvent; + }; +}; +``` + +### GridHeaderSelectionCheckboxParams + +```typescript +type GridHeaderSelectionCheckboxParams = { value: boolean }; +``` + +### GridHydrateColumnsValue + +```typescript +type GridHydrateColumnsValue = GridColumnsRawState; +``` + +### GridIconSlotsComponent + +Set of icons used in the grid component UI. + +```typescript +type GridIconSlotsComponent = { + /** + * Icon displayed on the boolean cell to represent the true value. + * @default GridCheckIcon + */ + booleanCellTrueIcon: React.JSXElementConstructor; + /** + * Icon displayed on the boolean cell to represent the false value. + * @default GridCloseIcon + */ + booleanCellFalseIcon: React.JSXElementConstructor; + /** + * Icon displayed on the undo button in the toolbar. + * @default GridUndoIcon + */ + undoIcon: React.JSXElementConstructor; + /** + * Icon displayed on the redo button in the toolbar. + * @default GridRedoIcon + */ + redoIcon: React.JSXElementConstructor; + /** + * Icon displayed on the side of the column header title to display the filter input component. + * @default GridTripleDotsVerticalIcon + */ + columnMenuIcon: React.JSXElementConstructor; + /** + * Icon displayed on the open filter button present in the toolbar by default. + * @default GridFilterListIcon + */ + openFilterButtonIcon: React.JSXElementConstructor; + /** + * Icon displayed on the column header menu to show that a filter has been applied to the column. + * @default GridFilterAltIcon + */ + columnFilteredIcon: React.JSXElementConstructor; + /** + * Icon displayed on the column menu selector tab. + * @default GridColumnIcon + */ + columnSelectorIcon: React.JSXElementConstructor; + /** + * Icon displayed on the side of the column header title when unsorted. + * @default GridColumnUnsortedIcon + */ + columnUnsortedIcon: React.JSXElementConstructor | null; + /** + * Icon displayed on the side of the column header title when sorted in ascending order. + * @default GridArrowUpwardIcon + */ + columnSortedAscendingIcon: React.JSXElementConstructor | null; + /** + * Icon displayed on the side of the column header title when sorted in descending order. + * @default GridArrowDownwardIcon + */ + columnSortedDescendingIcon: React.JSXElementConstructor | null; + /** + * Icon displayed in between two column headers that allows to resize the column header. + * @default GridSeparatorIcon + */ + columnResizeIcon: React.JSXElementConstructor; + /** + * Icon displayed on the compact density option in the toolbar. + * @default GridViewHeadlineIcon + */ + densityCompactIcon: React.JSXElementConstructor; + /** + * Icon displayed on the standard density option in the toolbar. + * @default GridTableRowsIcon + */ + densityStandardIcon: React.JSXElementConstructor; + /** + * Icon displayed on the "comfortable" density option in the toolbar. + * @default GridViewStreamIcon + */ + densityComfortableIcon: React.JSXElementConstructor; + /** + * Icon displayed on the open export button present in the toolbar by default. + * @default GridDownloadIcon + */ + exportIcon: React.JSXElementConstructor; + /** + * Icon displayed on the `actions` column type to open the menu. + * @default GridMoreVertIcon + */ + moreActionsIcon: React.JSXElementConstructor; + /** + * Icon displayed on the tree data toggling column when the children are collapsed + * @default GridKeyboardArrowRight + */ + treeDataExpandIcon: React.JSXElementConstructor; + /** + * Icon displayed on the tree data toggling column when the children are expanded + * @default GridExpandMoreIcon + */ + treeDataCollapseIcon: React.JSXElementConstructor; + /** + * Icon displayed on the grouping column when the children are collapsed + * @default GridKeyboardArrowRight + */ + groupingCriteriaExpandIcon: React.JSXElementConstructor; + /** + * Icon displayed on the grouping column when the children are expanded + * @default GridExpandMoreIcon + */ + groupingCriteriaCollapseIcon: React.JSXElementConstructor; + /** + * Icon displayed on the detail panel toggle column when collapsed. + * @default GridAddIcon + */ + detailPanelExpandIcon: React.JSXElementConstructor; + /** + * Icon displayed on the detail panel toggle column when expanded. + * @default GridRemoveIcon + */ + detailPanelCollapseIcon: React.JSXElementConstructor; + /** + * Icon displayed for deleting the filter from filter panel. + * @default GridAddIcon + */ + filterPanelAddIcon: React.JSXElementConstructor; + /** + * Icon displayed for deleting the filter from filter panel. + * @default GridDeleteIcon + */ + filterPanelDeleteIcon: React.JSXElementConstructor; + /** + * Icon displayed for deleting all the active filters from filter panel. + * @default GridDeleteForeverIcon + */ + filterPanelRemoveAllIcon: React.JSXElementConstructor; + /** + * Icon displayed on the `reorder` column type to reorder a row. + * @default GridDragIcon + */ + rowReorderIcon: React.JSXElementConstructor; + /** + * Icon displayed on the quick filter input. + * @default GridSearchIcon + */ + quickFilterIcon: React.JSXElementConstructor; + /** + * Icon displayed on the quick filter reset input. + * @default GridCloseIcon + */ + quickFilterClearIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for hiding column + * @default GridVisibilityOffIcon + */ + columnMenuHideIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for ascending sort + * @default GridArrowUpwardIcon + */ + columnMenuSortAscendingIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for descending sort + * @default GridArrowDownwardIcon + */ + columnMenuSortDescendingIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for unsort + * @default null + */ + columnMenuUnsortIcon: React.JSXElementConstructor | null; + /** + * Icon displayed in column menu for filter + * @default GridFilterAltIcon + */ + columnMenuFilterIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for showing all columns + * @default GridViewColumnIcon + */ + columnMenuManageColumnsIcon: React.JSXElementConstructor; + /** + * Icon displayed in column menu for clearing values + * @default GridClearIcon + */ + columnMenuClearIcon: React.JSXElementConstructor; + /** + * Icon displayed on the input while processing. + * @default GridLoadIcon + */ + loadIcon: React.JSXElementConstructor; + /** + * Icon displayed on the column reorder button. + * @default GridDragIcon + */ + columnReorderIcon: React.JSXElementConstructor; + /** + * Icon displayed to indicate that a menu item is selected. + * @default GridCheckIcon + */ + menuItemCheckIcon: React.JSXElementConstructor; + /** + * Icon displayed on the long text cell to expand the content. + * @default GridLongTextCellExpandIcon + */ + longTextCellExpandIcon: React.JSXElementConstructor; + /** + * Icon displayed on the long text cell popup to collapse the content. + * @default GridLongTextCellCollapseIcon + */ + longTextCellCollapseIcon: React.JSXElementConstructor; +}; +``` + +### GridInitialState + +The initial state of Data Grid. + +```typescript +type GridInitialState = { + pagination?: GridPaginationInitialState; + sorting?: GridSortingInitialState; + filter?: GridFilterInitialState; + columns?: GridColumnsInitialState; + preferencePanel?: GridPreferencePanelInitialState; + density?: GridDensityState; + scroll?: { top: number; left: number }; +}; +``` + +### GridKeyValue + +Value that can be used as a key for grouping rows + +```typescript +type GridKeyValue = string | number | boolean; +``` + +### GridLeafColumn + +```typescript +type GridLeafColumn = { field: string }; +``` + +### GridLeafNode + +```typescript +type GridLeafNode = { + type: 'leaf'; + /** The id of the group containing this node. */ + parent: GridRowId; + /** The key used to group the children of this row. */ + groupingKey: GridKeyValue | null; + /** The uniq id of this node. */ + id: GridRowId; + /** Depth of this node in the tree. */ + depth: number; +}; +``` + +### gridListColumnSelector + +Get the list column definition + +```typescript +type gridListColumnSelector = ( + apiRef: RefObject<{ state: GridStateCommunity } | null>, + args?: unknown, +) => GridStateColDef; +``` + +### GridListViewColDef + +Column Definition interface used for the list view column. + +```typescript +type GridListViewColDef = { + /** The unique identifier of the column. Used to map with [[GridRowModel]] values. */ + field: string; + /** + * Override the component rendered as cell for this column. + * @template + * @returns The element to be rendered. + */ + renderCell?: (params: GridRenderCellParams) => React.ReactNode; + /** Align cell content. */ + align?: GridAlignment; + /** Class name added to cells in this column. */ + cellClassName?: GridCellClassNamePropType; + /** + * Display mode for the cell: + * - 'text': For text-based cells (default) + * - 'flex': For cells with HTMLElement children + */ + display?: 'text' | 'flex'; +}; +``` + +### gridListViewSelector + +Get the list view state + +```typescript +type gridListViewSelector = ( + apiRef: RefObject<{ state: GridStateCommunity } | null>, + args?: unknown, +) => boolean; +``` + +### GridLoadingOverlay + +```typescript +type GridLoadingOverlay = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent>; +``` + +### GridLoadingOverlayProps + +```typescript +type GridLoadingOverlayProps = { + /** + * The variant of the overlay. + * @default 'linear-progress' + */ + variant?: GridLoadingOverlayVariant; + /** + * The variant of the overlay when no rows are displayed. + * @default 'skeleton' + */ + noRowsVariant?: GridLoadingOverlayVariant; + sx?: SxProps; +}; +``` + +### GridLoadingOverlayVariant + +```typescript +type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton'; +``` + +### GridLocaleText + +Set the types of the texts in the grid. + +```typescript +type GridLocaleText = {}; +``` + +### GridLocaleTextApi + +The grid locale text API \[\[apiRef]]. + +```typescript +type GridLocaleTextApi = { + /** + * Returns the translation for the `key`. + * @returns The translated value. + */ + getLocaleText: ( + key: T, + ) => + | React.ReactNode + | ((count: number) => React.ReactNode) + | ((columnName: string) => string) + | ((colDef: GridColDef) => React.ReactNode) + | ((visibleCount: number, totalCount: number) => React.ReactNode) + | ((name: string) => string) + | ((params?: { + from: number; + to: number; + count: number; + estimated: number | undefined; + }) => string) + | ((type: 'first' | 'last' | 'previous' | 'next') => string) + | ((dimensionLabel: string) => string) + | ((valuesLabel: string) => string) + | ((column: string) => string) + | ((column: string, aggregation: string) => string) + | ((column: string, operator: string, value: string) => string) + | ((column: string, direction: string) => string) + | ((count: number) => string) + | ((dimensionsCount: number, valuesCount: number) => string); +}; +``` + +### GridLogicOperator + +| Member | Value | Description | +| :----- | :---- | :---------- | +| And | `and` | - | +| Or | `or` | - | + +### GridLongTextCellProps + +```typescript +type GridLongTextCellProps = { + /** + * A function to customize the content rendered in the popup. + * @returns The content to render in the popup. + */ + renderContent?: (value: string | null) => React.ReactNode; + /** Props passed to internal components. */ + slotProps?: { + root?: React.HTMLAttributes; + content?: React.HTMLAttributes; + expandButton?: React.ButtonHTMLAttributes; + collapseButton?: React.ButtonHTMLAttributes; + popper?: Partial< + React.DOMAttributes & { className?: string; style?: React.CSSProperties } & { + role?: string; + ref?: Ref; + open: boolean; + children?: React.ReactNode; + clickAwayTouchEvent?: false | ClickAwayTouchEventHandler; + clickAwayMouseEvent?: false | ClickAwayMouseEventHandler; + flip?: boolean; + focusTrap?: boolean; + onExited?: (node: HTMLElement | null) => void; + onClickAway?: (event: MouseEvent | TouchEvent) => void; + onDidShow?: () => void; + onDidHide?: () => void; + id?: string; + target?: Element | null; + transition?: boolean; + placement?: Placement; + } & BasePopperPropsOverrides + >; + popperContent?: React.HTMLAttributes; + }; + /** GridApi that let you manipulate the grid. */ + api: GridApiCommunity; + /** The grid row id. */ + id: GridRowId; + /** The column field of the cell that triggered the event. */ + field: string; + /** + * The cell value. + * If the column has `valueGetter`, use `params.row` to directly access the fields. + */ + value?: string | null; + /** The cell value formatted with the column valueFormatter. */ + formattedValue?: string | null; + /** The row model of the row that the current cell belongs to. */ + row: any; + /** The node of the row that the current cell belongs to. */ + rowNode: GridTreeNodeWithRender; + /** The column of the row that the current cell belongs to. */ + colDef: GridStateColDef; + /** If true, the cell is editable. */ + isEditable?: boolean; + /** The mode of the cell. */ + cellMode: GridCellMode; + /** If true, the cell is the active element. */ + hasFocus: boolean; + /** the tabIndex value. */ + tabIndex: 0 | -1; +}; +``` + +### GridMenuParams + +```typescript +type GridMenuParams = { + /** The element that opens the menu. */ + target: HTMLElement | null; +}; +``` + +### GridMenuProps + +```typescript +type GridMenuProps = { + open: boolean; + target: HTMLElement | null; + onClose: (event?: React.KeyboardEvent | MouseEvent | TouchEvent) => void; + position?: MenuPosition; + children: React.ReactNode; + className?: string; + onExited?: (node: HTMLElement | null) => void; +}; +``` + +### GridMultiSelectionApi + +```typescript +type GridMultiSelectionApi = { + /** Change the selection state of multiple rows. */ + selectRows: (ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => void; + /** Change the selection state of all the selectable rows in a range. */ + selectRowRange: ( + range: { startId: GridRowId; endId: GridRowId }, + isSelected?: boolean, + resetSelection?: boolean, + ) => void; +}; +``` + +### GridNoColumnsOverlay + +```typescript +type GridNoColumnsOverlay = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + React.HTMLAttributes & { + sx?: SxProps; + } & React.RefAttributes + >; +``` + +### GridNoRowsOverlay + +```typescript +type GridNoRowsOverlay = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + React.HTMLAttributes & { + sx?: SxProps; + } & React.RefAttributes + >; +``` + +### GridOverlay + +```typescript +type GridOverlay = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + React.HTMLAttributes & { + sx?: SxProps; + } & React.RefAttributes + >; +``` + +### GridOverlayProps + +```typescript +type GridOverlayProps = React.HTMLAttributes & { sx?: SxProps }; +``` + +### GridPaginationApi + +The pagination API interface that is available in the grid `apiRef`. + +```typescript +type GridPaginationApi = { + /** Sets the displayed page to the value given by `page`. */ + setPage: (page: number) => void; + /** Sets the number of displayed rows to the value given by `pageSize`. */ + setPageSize: (pageSize: number) => void; + /** Sets the `paginationModel` to a new value. */ + setPaginationModel: (model: GridPaginationModel) => void; + /** Sets the `rowCount` to a new value. */ + setRowCount: (rowCount: number) => void; + /** Sets the `paginationMeta` to a new value. */ + setPaginationMeta: (paginationMeta: GridPaginationMeta) => void; +}; +``` + +### gridPaginationEnabledClientSideSelector + +```typescript +type gridPaginationEnabledClientSideSelector = ( + args: [React.RefObject<{ state: GridStateCommunity } | null>], +) => boolean; +``` + +### GridPaginationInitialState + +```typescript +type GridPaginationInitialState = { + paginationModel?: Partial; + rowCount?: number; + meta?: GridPaginationMeta; +}; +``` + +### GridPaginationMeta + +```typescript +type GridPaginationMeta = { hasNextPage?: boolean }; +``` + +### GridPaginationModel + +```typescript +type GridPaginationModel = { + /** + * Set the number of rows in one page. + * If some of the rows have children (for instance in the tree data), this number represents the amount of top level rows wanted on each page. + * @default 100 + */ + pageSize: number; + /** + * The zero-based index of the current page. + * @default 0 + */ + page: number; +}; +``` + +### GridPaginationModelApi + +The pagination model API interface that is available in the grid `apiRef`. + +```typescript +type GridPaginationModelApi = { + /** Sets the displayed page to the value given by `page`. */ + setPage: (page: number) => void; + /** Sets the number of displayed rows to the value given by `pageSize`. */ + setPageSize: (pageSize: number) => void; + /** Sets the `paginationModel` to a new value. */ + setPaginationModel: (model: GridPaginationModel) => void; +}; +``` + +### GridPaginationRowCountApi + +The pagination row count API interface that is available in the grid `apiRef`. + +```typescript +type GridPaginationRowCountApi = { + /** Sets the `rowCount` to a new value. */ + setRowCount: (rowCount: number) => void; +}; +``` + +### gridPaginationSelector + +```typescript +type gridPaginationSelector = ( + apiRef: RefObject<{ state: GridStateCommunity } | null>, + args?: unknown, +) => GridPaginationState; +``` + +### GridPaginationState + +```typescript +type GridPaginationState = { + paginationModel: GridPaginationModel; + rowCount: number; + meta: GridPaginationMeta; + enabled: boolean; + paginationMode: GridFeatureMode; +}; +``` + +### GridPanel + +```typescript +type GridPanel = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent< + Omit & React.RefAttributes + >; +``` + +### gridPanelClasses + +```typescript +type gridPanelClasses = Record<'panel' | 'paper', string>; +``` + +### GridPanelClasses + +```typescript +type GridPanelClasses = { + /** Styles applied to the root element. */ + panel: string; + /** Styles applied to the paper element. */ + paper: string; +}; +``` + +### GridPanelProps + +```typescript +type GridPanelProps = { + ref?: React.Ref; + children?: React.ReactNode; + /** Override or extend the styles applied to the component. */ + classes?: Partial; + open: boolean; + onClose?: () => void; + className?: string; + id?: string; + target?: Element | null; + flip?: boolean; +}; +``` + +### GridPanelWrapper + +```typescript +type GridPanelWrapper = + | React.ForwardRefExoticComponent + | React.ForwardRefExoticComponent>; +``` + +### GridPanelWrapperProps + +```typescript +type GridPanelWrapperProps = {}; +``` + +### GridParamsApi + +```typescript +type GridParamsApi = { + /** + * Gets the value of a cell at the given `id` and `field`. + * @template + * @returns The cell value. + */ + getCellValue: (id: GridRowId, field: string) => V; + /** + * Gets the cell value. + * Use it instead of `getCellValue` for better performance if you have `row` and `colDef`. + * @template + * @returns The cell value. + * @ignore - do not document + */ + getRowValue: (row: GridRowModel, colDef: GridColDef) => V; + /** + * Gets the cell formatted value + * Use it instead of `getCellParams` for better performance if you only need the formatted value. + * @template + * @returns The cell value. + * @ignore - do not document + */ + getRowFormattedValue: (row: GridRowModel, colDef: GridColDef) => V; + /** + * Gets the [[GridCellParams]] object that is passed as argument in events. + * @returns The cell params. + */ + getCellElement: (id: GridRowId, field: string) => HTMLDivElement | null; + /** + * Gets the [[GridCellParams]] object that is passed as argument in events. + * @returns The cell params. + */ + getCellParams: < + R extends GridValidRowModel = any, + V = unknown, + F = V, + N extends GridTreeNode = GridTreeNode, + >( + id: GridRowId, + field: string, + ) => GridCellParams; + /** + * Gets the [[GridRowParams]] object that is passed as argument in events. + * @returns The row params. + */ + getRowParams: (id: GridRowId) => GridRowParams; + /** + * Gets the underlying DOM element for a row at the given `id`. + * @returns The DOM element or `null`. + */ + getRowElement: (id: GridRowId) => HTMLDivElement | null; + /** + * Gets the underlying DOM element for the column header with the given `field`. + * @returns The DOM element or `null`. + */ + getColumnHeaderElement: (field: string) => HTMLDivElement | null; + /** + * Gets the [[GridColumnHeaderParams]] object that is passed as argument in events. + * @returns The cell params. + */ + getColumnHeaderParams: (field: string) => GridColumnHeaderParams; +}; +``` + +### GridPinnedColumnFields + +```typescript +type GridPinnedColumnFields = { left?: string[]; right?: string[] }; +``` + +### GridPinnedColumnPosition + +| Member | Value | Description | +| :----- | :------ | :---------- | +| LEFT | `left` | - | +| RIGHT | `right` | - | + +### GridPinnedColumns + +```typescript +type GridPinnedColumns = { left: GridStateColDef[]; right: GridStateColDef[] }; +``` + +### GridPinnedRowNode + +```typescript +type GridPinnedRowNode = GridDataPinnedRowNode | GridAutoGeneratedPinnedRowNode; +``` + +### GridPipeProcessingLookup + +```typescript +type GridPipeProcessingLookup = { + columnMenu: { value: string[]; context: GridColDef }; + exportState: { value: GridInitialStateCommunity; context: GridExportStateParams }; + getRowsParams: { value: Partial }; + hydrateColumns: { value: GridHydrateColumnsValue }; + hydrateRows: { value: GridHydrateRowsValue }; + exportMenu: { value: { component: ReactElement; componentName: string }[]; context: any }; + preferencePanel: { value: React.ReactNode; context: unknown }; + restoreState: { + value: GridRestoreStatePreProcessingValue; + context: GridRestoreStatePreProcessingContext; + }; + rowHeight: { value: HeightEntry; context: GridRowEntry }; + scrollToIndexes: { value: Partial; context: Partial }; + rowClassName: { value: string[]; context: GridRowId }; + cellClassName: { value: string[]; context: GridCellCoordinates }; + isCellSelected: { value: boolean; context: GridCellCoordinates }; + canUpdateFocus: { + value: boolean; + context: { + event: MouseEvent | React.KeyboardEvent; + cell: GridCellParams | null; + }; + }; + clipboardCopy: { value: string }; + canStartEditing: { + value: boolean; + context: { + event: React.KeyboardEvent; + cellParams: GridCellParams; + editMode: GridEditMode; + }; + }; + isColumnPinned: { value: unknown | false; context: string }; + processDataSourceRows: { + value: { params: GridGetRowsParams; response: GridGetRowsResponse }; + context: boolean; + }; + /** + * Does validation of the current reorder operation. + * If the reorder is valid, it returns the position index of the drop indicator. + * - For example before first row is `0` and after the last row is `rows.length`. + * If the reorder is invalid, it returns `-1`. + */ + isRowReorderValid: { + value: boolean; + context: { + sourceRowId: GridRowId; + targetRowId: GridRowId; + dropPosition: RowReorderDropPosition; + dragDirection: 'up' | 'down'; + }; + }; +}; +``` + +### GridPreferencePanelInitialState + +```typescript +type GridPreferencePanelInitialState = { + open: boolean; + panelId?: string; + labelId?: string; + /** + * Tab currently opened. + * @default GridPreferencePanelsValue.filter +TODO v6: Remove the default behavior + */ + openedPanelValue?: unknown; +}; +``` + +### GridPreferencePanelParams + +```typescript +type GridPreferencePanelParams = { + labelId?: string; + panelId?: string; + /** + * Tab currently opened. + * @default GridPreferencePanelsValue.filter +TODO v6: Remove the default behavior + */ + openedPanelValue?: unknown; +}; +``` + +### GridPreferencePanelState + +```typescript +type GridPreferencePanelState = { + open: boolean; + panelId?: string; + labelId?: string; + /** + * Tab currently opened. + * @default GridPreferencePanelsValue.filter +TODO v6: Remove the default behavior + */ + openedPanelValue?: unknown; +}; +``` + +### GridPreferencePanelsValue + +| Member | Value | Description | +| :---------- | :------------ | :---------- | +| filters | `filters` | - | +| columns | `columns` | - | +| aiAssistant | `aiAssistant` | - | + +### GridPreferencesPanelApi + +The preferences panel API interface that is available in the grid \[\[apiRef]]. + +```typescript +type GridPreferencesPanelApi = { + /** Displays the preferences panel. The `newValue` argument controls the content of the panel. */ + showPreferences: (newValue: unknown, panelId?: string, labelId?: string) => void; + /** Hides the preferences panel. */ + hidePreferences: () => void; +}; +``` + +### GridPreProcessEditCellProps + +Object passed as parameter in the column \[\[GridColDef]] edit cell props change callback. + +```typescript +type GridPreProcessEditCellProps = { + /** The grid row id. */ + id: GridRowId; + /** The row that is being edited. */ + row: R; + /** The edit cell props. */ + props: GridEditCellProps; + /** Whether the new value is different from the stored value or not. */ + hasChanged?: boolean; + /** + * Object containing the props of the other fields. + * Only available for row editing and when using the new editing API. + */ + otherFieldsProps?: Record>; +}; +``` + +### GridPrintExportApi + +The Print export API interface that is available in the grid \[\[apiRef]]. + +```typescript +type GridPrintExportApi = { + /** Print the grid's data. */ + exportDataAsPrint: (options?: GridPrintExportOptions) => void; +}; +``` + +### GridPrintExportMenuItemProps + +```typescript +type GridPrintExportMenuItemProps = { + hideMenu?: () => void; + options?: { + fileName?: string; + hideToolbar?: boolean; + hideFooter?: boolean; + includeCheckboxes?: boolean; + copyStyles?: boolean; + bodyClassName?: string; + pageStyle?: string | (() => string); + getRowsToExport?: (params: GridPrintGetRowsToExportParams) => GridRowId[]; + fields?: string[]; + allColumns?: boolean; + disableToolbarButton?: boolean; + }; +}; +``` + +### GridPrintExportOptions + +The options to apply on the Print export. + +```typescript +type GridPrintExportOptions = { + /** + * The value to be used as the print window title. + * @default The title of the page. + */ + fileName?: string; + /** + * If `true`, the toolbar is removed for when printing. + * @default false + */ + hideToolbar?: boolean; + /** + * If `true`, the footer is removed for when printing. + * @default false + */ + hideFooter?: boolean; + /** + * If `true`, the selection checkboxes will be included when printing. + * @default false + */ + includeCheckboxes?: boolean; + /** + * If `false`, all