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.

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`	`ReadonlyAccessor<InternalColumn<TData>[]>`	A list of processed columns.
`rows`	`ReadonlyAccessor<TData[]>`	A list of processed rows.
`rowCount`	`ReadonlyAccessor<number>`	The current number of rows in the grid.
`rowSize`	`ReadonlyAccessor<number>`	The height of the row.
`pending`	`ReadonlyAccessor<boolean>`	The state of the `pending` prop of the Data Grid.
`hasSkeleton`	`ReadonlyAccessor<boolean>`	If a skeleton overlay option is provided.
`globalFilter`	`ReadonlyAccessor<BaseFilterState>`	The current global filter value used for column filtering.
`collFilters`	`ReadonlyAccessor<ColumnFilterState>`	The current column filters used.
`showColFilter`	`ReadonlyAccessor<boolean>`	If the user has chosen the column filter feature option.
`sorting`	`ReadonlyAccessor<SortState[]>`	The current sorting state of the grid.
`pageCount`	`ReadonlyAccessor<number>`	The current page count of the grid.
`pageIndex`	`ReadonlyAccessor<number>`	The current page index of the grid.
`pageSize`	`ReadonlyAccessor<number>`	The current page size of the grid.
`pageRange`	`ReadonlyAccessor<number[]>`	The page range options of the grid.
`currentPageSize`	`ReadonlyAccessor<number>`	The current page range of the grid.
`isServerPaginated`	`ReadonlyAccessor<boolean>`	If pagination is using server-based.
`rootCssVars`	`ReadonlyAccessor<CSSProperties>`	The current CSS variables for the grid root element.
`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.
`setPageSize`	`(page: number) => void`	Updates the page size of the grid.
`setGlobalFilter`	`(val: BaseFilterState) => void`	Updates the global filter value.
`setColFilter`	`Setter<ColumnFilterState>`	Updates the col filter value.
`setShowColFilter`	`(val: boolean) => void`	Updates the showColFilter 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.
`updatePending`	`(newState: boolean) => void`	Updates the pending state.

On this page

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'

Name	Type	Description
`columns`	`ReadonlyAccessor<InternalColumn<TData>[]>`	A list of processed columns.
`rows`	`ReadonlyAccessor<TData[]>`	A list of processed rows.
`rowCount`	`ReadonlyAccessor<number>`	The current number of rows in the grid.
`rowSize`	`ReadonlyAccessor<number>`	The height of the row.
`pending`	`ReadonlyAccessor<boolean>`	The state of the `pending` prop of the Data Grid.
`hasSkeleton`	`ReadonlyAccessor<boolean>`	If a skeleton overlay option is provided.
`globalFilter`	`ReadonlyAccessor<BaseFilterState>`	The current global filter value used for column filtering.
`collFilters`	`ReadonlyAccessor<ColumnFilterState>`	The current column filters used.
`showColFilter`	`ReadonlyAccessor<boolean>`	If the user has chosen the column filter feature option.
`sorting`	`ReadonlyAccessor<SortState[]>`	The current sorting state of the grid.
`pageCount`	`ReadonlyAccessor<number>`	The current page count of the grid.
`pageIndex`	`ReadonlyAccessor<number>`	The current page index of the grid.
`pageSize`	`ReadonlyAccessor<number>`	The current page size of the grid.
`pageRange`	`ReadonlyAccessor<number[]>`	The page range options of the grid.
`currentPageSize`	`ReadonlyAccessor<number>`	The current page range of the grid.
`isServerPaginated`	`ReadonlyAccessor<boolean>`	If pagination is using server-based.
`rootCssVars`	`ReadonlyAccessor<CSSProperties>`	The current CSS variables for the grid root element.
`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.
`setPageSize`	`(page: number) => void`	Updates the page size of the grid.
`setGlobalFilter`	`(val: BaseFilterState) => void`	Updates the global filter value.
`setColFilter`	`Setter<ColumnFilterState>`	Updates the col filter value.
`setShowColFilter`	`(val: boolean) => void`	Updates the showColFilter 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.
`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>
  )
}