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:

import { useRef } from "react";
import { Grid } from "@svar-ui/react-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",
  },
];

export default function Example() {
  const apiRef = useRef(null);

  const init = (api) => {
    // store API instance for later use
    apiRef.current = 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 = () => {
    apiRef.current?.exec("resize-column", { id: "email", auto: "data" });
    apiRef.current?.exec("resize-column", { id: "lastName", auto: "header" });
    apiRef.current?.exec("resize-column", {
      id: "companyName",
      auto: true,
      maxRows: 20,
    });
  };

  return (
    <Grid
      data={data}
      columns={columns}
      ref={apiRef}
      init={init}
      onUpdateCell={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:

import { Grid } from "@svar-ui/react-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 },
];

export default function ExampleResizable() {
  return <Grid data={data} columns={columns} />;
}

---

Related articles: How to access Grid API