Mantine React Table

You can control the visibility of specific loading components using the following state options. This is useful when integrating with libraries like React Query to distinguish between initial data fetching, background pagination fetching, or mutations (saving data).

Example of granular control:

const table = useMantineReactTable({
  columns,
  data: data ?? [],
  state: {
    // fetching next page pagination
    showLoadingOverlay: isFetching && isPreviousData, 
    // loading for the first time with no data
    showSkeletons: isLoading, 
    // from a mutation
    showProgressBars: isSavingUser, 
  },
});

When using filtering with tree data, you can customize how the hierarchy responds to filters:

Filter From Leaf Rows

By default, filtering is top-down (if a parent is filtered out, all children are hidden). Setting filterFromLeafRows: true changes this to bottom-up: a parent row will remain visible as long as at least one of its descendants matches the filter.

Max Leaf Row Filter Depth

Controls how deep the filtering logic applies.

• maxLeafRowFilterDepth: 0: Filtering only applies to root-level rows. If a root row matches, all its children are shown regardless of whether the children match the filter.
• maxLeafRowFilterDepth: 1: Filtering applies to children (1 level deep).

// Filter from leaf rows up
const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  filterFromLeafRows: true,
});

// Only filter root rows, keep all children of matching parents visible
const table = useMantineReactTable({
  columns,
  data,
  enableExpanding: true,
  maxLeafRowFilterDepth: 0,
});

In Mantine React Table, every column has an associated column instance object. This object provides access to various static methods and properties that describe the state and definition of that specific column.

Important Distinction: These are not column options (configuration settings). They are methods and properties available on the instance itself to inspect or react to the column's current state.

Common Access Points

You can access the column instance in several callback props and component overrides:

1. Column Definition Callbacks: Inside properties like mantineTableHeadCellProps, Header, or Cell within your column array.
2. Table Instance Callbacks: Inside global table callback props like mantineTableBodyCellProps provided to useMantineReactTable.

const columns = [
  {
    accessorKey: 'username',
    header: 'Username',
    // Accessing column instance in a column definition callback
    mantineTableHeadCellProps: ({ column }) => ({
      style: {
        color: column.getIsSorted() ? 'red' : 'black',
      },
    }),
    // Accessing column instance in the Header component override
    Header: ({ column }) => <div>{column.columnDef.header}</div>,
    // Accessing column instance in the Cell component override
    Cell: ({ cell, column }) => (
      <Box
        style={{
          backgroundColor: column.getIsGrouped() ? 'green' : 'white',
        }}
      >
        {cell.getValue()}
      </Box>
    ),
  },
];

const table = useMantineReactTable({
  columns,
  data,
  // Accessing column instance in table-level callback props
  mantineTableBodyCellProps: ({ column }) => ({
    style: {
      boxShadow: column.getIsPinned() ? '0 0 0 2px red' : 'none',
    },
  }),
});

Instead of wrapping the entire table in a custom component, the recommended best practice for re-usability is to define a factory function that returns default MRT_TableOptions<TData>. This allows you to share common settings (like pagination modes or global filter settings) while maintaining full control over the table instance and state in each specific component.

import { type MRT_RowData, type MRT_TableOptions } from 'mantine-react-table';

export const getDefaultMRTOptions = <TData extends MRT_RowData>(): Partial<MRT_TableOptions<TData>> => ({
  enableGlobalFilter: false,
  enableRowPinning: true,
  initialState: { showColumnFilters: true },
  manualFiltering: true,
  manualPagination: true,
  manualSorting: true,
  paginationDisplayMode: 'pages',
});

// Usage in a component
const defaultMRTOptions = getDefaultMRTOptions<User>();
const table = useMantineReactTable({
  ...defaultMRTOptions,
  columns,
  data,
  enableGlobalFilter: true, // override
  initialState: {
    ...defaultMRTOptions.initialState,
    showColumnFilters: false, // override nested state
  },
});