Column Autosizing
LyteNyte Grid can automatically size columns to fit their content. Columns do not need to be visible to be autosized. The grid uses custom heuristic functions to determine optimal widths based on content.
Autosizing can consider header width, cell content width, or both. For
each column, you can define autosizeHeaderFn and autosizeCellFn to
control width calculations. If you omit these, LyteNyte Grid uses a
default text measurement function.
Because LyteNyte Grid emphasizes custom header and cell renderers for highlighting key content, we recommend providing matching autosize functions when using custom renderers to ensure accurate sizing.
Autosizing API
Use the api.autosizeColumns method to autosize all columns or a
selected subset.
"use client";
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: Column<any>[] = [
{ id: "age", type: "number" },
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
{ id: "default" },
{ id: "housing" },
{ id: "loan" },
{ id: "contact" },
{ id: "day", type: "number" },
{ id: "month" },
{ id: "duration" },
{ id: "campaign" },
{ id: "pdays" },
{ id: "previous" },
{ id: "poutcome" },
{ id: "y" },
];
export default function ColumnAutosizing() {
const ds = useClientRowDataSource({ data: bankDataSmall });
const grid = Grid.useLyteNyte({
gridId: useId(),
rowDataSource: ds,
columns,
});
const view = grid.view.useValue();
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="flex gap-2 py-2">
<button
className="bg-gray-900 text-white border border-gray-600 rounded px-2"
onClick={() => {
grid.api.columnAutosize({});
}}
>
Autosize Columns
</button>
<button
className="bg-gray-900 text-white border border-gray-600 rounded px-2"
onClick={() => grid.state.columns.set(columns)}
>
Reset Columns
</button>
</div>
<div className="lng-grid" style={{ height: 500 }}>
<Grid.Root grid={grid}>
<Grid.Viewport>
<Grid.Header>
{view.header.layout.map((row, i) => {
return (
<Grid.HeaderRow key={i} headerRowIndex={i}>
{row.map((c) => {
if (c.kind === "group") return null;
return (
<Grid.HeaderCell
key={c.id}
cell={c}
className="flex w-full h-full capitalize px-2 items-center"
/>
);
})}
</Grid.HeaderRow>
);
})}
</Grid.Header>
<Grid.RowsContainer>
<Grid.RowsCenter>
{view.rows.center.map((row) => {
if (row.kind === "full-width") return null;
return (
<Grid.Row row={row} key={row.id}>
{row.cells.map((c) => {
return (
<Grid.Cell
key={c.id}
cell={c}
className="text-sm flex items-center px-2 h-full w-full"
/>
);
})}
</Grid.Row>
);
})}
</Grid.RowsCenter>
</Grid.RowsContainer>
</Grid.Viewport>
</Grid.Root>
</div>
</div>
);
}The autosize method returns an AutosizeResult object with key-value
pairs where keys are column ids and values are the new sizes. It also
supports a "dry run" mode that calculates widths without applying them.
For details, see the API Reference.
Header Autosizing
Use autosizeHeaderFn on a column to define a custom header autosizing
function. This is helpful when you want headers included in width
calculations.
"use client";
import {
useClientRowDataSource,
Grid,
measureText,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const PADDING = 20;
const columns: Column<any>[] = [
{
id: "age",
type: "number",
headerRenderer: () => (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100%",
textAlign: "center",
}}
>
<div>The Age</div>
<div>Of Bank Account owner</div>
</div>
),
width: 160,
autosizeHeaderFn: (p) =>
(measureText(
"The Age Of Bank Account Owner",
p.grid.state.viewport.get() ?? undefined
)?.width ?? 0) + PADDING,
},
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export default function ColumnAutosizingHeader() {
const ds = useClientRowDataSource({ data: bankDataSmall });
const grid = Grid.useLyteNyte({
gridId: useId(),
rowDataSource: ds,
columns,
headerHeight: 60,
});
const view = grid.view.useValue();
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="flex gap-2 py-2">
<button
className="bg-gray-900 text-white border border-gray-600 rounded px-2"
onClick={() => {
grid.api.columnAutosize({ includeHeader: true });
}}
>
Autosize Columns
</button>
<button
className="bg-gray-900 text-white border border-gray-600 rounded px-2"
onClick={() => grid.state.columns.set(columns)}
>
Reset Columns
</button>
</div>
<div className="lng-grid" style={{ height: 500 }}>
<Grid.Root grid={grid}>
<Grid.Viewport>
<Grid.Header>
{view.header.layout.map((row, i) => {
return (
<Grid.HeaderRow key={i} headerRowIndex={i}>
{row.map((c) => {
if (c.kind === "group") return null;
return (
<Grid.HeaderCell
key={c.id}
cell={c}
className="flex w-full h-full capitalize px-2 items-center"
/>
);
})}
</Grid.HeaderRow>
);
})}
</Grid.Header>
<Grid.RowsContainer>
<Grid.RowsCenter>
{view.rows.center.map((row) => {
if (row.kind === "full-width") return null;
return (
<Grid.Row row={row} key={row.id}>
{row.cells.map((c) => {
return (
<Grid.Cell
key={c.id}
cell={c}
className="text-sm flex items-center px-2 h-full w-full"
/>
);
})}
</Grid.Row>
);
})}
</Grid.RowsCenter>
</Grid.RowsContainer>
</Grid.Viewport>
</Grid.Root>
</div>
</div>
);
}Cell Autosizing
autosizeCellFn controls how LyteNyte Grid calculates optimal cell
width. Each column can define its own function. If you use custom cell
renderers, provide a matching autosizeCellFn for accuracy.
In the example below, we set the base autosize function to autosize
columns to a width of 150px fixed. This makes all the columns take the
same width.
"use client";
import { useClientRowDataSource, Grid } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: Column<any>[] = [
{
id: "age",
type: "number",
width: 120,
},
{ id: "job", width: 180 },
{ id: "balance", type: "number" },
{ id: "education", width: 220 },
{ id: "marital" },
];
export default function ColumnAutosizingCell() {
const ds = useClientRowDataSource({ data: bankDataSmall });
const grid = Grid.useLyteNyte({
gridId: useId(),
rowDataSource: ds,
columns,
headerHeight: 60,
columnBase: {
autosizeCellFn: () => 150,
},
});
const view = grid.view.useValue();
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="flex gap-2 py-2">
<button
className="bg-gray-900 text-white border border-gray-600 rounded px-2"
onClick={() => {
grid.api.columnAutosize({});
}}
>
Autosize Columns
</button>
<button
className="bg-gray-900 text-white border border-gray-600 rounded px-2"
onClick={() => grid.state.columns.set(columns)}
>
Reset Columns
</button>
</div>
<div className="lng-grid" style={{ height: 500 }}>
<Grid.Root grid={grid}>
<Grid.Viewport>
<Grid.Header>
{view.header.layout.map((row, i) => {
return (
<Grid.HeaderRow key={i} headerRowIndex={i}>
{row.map((c) => {
if (c.kind === "group") return null;
return (
<Grid.HeaderCell
key={c.id}
cell={c}
className="flex w-full h-full capitalize px-2 items-center"
/>
);
})}
</Grid.HeaderRow>
);
})}
</Grid.Header>
<Grid.RowsContainer>
<Grid.RowsCenter>
{view.rows.center.map((row) => {
if (row.kind === "full-width") return null;
return (
<Grid.Row row={row} key={row.id}>
{row.cells.map((c) => {
return (
<Grid.Cell
key={c.id}
cell={c}
className="text-sm flex items-center px-2 h-full w-full"
/>
);
})}
</Grid.Row>
);
})}
</Grid.RowsCenter>
</Grid.RowsContainer>
</Grid.Viewport>
</Grid.Root>
</div>
</div>
);
}Virtualization Considerations
LyteNyte Grid uses row virtualization for performance. Only visible rows are considered in autosizing. If the viewport is not yet initialized, the grid uses about 50 rows for calculations.
For columns with a known set of possible values, consider an autosize function that returns the maximum width for those values, regardless of the visible rows.
Measure Text Helper
LyteNyte Grid (Core and PRO) exports a measureText helper. Use it to
estimate text width when building custom autosize functions.