Column Resizing

Grid supports column resizing.

Name	Continent	Browser	OS	Visits
Chester Turcotte	Australia	Edge	Mac OS	15
Jairo Lockman	Africa	Chrome	Ubuntu	83
Victor Prohaska	North America	Internet Explorer	Android	3
Brayan Mayer	Asia	Safari	Mac OS	41
Kylee Swift	South America	Opera	Android	50
Robyn Stroman	Africa	Safari	Windows	16
Oswaldo Crooks	Europe	Safari	Mac OS	69
Dejon King	Africa	Internet Explorer	Android	2
Collin Hickle	Asia	Internet Explorer	Android	52
Ignatius Rohan	Africa	Internet Explorer	Ubuntu	98

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