MRT logoMaterial React Table

On This Page

    Detail Panel (Expanding) Feature Guide

    Material React Table has multiple kinds of expanding features. This guide will show you how to use the detail panel feature to expand a single row to show more information for that row.

    If you are looking for how to expand multiple rows from a tree data structure, see the Expanding Sub-Rows guide.

    Relevant Props

    1
    { [key: string]: MRT_ColumnDef<TData> }
    MRT Display Columns Docs
    2
    'first' | 'last'
    3
    ({ row, table }) => ReactNode

    Relevant State

    1
    Record<string, boolean> | boolean
    {}
    TanStack Table Expanding Docs

    Render Detail Panel

    To add a detail panel to a row, all you need to do is add a renderDetailPanel prop.

    The recommended way to access the row data for the detail panel is to pull from the original object on a row. This gives you the original data for the row, not transformed or filtered by TanStack Table.

    Using row.getValue('columnId') will not work for data that does not have its own column. Using row.original.columnId is recommended for detail panels since the data in the detail panel usually does not have its own column.


    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    1DylanSprouseMurray
    2RaquelHakeemKohler
    3ErvinKrisReinger
    4BrittanyKathrynMcCullough
    5BransonJohnFrami

    Rows per page

    1-5 of 5

    Source Code

    1import React, { useMemo } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3import { Box, Typography } from '@mui/material';
    4import { data, Person } from './makeData';
    5
    6const Example = () => {
    7 const columns = useMemo(
    8 () =>
    9 [
    10 {
    11 accessorKey: 'id',
    12 header: 'ID',
    13 size: 50,
    14 },
    15 {
    16 accessorKey: 'firstName',
    17 header: 'First Name',
    18 },
    19 {
    20 accessorKey: 'middleName',
    21 header: 'Middle Name',
    22 },
    23 {
    24 accessorKey: 'lastName',
    25 header: 'Last Name',
    26 },
    27 ] as MRT_ColumnDef<Person>[],
    28 [],
    29 );
    30
    31 return (
    32 <MaterialReactTable
    33 columns={columns}
    34 data={data}
    35 renderDetailPanel={({ row }) => (
    36 <Box
    37 sx={{
    38 display: 'grid',
    39 margin: 'auto',
    40 gridTemplateColumns: '1fr 1fr',
    41 width: '100%',
    42 }}
    43 >
    44 <Typography>Address: {row.original.address}</Typography>
    45 <Typography>City: {row.original.city}</Typography>
    46 <Typography>State: {row.original.state}</Typography>
    47 <Typography>Country: {row.original.country}</Typography>
    48 </Box>
    49 )}
    50 />
    51 );
    52};
    53
    54export default Example;
    55

    Expand Detail Panel By Default

    If you want some or all rows to be expanded by default, you can specify that in the initialState.expanded prop. Pass true to expand all rows, or specify which rowIds should be expanded.

    //expand first 2 rows by default
    <MaterialReactTable
    data={data}
    columns={columns}
    initialState={{
    expanded: {
    1: true,
    2: true,
    },
    }}
    />
    //expand all rows by default
    <MaterialReactTable
    data={data}
    columns={columns}
    initialState={{
    expanded: true,
    }}
    />

    Position Expand Column Last

    If you want to position the expand column last, you can set the positionExpandColumn prop to 'last'.


    Demo

    1DylanSprouseMurray

    Address: 261 Erdman Ford

    City: East Daphne

    State: Kentucky

    Country: United States

    2RaquelHakeemKohler

    Address: 769 Dominic Grove

    City: Vancouver

    State: British Columbia

    Country: Canada

    3ErvinKrisReinger

    Address: 566 Brakus Inlet

    City: South Linda

    State: West Virginia

    Country: United States

    Rows per page

    1-3 of 3

    Source Code

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

    View Extra Storybook Examples