Material React Table

https://www.material-react-table.com/
Admin
Material React Table is a fully-featured Material UI data grid/table component library for React...
Tokens:213,893
Snippets:1,243
Trust Score:8.6
Update:1 week ago
Show doc for...
Tokens:
Raw
### React Query setup in App.tsx

Source: https://www.material-react-table.com/docs/examples/editing-crud-inline-table

Sets up React Query with a QueryClient and QueryClientProvider. Includes lazy loading of React Query Devtools production build and wraps the Example component. This is the root App component for the example.

```typescript
//react query setup in App.tsx
const ReactQueryDevtoolsProduction = lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
);

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      <Suspense fallback={null}>
        <ReactQueryDevtoolsProduction />
      </Suspense>
    </QueryClientProvider>
  );
}
```

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

### Full TypeScript Example with useMaterialReactTable and Column Virtualization

Source: https://www.material-react-table.com/docs/guides/row-virtualization

Complete example using `useMaterialReactTable` with column virtualization enabled, including optional virtualizer instance ref and options. It also enables column pinning, resizing, and row numbers. The example uses 500 columns and fake data.

```typescript
import { useRef } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnVirtualizer,
} from 'material-react-table';
import { fakeColumns, fakeData } from './makeData';

const Example = () => {
  //optionally access the underlying virtualizer instance
  const columnVirtualizerInstanceRef = useRef<MRT_ColumnVirtualizer>(null);

  const table = useMaterialReactTable({
    columnVirtualizerInstanceRef, //optional
    columnVirtualizerOptions: { overscan: 4 }, //optionally customize the virtualizer
    columns: fakeColumns, //500 columns
    data: fakeData,
    enableColumnPinning: true,
    enableColumnResizing: true,
    enableColumnVirtualization: true,
    enableRowNumbers: true,
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Click to Copy Example Source Code

Source: https://www.material-react-table.com/docs/guides/click-to-copy

Complete TypeScript example demonstrating click-to-copy with per-column enablement and custom copy button props.

```typescript
import { useMemo } from 'react';
import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
import { ContentCopy } from '@mui/icons-material';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
        enableClickToCopy: true,
        muiCopyButtonProps: {
          fullWidth: true,
          startIcon: <ContentCopy />,
          sx: { justifyContent: 'flex-start' },
        },
      },
      {
        accessorKey: 'city',
        header: 'City',
        enableClickToCopy: true,
      },
    ],
    [],
  );

  return <MaterialReactTable columns={columns} data={data} />;
};

export default Example;
```

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

### Install Material React Table with npm

Source: https://www.material-react-table.com/docs/getting-started/install

Quick install command for Material React Table using npm. Use this if you already have the required peer dependencies installed.

```bash
$ npm i material-react-table
```

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

### Wrap Example with LocalizationProvider using AdapterDayjs

Source: https://www.material-react-table.com/docs/examples/advanced

Wraps the Example component with LocalizationProvider using AdapterDayjs to enable date localization. Place this in App.tsx or AppProviders file. The component is exported as default.

```tsx
const ExampleWithLocalizationProvider = () => (
  //App.tsx or AppProviders file
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <Example />
  </LocalizationProvider>
);

export default ExampleWithLocalizationProvider;
```

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

### Install Material React Table with required peer dependencies using npm

Source: https://www.material-react-table.com/docs/getting-started/install

Recommended install command that includes all required peer dependencies: @mui/material, @mui/x-date-pickers, @mui/icons-material, @emotion/react, and @emotion/styled.

```bash
$ npm i material-react-table @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled
```

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

### Full TypeScript Example for Cell Actions

Source: https://www.material-react-table.com/docs/guides/cell-actions

Complete TypeScript example for the cell actions guide. It defines columns, enables automatic cell actions, and renders custom actions alongside the built-in ones using renderCellActionMenuItems. The example imports necessary icons and components from MUI and material-react-table.

```typescript
1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  MRT_ActionMenuItem,
5  useMaterialReactTable,
6  type MRT_ColumnDef,
7} from 'material-react-table';
8import { data, type Person } from './makeData';
9import { Divider } from '@mui/material';
10import EmailIcon from '@mui/icons-material/Email';
11import PersonOffOutlinedIcon from '@mui/icons-material/PersonOffOutlined';
12
13export const Example = () => {
14  const columns = useMemo<MRT_ColumnDef<Person>[]>(
15    //column definitions...
16    () => [
17      {
18        accessorKey: 'firstName',
19        header: 'First Name',
20      },
21      {
22        accessorKey: 'lastName',
23        header: 'Last Name',
24      },
25      {
26        accessorKey: 'address',
27        header: 'Address',
28      },
29      {
30        accessorKey: 'city',
31        header: 'City',
32      },
33      {
34        accessorKey: 'state',
35        header: 'State',
36      },
37    ],
38    [],
39    
40  );
41
42  const table = useMaterialReactTable({
43    columns,
44    data,
45    enableCellActions: true,
46    enableClickToCopy: 'context-menu',
47    enableEditing: true,
48    editDisplayMode: 'cell',
49    renderCellActionMenuItems: ({ closeMenu, table, internalMenuItems }) => [
50      ...internalMenuItems,
51      <Divider key="divider" />,
52      <MRT_ActionMenuItem
53        icon={<EmailIcon />}
54        key={1}
55        label="Item 1"
56        onClick={() => {
57          closeMenu();
58        }}
59        table={table}
60      />,
61      <MRT_ActionMenuItem
62        icon={<PersonOffOutlinedIcon />}
63        key={2}
64        label="Item 2"
65        onClick={() => {
66          closeMenu();
67        }}
68        table={table}
69      />,
70    ],
71  });
72
73  return <MaterialReactTable table={table} />;
74};
75
76export default Example;
77
```

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

### Headless Virtualization with useMRT_ColumnVirtualizer and useMRT_RowVirtualizer hooks

Source: https://www.material-react-table.com/docs/guides/row-virtualization

Use the MRT virtualization hooks in headless mode to get virtual rows. The example shows how to set up the table, get the virtualizer instances, and map virtual rows to render components.

```tsx
import {
  useMaterialReactTable,
  useMRT_Rows,
  useMRT_RowVirtualizer,
  useMRT_ColumnVirtualizer,
} from 'material-react-table';


const table = useMaterialReactTable({
  columns,
  data,
  enableColumnVirtualization: true,
  enableRowVirtualization: true,
  columnVirtualizerOptions: {
    //...virtualizer options
  },
  rowVirtualizerOptions: {
    //...virtualizer options
  },
});


const rows = useMRT_Rows(table); //alternative to table.getRowModel()


const columnVirtualizer = useMRT_ColumnVirtualizer(table);
const rowVirtualizer = useMRT_RowVirtualizer(table);


//down in your row render
const virtualRows = rowVirtualizer.getVirtualItems();


virtualRows.map((virtualRow) => {
  const row = rows[virtualRow.index];
  return <Row key={row.id} />;
});
```

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

### Full Example with Sub Rows and Expand All Disabled

Source: https://www.material-react-table.com/docs/guides/expanding-sub-rows

Complete TypeScript example showing a table with nested sub rows and the expand all button hidden. Includes data definition, column definitions, and table setup.

```typescript
import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

export type Person = {
  firstName: string;
  lastName: string;
  address: string;
  city: string;
  state: string;
  subRows?: Person[]; //Each person can have sub rows of more people
};

export const data = [
  {
    firstName: 'Dylan',
    lastName: 'Murray',
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
    subRows: [
      {
        firstName: 'Ervin',
        lastName: 'Reinger',
        address: '566 Brakus Inlet',
        city: 'South Linda',
        state: 'West Virginia',
        subRows: [
          {
            firstName: 'Jordane',
            lastName: 'Homenick',
            address: '1234 Brakus Inlet',
            city: 'South Linda',
            state: 'West Virginia',
          },
        ],
      },
      {
        firstName: 'Brittany',
        lastName: 'McCullough',
        address: '722 Emie Stream',
        city: 'Lincoln',
        state: 'Nebraska',
      },
    ],
  },
  {
    firstName: 'Raquel',
    lastName: 'Kohler',
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
    subRows: [
      {
        firstName: 'Branson',
        lastName: 'Frami',
        address: '32188 Larkin Turnpike',
        city: 'Charleston',
        state: 'South Carolina',
      },
    ],
  },
];

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },

      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },

      {
        accessorKey: 'state',
        enableColumnOrdering: false,
        header: 'State',
      },
    ],
    [],
    
  );

  const table = useMaterialReactTable({
    columns,
    data,
    enableExpandAll: false, //hide expand all double arrow in column header
    enableExpanding: true,
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Full Example: Custom Toolbar Actions with TypeScript

Source: https://www.material-react-table.com/docs/guides/customize-toolbars

Complete example demonstrating custom actions in the top toolbar (Create Account, Delete Selected Accounts) and custom internal actions (print, toggle dense padding, toggle full screen). Uses useMaterialReactTable and MRT components.

```tsx
1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  type MRT_ColumnDef,
5  MRT_ToggleDensePaddingButton,
6  MRT_ToggleFullScreenButton,
7  useMaterialReactTable,
8} from 'material-react-table';
9import { Box, Button, IconButton } from '@mui/material';
10import PrintIcon from '@mui/icons-material/Print';
11import { data, type Person } from './makeData';
12
13const Example = () => {
14  const columns = useMemo<MRT_ColumnDef<Person>[]>(
15    //column definitions...
16    () => [
17      {
18        accessorKey: 'firstName',
19        header: 'First Name',
20      },
21      {
22        accessorKey: 'lastName',
23        header: 'Last Name',
24      },
25      {
26        accessorKey: 'age',
27        header: 'Age',
28      },
29      {
30        accessorKey: 'salary',
31        header: 'Salary',
32      },
33    ],
34    [],
35    
36  );
37
38  const table = useMaterialReactTable({
39    columns,
    data,
    enableRowSelection: true,
    positionToolbarAlertBanner: 'bottom', //show selected rows count on bottom toolbar
    //add custom action buttons to top-left of top toolbar
    renderTopToolbarCustomActions: ({ table }) => (
      <Box sx={{ display: 'flex', gap: '1rem', p: '4px' }}>
        <Button
          color="secondary"
          onClick={() => {
            alert('Create New Account');
          }}
          variant="contained"
        >
          Create Account
        </Button>
        <Button
          color="error"
          disabled={!table.getIsSomeRowsSelected()}
          onClick={() => {
            alert('Delete Selected Accounts');
          }}
          variant="contained"
        >
          Delete Selected Accounts
        </Button>
      </Box>
    ),
    //customize built-in buttons in the top-right of top toolbar
    renderToolbarInternalActions: ({ table }) => (
      <Box>
        {/* add custom button to print table  */}
        <IconButton
          onClick={() => {
            window.print();
          }}
        >
          <PrintIcon />
        </IconButton>
        {/* along-side built-in buttons in whatever order you want them */}
        <MRT_ToggleDensePaddingButton table={table} />
        <MRT_ToggleFullScreenButton table={table} />
      </Box>
    ),
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Full example with custom detail panel styling and expand behavior

Source: https://www.material-react-table.com/docs/guides/detail-panel

Complete example showing how to style the detail panel with a background color, customize expand button rotation, and conditionally render the detail panel based on row data. Includes column definitions and uses useMaterialReactTable.

```typescript
import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';
import { Box, Typography } from '@mui/material';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
        size: 50,
      },
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'middleName',
        header: 'Middle Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
    ],
    [],
    
  );

  const table = useMaterialReactTable({
    columns,
    data,
    enableExpandAll: false, //disable expand all button
    muiDetailPanelProps: () => ({
      sx: (theme) => ({
        backgroundColor:
          theme.palette.mode === 'dark'
            ? 'rgba(255,210,244,0.1)'
            : 'rgba(0,0,0,0.1)',
      }),
    }),
    //custom expand button rotation
    muiExpandButtonProps: ({ row, table }) => ({
      onClick: () => table.setExpanded({ [row.id]: !row.getIsExpanded() }), //only 1 detail panel open at a time
      sx: {
        transform: row.getIsExpanded() ? 'rotate(180deg)' : 'rotate(-90deg)',
        transition: 'transform 0.2s',
      },
    }),
    //conditionally render detail panel
    renderDetailPanel: ({ row }) =>
      row.original.address ? (
        <Box
          sx={{
            display: 'grid',
            margin: 'auto',
            gridTemplateColumns: '1fr 1fr',
            width: '100%',
          }}
        >
          <Typography>Address: {row.original.address}</Typography>
          <Typography>City: {row.original.city}</Typography>
          <Typography>State: {row.original.state}</Typography>
          <Typography>Country: {row.original.country}</Typography>
        </Box>
      ) : null,
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Full Example with Row Action Menu Items

Source: https://www.material-react-table.com/docs/guides/row-actions

Complete example component using `useMaterialReactTable` with `enableRowActions` and `renderRowActionMenuItems`. Uses `MRT_ActionMenuItem` components with icons for Edit and Delete actions.

```tsx
import { useMemo } from 'react';
import {
  MaterialReactTable,
  MRT_ActionMenuItem,
  type MRT_ColumnDef,
} from 'material-react-table';
import { data, type Person } from './makeData';
import { Edit, Delete } from '@mui/icons-material';

export const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
      {
        accessorKey: 'state',
        header: 'State',
      },
    ],
    [],
    
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableRowActions
      renderRowActionMenuItems={({ row, table }) => [
        <MRT_ActionMenuItem //or just use a normal MUI MenuItem component
          icon={<Edit />}
          key="edit"
          label="Edit"
          onClick={() => console.info('Edit')}
          table={table}
        />,
        <MRT_ActionMenuItem
          icon={<Delete />}
          key="delete"
          label="Delete"
          onClick={() => console.info('Delete')}
          table={table}
        />,
      ]}
    />
  );
};

export default Example;
```

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

### Full Example with Column Alignment (TypeScript)

Source: https://www.material-react-table.com/docs/guides/data-columns

Complete example using useMaterialReactTable with columns that have center and right alignment for header and body cells. Includes a custom Cell renderer for salary formatting as currency.

```typescript
import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
        size: 100,
        muiTableHeadCellProps: {
          align: 'center',
        },
        muiTableBodyCellProps: {
          align: 'center',
        },
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
        size: 100,
        muiTableHeadCellProps: {
          align: 'center',
        },
        muiTableBodyCellProps: {
          align: 'center',
        },
      },
      {
        accessorKey: 'age',
        header: 'Age',
        muiTableHeadCellProps: {
          align: 'right',
        },
        muiTableBodyCellProps: {
          align: 'right',
        },
      },
      {
        accessorKey: 'salary',
        header: 'Salary',
        muiTableHeadCellProps: {
          align: 'right',
        },
        muiTableBodyCellProps: {
          align: 'right',
        },
        Cell: ({ cell }) =>
          cell
            .getValue<number>()
            .toLocaleString('en-US', { style: 'currency', currency: 'USD' }),
      },
    ],
    [],
  );

  const table = useMaterialReactTable({
    columns,
    data,
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Full Example with Loading State and Custom Props

Source: https://www.material-react-table.com/docs/guides/async-loading

A complete example showing a table with isLoading state and custom loading props: circular progress with secondary color, thickness 5, size 55, and skeleton with pulse animation and height 28.

```tsx
import { useMemo } from 'react';
import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
import { type Person } from './makeData';

const data: Array<Person> = [];

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
    ],
    [],
    
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      state={{ isLoading: true }}
      muiCircularProgressProps={{
        color: 'secondary',
        thickness: 5,
        size: 55,
      }}
      muiSkeletonProps={{
        animation: 'pulse',
        height: 28,
      }}
    />
  );
};

export default Example;
```

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

### Full example with sub-rows and expand options

Source: https://www.material-react-table.com/docs/guides/expanding-sub-rows

Complete TypeScript example demonstrating expand-all-by-default with nested sub-rows. Includes column definitions, `getSubRows`, `enableExpandAll: false`, `filterFromLeafRows`, and `paginateExpandedRows` to control expansion behavior.

```typescript
import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

export type Person = {
  firstName: string;
  lastName: string;
  address: string;
  city: string;
  state: string;
  subRows?: Person[]; //Each person can have sub rows of more people
};

export const data: Person[] = [
  {
    firstName: 'Dylan',
    lastName: 'Murray',
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
    subRows: [
      {
        firstName: 'Ervin',
        lastName: 'Reinger',
        address: '566 Brakus Inlet',
        city: 'South Linda',
        state: 'West Virginia',
        subRows: [
          {
            firstName: 'Jordane',
            lastName: 'Homenick',
            address: '1234 Brakus Inlet',
            city: 'South Linda',
            state: 'West Virginia',
          },
          {
            firstName: 'Jordan',
            lastName: 'Clarkson',
            address: '4882 Palm Rd',
            city: 'San Francisco',
            state: 'California',
          },
        ],
      },
      {
        firstName: 'Brittany',
        lastName: 'McCullough',
        address: '722 Emie Stream',
        city: 'Lincoln',
        state: 'Nebraska',
      },
    ],
  },
  {
    firstName: 'Raquel',
    lastName: 'Kohler',
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
    subRows: [
      {
        firstName: 'Branson',
        lastName: 'Frami',
        address: '32188 Larkin Turnpike',
        city: 'Charleston',
        state: 'South Carolina',
      },
    ],
  },
];

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },

      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },

      {
        accessorKey: 'state',
        enableColumnOrdering: false,
        header: 'State',
      },
    ],
    [],
    
  );

  const table = useMaterialReactTable({
    columns,
    data,
    enableExpandAll: false, //hide expand all double arrow in column header
    enableExpanding: true,
    filterFromLeafRows: true, //apply filtering to all rows instead of just parent rows
    getSubRows: (row) => row.subRows, //default
    initialState: { expanded: true }, //expand all rows by default
    paginateExpandedRows: false, //When rows are expanded, do not count sub-rows as number of rows on the page towards pagination
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Detail Panel Virtualization Example Source Code

Source: https://www.material-react-table.com/docs/guides/detail-panel

Full source code for the virtualization detail panel example. It sets up a MaterialReactTable with row virtualization, disables toolbar and pagination, restricts container height, renders a detail panel with address data, and customizes row height estimation based on density and expansion.

```typescript
import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';
import { Box, Typography } from '@mui/material';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
    ],
    [],
    
  );

  const table = useMaterialReactTable({
    columns,
    data,
    enableBottomToolbar: false,
    enablePagination: false,
    enableRowVirtualization: true,
    muiTableContainerProps: {
      sx: {
        maxHeight: '500px',
      },
    },
    renderDetailPanel: ({ row }) => (
      <Box
        sx={{
          display: 'grid',
          margin: 'auto',
          gridTemplateColumns: '1fr 1fr',
          width: '100%',
        }}
      >
        <Typography>Address: {row.original.address}</Typography>
        <Typography>City: {row.original.city}</Typography>
        <Typography>State: {row.original.state}</Typography>
        <Typography>Country: {row.original.country}</Typography>
      </Box>
    ),
    rowVirtualizerOptions: ({ table }) => {
      const { density, expanded } = table.getState();
      return {
        //adjust to your needs
        estimateSize: (index) =>
          index % 2 === 1 //even rows are normal rows, odd rows are detail panels
            ? //Estimate open detail panels as 80px tall, closed detail panels as 0px tall
              expanded === true
              ? 80
              : 0
            : //estimate normal row heights
              density === 'compact'
              ? 37
              : density === 'comfortable'
                ? 58
                : 73,
      };
    },
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Full column pinning example with initial state

Source: https://www.material-react-table.com/docs/guides/column-pinning

Complete TypeScript example showing how to enable column pinning, disable it for a specific column, and set initial pinned columns via `initialState.columnPinning`. Includes row actions and `layoutMode: 'grid-no-grow'` for constant column widths.

```tsx
import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';
import { data, type Person } from './makeData';
import { MenuItem } from '@mui/material';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'id',
        enableColumnPinning: false, //disable column pinning for this column
        header: 'ID',
        size: 50,
      },
      //column definitions...
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'middleName',
        header: 'Middle Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'address',
        header: 'Address',
        size: 300,
      },
      
      {
        accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
        header: 'City',
      },
      {
        accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
        header: 'State',
      },
      {
        accessorKey: 'country',
        header: 'Country',
      },
    ],
    [],
  );

  const table = useMaterialReactTable({
    columns,
    data,
    enableColumnPinning: true,
    enableRowActions: true,
    layoutMode: 'grid-no-grow', //constant column widths
    renderRowActionMenuItems: () => [<MenuItem key="action">Action</MenuItem>],
    initialState: {
      columnPinning: { left: ['mrt-row-actions', 'state'], right: ['city'] },
    },
  });

  return <MaterialReactTable table={table} />;
};

export default Example;

```

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

### Full Example with Grouping and Custom Expand Column

Source: https://www.material-react-table.com/docs/guides/aggregation-and-grouping

A complete example showing a Material React Table with grouping enabled, custom expand column with resizing, custom header and grouped cell rendering, and initial state with grouping by state and gender.

```typescript
import { useMemo, useState } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
  type MRT_Row,
  MRT_ExpandAllButton,
} from 'material-react-table';
import { data, type Person } from './makeData';
import { Box, Stack } from '@mui/material';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        header: 'First Name',
        accessorKey: 'firstName',
      },
      {
        header: 'Last Name',
        accessorKey: 'lastName',
      },
      {
        header: 'Age',
        accessorKey: 'age',
      },
      {
        header: 'Gender',
        accessorKey: 'gender',
      },
      {
        header: 'State',
        accessorKey: 'state',
      },
      {
        header: 'Salary',
        accessorKey: 'salary',
      },
    ],
    [],
    
  );

  const table = useMaterialReactTable({
    columns,
    data,
    displayColumnDefOptions: {
      'mrt-row-expand': {
        Header: () => (
          <Stack direction="row" alignItems="center">
            <MRT_ExpandAllButton table={table} />
            <Box>Groups</Box>
          </Stack>
        ),
        GroupedCell: ({ row, table }) => {
          const { grouping } = table.getState();
          return row.getValue(grouping[grouping.length - 1]);
        },
        enableResizing: true,
        muiTableBodyCellProps: ({ row }) => ({
          sx: (theme) => ({
            color:
              row.depth === 0
                ? theme.palette.primary.main
                : row.depth === 1
                  ? theme.palette.secondary.main
                  : undefined,
          }),
        }),
        size: 200,
      },
    },
    enableGrouping: true,
    enableColumnResizing: true,
    groupedColumnMode: 'remove',
    initialState: {
      density: 'compact',
      expanded: true, //expand all groups by default
      grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
      pagination: { pageIndex: 0, pageSize: 20 },
      sorting: [{ id: 'state', desc: false }],
    },
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### TypeScript: Full CRUD Tree Example with MRT and TanStack Query

Source: https://www.material-react-table.com/docs/examples/editing-crud-tree

This is the complete source code for the editing CRUD tree example. It defines the `Example` component that uses `useMaterialReactTable` with columns for user data, supports editing and creating rows at any level, and performs optimistic updates using TanStack Query mutations. The code includes validation logic and uses `createRow` for new row creation.

```TypeScript
import { lazy, Suspense, useMemo, useState } from 'react';
import {
  MaterialReactTable,
  createRow,
  type MRT_ColumnDef,
  type MRT_Row,
  type MRT_TableOptions,
  useMaterialReactTable,
} from 'material-react-table';
import {
  Box,
  Button,
  IconButton,
  Tooltip,
  darken,
  lighten,
} from '@mui/material';
import {
  QueryClient,
  QueryClientProvider,
  useMutation,
  useQuery,
  useQueryClient,
} from '@tanstack/react-query';
import { type User, fakeData, usStates } from './makeData';
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

const Example = () => {
  const [creatingRowIndex, setCreatingRowIndex] = useState<
    number | undefined
  >();
  const [validationErrors, setValidationErrors] = useState<
    Record<string, string | undefined>
  >({});

  const columns = useMemo<MRT_ColumnDef<User>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'Id',
        enableEditing: false,
        size: 80,
      },
      {
        accessorKey: 'firstName',
        header: 'First Name',
        muiEditTextFieldProps: {
          required: true,
          error: !!validationErrors?.firstName,
          helperText: validationErrors?.firstName,
          //remove any previous validation errors when user focuses on the input
          onFocus: () =>
            setValidationErrors({
              ...validationErrors,
              firstName: undefined,
            }),
          //optionally add validation checking for onBlur or onChange
        },
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
        muiEditTextFieldProps: {
          required: true,
          error: !!validationErrors?.lastName,
          helperText: validationErrors?.lastName,
          //remove any previous validation errors when user focuses on the input
          onFocus: () =>
            setValidationErrors({
              ...validationErrors,
              lastName: undefined,
            }),
        },
      },
      {
        accessorKey: 'city',
        header: 'City',
        muiEditTextFieldProps: {
          required: true,
          error: !!validationErrors?.city,
          helperText: validationErrors?.city,
          //remove any previous validation errors when user focuses on the input
          onFocus: () =>
            setValidationErrors({
              ...validationErrors,
              city: undefined,
            }),
        },
      },
      {
        accessorKey: 'state',
        header: 'State',
        editVariant: 'select',
        editSelectOptions: usStates,
        muiEditTextFieldProps: {
          select: true,
          error: !!validationErrors?.state,
          helperText: validationErrors?.state,
        },
      },
    ],
    [validationErrors],
  );

```

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

### TypeScript example for positioning expand column last

Source: https://www.material-react-table.com/docs/guides/detail-panel

This example sets `positionExpandColumn` to 'last' and includes a detail panel. It also shows an alternative using column pinning on mobile, with commented-out code for aligning the expand column. The table is initialized with expanded rows.

```TypeScript
1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { Box, Typography, useMediaQuery } from '@mui/material';
8import { data, type Person } from './makeData';
9
10const Example = () => {
11  const isMobile = useMediaQuery('(max-width: 720px)');
12
13  const columns = useMemo<MRT_ColumnDef<Person>[]>(
14    //column definitions...
15    () => [
16      {
17        accessorKey: 'id',
18        header: 'ID',
19        size: 50,
20      },
21      {
22        accessorKey: 'firstName',
23        header: 'First Name',
24      },
25      {
26        accessorKey: 'middleName',
27        header: 'Middle Name',
28      },
29      {
30        accessorKey: 'lastName',
31        header: 'Last Name',
32      },
33    ],
34    [],
35    
36  );
37
38  const table = useMaterialReactTable({
39    columns,
40    data,
41    // displayColumnDefOptions: { //built-in now in v2.6.0 when positionExpandColumn is 'last'
42    //   'mrt-row-expand': {
43    //     muiTableHeadCellProps: {
    //       align: 'right',
    //     },
    //     muiTableBodyCellProps: {
    //       align: 'right',
    //     },
    //   },
    // },
42    enableColumnPinning: isMobile, //alternative
43    initialState: {
44      expanded: true,
45    },
46    state: {
47      columnPinning: isMobile ? { right: ['mrt-row-expand'] } : {}, //alternative
48    },
49    renderDetailPanel: ({ row }) => (
50      <Box
51        sx={{
52          display: 'grid',
53          margin: 'auto',
54          gridTemplateColumns: '1fr 1fr',
55          width: '100%',
56        }}
57      >
58        <Typography>Address: {row.original.address}</Typography>
59        <Typography>City: {row.original.city}</Typography>
60        <Typography>State: {row.original.state}</Typography>
61        <Typography>Country: {row.original.country}</Typography>
62      </Box>
63    ),
64    positionExpandColumn: 'last',
65  });
66
67  return <MaterialReactTable table={table} />;
68};
69
70export default Example;
71

```

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

### Full Example: Disable Hiding on Specific Columns and Hide Column by Default

Source: https://www.material-react-table.com/docs/guides/column-hiding

Complete example showing column definitions with `enableHiding: false` on some columns, data definitions, and a table with `initialState.columnVisibility` to hide the 'address' column by default.

```typescript
import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

const Example = () => {
  const columns = useMemo(
    () =>
      [
        {
          accessorKey: 'firstName',
          enableHiding: false,
          header: 'First Name',
        },
        {
          accessorKey: 'lastName',
          enableHiding: false,
          header: 'Last Name',
        },
        {
          accessorKey: 'address',
          header: 'Address',
        },
        {
          accessorKey: 'city',
          header: 'City',
        },
        {
          accessorKey: 'state',
          header: 'State',
        },
      ] as MRT_ColumnDef<(typeof data)[0]>[],
    [],
  );

  const data = useMemo(
    () => [
      //data definitions...
      {
        firstName: 'Dylan',
        lastName: 'Murray',
        address: '261 Erdman Ford',
        city: 'East Daphne',
        state: 'Kentucky',
      },
      {
        firstName: 'Raquel',
        lastName: 'Kohler',
        address: '769 Dominic Grove',
        city: 'Columbus',
        state: 'Ohio',
      },
      {
        firstName: 'Ervin',
        lastName: 'Reinger',
        address: '566 Brakus Inlet',
        city: 'South Linda',
        state: 'West Virginia',
      },
      {
        firstName: 'Brittany',
        lastName: 'McCullough',
        address: '722 Emie Stream',
        city: 'Lincoln',
        state: 'Nebraska',
      },
      {
        firstName: 'Branson',
        lastName: 'Frami',
        address: '32188 Larkin Turnpike',
        city: 'Charleston',
        state: 'South Carolina',
      },
      
    ],
    [],
  );

  const table = useMaterialReactTable({
    columns,
    data,
    initialState: { columnVisibility: { address: false } },
  });

  return <MaterialReactTable table={table} />;
};

export default Example;
```

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

### Full Grouping Example with Grouped Column Mode Radio Group

Source: https://www.material-react-table.com/docs/guides/aggregation-and-grouping

Complete example showing how to enable grouping with `enableGrouping` and control the `groupedColumnMode` (false, 'remove', 'reorder') via a radio group. Includes column definitions, initial grouping state, and a demo component for the radio group.

```TypeScript
import { useMemo, useState } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';
import { data, type Person } from './makeData';
import {
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  Stack,
} from '@mui/material';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        header: 'First Name',
        accessorKey: 'firstName',
      },
      {
        header: 'Last Name',
        accessorKey: 'lastName',
      },
      {
        header: 'Age',
        accessorKey: 'age',
      },
      {
        header: 'Gender',
        accessorKey: 'gender',
      },
      {
        header: 'State',
        accessorKey: 'state',
      },
      {
        header: 'Salary',
        accessorKey: 'salary',
      },
    ],
    [],
    
  );

  //demo state
  const [groupedColumnMode, setGroupedColumnMode] = useState<
    false | 'remove' | 'reorder'
  >('reorder'); //default is 'reorder

  const table = useMaterialReactTable({
    columns,
    data,
    enableGrouping: true,
    groupedColumnMode,
    initialState: {
      expanded: true, //expand all groups by default
      grouping: ['state', 'gender'], //an array of columns to group by by default (can be multiple)
      pagination: { pageIndex: 0, pageSize: 20 },
    },
    muiTableContainerProps: { sx: { maxHeight: '800px' } },
  });

  return (
    <Stack gap="1rem">
      <DemoRadioGroup
        groupedColumnMode={groupedColumnMode}
        setGroupedColumnMode={setGroupedColumnMode}
      />
      <MaterialReactTable table={table} />
    </Stack>
  );
};

export default Example;

//demo...
const DemoRadioGroup = ({
  groupedColumnMode,
  setGroupedColumnMode,
}: {
  groupedColumnMode: false | 'remove' | 'reorder';
  setGroupedColumnMode: (
    groupedColumnMode: false | 'remove' | 'reorder',
  ) => void;
}) => {
  return (
    <FormControl sx={{ margin: 'auto', textAlign: 'center' }}>
      <FormLabel>Grouped Column Mode</FormLabel>
      <RadioGroup
        row
        value={groupedColumnMode}
        onChange={(event) =>
          setGroupedColumnMode(
            event.target.value === 'false'
              ? false
              : (event.target.value as any),
          )
        }
      >
        <FormControlLabel
          control={<Radio />}
          label='"reorder" (default)'
          value="reorder"
        />
        <FormControlLabel control={<Radio />} label='"remove"' value="remove" />
        <FormControlLabel value={false} control={<Radio />} label="false" />
      </RadioGroup>
    </FormControl>
  );
};

```
Tokens:
Raw