📘
Slickgrid-React
Live DemoGitHub
  • Introduction
  • Getting Started
    • Quick start
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Autocomplete
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Custom Filter
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Slick Grid/DataView Objects
    • Slick Grid/DataView Objects
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Add, Update or Highlight a Datagrid Item
    • Dynamically Add CSS Classes to Item Rows
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header & Footer Slots
    • Header Menu & Header Buttons
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Providing data to the grid
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Locales
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Testing
    • Testing Patterns
  • Migrations
    • Migration Guide to 3.x (2023-05-29)
    • Migration Guide to 4.x (2023-12-15)
    • Migration Guide to 5.x (2024-05-10)
    • Versions 6 to 8 are skipped...
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
  • Component
  • Component
  • Component
Edit on GitHub
  1. Grid Functionalities

Pinning (frozen) of Columns/Rows

PreviousInfinite ScrollNextProviding data to the grid

Last updated 3 days ago

Demo

/

Introduction

One of the requested features, columns or rows pinning (aka frozen). You can pin 1 or more Columns and/or 1 or more Rows. Columns can only be pinned starting from the left side, while Rows can be pinned starting from the Top (default) or Bottom. You can also change the pinning dynamically with setOptions().

Columns/Rows Pinning basic

To set a pinning for the entire duration of the grid, simply use the Grid Options frozenColumn (starting from top) and frozenRow (starting from left), which are both number types.

Component

const Example: React.FC = () => {
  const [dataset, setDataset] = useState<any[]>([]);
  const [columns, setColumns] = useState<Column[]>([]);
  const [options, setOptions] = useState<GridOption | undefined>(undefined);

  useEffect(() => defineGrid(), []);

  function defineGrid() {
    setColumns([]);
    setOptions({
      alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
      frozenColumn: 2, // number of pinned columns starting from the left
      frozenRow: 3,    // number of pinned columns starting from the top
    });
  }

  return !options ? null : (
    <SlickgridReact gridId="grid1"
      columns={columns}
      options={options}
      dataset={dataset}
      onReactGridCreated={$event => reactGridReady($event.detail)}
      onGridStateChanged={$event => gridStateChanged($event.detail)}
    />
  );
}

Rows Pinning starting from bottom

This is basically the same thing as previous code sample, except that you will set the Grid Option property frozenBottom to true and that it's.

Component

const Example: React.FC = () => {
  const [dataset, setDataset] = useState<any[]>([]);
  const [columns, setColumns] = useState<Column[]>([]);
  const [options, setOptions] = useState<GridOption | undefined>(undefined);

  useEffect(() => defineGrid(), []);

  function defineGrid() {
      // your columns definition
    setColumns([]);
    setOptions({
      alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
      frozenColumn: 2,    // number of pinned columns starting from the left
      frozenRow: 3,       // number of pinned columns (starting from bottom with next property)
      frozenBottom: true, // this will make rows to be pinned starting from the bottom and the number of rows will be 3
    });
  }
}

Change Pinning Dynamically

Component

import { SlickgridReactInstance } from 'slickgrid-react';

const Example: React.FC = () => {
  const [dataset, setDataset] = useState<any[]>([]);
  const [columns, setColumns] = useState<Column[]>([]);
  const [options, setOptions] = useState<GridOption | undefined>(undefined);
  const [isFrozenBottom, setIsFrozenBottom] = useState(false);
  const reactGridRef = useRef<SlickgridReactInstance>();

  useEffect(() => defineGrid(), []);

  function reactGridReady(reactGrid: SlickgridReactInstance) {
    reactGridRef.current = reactGrid;
  }

  function defineGrid() {
    setColumns([ /*...*/ ]);
    setOptions({
      alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
      frozenColumn: 2, // number of pinned columns starting from the left
      frozenRow: 3,    // number of pinned columns starting from the top
    });
  }

  /** change dynamically, through slickgrid "setOptions()" the number of pinned columns */
  function changeFrozenColumnCount() {
    if (reactGridRef.current?.slickGrid.setOptions) {
      reactGridRef.current?.slickGrid.setOptions({
        frozenColumn: frozenColumnCount
      });
    }
  }

  /** change dynamically, through slickgrid "setOptions()" the number of pinned rows */
  function changeFrozenRowCount() {
    if (reactGridRef.current?.slickGrid.setOptions) {
      reactGridRef.current?.slickGrid.setOptions({
        frozenRow: frozenRowCount
      });
    }
  }

  /** toggle dynamically, through slickgrid "setOptions()" the top/bottom pinned location */
  function toggleFrozenBottomRows() {
    const newIsFrozenBottom = !isFrozenBottom;
    if (reactGridRef.current?.slickGrid.setOptions) {
      reactGridRef.current?.slickGrid.setOptions({
        frozenBottom: newIsFrozenBottom
      });
      setIsFrozenBottom(newIsFrozenBottom); // toggle the variable
    }
  }

  return !optionns ? null : (
    <div className="row">
      <div className="col-sm-12">
        <span>
          <label htmlFor="">Pinned Rows: </label>
          <input type="number" defaultValue={frozenRowCount} onInput={($event) => changeFrozenRowCount($event)} />
          <button className="btn btn-outline-secondary btn-xs btn-icon" onClick={() => setFrozenRowCount()}>
            Set
          </button>
        </span>
        <span style={{ marginLeft: '10px' }}>
          <label htmlFor="">Pinned Columns: </label>
          <input type="number" defaultValue={frozenColumnCount} onInput={($event) => changeFrozenColumnCount($event)} />
          <button className="btn btn-outline-secondary btn-xs btn-icon" onClick={() => setFrozenColumnCount()}>
            Set
          </button>
        </span>
      </div>
    </div>
  );
}

Animated Gif Demo

You can change the number of pinned columns/rows and even the pinning of columns from top to bottom. For a demo of what that could look like, take a look at the below.

Demo Page
Demo Component
Columns/Rows Pinning Basic
Rows Pinning starting from Bottom
Change Pinning Dynamically
Animated Gif Demo
Animated Gif Demo