Skip to main content

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