resize-column
Description
Fires when resizing a columnUsage
"resize-column": ({
id: string | number,
width?: number,
auto?: boolean | "data" | "header",
maxRows?: number
}) => boolean|void;
Parameters
The callback of the action takes an object with the following parameters:
id
- (required) the ID of a column that is resizedwidth
- (optional) the width of a column in pixelsauto
- (optional) autoresizing with the following options:- true/false: enables/disables autoresizing when a column adjusts to its content
- "data": adjusts column width to the data size
- "header": adjusts column width to the header
maxRows
- (optional) the number of rows that should be processed to adjust the column width (if not set) to the row cell with the longest text
Returning false from the event handler will block resizing columns.
Example
The example below shows how to enable autoresizing of columns so that they automatically adjust to content:
<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" },
{ id: "email", header: "Email", editor: "text" },
{
id: "companyName",
header: "Company - long column name could be here",
editor: "text",
},
];
const init = (api) => {
// initialize to get the table with the calculated sizes
api.exec("resize-column", { id: "email", auto: "header" });
api.exec("resize-column", {
id: "companyName",
auto: "header",
maxRows: 20,
});
};
let api;
const resizeColumns = () => {
api.exec("resize-column", { id: "email", auto: "header" });
api.exec("resize-column", {
id: "companyName",
auto: "header",
maxRows: 20,
});
};
</script>
<div style="padding: 20px;">
<h4>Email and Company columns adjusted to header.</h4>
<Grid
{data}
{columns}
bind:this={api}
{init}
onupdatecell={resizeColumns} />
</div>
Related articles: