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 button (re-runs onFetchData)
enableReset	Reset layout + filters
extraFilter	Render any custom node on the right of the toolbar

Layout

The search sits on the left as an icon and expands into a field when clicked — it auto-focuses, shows a clear button while it has text, and collapses again when emptied. Everything else (your extraFilter, then the filter / columns / density / export controls, then refresh / reset) is grouped on 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.

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.