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