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.

Autosizing Api

"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="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={() => {
            grid.api.columnAutosize({});
          }}
        >
          Autosize Columns
        </button>
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          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 h-full w-full items-center px-2 capitalize"
                        />
                      );
                    })}
                  </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="flex h-full w-full items-center px-2 text-sm"
                          />
                        );
                      })}
                    </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.

Header Autosizing

"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="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={() => {
            grid.api.columnAutosize({ includeHeader: true });
          }}
        >
          Autosize Columns
        </button>
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          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 h-full w-full items-center px-2 capitalize"
                        />
                      );
                    })}
                  </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="flex h-full w-full items-center px-2 text-sm"
                          />
                        );
                      })}
                    </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.

Cell Autosizing

"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="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={() => {
            grid.api.columnAutosize({});
          }}
        >
          Autosize Columns
        </button>
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          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 h-full w-full items-center px-2 capitalize"
                        />
                      );
                    })}
                  </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="flex h-full w-full items-center px-2 text-sm"
                          />
                        );
                      })}
                    </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.

Column AutosizingCopy Page

Autosizing API

Autosizing Api

Header Autosizing

Header Autosizing

Cell Autosizing

Cell Autosizing

Virtualization Considerations

Measure Text Helper

On this page