Column Resizing

Grid supports column resizing.

Name	Continent	Browser	OS	Visits
Lue Brakus	North America	Safari	Ubuntu	57
Nat Schneider	South America	Opera	iOS	7
Llewellyn Gulgowski	Asia	Internet Explorer	Android	60
Nyah Schmidt	Africa	Opera	Ubuntu	34
Martin Schowalter	Australia	Chrome	Android	10
Enola Botsford	South America	Safari	Android	38
Abbigail Tremblay	Asia	Safari	Android	56
Estel Stoltenberg	Asia	Internet Explorer	iOS	33
Clyde Grant	South America	Opera	Ubuntu	25
Anabel Weber	Asia	Firefox	Mac OS	61

To enable resizing on a column, set the resizable flag to true.

If columns widths need to be persisted, add the width binding or use grid's onColumnResize event to process new measures. Use defaultWidth to set the initial width. These properties should be defined in the header object, but they can also be set on the column itself if there is only one header.

Double clicking on a resizer will calculate minimum width required to fit the content of the column.

Default column widths can be restored by clearing both column widths store and grid instance colWidth state. You can reset the default column widths by clearing both the column widths store and the Grid instance's colWidth state. To clear the colWidth state, maintain the grid instance using the onRef callback and apply the setState method.

Controller Grid

<Grid
    records-bind="$page.records"
    columns={[
        {
            header: {
                text: "Name",
                width: bind('$page.colWidth.fullName'),
                resizable: true,
                defaultWidth: 200
            },
            field: "fullName",
            sortable: true
        },
        {
            header: "Continent",
            width: bind('$page.colWidth.continent'),
            resizable: true,
            field: "continent",
            sortable: true
        },
        {
            header: "Browser",
            width: bind('$page.colWidth.browser'),
            resizable: true,
            field: "browser",
            sortable: true
        },
        {
            header: "OS",
            width: bind('$page.colWidth.os'),
            resizable: true,
            field: "os",
            sortable: true
        },
        {
            header: "Visits",
            width: bind('$page.colWidth.visits'),
            resizable: false,
            field: "visits",
            sortable: true,
            align: "right"
        }
    ]}
    scrollable
    style="max-height: 400px; margin-bottom: 10px"
    onRef={(el, instance) => {
        instance.controller.gridInstance = instance;
    }}
/>

<Button
    text="Reset column widths"
    onClick={(e, {store, controller}) => {
        controller.gridInstance.setState({ colWidth: {} });
        store.delete('$page.colWidth');
    }}
/>

Copied!Cx Fiddle

Documentation

Column Resizing