MRT logoMantine React Table

docs
/
guides
/
customize component props

On This Page

    Customize Component Props Guide

    One of the strengths of Mantine React Table is that it exposes a majority of all the underlying Mantine component props used to build the table.

    Additionally, in one of the sections below, you will learn how to customize and use the Mantine Theme to customize colors, typography, or any other default CSS that is used by Mantine React Table.

    Relevant Table Options

    All props labeled mantine...Props get forwarded to Mantine components. Here is a list of all the props that are exposed in both the root props and column options.

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1'semantic' | 'grid''semantic'TODO
    2BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs
    3ActionIconProps | (({table, column }) => ActionIconProps);Mantine ActionIcon Docs
    4ActionIconProps | ({table, column }) => ActionIconPropsMantine ActionIcon Docs
    5UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonPropsMantine UnstyledButton Docs
    6ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
    7BoxProps | ({ row, table }) => BoxPropsMantine Box Docs
    8ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
    9SelectProps | ({ cell, column, row, table }) => SelectPropsMantine Select Docs
    10TextInputProps | ({ cell, column, row, table }) => TextInputPropsMantine TextInput Docs
    11ActionIconProps | ({ table }) => ActionIconPropsMantine ActionIcon Docs
    12ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
    13AutocompleteProps | ({ column, table, rangeFilterIndex }) => AutocompletePropsMantine Autocomplete Docs
    14CheckboxProps | ({ column, table }) => CheckboxPropsMantine Checkbox Docs
    15MultiSelectProps | ({ column, table }) => MultiSelectPropsMantine MultiSelect Docs
    16RangeSliderProps | ({ column, table }) => RangeSliderPropsMantine Slider Docs
    17SelectProps | ({ column, table }) => SelectPropsMantine Select Docs
    18TextInputProps | ({ table, column, rangeFilterIndex }) => TextInputPropsMantine TextInput Docs
    19HighlightProps | ({ cell, column, row, table }) => HighlightPropsMantine Highlight Docs
    20LoadingOverlayProps | ({ table }) => LoadingOverlayPropsMantine LoadingOverlay Docs
    21PaginationProps & { rowsPerPageOptions?: string[], showRowsPerPage?: boolean; }Mantine Pagination Docs
    22PaperProps | ({ table }} => PaperPropsMantine Paper Docs
    23ProgressProps | ({ isTopToolbar, table }) => ProgressPropsMantine Progress Docs
    24ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
    25TextInputProps | ({ table }) => TextInputPropsMantine TextInput Docs
    26CheckboxProps | ({ table }) => CheckboxPropsMantine Checkbox Docs
    27CheckboxProps | ({ row, table }) => CheckboxPropsMantine Checkbox Docs
    28SkeletonProps | ({ cell, column, row, table }) => SkeletonPropsMantine Skeleton Docs
    29BoxProps | ({ cell, column, row, table }) => BoxPropsMantine Box Docs
    30BoxProps | ({ table }) => BoxPropsMantine Box Docs
    31BoxProps | ({ isDetailPanel, row, table }) => BoxPropsMantine Box Docs
    32BoxProps | ({ table }) => BoxPropsMantine Box Docs
    33BoxProps| ({table, column }) => BoxPropsMantine Box Docs
    34BoxProps | ({ table }) => BoxProps);Mantine Box Docs
    35BoxProps | ({table, footerGroup}) => BoxPropsMantine Box Docs
    36BoxProps | ({ table, column }) => BoxPropsMantine Box Docs
    37BoxProps | ({ table }) => BoxPropsMantine TableHead Docs
    38BoxProps | ({ table, headerGroup}) => BoxPropsMantine Box Docs
    39TableProps | ({ table }} => TablePropsMantine Table Docs
    40BadgeProps| ({ table }} => BadgePropsMantine Chip Docs
    41AlertProps | ({ table }) => AlertPropsMantine Alert Docs
    42BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs

    Relevant Column Options

    Some of the column options expose the same props as above, but on a per column basis.

    #
    Column Option
    Type
    Default Value
    More Info Links
    1ActionIconProps | ({ column, table }) => ActionIconPropsMantine ActionIcon API
    2ActionIconProps | ({ column, table }) => ActionIconPropsMantine ActionIcon API
    3UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonPropsMantine UnstyledButton API
    4SelectProps | ({ cell, column, row, table }) => SelectPropsMantine Select Docs
    5TextInputProps | ({ cell, column, row, table }) => TextInputPropsMantine TextInput API
    6AutocompleteProps | ({ column, table, rangeFilterIndex}) => AutocompletePropsMantine Autocomplete Docs
    7CheckboxProps | ({ column, table }) => CheckboxPropsMantine Checkbox Props
    8MultiSelectProps | ({ column, table }) => MultiSelectPropsMantine MultiSelect Docs
    9RangeSliderProps | ({ column, table }) => RangeSliderPropsMantine Slider Docs
    10SelectProps | ({ column, table }) => SelectPropsMantine Select Docs
    11TextInputProps | ({ column, rangeFilterIndex, table }) => TextInputPropsMantine TextInput Docs
    12BoxProps | ({ cell, table }) => BoxPropsMantine Box API
    13BoxProps | ({ column, table }) => BoxPropsMantine Box API
    14BoxProps | ({ column, table }) => BoxPropsMantine Box API

    Mantine Props and Types

    Each prop can either be passed as an object or as a callback function where you get access to the underlying table instance and any other relevant callback parameters, such as cell, row, column, etc. This lets you easily run conditional logic on the props you pass. Let's take a look at a few examples.

    All mantine...Props props are strongly typed and you should get ts hints as you write them. API docs are available on the Mantine website for each component.

    Static Prop Objects

     
    <MantineReactTable
  columns={columns}
  data={data}
  enableRowSelection
  //passing the static object variant if no dynamic logic is needed
  mantineSelectCheckboxProps={{
    color: 'violet', //makes all checkboxes use a different color other than the primaryColor
  }}
/>

    Callback Functions to Dynamically Set Prop Values

     
    <MantineReactTable
  columns={columns}
  data={data}
  enableRowSelection
  //passing the callback function variant. (You should get type hints for all the callback parameters available)
  mantineSelectCheckboxProps={({ row }) => ({
    color: 'violet',
    disabled: row.original.isAccountLocked, //access the row data to determine if the checkbox should be disabled
  })}
/>

    Styling Mantine Components

    TODO link style guide

    Using Material-UI instead of Mantine?
    Check out Material React Table