Column Resizing

Grid supports interactive column resizing. Users can drag column borders to adjust widths.

 <div controller={PageController}>
  <Grid
    records={m.records}
    style="height: 250px; margin-bottom: 10px"
    scrollable
    border
    onRef={(el, instance) => {
      instance.getControllerByType(PageController).gridInstance = instance
    }}
    columns={[
      {
        header: {
          text: "Name",
          width: m.colWidth.fullName,
          resizable: true,
          defaultWidth: 200,
        },
        field: "fullName",
        sortable: true,
      },
      {
        header: "Continent",
        width: m.colWidth.continent,
        resizable: true,
        field: "continent",
        sortable: true,
      },
      {
        header: "Browser",
        width: m.colWidth.browser,
        resizable: true,
        field: "browser",
        sortable: true,
      },
      {
        header: "OS",
        width: m.colWidth.os,
        resizable: true,
        field: "os",
        sortable: true,
      },
      {
        header: "Visits",
        width: m.colWidth.visits,
        resizable: false,
        field: "visits",
        sortable: true,
        align: "right",
      },
    ]}
  />
  <Button
    text="Reset column widths"
    onClick={(e, instance) => {
      instance.getControllerByType(PageController).resetColumnWidths()
    }}
  />
</div> 
 class PageController extends Controller {
  gridInstance?: GridInstance;

  onInit() {
    this.store.set(m.records, [
      {
        id: 1,
        fullName: "Alice Johnson",
        continent: "Europe",
        browser: "Chrome",
        os: "Windows",
        visits: 45,
      },
      {
        id: 2,
        fullName: "Bob Smith",
        continent: "Asia",
        browser: "Firefox",
        os: "macOS",
        visits: 23,
      },
      {
        id: 3,
        fullName: "Carol White",
        continent: "North America",
        browser: "Safari",
        os: "macOS",
        visits: 67,
      },
      {
        id: 4,
        fullName: "David Brown",
        continent: "Europe",
        browser: "Chrome",
        os: "Linux",
        visits: 12,
      },
      {
        id: 5,
        fullName: "Eva Green",
        continent: "Asia",
        browser: "Edge",
        os: "Windows",
        visits: 89,
      },
    ]);
  }

  resetColumnWidths() {
    this.gridInstance?.resetColumnWidths();
    this.store.delete(m.colWidth);
  }
} 
 interface Person {
  id: number;
  fullName: string;
  continent: string;
  browser: string;
  os: string;
  visits: number;
}

interface PageModel {
  records: Person[];
  colWidth: {
    fullName?: number;
    continent?: number;
    browser?: number;
    os?: number;
    visits?: number;
  };
  $record: Person;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Button, Grid, GridInstance } from "cx/widgets"; 

Name	Continent	Browser	OS	Visits
Alice Johnson	Europe	Chrome	Windows	45
Bob Smith	Asia	Firefox	macOS	23
Carol White	North America	Safari	macOS	67
David Brown	Europe	Chrome	Linux	12
Eva Green	Asia	Edge	Windows	89

Drag the column borders to resize. Double-click a border to auto-fit the column to its content.

Enabling Resizing

Set resizable: true on a column to enable resizing:

{
  header: "Name",
  field: "fullName",
  resizable: true,
}

Persisting Column Widths

Use a two-way binding for the width property to store column widths. Use defaultWidth for the initial width:

{
  header: {
    text: "Name",
    width: m.colWidth.fullName,
    resizable: true,
    defaultWidth: 200,
  },
  field: "fullName",
}

When using complex headers, width, resizable, and defaultWidth should be defined in the header object.

Resetting Column Widths

To reset column widths to defaults, clear both the store binding and the Grid’s internal state:

<Button
  text="Reset column widths"
  onClick={(e, instance) => {
    // Get grid instance via controller
    controller.gridInstance.setState({ colWidth: {} });
    store.delete("colWidth");
  }}
/>

Use onRef to capture the Grid instance for state manipulation:

<Grid
  onRef={(el, instance) => {
    instance.getControllerByType(PageController).gridInstance = instance;
  }}
  // ...
/>

Configuration

Property	Type	Description
`resizable`	`boolean`	Enable column resizing.
`width`	`number`	Current column width in pixels. Can be bound to persist changes.
`defaultWidth`	`number`	Initial column width before any resizing.