DocsBlog

  • 1.1.2

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Signals
Styling
Theming

Get Started

OverviewQuick StartColumnsContextThemeNew

Layout

DimensionsSizingSlotsToolbarFooterNewPagination

Features

PinningSorting

Reference

API

On this page

  • Edit this page on Github

Slots

Learn about the layout slots of the Data Grid component.

  • source

Overview

The Data Grid comes with placeholder content slots that live within the contextual provider. When provided, any component used for the slot will have access to the Data Grid context via the useDataGridContext hook.

You can utilize a slot by adding the name of the slot as a property to the DataGrid component and passing in the preferred ReactNode.

Data Grid Slots

  • Toolbar: placed above the grid. Commonly used for global actions.
  • Footer: placed below the grid.

Note

Remember that all slot positions are constrained to the dimensions provided by the parent component wrapping your Data Grid.

Slot Preview

In this demo we show the location of each slot provided for the Data Grid.

Copy
'use client'

import { DecorativeBox } from '@/app/components/decorative-box'
import { Stack } from '@/styled-system/jsx'
import { DataGrid } from '@cerberus/data-grid'
import { columns } from '../quick-start/columns.demo'
import { createFakeQuery } from '../quick-start/data'

export function BasicDemo() {
  const data = createFakeQuery(10)

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

function Toolbar() {
  return <DecorativeBox h="50px">Toolbar</DecorativeBox>
}

function Footer() {
  return <DecorativeBox h="50px">Footer</DecorativeBox>
}
Toolbar
Footer