Toolbar

The toolbar sits above the grid and surfaces controls. Each control is opt-in via a prop, so the toolbar only appears when you enable at least one.

Loading demo…

Controls

Prop	Control
enableGlobalFilter	Collapsible global search (a search icon that expands into a field)
enableColumnFilter	Column-filter rule builder (with active-count badge)
enableColumnVisibility	Columns panel — show/hide (also pin & reorder when those are enabled)
enableDensitySelector	Density menu (compact / standard / comfortable)
enableExport	Export menu (CSV / Excel)
enableRefresh	"Refresh data" button (re-runs onFetchData)
enableReset	"Reset layout" button — restores column order / pinning / sizing (configure via resetActions)
extraFilter	Render any custom node on the right of the toolbar

The Reset layout button resets the column layout only — columnOrder, columnPinning, and columnSizing by default — and never reloads data or clears filters / sorting / pagination. Widen it with resetActions={['columnOrder','columnPinning','columnSizing','columnVisibility','rowPinning','filters','sorting','pagination']} (any subset), or call apiRef.current.layout.reset(actions?) yourself. For a full "reset everything and reload" use apiRef.current.layout.resetAll().

Icon-only vs labelled (toolbarVariant)

Controls default to compact icon-only buttons with a tooltip (toolbarVariant="icon"). If your users don't recognise an icon at a glance, switch to icon + label buttons:

<DataTable columns={columns} data={rows} enableColumnVisibility enableExport toolbarVariant="text" />

"text" applies to every built-in control (search, filter, columns, density, export, refresh, reset, saved views, list-view toggle). The filter's active-count badge and the saved-views "unsaved changes" dot show in both variants. All controls share one internal ToolbarButton (a standard MUI IconButton / Button), so slots.<control> / slotProps.<control> overrides behave identically in either variant.

Layout

All built-in controls are left-aligned in a stable order — search, saved views, filter, columns, density, export, then refresh / reset — mirroring the MUI DataGrid toolbar. The search sits first as an icon and expands into a field when clicked (auto-focuses, shows a clear button while it has text, and collapses again when emptied). Only your extraFilter node is pushed to the right.

Restyle the whole bar through the themeable toolbar slot:

createTheme({
  components: {
    MuiTanstackDataGrid: {
      styleOverrides: { toolbar: { paddingInline: 16, gap: 8 } },
    },
  },
});

Reorder / reposition the controls

Pass renderToolbar to arrange the built-in controls however you like. It hands you each ready-made control element — search, filter, columns, density, export, refresh, reset, and your extraFilter — so you can order and position them freely (e.g. actions on the left, search on the right). A control you didn't enable comes through as null.

Loading demo…

<DataTable
  columns={columns}
  data={rows}
  enableGlobalFilter enableColumnVisibility enableExport enableRefresh enableReset
  renderToolbar={(c) => (
    <>
      {c.columns}{c.density}{c.export}{c.refresh}{c.reset}
      <Box sx={{ flex: 1 }} />   {/* spacer pushes the rest right */}
      {c.filter}{c.search}
    </>
  )}
/>

Each columns / density / export element already includes its menu/popover, so it works wherever you place it. For a complete replacement with your own components, use slots={{ toolbar: MyToolbar }}.

Bulk-actions bar

When enableBulkActions is set and rows are selected, a bulk-actions bar appears above the grid showing the selected count, a Clear action, and whatever you return from renderBulkActions(selectionState). See Selection.

Retint the bar — its surface defaults to the primary palette but is fully themeable, three ways:

// 1. per-instance via the CSS-variable tokens:
<DataTable … sx={{ '--dt-bulkbar-bg': '#eef2ff', '--dt-bulkbar-fg': '#1e293b' }} />

// 2. theme-wide via styleOverrides:
createTheme({ components: { MuiTanstackDataGrid: {
  styleOverrides: { bulkActionsToolbar: { backgroundColor: '#eef2ff', color: '#1e293b' } },
} } });

// 3. per-instance via slotProps:
<DataTable … slotProps={{ bulkActionsToolbar: { sx: { bgcolor: 'grey.900' } } }} />

The bar overlays the toolbar, so keep the background opaque.

Customising the toolbar

Three levels, lightest first: renderToolbar to rearrange the built-in controls; restyle individual parts with slots / slotProps; or replace the whole bar with slots={{ toolbar: MyToolbar }} and drive the grid through apiRef (apiRef.current.filtering.setGlobalFilter(…), apiRef.current.export.exportCSV(), etc.).

Custom icons

The grid imports every icon per-path (e.g. @mui/icons-material/SearchOutlined), so a bundler only ships the ~13 icons it actually uses — never the full @mui/icons-material barrel. You don't need an alias or a shim to keep your bundle small.

To use your own icon set (lucide, a custom SVG component, a different MUI variant…), pass it through the matching slots key. Each one defaults to the MUI *Outlined icon, so override only what you want:

import { RefreshCw, Search, Filter } from 'lucide-react';

<DataTable
  columns={columns}
  data={rows}
  enableGlobalFilter
  enableColumnFilter
  enableRefresh
  slots={{
    searchIcon: Search,
    filterIcon: Filter,
    refreshIcon: RefreshCw,
  }}
/>;

Any component that renders an icon works. The grid sizes its icons with MUI's fontSize="small" (and CSS for the sort indicators), so MUI icons inherit the right size automatically. A non-MUI icon (lucide, a plain SVG) renders fine too, but it won't read MUI's fontSize — size it yourself, e.g. wrap it ((props) => <Search size={18} {...props} />) or set its own size prop, if you need it to match exactly.

Slot	Replaces
searchIcon	global search adornment
filterIcon	column-filter button
addFilterIcon	"Add filter" button (filter popover)
clearIcon	clear search / remove a filter rule
columnsIcon	columns panel button (show/hide, pin, reorder)
densityIcon	density selector
exportIcon	export button + menu items
refreshIcon	refresh button
resetIcon	reset button
sortIconAsc / sortIconDesc	header sort indicators
expandIcon / collapseIcon	row expand/collapse

Each defaults to a built-in feather-style line icon (the expandIcon / collapseIcon defaults are MUI chevrons). The full, grouped slot list is in the Props reference.