DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
EscClose
  • 1.8.0

  • Day

    Night

    Preview

    Switch mode
  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Get started

Overview Quickstart Columns Context Theme

Layout

Dimensions SizingSlotsOverlaysToolbarFooterPagination

Features

Column PinningColumn SortingFilteringColumn Visibility

Reference

API

Column Pinning

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

  • source
View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

Overview

Pinned columns (also known as sticky, frozen, and locked) are visible at all times while scrolling the Data Grid horizontally. Users can access this feature through the column menu to pin and unpin columns to either the left or right side.

Implementing column pinning

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

Loading example...

Default Pinning

To set a column to be pinned by default, you can use the defaultPosition property in the features.pinning object.

Loading example...

Options

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

Loading example...
ParamsRequiredDescription
defaultPositionfalseWhether the column should be pinned by default.

On this page

  • Overview
  • Implementing column pinning
  • Default Pinning
  • Options
Edit this page on Github
Copy
export type PinningOptions = {
  defaultPosition?: boolean | 'left' | 'right' | undefined
}