DocsBlog

  • 1.0.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Styling
Theming

Get Started

OverviewQuick StartColumnsContext

Layout

DimensionsSizingToolbarPagination

Features

PinningSorting

Reference

API

On this page

  • Edit this page on Github

Toolbar

Learn how to create custom toolbars in the Data Grid component.

  • source

Overview

The Toolbar is a reserved area above the Data Grid component typically used for global actions for the grid itself.

To add a custom toolbar, you can use the toolbar prop and pass a React component.

Since the toolbar is positioned within the Data Grid component, it shares the same height restrictions as the grid itself. Ensure your parent height is set appropriately to accommodate the toolbar.

Note

If you don't need the context of the grid, we recommended rendering your toolbar outside of the Data Grid component.

Grid Context

To access the Data Grid context, you use the useDataGridContext hook which provides a signal driven store for reading and updating state in a highly performant way.

Read the Data Grid Context documentation for more details.

Cerberus Design System | Docs
Copy
'use client'

import { DataGrid, useDataGridContext } from '@cerberus/data-grid'
import { useRead } from '@cerberus/signals'
import { HStack, Stack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { useFakeQuery } from '../quick-start/data'
import { type Employee } from '../quick-start/data.demo'

export function BasicDemo() {
  // Normally this would be from useQuery or a server-side API call
  const data = useFakeQuery(200)

  return (
    <Stack direction="column" gap="md" h="25rem" mb="md" w="90%">
      <DataGrid columns={columns} data={data} toolbar={<Toolbar />} />
    </Stack>
  )
}

function Toolbar() {
  const store = useDataGridContext<Employee>()
  const totalCount = useRead(store.rowCount)
  return <HStack w="full">This table has {totalCount} rows</HStack>
}
This table has 200 rows