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

Column Pinning

Learn about the column pinning feature in the Data Grid component.

  • source

Overview

Pinned columns (also known as sticky, frozen, and locked) are visible at all times while scrolling the Data Grid horizontally. Users can access this feature through the column menu to pin and unpin columns to either the left or right side.

Implementing column pinning

You must opt-in to column pinning by setting the features.pinning prop to true or utilzing the options object. Doing so will display the pinning options in the column menu.

Default Pinning

To set a column to be pinned by default, you can use the defaultPosition property in the features.pinning object.

Options

The pinning feature accepts either a boolean or an object with the following properties:

ParamsRequiredDescription
defaultPositionfalseWhether the column should be pinned by default.
Cerberus Design System | Docs
Copy
'use client'

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

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

  return (
    <Box h="20rem" w="90%">
      <DataGrid columns={columns} data={data} />
    </Box>
  )
}
Copy
'use client'

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

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

  return (
    <Box h="20rem" w="90%">
      <DataGrid columns={columns} data={data} />
    </Box>
  )
}

// columnHelper.accessor('id', {
//   header: 'ID',
//   width: 80,
//   features: {
//     pinning: {
//       defaultPosition: 'left',
//     },
//   },
//   cell: ({ value }) => <Text>#{value}</Text>,
// }),

export type PinningOptions = {
  defaultPosition?: boolean | 'left' | 'right' | undefined
}