Blog>
Snippets

Pinning Multiple Columns

Showcase how to pin multiple columns on both the left and right sides of the table, emphasizing the order of pinned columns.
const columnDefs = [
  { field: 'athlete', pinned: 'left' }, // Pinned to the left
  { field: 'age' }, // Regular, non-pinned column
  { field: 'country', pinned: 'left' }, // Also pinned to the left
  { field: 'year' }, // Another regular, non-pinned column
  { field: 'date' }, // Yet another non-pinned column
  { field: 'sport', pinned: 'right' } // Pinned to the right
];
This code defines column definitions for a grid where the 'athlete' and 'country' columns are pinned to the left side of the table, and the 'sport' column is pinned to the right. Columns are pinned by setting the 'pinned' property to either 'left' or 'right'. The order of the pinned columns on each side follows the order they are defined in the array.