DocsBlog

  • 1.2.1

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Release - April 12, 2026

Cerberus v1.2 Release

CBAuthor's profile picture

Casey Baggz

Cerberus Admin

This release adds new features to React and the Data Grid.

Overview

Here is a brief overview of what's new:

  • React Features - new primitive APIs and general updates
  • Data Grid Features - Data Grid gets some new goodies

React Features

Popover

We have added a new Popover API for when you need something a little more verbose than a Tooltip - but not as heavy weight as a Dialog/Alert.


Checkout the Popover documentation for more details.

Data Grid Features

Our goal is to keep the Data Grid API growing with each release. We have two important updates with v1.2:

Overlays

We've added support for overlay slots which allow you to create custom views for different states within the Data Grid viewport.

Simply add an overlays prop to the DataGrid with your options.

Each overlay comes with built-in presets or you can pass a custom component to render in it's stead.

No Content

For when there is no data to render, we have the noContent overlay.


Pending

Cerberus provides three different pending state overlays:

  • skeleton: an animated placeholder of the Data Grid.
  • linear-progress: an indeterminate linear progress bar.
  • circular-progress: a circular loading spinner.

For a custom solution, just provide your preferred component instead of one of these three options.

Skeleton


Linear


Circular


Checkout the Data Grid overlays documentation for more details.

Filtering

The Data Grid now supports three different types of filtering out of the box:

  1. Single-column filtering: Clicking the "Filter" option from the feature menu when the column has opted into filtering.
  2. Multi-column filtering: Following option 1 for any additional column
  3. Global filtering: Utilizing the setGlobalFilter action from the Data Grid Context.

Active Actions

Once a filter is active, the user can:

  1. Edit filters: Clicking the added "Edit filter" icon button that displays in the column header that has the active filter.
  2. Clear filters: Clicking the "Clear Filter" option in the column feature menu.

Note

Depending on your column definitions, you may notice header titles getting cut off. This is not a bug - the column just needs to be wider in the strict definition set.

In a future release we will also have column-resizing which will also help with this.


Checkout the Data Grid Filtering documentation for more details.

Thanks!

This is another great release introducing some beneficial tools and features.

A special thanks to everyone who has helped validate the APIs, docs, and submitted features or bugfixes for this release.

There is no "I" in Cerber-"US"

Upgrading

To upgrade to this release, you can install the latest version of Cerberus React:

Terminal
Copy
npm run up:cerberus
Terminal
Copy
pnpm run up:cerberus
Terminal
Copy
deno run npm:up:cerberus
Terminal
Copy
bun run up:cerberus
Copy
'use client'

import { Box, Circle, Divider, Float, HStack, Stack } from '@/styled-system/jsx'
import { AiAgentInvocation, Chat, Time, UserFollow } from '@carbon/icons-react'
import { Avatar, Button, ButtonGroup, Popover, Text } from '@cerberus/react'

export function SlotsDemo() {
  return (
    <Popover trigger={<Button>Trigger</Button>} size="lg">
      <Popover.Header>
        <HStack gap="md" pb="lg" w="full">
          <Box pos="relative">
            <Avatar fallback={<AiAgentInvocation />} gradient="asphodel-dark" />
            <Float placement="bottom-end" offsetX="1" offsetY="1">
              <Circle
                bgColor="success.bg.active"
                outline="0.2em solid"
                outlineColor="page.surface.initial"
                size="8px"
              />
            </Float>
          </Box>

          <Stack direction="column" gap="xs">
            <Popover.Title textStyle="heading-xs">Cerby tha Dawg</Popover.Title>
            <Popover.Description as="small" color="page.text.100" textStyle="body-xs">
              The best boi there is
            </Popover.Description>
          </Stack>
        </HStack>
      </Popover.Header>

      <Divider color="page.border.initial" thickness="1px" />

      <Popover.Body>
        <HStack color="page.text.100" gap="sm" w="full">
          <Time />
          <Text color="page.text.initial">6:66 Local Time</Text>
        </HStack>
      </Popover.Body>

      <Popover.Footer>
        <ButtonGroup>
          <Button size="sm" usage="outlined-subtle">
            <Chat />
            Message
          </Button>
          <Button size="sm" usage="outlined-subtle">
            <UserFollow />
            Add
          </Button>
        </ButtonGroup>
      </Popover.Footer>
    </Popover>
  )
}
Copy
'use client'

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

export function CircularDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        pending
        columns={columns}
        data={data()}
        overlays={{
          pending: 'circular',
        }}
      />
    </HStack>
  )
}
Copy
'use client'

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

export function BasicDemo() {
  const data = createFakeQuery(1000)
  return (
    <Box h="20rem" w="90%">
      <DataGrid columns={columns} data={data()} />
    </Box>
  )
}

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

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

export function DefaultNoContentDemo() {
  const data = createFakeQuery(0)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid columns={columns} data={data()} />
    </HStack>
  )
}
Copy
'use client'

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

export function LinearDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        pending
        columns={columns}
        data={data()}
        overlays={{
          pending: 'linear',
        }}
      />
    </HStack>
  )
}
Copy
'use client'

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

export function SkeletonDemo() {
  const data = createFakeQuery(25)
  return (
    <HStack h="20rem" w="3/4">
      <DataGrid
        pending
        columns={columns}
        data={data()}
        overlays={{
          pending: 'skeleton',
        }}
      />
    </HStack>
  )
}
Cerby tha Dawg
The best boi there is

6:66 Local Time