On this page

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.

Note

Accessing a context value without using the mentioned hook will not be reactive.

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.
`orderedColumns`	`Accessor<InternalColumn<TData>[]>`	A list of ordered columns.
`rows`	`Accessor<TData[]>`	A list of processed rows.
`rowSize`	`Accessor<number>`	The height of the row.
`rowCount`	`Accessor<number>`	The current number of rows in the grid.
`pageIndex`	`Accessor<number>`	The current page index of the grid.
`pageSize`	`Accessor<number>`	The current page size of the grid.
`pageRange`	`Accessor<number[]>`	The page range options of the grid.
`currentPageRange`	`Accessor<{ start: number; end: number }>`	The current page range.
`pageCount`	`Accessor<number>`	The current page count of the grid used for SSR pagination.
`isServerPaginated`	`Accessor<boolean>`	If pagination is using server-based.
`showColFilter`	`Accessor<boolean>`	If the user has chosen the column filter feature option.
`globalFilter`	`Accessor<BaseFilterState>`	The current global filter value used for column filtering.
`collFilters`	`Accessor<ColumnFilterState>`	The current column filters used.
`filteredRows`	`Accessor<TData[]>`	The rows after filtering.
`sorting`	`Accessor<SortState[]>`	The current sorting state of the grid.
`sortedRows`	`Accessor<TData[]>`	The rows after sorting.
`phase`	`Accessor<Phase>`	The current phase of the grid layout.
`pending`	`Accessor<boolean>`	The state of the `pending` prop of the Data Grid.
`hasSkeleton`	`Accessor<boolean>`	If a skeleton overlay option is provided.
`rootCssVars`	`Accessor<Record<string, string>>`	The current CSS variables for the grid root element.
`totalWidth`	`Accessor<number>`	The total width of the grid (used for pinning).
`visibleRows`	`Accessor<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`	`Setter<number>`	Updates the width of the grid container.
`setPage`	`(details: PageDetails) => void`	Updates the current page of the grid.
`setPageIndex`	`Setter<number>`	Updates the current page index of the grid.
`setPageSize`	`(size: number) => void`	Updates the page size of the grid.
`setGlobalFilter`	`Setter<BaseFilterState>`	Updates the global filter value.
`setColFilter`	`Setter<ColumnFilterState>`	Updates the col filter value.
`setShowColFilter`	`Setter<boolean>`	Updates the showColFilter value.
`setSort`	`(colId: string, direction: SortDirection, multi?: boolean) => void`	Updates the sorting state of the grid.
`toggleSort`	`(colId: string, multi?: boolean) => void`	Toggles the sort direction of a column.
`togglePinned`	`(colId: string, state: PinnedState) => void`	Toggles the pinned state of a column.
`updateData`	`(data: TData[]) => void`	Updates the grid data.
`updatePending`	`(newState: boolean) => void`	Updates the pending state.

On this page

Overview
Using the context
Reading Signals
Using Actions
Store Reference
Reactive Values
Actions
Edit this page on Github

On this page

Data Grid Context

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

source

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

Note

Accessing a context value without using the mentioned hook will not be reactive.

Name	Type	Description
`columns`	`Accessor<InternalColumn<TData>[]>`	A list of processed columns.
`orderedColumns`	`Accessor<InternalColumn<TData>[]>`	A list of ordered columns.
`rows`	`Accessor<TData[]>`	A list of processed rows.
`rowSize`	`Accessor<number>`	The height of the row.
`rowCount`	`Accessor<number>`	The current number of rows in the grid.
`pageIndex`	`Accessor<number>`	The current page index of the grid.
`pageSize`	`Accessor<number>`	The current page size of the grid.
`pageRange`	`Accessor<number[]>`	The page range options of the grid.
`currentPageRange`	`Accessor<{ start: number; end: number }>`	The current page range.
`pageCount`	`Accessor<number>`	The current page count of the grid used for SSR pagination.
`isServerPaginated`	`Accessor<boolean>`	If pagination is using server-based.
`showColFilter`	`Accessor<boolean>`	If the user has chosen the column filter feature option.
`globalFilter`	`Accessor<BaseFilterState>`	The current global filter value used for column filtering.
`collFilters`	`Accessor<ColumnFilterState>`	The current column filters used.
`filteredRows`	`Accessor<TData[]>`	The rows after filtering.
`sorting`	`Accessor<SortState[]>`	The current sorting state of the grid.
`sortedRows`	`Accessor<TData[]>`	The rows after sorting.
`phase`	`Accessor<Phase>`	The current phase of the grid layout.
`pending`	`Accessor<boolean>`	The state of the `pending` prop of the Data Grid.
`hasSkeleton`	`Accessor<boolean>`	If a skeleton overlay option is provided.
`rootCssVars`	`Accessor<Record<string, string>>`	The current CSS variables for the grid root element.
`totalWidth`	`Accessor<number>`	The total width of the grid (used for pinning).
`visibleRows`	`Accessor<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`	`Setter<number>`	Updates the width of the grid container.
`setPage`	`(details: PageDetails) => void`	Updates the current page of the grid.
`setPageIndex`	`Setter<number>`	Updates the current page index of the grid.
`setPageSize`	`(size: number) => void`	Updates the page size of the grid.
`setGlobalFilter`	`Setter<BaseFilterState>`	Updates the global filter value.
`setColFilter`	`Setter<ColumnFilterState>`	Updates the col filter value.
`setShowColFilter`	`Setter<boolean>`	Updates the showColFilter value.
`setSort`	`(colId: string, direction: SortDirection, multi?: boolean) => void`	Updates the sorting state of the grid.
`toggleSort`	`(colId: string, multi?: boolean) => void`	Toggles the sort direction of a column.
`togglePinned`	`(colId: string, state: PinnedState) => void`	Toggles the pinned state of a column.
`updateData`	`(data: TData[]) => void`	Updates the grid data.
`updatePending`	`(newState: boolean) => void`	Updates the pending state.

'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: <pre>{JSON.stringify(globalFilter, null, 2)}</pre>
    </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>
  )
}