# Column Resizing

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

```tsx
import { createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Button, Grid, GridInstance } from "cx/widgets";

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>();

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);
  }
}

export default (
  <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>
);

```

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:

```tsx
{
  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:

```tsx
{
  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:

```tsx
<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:

```tsx
<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. |

See also: [Column Reordering](/docs/tables/column-reordering), [Grid](/docs/tables/grid)