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

Data Grid Sizing

Learn about sizing the rows in the Data Grid component.

  • source

Overview

Row sizing options are avaiable for the Data Grid component vai the rowSize prop. Utilizing this will either reduce or increase the visual size of all rows (including headers).

This is a great option if you want to display more content within a cell without it feeling compact.

Size Options

The Data Grid has a flexible sizing system that allows you to choose from predefined size options or define a custom size if needed. All sizes are defined in pixels to ensure virtualization works correctly.

When no rowSize is provided, the Data Grid will use the sm size.

Note

Cells are rendered in a flex row container, to enable the use of any flex-related property for your content.

Predefined Sizes

There are several predefined size options available: xs to xl.

Predefined Size Guide

SizePixel Value
xs32
sm40
md48
lg56
xl64

Custom Sizes

You can also define a custom size by passing a number directly to the rowSize prop. This allows you to use any pixel value you need.

Cerberus Design System | Docs
Copy
'use client'

import { DataGrid } from '@cerberus/data-grid'
import { Stack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { useFakeQuery } from '../quick-start/data'

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

  return (
    <Stack direction="column" gap="md" w="3/4">
      <DataGrid columns={columns} data={data} rowSize="xs" />
      <DataGrid columns={columns} data={data} rowSize="sm" />
      <DataGrid columns={columns} data={data} rowSize="md" />
      <DataGrid columns={columns} data={data} rowSize="lg" />
      <DataGrid columns={columns} data={data} rowSize="xl" />
    </Stack>
  )
}
Copy
'use client'

import { DataGrid } from '@cerberus/data-grid'
import { Stack } from 'styled-system/jsx'
import { columns } from '../quick-start/columns.demo'
import { useFakeQuery } from '../quick-start/data'

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

  return (
    <Stack direction="column" gap="md" w="3/4">
      <DataGrid columns={columns} data={data} rowSize={100} />
    </Stack>
  )
}