React Data Grid Toolbar

The toolbar prop adds a built-in chrome row above the grid with a column chooser, a CSV export button, Undo/Redo buttons (with history) and a global search input. Each action drives an existing feature, so the toolbar is the ready-made UI you would otherwise build with the toolbar slot.

<CDataGrid
  columns={columns}
  items={items}
  columnVisibility // required for the column chooser
  toolbar // every action whose feature is enabled
/>

toolbar (boolean true) enables each action whose underlying feature is on: columns needs columnVisibility, export is always available, undo/redo needs history, and search turns on the global filter. Pass a granular object to pick actions individually — search: true is the same input as globalFilter, so keep using whichever reads better.

<CDataGrid
  columns={columns}
  items={items}
  columnVisibility
  toolbar={{
    columns: true, // column chooser popup
    export: { filename: 'users.csv' }, // CsvDownloadOptions pass-through
    history: true, // undo/redo buttons (needs the history prop)
    search: true, // global search input
  }}
/>

import { CDataGrid } from '@coreui/react-data-grid'
import { useMemo } from 'react'

const roles = ['admin', 'editor', 'viewer']

export const DataGridToolbarExample = () => {
  const items = useMemo(
    () =>
      Array.from({ length: 1000 }, (_, i) => ({
        id: i + 1,
        name: `User ${i + 1}`,
        email: `user${i + 1}@example.com`,
        role: roles[i % roles.length]
      })),
    []
  )

  return (
    <CDataGrid
      columns={[
        {
 key: 'id', label: '#', width: 90, hideable: false
},
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email', style: { width: '30%' } },
        { key: 'role', label: 'Role', width: 110 }
      ]}
      items={items}
      itemKey={item => String(item.id)}
      columnVisibility
      pagination={{ pageSize: 10 }}
      toolbar={{
        columns: true,
        export: { filename: 'users.csv' },
        search: true
      }}
    />
  )
}

import { CDataGrid } from '@coreui/react-data-grid'
import { useMemo } from 'react'

const roles = ['admin', 'editor', 'viewer']

export const DataGridToolbarExample = () => {
  const items = useMemo(
    () =>
      Array.from({ length: 1000 }, (_, i) => ({
        id: i + 1,
        name: `User ${i + 1}`,
        email: `user${i + 1}@example.com`,
        role: roles[i % roles.length]
      })),
    []
  )

  return (
    <CDataGrid
      columns={[
        {
 key: 'id', label: '#', width: 90, hideable: false
},
        { key: 'name', label: 'Name' },
        { key: 'email', label: 'Email', style: { width: '30%' } },
        { key: 'role', label: 'Role', width: 110 }
      ]}
      items={items}
      itemKey={item => String(item.id)}
      columnVisibility
      pagination={{ pageSize: 10 }}
      toolbar={{
        columns: true,
        export: { filename: 'users.csv' },
        search: true
      }}
    />
  )
}

Column chooser

With toolbar.columns enabled the columns button opens a popup listing every leaf column in visual order with a checkbox. Toggling a checkbox calls column.toggleVisibility() live — there is no Apply step. Columns marked hideable: false stay checked and disabled. The footer offers Show all and Reset (Reset restores the initial columnVisibility object). Visibility changes call onVisibilityChange just like the column menu.

Export

The export button downloads the current view as CSV by calling downloadCsv(table, { scope: 'filtered' }). Pass a CsvDownloadOptions object as toolbar.export to set filename, delimiter, bom, sanitize or scope.

Icons

The toolbar buttons use the CoreUI icon set, overridable per-instance with the toolbarColumnsIcon, toolbarExportIcon, toolbarUndoIcon and toolbarRedoIcon props (any ReactNode, like every other icon prop).

Custom toolbar

The toolbar slot still replaces the whole toolbar; the built-in buttons are not composable into a custom slot. For a fully custom toolbar — including a hand-built column chooser — use the toolbar slot with the headless table and public helpers (downloadCsv, column.toggleVisibility). See the column ordering & visibility page for a slot-based chooser.