CxJS

Fixed Columns

Grid supports fixing columns to the left side. Fixed columns remain visible while scrolling horizontally through other columns.

<Grid
  controller={PageController}
  records={m.records}
  scrollable
  border
  style="height: 500px"
  lockColumnWidths
  fixedFooter
  mod="fixed-layout"
  columns={[
    {
      header: "#",
      field: "id",
      fixed: true,
      sortable: true,
      resizable: true,
      aggregate: "count",
      footer: { value: tpl(m.$group.id, "{0} records"), colSpan: 2 },
    },
    {
      header: "Name",
      field: "fullName",
      fixed: true,
      sortable: true,
      resizable: true,
      defaultWidth: 150,
    },
    {
      header: "Continent",
      field: "continent",
      sortable: true,
      resizable: true,
      defaultWidth: 120,
      aggregate: "distinct",
      footer: tpl(m.$group.continent, "{0} continents"),
    },
    {
      header: "Browser",
      field: "browser",
      sortable: true,
      resizable: true,
      defaultWidth: 100,
      aggregate: "distinct",
      footer: tpl(m.$group.browser, "{0} browsers"),
    },
    {
      header: "OS",
      field: "os",
      sortable: true,
      resizable: true,
      defaultWidth: 100,
      aggregate: "distinct",
      footer: tpl(m.$group.os, "{0} OSs"),
    },
    {
      header: "Visits",
      field: "visits",
      sortable: true,
      resizable: true,
      align: "right",
      defaultWidth: 80,
      aggregate: "sum",
      footer: m.$group.visits,
    },
    {
      header: "Revenue",
      field: "revenue",
      sortable: true,
      resizable: true,
      align: "right",
      format: "currency;USD;0",
      defaultWidth: 100,
      aggregate: "sum",
      footer: format(m.$group.revenue, "currency;USD;0"),
    },
  ]}
/>
#
Name
1Alice Johnson
2Bob Smith
3Carol White
4David Brown
5Eva Green
6Frank Miller
7Grace Lee
8Henry Wilson
9Iris Chen
10Jack Davis
11Karen Taylor
12Leo Martinez
13Mia Anderson
14Noah Thomas
15Olivia Jackson
16Paul Harris
17Quinn Martin
18Rachel Garcia
19Sam Robinson
20Tina Clark
20 records
20 records
Continent
Browser
OS
Visits
Revenue
EuropeChromeWindows45$1,250
AsiaFirefoxmacOS23$890
North AmericaSafarimacOS67$2,100
EuropeChromeLinux12$450
AsiaEdgeWindows89$3,200
EuropeChromeWindows34$980
AsiaSafarimacOS56$1,540
North AmericaFirefoxLinux28$720
AsiaChromeWindows91$2,890
EuropeEdgeWindows15$560
North AmericaChromemacOS73$2,340
EuropeFirefoxLinux42$1,120
AsiaSafarimacOS38$1,450
North AmericaChromeWindows61$1,780
EuropeEdgeWindows19$670
AsiaFirefoxLinux84$2,560
North AmericaChromemacOS52$1,890
EuropeSafarimacOS31$920
AsiaChromeWindows77$2,210
North AmericaFirefoxLinux46$1,350
3 continents4 browsers3 OSs983$30,870
3 continents4 browsers3 OSs983$30,870

Scroll horizontally to see the fixed columns stay in place.

Enabling Fixed Columns

Set fixed: true on columns that should remain visible:

columns={[
  { header: "#", field: "id", fixed: true },
  { header: "Name", field: "fullName", fixed: true },
  { header: "Continent", field: "continent" },
  // ... more scrollable columns
]}

Fixed columns appear on the left side of the grid in the order they are defined.

Required Grid Properties

For fixed columns to work properly, the Grid should be configured with:

<Grid
  scrollable
  lockColumnWidths
  fixedFooter
  mod="fixed-layout"
  columns={columns}
/>
  • scrollable - Enables horizontal scrolling
  • lockColumnWidths - Prevents column width changes during scroll
  • fixedFooter - Keeps the footer row visible at the bottom
  • mod="fixed-layout" - Uses fixed table layout for consistent column widths

Use aggregate and footer on columns to show aggregated values in a fixed footer:

{
  header: "Visits",
  field: "visits",
  aggregate: "sum",
  footer: { tpl: "{$group.visits}" }
}

Available aggregate types: sum, count, avg, min, max.

Configuration

PropertyTypeDescription
fixedbooleanFix this column to the left side.
aggregatestringAggregation type: sum, count, avg, min, max.
footerobjectFooter cell configuration. Use tpl for template strings.
lockColumnWidthsbooleanGrid property to lock column widths during scroll.
fixedFooterbooleanGrid property to keep the footer visible at the bottom.
modstringSet to "fixed-layout" for fixed table layout.

Limitations

  • Fixed columns do not support row grouping
  • All fixed columns must be defined before non-fixed columns

See also: Column Resizing, Grid