Skip to main content

resize-column

Description​

Fires when resizing a column

Usage​

"resize-column": ({
    id: string | number,
    width?: number,
    auto?: boolean | "data" | "header",
    maxRows?: number
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the ID of a column that is resized
  • width - (optional) the width of a column in pixels
  • auto - (optional) autoresizing with the following options:
    • true/false: enables/disables autoresizing when a column adjusts to its content
    • "data": adjusts column width to the data size
    • "header": adjusts column width to the header
  • maxRows - (optional) the number of rows that should be processed to adjust the column width (if not set) to the row cell with the longest text

Returning false from the event handler will block resizing columns.

Example​

The example below shows how to enable autoresizing of columns so that they automatically adjust to content: 

<script>
    import { Grid } from "../src";
    import { getData } from "./common/data";
    const { data } = getData();

    const columns = [
        { id: "id", width: 50 },
        { id: "firstName", header: "First Name" },
        { id: "lastName", header: "Last Name" },
        { id: "email", header: "Email", editor: "text" },
        {
            id: "companyName",
            header: "Company - long column name could be here",
            editor: "text",
        },
    ];

    let api;

    const init = (api) => {
        // initialize to get the table with the calculated sizes
        api.exec("resize-column", { id: "email", auto: "header" });
        api.exec("resize-column", {
            id: "companyName",
            auto: "header",
            maxRows: 20,
        });
    };

    const resizeColumns = () => {
        api.exec("resize-column", { id: "email", auto: "header" });
        api.exec("resize-column", {
            id: "companyName",
            auto: "header",
            maxRows: 20,
        });
    };
</script>

<div style="padding: 20px;">
 <h4>Email and Company columns adjusted to header.</h4>
 <Grid 
  {data}
  {columns}
  bind:api
  {init}
  on:update-cell={resizeColumns} />
</div>

Related articles: