Column Resizing

Grid supports column resizing.

Name	Continent	Browser	OS	Visits
Reta McLaughlin	Europe	Opera	Mac OS	55
Zola Legros	Africa	Chrome	iOS	84
Damion Rosenbaum	South America	Internet Explorer	Android	16
Vicenta Hintz	Africa	Internet Explorer	Android	26
Abby Feil	Europe	Internet Explorer	Mac OS	98
Philip Mraz	Asia	Firefox	Windows	93
Jude Lind	Antarctica	Firefox	Android	66
Jaquan Wolff	South America	Opera	Ubuntu	37
Elta Purdy	Africa	Edge	Ubuntu	35
Mckayla Kuhlman	Australia	Internet Explorer	Mac OS	78

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