Data Grid Context

A signal-driven store for reading and updating state in a highly performant way.

source

import { useDataGridContext } from '@cerberus/data-grid'

Overview

The Data Grid runs on a signal-driven store for reading and updating state in a highly performant way. This allows the grid to bypass React's internal reactivity system, preventing unnecessary re-renders and improving overall performance by manaing state outside of the scope of React components.

To learn more about signals and how they work, see the Signals documentation.

Using the context

To recieve the context from the Data Grid, you simply use the useDataGridContext hook like you would any other hook in React.

Reading Signals

When reading signals values from the context, you need to use them in a way that will ensure the reactivity is being tracked via the useRead hook from the Cerberus Signals library.

This will subscribe to the signal's reactivity and provide the latest value when used within a component.

Using Actions

Since actions only write changes, you can use them directly from the store.

Store Reference

The Data Grid store provides both getter and setter helpers for accessing and updating state in a signal-based reactive manner:

Reactive Values

Name	Type	Description
`columns`	`Accessor<InternalColumn<TData>[]>`	A list of processed columns.
`rows`	`Accessor<TData[]>`	A list of processed rows.
`globalFilter`	`Accessor<string>`	The current global filter value used for column filtering.
`sorting`	`Accessor<SortState[]>`	The current sorting state of the grid.
`rootCssVars`	`ReadonlyAccessor<CSSProperties>`	The current CSS variables for the grid root element.
`rowCount`	`ReadonlyAccessor<number>`	The current number of rows in the grid.
`totalWidth`	`ReadonlyAccessor<number>`	The total width of the grid (used for pinning).
`visibleRows`	`ReadonlyAccessor<TData[]>`	The list of visible rows in the viewport.

Actions

Name	Type	Description
`resizeColumn`	`(columnId: string, delta: number) => void`	Resizes a column by updating its width.
`setContainerWidth`	`(width: number) => void`	Updates the width of the grid container.
`setPage`	`(page: number) => void`	Updates the current page of the grid.
`setGlobalFilter`	`(val: string) => void`	Updates the global filter value.
`setSort`	`(colId: string, direction: SortDirection, multi?: boolean) => void`	Updates the sorting state of the grid.
`togglePinned`	`(colId: string, state: PinnedState) => void`	Toggles the pinned state of a column.
`toggleSort`	`(colId: string, multi?: boolean) => void`	Toggles the sort direction of a column.
`updateData`	`(data: TData[]) => void`	Updates the grid data.

On this page

Edit this page on Github

Data Grid Context

A signal-driven store for reading and updating state in a highly performant way.

source

import { useDataGridContext } from '@cerberus/data-grid'

Name	Type	Description
`columns`	`Accessor<InternalColumn<TData>[]>`	A list of processed columns.
`rows`	`Accessor<TData[]>`	A list of processed rows.
`globalFilter`	`Accessor<string>`	The current global filter value used for column filtering.
`sorting`	`Accessor<SortState[]>`	The current sorting state of the grid.
`rootCssVars`	`ReadonlyAccessor<CSSProperties>`	The current CSS variables for the grid root element.
`rowCount`	`ReadonlyAccessor<number>`	The current number of rows in the grid.
`totalWidth`	`ReadonlyAccessor<number>`	The total width of the grid (used for pinning).
`visibleRows`	`ReadonlyAccessor<TData[]>`	The list of visible rows in the viewport.

Actions

Name	Type	Description
`resizeColumn`	`(columnId: string, delta: number) => void`	Resizes a column by updating its width.
`setContainerWidth`	`(width: number) => void`	Updates the width of the grid container.
`setPage`	`(page: number) => void`	Updates the current page of the grid.
`setGlobalFilter`	`(val: string) => void`	Updates the global filter value.
`setSort`	`(colId: string, direction: SortDirection, multi?: boolean) => void`	Updates the sorting state of the grid.
`togglePinned`	`(colId: string, state: PinnedState) => void`	Toggles the pinned state of a column.
`toggleSort`	`(colId: string, multi?: boolean) => void`	Toggles the sort direction of a column.
`updateData`	`(data: TData[]) => void`	Updates the grid data.

Cerberus Design System | Docs

'use client'

import { useDataGridContext } from '@cerberus/data-grid'
import { Text } from '@cerberus/react'
import { useRead } from '@cerberus/signals'
import { Employee } from '../quick-start/data.demo'

export function SignalDemo() {
  const store = useDataGridContext<Employee>()
  const globalFilter = useRead(store.globalFilter)

  return <Text>The global filter is: {globalFilter}</Text>
}

'use client'

import { useDataGridContext } from '@cerberus/data-grid'
import { Button } from '@cerberus/react'
import { Employee } from '../quick-start/data.demo'
import { MouseEvent } from 'react'

export function ActionDemo() {
  const store = useDataGridContext<Employee>()

  function handleUpdateData(e: MouseEvent<HTMLButtonElement>) {
    store.togglePinned(e.currentTarget.value, 'left')
  }

  return (
    <Button onClick={handleUpdateData} value="ID">
      Toggle Pinned
    </Button>
  )
}