DocsBlog

  • 1.5.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Signals
Styling
Theming

Get Started

OverviewQuick StartColumnsContextTheme

Layout

DimensionsSizingSlotsOverlaysToolbarFooterPagination

Features

PinningSortingFilteringVisibility

Reference

API

On this page

Loading...

Loading...

Loading...

Loading...

Column Visibility

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

  • source

Overview

Column visibility allows you to control which columns are visible in the Data Grid. Users can access this feature through the column menu to show/manage columns.

There will be two options presented to the user:

  • Hide: Hides the column from view.
  • Manage: Allows the user to manage the visibility of all columns.

Once a column is hidden, it will not be visible in the Data Grid and the only way to show it is through the Manage option.

When there is only a single visible column left in the Grid, only the Manage option will be displayed.

How it works

When the visibility feature is enabled and the Manage popover is displayed, the user will see the list of all columns and can toggle their visibility via the checkbox next to each column.

If the column list equals or exceeds 7 columns, a Search input will be displayed to filter the column list.

Implementing column visibility

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

Default Visibility

To set a column to be hidden by default, you can use the defaultHidden property in the features.visibility object.

Options

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

ParamsRequiredDescription
defaultHiddenfalseWhether the column should be hidden by default.

On this page

  • Overview
  • How it works
  • Implementing column visibility
  • Default Visibility
  • Options
  • Edit this page on Github
Copy
'use client'

import { DataGrid } from '@cerberus/data-grid'
import { useQuery } from '@cerberus/signals'
import { Box } from 'styled-system/jsx'
import { queryEmployees } from '../api'
import { columns } from './columns'

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

// columnHelper.accessorFn((row) => `${row.firstName} ${row.lastName}`, {
//   id: 'fullName',
//   header: 'Employee',
//   minWidth: 300,
//   features: {
//     visibility: true,
//   },
//   cell: ({ row, value }) => (
//     <VStack alignItems="flex-start" gap="0">
//       <Text textStyle="body-md">{value}</Text>
//       <Text color="page.text.100" textStyle="label-sm">
//         {row.email}
//       </Text>
//     </VStack>
//   ),
// }),
Copy
export type VisibilityOptions = {
  defaultHidden: boolean
}

'use client'

import { Edit } from '@carbon/icons-react'
import { Format, IconButton, Text } from '@cerberus/react'
import { HStack, VStack, Box } from 'styled-system/jsx'
import { columnHelper } from '../quick-start/helper.demo'
import { useQuery } from '@cerberus/signals'
import { DataGrid } from '@cerberus/data-grid'
import { queryEmployees } from '../api'

export function HiddenDemo() {
  const data = useQuery(queryEmployees(200))
  return (
    <Box h="20rem" w="90%">
      <DataGrid columns={columns} data={data} />
    </Box>
  )
}

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

  columnHelper.accessorFn((row) => `${row.firstName} ${row.lastName}`, {
    id: 'fullName',
    header: 'Employee',
    minWidth: 300,
    features: { filter: true, sort: true, pinning: true, visibility: true },
    cell: ({ row, value }) => (
      <VStack alignItems="flex-start" gap="0">
        <Text textStyle="body-md">{value}</Text>
        <Text color="page.text.100" textStyle="label-sm">
          {row.email}
        </Text>
      </VStack>
    ),
  }),

  columnHelper.accessorFn((row) => row.department.name, {
    id: 'department',
    header: 'Department',
    features: {
      pinning: true,
      visibility: {
        defaultHidden: true,
      },
    },
  }),

  columnHelper.accessor('salary', {
    header: 'Salary',
    width: 135,
    features: {
      visibility: {
        defaultHidden: true,
      },
    },
    cell: ({ value }) => (
      <Format.Number value={value} style="currency" currency="USD" />
    ),
  }),

  columnHelper.display({
    id: 'lastLogin',
    header: 'Last Login',
    features: {
      pinning: true,
      visibility: {
        defaultHidden: true,
      },
    },
    cell: (cell) => (
      <Text color="page.text.100" textStyle="mono-xs">
        <Format.RelativeTime value={new Date(cell.row.lastLogin)} />
      </Text>
    ),
  }),

  columnHelper.display({
    id: 'lastName',
    header: 'Last Name',
    features: {
      pinning: true,
      visibility: {
        defaultHidden: true,
      },
    },
    cell: (cell) => <Text textStyle="body-md">{cell.row.lastName}</Text>,
  }),

  columnHelper.display({
    id: 'actions',
    header: 'Actions',
    width: 125,
    features: {
      pinning: true,
      visibility: {
        defaultHidden: true,
      },
    },
    cell: () => (
      <HStack justify="center" w="full">
        <IconButton ariaLabel="View more options">
          <Edit />
        </IconButton>
      </HStack>
    ),
  }),
]