Resizing

Enabling column/header autoresizing

To make the table automatically adjust to its content or header, call the resize-column action by applying the api.exec() method and set the auto parameter to header, data or true (to adjust to both header and data).

In the example below:

• the Last Name column is adjusted to header
• the Email column is adjusted to data
• the Company column is adjusted to data and header

Example:

<script>
    import { Grid } from "@wx/svelte-grid";

    import { getData } from "./common/data";
    const { data } = getData();

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

    let api;

    const init = (api) => {
        api.exec("resize-column", { id: "email", auto: "data" });
        api.exec("resize-column", { id: "lastName", auto: "header" });
        api.exec("resize-column", {
            id: "companyName",
            auto: true,
            maxRows: 20,
        });
    };

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

  <Grid 
   {data}
   {columns}
   bind:api
   {init}
   on:update-cell={resizeColumns} />

Creating resizable columns

To make a column resizable by dragging the border in the header cell, set the resize parameter of the columns property to true.

Example:

<script>
  import { Grid } from "@wx/svelte-grid";
  import { getData } from "./common/data";
  const { data } = getData();

  const columns = [
    { id: "id", width: 50, resize: true },
    { id: "city", header: "City", width: 160, resize: true },
    { id: "email", header: "Email", width: 250, resize: true },
    { id: "firstName", header: "First Name", resize: true },
    { id: "lastName", header: "Last Name", resize: true },
  ];
</script>

 <Grid {data} {columns} />

---

Related articles: How to access Grid API