MUI X

https://mui.com/x/
Admin
MUI X is an advanced React component library providing performant, feature-rich components like Data...
Tokens:577,634
Snippets:6,236
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Start the client

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Start the client from the client directory using pnpm run dev.

```bash
cd client
pnpm run dev

```

--------------------------------

### Start the server

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Start the server from the server directory using pnpm run dev.

```bash
cd server
pnpm run dev

```

--------------------------------

### Install @mui/x-date-pickers (Community plan)

Source: https://mui.com/x/migration/migration-pickers-lab

Install the Community plan package for MUI X date pickers.

```bash
npm install @mui/x-date-pickers
```

--------------------------------

### Install @mui/x-scheduler

Source: https://mui.com/x/react-scheduler/quickstart

Install the Community version of the MUI X Scheduler package.

```bash
npm install @mui/x-scheduler
```

--------------------------------

### Install @mui/x-tree-view

Source: https://mui.com/x/react-tree-view/quickstart

Install the MUI X Tree View package. Choose the Community or Pro plan; this command installs the Community version.

```bash
npm install @mui/x-tree-view
```

--------------------------------

### gridPaginationModelSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPaginationModelSelector. Use it to get the pagination model.

```typescript
gridPaginationModelSelector: (apiRef: GridApiRef) => GridPaginationModel
```

```typescript
const paginationModel = gridPaginationModelSelector(apiRef);
```

--------------------------------

### gridPaginationMetaSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPaginationMetaSelector. Use it to get the pagination meta.

```typescript
gridPaginationMetaSelector: (apiRef: GridApiRef) => GridPaginationMeta
```

```typescript
const paginationMeta = gridPaginationMetaSelector(apiRef);
```

--------------------------------

### Install @mui/x-chat

Source: https://mui.com/x/react-chat/quickstart

Installs the Chat package from MUI X. Requires @mui/material and React as peer dependencies.

```bash
npm install @mui/x-chat
```

--------------------------------

### Tree data example with transformation

Source: https://mui.com/x/react-data-grid/tree-data

This example uses a string `path` in each row, and the `getTreeDataPath` function splits the string by '/' to produce the path array. The rendered tree is the same as the previous example.

```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}
/>;

```

--------------------------------

### Install peer dependencies

Source: https://mui.com/x/react-charts/quickstart

Install the peer dependencies required by the Charts packages: @mui/material, @emotion/react, and @emotion/styled.

```bash
npm install @mui/material @emotion/react @emotion/styled
```

--------------------------------

### gridVirtualizationSelector signature and example

Source: https://mui.com/x/react-data-grid/state

Signature and usage example for the gridVirtualizationSelector selector. It returns the columns state.

```typescript
gridVirtualizationSelector: (apiRef: GridApiRef) => GridVirtualizationState
```

```typescript
const virtualization = gridVirtualizationSelector(apiRef);
```

--------------------------------

### gridColumnsStateSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridColumnsStateSelector` to get the columns state.

```javascript
const columnsState = gridColumnsStateSelector(apiRef);
```

--------------------------------

### gridColumnLookupSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridColumnLookupSelector` to get the column lookup.

```javascript
const columnLookup = gridColumnLookupSelector(apiRef);
```

--------------------------------

### Initialize server with pnpm

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Initializes a new Node.js project in the server directory.

```bash
cd server &&
pnpm init
```

--------------------------------

### gridColumnFieldsSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridColumnFieldsSelector` to get the column fields.

```javascript
const columnFields = gridColumnFieldsSelector(apiRef);
```

--------------------------------

### gridColumnDefinitionsSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridColumnDefinitionsSelector` to get the column definitions.

```javascript
const columnDefinitions = gridColumnDefinitionsSelector(apiRef);
```

--------------------------------

### Install @mui/x-date-pickers-pro and @mui/x-license-pro (Pro plan)

Source: https://mui.com/x/migration/migration-pickers-lab

Install the Pro plan packages for MUI X date pickers and the license key checker.

```bash
npm install @mui/x-date-pickers-pro @mui/x-license-pro
```

--------------------------------

### gridFormulaLookupSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridFormulaLookupSelector` to get the formula lookup.

```javascript
const formulaLookup = gridFormulaLookupSelector(apiRef);
```

--------------------------------

### gridAggregationModelSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridAggregationModelSelector` to get the aggregation model.

```javascript
const aggregationModel = gridAggregationModelSelector(apiRef);
```

--------------------------------

### Create project structure

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Creates the project directory structure with client and server folders.

```bash
mkdir server-side-data &&
cd server-side-data &&
mkdir client server
```

--------------------------------

### gridAggregationLookupSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridAggregationLookupSelector` to get the aggregation lookup.

```javascript
const aggregationLookup = gridAggregationLookupSelector(apiRef);
```

--------------------------------

### Initialize client with Vite

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Creates a React app with Vite in TypeScript and installs dependencies.

```bash
cd ../client &&
pnpm create vite@latest . -- --template react-ts &&
pnpm install
```

--------------------------------

### gridCellFormulaResultSelector example

Source: https://mui.com/x/react-data-grid/state

Example usage of `gridCellFormulaResultSelector` to get the formula cell result.

```javascript
const cellFormulaResult = gridCellFormulaResultSelector(apiRef);
```

--------------------------------

### Install @mui/x-data-grid

Source: https://mui.com/x/react-data-grid/quickstart

Install the Community version of the MUI X Data Grid package. Use this command to add the Data Grid to your project.

```bash
npm install @mui/x-data-grid
```

--------------------------------

### AI Assistant minimal setup with Next.js proxy and DataGridPremium

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

Minimal setup for the AI Assistant: a Next.js API route forwards prompts to MUI's backend using the MUI_DATAGRID_API_KEY environment variable, and the Data Grid is configured with the aiAssistant prop, GridAiAssistantPanel slot, and onPrompt handler using unstable_gridDefaultPromptResolver. The proxy endpoint keeps the API key private.

```typescript
// app/api/prompt/route.ts
import { type NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const body = await request.text();
  const response = await fetch('https://backend.mui.com/api/v1/datagrid/prompt', {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'x-api-key': process.env.MUI_DATAGRID_API_KEY!,
    },
    body,
  });
  const data = await response.json();
  return NextResponse.json(data, { status: response.status });
}
```

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

function processPrompt(prompt: string, context: string, conversationId?: string) {
  return promptResolver('/api/prompt', prompt, context, conversationId);
}

// ...
<DataGridPremium
  aiAssistant
  onPrompt={processPrompt}
  slots={{ aiAssistantPanel: GridAiAssistantPanel }}
/>;
```

--------------------------------

### gridRowSelector example

Source: https://mui.com/x/react-data-grid/row-definition

Example usage of the `gridRowSelector` selector to get the row model.

```javascript
const row = gridRowSelector(apiRef);
```

--------------------------------

### gridRowNodeSelector example

Source: https://mui.com/x/react-data-grid/row-definition

Example usage of the `gridRowNodeSelector` selector to get the row node.

```javascript
const rowNode = gridRowNodeSelector(apiRef);
```

--------------------------------

### Upgrade Data Grid from Pro to Premium

Source: https://mui.com/x/introduction/licensing

Install @mui/x-data-grid-premium and replace imports of DataGridPro with DataGridPremium.

```diff
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPremium } from '@mui/x-data-grid-premium';

```

--------------------------------

### gridDataRowIdsSelector example

Source: https://mui.com/x/react-data-grid/row-definition

Example usage of the `gridDataRowIdsSelector` selector to get the row IDs.

```javascript
const dataRowIds = gridDataRowIdsSelector(apiRef);
```

--------------------------------

### Install @mui/x-charts

Source: https://mui.com/x/react-charts/quickstart

Install the MUI X Charts package for Community plan. Use this command to add the charts library to your project.

```bash
npm install @mui/x-charts
```

--------------------------------

### gridPaginationRowCountSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPaginationRowCountSelector. Use it to get the row count.

```typescript
gridPaginationRowCountSelector: (apiRef: GridApiRef) => number
```

```typescript
const paginationRowCount = gridPaginationRowCountSelector(apiRef);
```

--------------------------------

### Install Material UI and Data Grid Premium

Source: https://mui.com/x/react-data-grid/tutorials/aggregation-row-grouping

Installs Material UI, MUI X Data Grid Premium, and supporting packages.

```bash
pnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-data-grid-premium @fontsource/roboto

```

--------------------------------

### gridSortModelSelector signature and example

Source: https://mui.com/x/react-data-grid/sorting

Signature and example of the gridSortModelSelector selector. Get the current sorting model.

```typescript
gridSortModelSelector: (apiRef: GridApiRef) => GridSortModel
```

```typescript
const sortModel = gridSortModelSelector(apiRef);
```

--------------------------------

### Set up server with Express and dummy data

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Sets up an Express server with CORS and JSON middleware, and defines dummy employee data simulating a database.

```typescript
import express from 'express';
import cors from 'cors';

const app = express();
const PORT = 3001;

// Middleware
app.use(cors());
app.use(express.json());

// Dummy data - simulating a database
const dummyData = [
  {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com',
    role: 'Developer',
    department: 'Engineering',
    salary: 75000,
    startDate: '2023-01-15',
  },
  {
    id: 2,
    name: 'Jane Smith',
    email: 'jane@example.com',
    role: 'Designer',
    department: 'Design',
    salary: 65000,
    startDate: '2023-02-20',
  },
  {
    id: 3,
    name: 'Bob Johnson',
    email: 'bob@example.com',
    role: 'Manager',
    department: 'Product',
    salary: 85000,
    startDate: '2022-11-10',
  },
  {
    id: 4,
    name: 'Alice Brown',
    email: 'alice@example.com',
    role: 'Developer',
    department: 'Engineering',
    salary: 80000,
    startDate: '2023-03-05',
  },
  {
    id: 5,
    name: 'Charlie Wilson',
    email: 'charlie@example.com',
    role: 'Analyst',
    department: 'Data',
    salary: 70000,
    startDate: '2023-04-12',
  },
  {
    id: 6,
    name: 'Diana Davis',
    email: 'diana@example.com',
    role: 'Designer',
    department: 'Design',
    salary: 68000,
    startDate: '2023-01-30',
  },
  {
    id: 7,
    name: 'Eve Miller',
    email: 'eve@example.com',
    role: 'Developer',
    department: 'Engineering',
    salary: 82000,
    startDate: '2022-12-18',
  },
  {
    id: 8,
    name: 'Frank Garcia',
    email: 'frank@example.com',
    role: 'Manager',
    department: 'Sales',
    salary: 90000,
    startDate: '2022-09-25',
  },
  {
    id: 9,
    name: 'Grace Lee',
    email: 'grace@example.com',
    role: 'Analyst',
    department: 'Data',
    salary: 72000,
    startDate: '2023-05-08',
  },
  {
    id: 10,
    name: 'Henry Taylor',
    email: 'henry@example.com',
    role: 'Developer',
    department: 'Engineering',
    salary: 78000,
    startDate: '2023-06-14',
  },
  {
    id: 11,
    name: 'Ivy Chen',
    email: 'ivy@example.com',
    role: 'Developer',
    department: 'Engineering',
    salary: 76000,
    startDate: '2023-07-22',
  },
  {
    id: 12,
    name: 'Jack Anderson',
    email: 'jack@example.com',
    role: 'Designer',
    department: 'Design',
    salary: 67000,
    startDate: '2023-08-15',
  },
  {
    id: 13,
    name: 'Kate Martinez',
    email: 'kate@example.com',
    role: 'Manager',
    department: 'Marketing',
    salary: 88000,
    startDate: '2023-09-03',
  },
  {
    id: 14,
    name: 'Liam Thompson',
    email: 'liam@example.com',
    role: 'Analyst',
    department: 'Data',
    salary: 71000,
  },
];
```

--------------------------------

### Install Material UI and MUI X dependencies

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Installs Material UI, Emotion, icons, the Data Grid, and Roboto font.

```bash
pnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-data-grid @fontsource/roboto
```

--------------------------------

### gridSortedRowIdsSelector signature and example

Source: https://mui.com/x/react-data-grid/sorting

Signature and example of the gridSortedRowIdsSelector selector. Get the id of the rows after the sorting process.

```typescript
gridSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
```

```typescript
const sortedRowIds = gridSortedRowIdsSelector(apiRef);
```

--------------------------------

### Render the opening button at the start of the input

Source: https://mui.com/x/react-date-pickers/custom-opening-button

Use the `openPickerButtonPosition` on the `field` slot to position the opening button at the start or the end of the input. The example sets it to 'start'.

```jsx
<DatePicker
  slotProps={{
    field: { openPickerButtonPosition: 'start' },
  }}
/>  
```

--------------------------------

### Run the app

Source: https://mui.com/x/react-data-grid/tutorials/aggregation-row-grouping

Runs the development server. The app runs on http://localhost:5173.

```bash
pnpm dev

```

--------------------------------

### Install @mui/x-date-pickers and dayjs

Source: https://mui.com/x/react-date-pickers/quickstart

Install the Community version of the Date and Time Pickers package and the Day.js date library. The commands are shown for the npm package manager with the Community plan and Day.js date library selected.

```bash
npm install @mui/x-date-pickers

npm install dayjs

```

--------------------------------

### gridPageSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPageSelector. Use it to get the index of the page to render if pagination is enabled.

```typescript
gridPageSelector: (apiRef: GridApiRef) => number
```

```typescript
const page = gridPageSelector(apiRef);
```

--------------------------------

### Set license key with dummy component and render in layout

Source: https://mui.com/x/introduction/licensing

Recommended approach for Next.js App Router: create a dummy client component MuiXLicense.tsx that sets the license key, then render <MuiXLicense> in the root layout. The component returns null and must be rendered in the layout to activate the license.

```tsx
'use client';
import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');

export default function MuiXLicense() {
  return null;
}

```

```tsx
import MuiXLicense from '@/components/MuiXLicense';

export default function RootLayout(props: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {props.children}
        <MuiXLicense />
      </body>
    </html>
  );
}

```

--------------------------------

### gridSortedRowEntriesSelector signature and example

Source: https://mui.com/x/react-data-grid/sorting

Signature and example of the gridSortedRowEntriesSelector selector. Get the id and the model of the rows after the sorting process.

```typescript
gridSortedRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
```

```typescript
const sortedRowEntries = gridSortedRowEntriesSelector(apiRef);
```

--------------------------------

### gridPaginatedVisibleSortedGridRowIdsSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPaginatedVisibleSortedGridRowIdsSelector. Use it to get the id of each row to include in the current page if pagination is enabled.

```typescript
gridPaginatedVisibleSortedGridRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
```

```typescript
const paginatedVisibleSortedGridRowIds = gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
```

--------------------------------

### Import DataGridPro

Source: https://mui.com/x/api/data-grid/data-grid-pro

Shows the three ways to import DataGridPro from the @mui/x-data-grid-pro and @mui/x-data-grid-premium packages. The first two are equivalent, and the third is for the premium package.

```javascript
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';
```

--------------------------------

### gridPageCountSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPageCountSelector. Use it to get the amount of pages needed to display all the rows if pagination is enabled.

```typescript
gridPageCountSelector: (apiRef: GridApiRef) => number
```

```typescript
const pageCount = gridPageCountSelector(apiRef);
```

--------------------------------

### Composition example using ChartsDataProvider, ChartSurface, BarPlot, and ChartsXAxis

Source: https://mui.com/x/react-charts

Shows how to compose a chart from individual building blocks. The example uses ChartsDataProvider as the root, with a custom legend, a chart surface, a bar plot, and an X axis. This demonstrates the composition feature of MUI X Charts.

```jsx
<ChartsDataProvider>
  <CustomLegend />
  <ChartSurface>
    <BarPlot />
    <ChartsXAxis />
  </ChartSurface>
</ChartsDataProvider>
```

--------------------------------

### gridPaginatedVisibleSortedGridRowEntriesSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPaginatedVisibleSortedGridRowEntriesSelector. Use it to get the id and model of each row to include in the current page if pagination is enabled.

```typescript
gridPaginatedVisibleSortedGridRowEntriesSelector: (apiRef: GridApiRef) => GridRowEntry<GridValidRowModel>[]
```

```typescript
const paginatedVisibleSortedGridRowEntries = gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef);
```

--------------------------------

### ThemeProvider and sx prop example

Source: https://mui.com/x/react-chat/customization/overview

Example of the top two customization layers: ThemeProvider for global theming and the sx prop for one-off styles on a ChatBox. This covers most apps' needs.

```jsx
<ThemeProvider theme={myTheme}>
  <ChatBox adapter={adapter} sx={{ height: 600 }} />
</ThemeProvider>
```

--------------------------------

### Install MUI X license key with setLicenseKey()

Source: https://mui.com/x/introduction/licensing

Import LicenseInfo from @mui/x-license and call setLicenseKey() with your license key. This must be done once in the browser before React renders the first component. The key removes watermarks and console warnings.

```javascript
import { LicenseInfo } from '@mui/x-license';

LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY');
```

--------------------------------

### gridPageSizeSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPageSizeSelector. Use it to get the maximum amount of rows to display on a single page if pagination is enabled.

```typescript
gridPageSizeSelector: (apiRef: GridApiRef) => number
```

```typescript
const pageSize = gridPageSizeSelector(apiRef);
```

--------------------------------

### gridPaginationRowRangeSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridPaginationRowRangeSelector. Use it to get the index of the first and last row to include in the current page if pagination is enabled.

```typescript
gridPaginationRowRangeSelector: (apiRef: GridApiRef) => { firstRowIndex: number; lastRowIndex: number } | null
```

```typescript
const paginationRowRange = gridPaginationRowRangeSelector(apiRef);
```

--------------------------------

### Install server dependencies

Source: https://mui.com/x/react-data-grid/tutorials/server-side-data

Installs Express and CORS for the server, plus TypeScript and related types as dev dependencies.

```bash
pnpm install express cors &&
pnpm install --save-dev typescript @types/express @types/node tsx
```

--------------------------------

### gridVisibleRowsSelector signature and example

Source: https://mui.com/x/react-data-grid/pagination

Signature and example for the gridVisibleRowsSelector. Use it to get the rows, range, and rowIndex lookup map after filtering and sorting. Does not contain collapsed children.

```typescript
gridVisibleRowsSelector: (apiRef: GridApiRef) => { rows: GridRowEntry<GridValidRowModel>[]; range: { firstRowIndex: number; lastRowIndex: number } | null; rowIdToIndexMap: Map<GridRowId, number> }
```

```typescript
const visibleRows = gridVisibleRowsSelector(apiRef);
```

--------------------------------

### Import DataGrid

Source: https://mui.com/x/api/data-grid/data-grid

Shows how to import the DataGrid component from various package entry points.

```APIDOC
## Import DataGrid

### Description
Import the DataGrid component from the MUI X packages.

### Import
```js
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';
```

### Notes
Learn about the difference by reading the guide on minimizing bundle size.
```
Tokens:
Raw