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 { Grid } from "@wx/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 App() {
    const api = useRef(null);

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

    return (
        <Grid
            data={data}
            columns={columns}
            api={api}
            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 "@wx/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 App() {
  return (
    <Grid data={data} columns={columns} />
  );
}

---

Related articles: How to access Grid API