Responsive Container

Learn how to create a responsive container for LyteNyte Grid using various approaches, from fixed sized containers to grid and flex based containers.

LyteNyte Grid lacks inherent dimensions. Since the viewport fills its parent container, the parent must have a defined size for the grid to render correctly. Although it doesn't have a defined size, LyteNyte Grid remains fully responsive. To ensure responsiveness, make sure its parent element is responsive.

Place LyteNyte Grid as the sole child of its container. Do not include sibling elements.

Pixel Value

Fixed pixel values for height and width provide the simplest sizing option but limit flexibility. In most cases, set a fixed height and allow the width to adjust based on the parent container. Set a fixed width only when necessary.

Pixel Height and Width

"use client";

import "@1771technologies/lytenyte-pro/grid.css";
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useId } from "react";
import { BalanceCell, DurationCell, NumberCell } from "./components";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

export default function PixelHeightContainer() {
  const ds = useClientRowDataSource({ data: bankDataSmall });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: { width: 100 },
  });

  const view = grid.view.useValue();

  return (
    <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={tw(
                          "flex h-full w-full items-center px-2 text-sm capitalize",
                          c.column.type === "number" && "justify-end",
                        )}
                      />
                    );
                  })}
                </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={tw(
                            "flex h-full w-full items-center px-2 text-sm",
                            c.column.type === "number" && "justify-end",
                          )}
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

export function NumberCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

The height of the grid viewport comes from the div that contains it, which uses the following code:

<div className="lng-grid" style={{ height: 500 }}>
  {/* Grid components */}
</div>

Flex Height Containers

Flexbox layouts distribute space dynamically. When you assign flex: 1 to a Flexbox child, it expands to fill the available space. Since Flexbox containers grow with their content, wrap LyteNyte Grid in an inner div with position: absolute, width: 100%, and height: 100% to prevent the grid from increasing the container's height. The grid then fills the space without overflow.

Flex Height Container

"use client";
import "@1771technologies/lytenyte-pro/grid.css";
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useId } from "react";
import { BalanceCell, DurationCell, NumberCell } from "./components";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

export default function FlexHeightContainer() {
  const ds = useClientRowDataSource({ data: bankDataSmall });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: { width: 120 },
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1", position: "relative" }}>
        <div style={{ position: "absolute", width: "100%", height: "100%" }}>
          <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={tw(
                              "flex h-full w-full items-center px-2 text-sm capitalize",
                              c.column.type === "number" && "justify-end",
                            )}
                          />
                        );
                      })}
                    </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={tw(
                                "flex h-full w-full items-center px-2 text-sm",
                                c.column.type === "number" && "justify-end",
                              )}
                            />
                          );
                        })}
                      </Grid.Row>
                    );
                  })}
                </Grid.RowsCenter>
              </Grid.RowsContainer>
            </Grid.Viewport>
          </Grid.Root>
        </div>
      </div>
    </div>
  );
}

function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

export function NumberCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

The flex height container uses a series of nested divs, as shown below:

<div className="lng-grid" style={{ height: 500, display: "flex", flexDirection: "column" }}>
  <div style={{ flex: "1", position: "relative" }}>
    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
      {/* Grid components */}
    </div>
  </div>
</div>

Grid Height Containers

CSS Grid (not to be confused with LyteNyte Grid) provides a flexible layout system. Within a grid container, LyteNyte Grid expands to fill its assigned area while remaining properly contained.

Grid Height Container

"use client";

import "@1771technologies/lytenyte-pro/grid.css";
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useId } from "react";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
import { BalanceCell, DurationCell, NumberCell } from "./components";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "job", width: 120 },
  { id: "age", type: "number", width: 80, cellRenderer: NumberCell },
  { id: "balance", type: "number", cellRenderer: BalanceCell },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number", cellRenderer: NumberCell },
  { id: "month" },
  { id: "duration", type: "number", cellRenderer: DurationCell },
  { id: "poutcome", name: "P Outcome" },
  { id: "y" },
];

export default function GridHeightContainer() {
  const ds = useClientRowDataSource({ data: bankDataSmall });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: { width: 100 },
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ display: "grid", gridTemplateRows: "500px" }}>
      <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={tw(
                          "flex h-full w-full items-center px-2 text-sm capitalize",
                          c.column.type === "number" && "justify-end",
                        )}
                      />
                    );
                  })}
                </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={tw(
                            "flex h-full w-full items-center px-2 text-sm",
                            c.column.type === "number" && "justify-end",
                          )}
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";

export type BankData = (typeof bankDataSmall)[number];

const formatter = new Intl.NumberFormat("en-US", {
  maximumFractionDigits: 2,
  minimumFractionDigits: 0,
});
export function BalanceCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  if (typeof field === "number") {
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;

    return "$" + formatter.format(field);
  }

  return `${field ?? "-"}`;
}
export function DurationCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
}

export function NumberCell({ grid, row, column }: CellRendererParams<BankData>) {
  const field = grid.api.columnField(column, row);

  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
}

The grid height container uses the grid-template-rows property, as shown below:

<div className="lng-grid" style={{ display: "grid", gridTemplateRows: "500px" }}>
  {/* Grid components */}
</div>

Other CSS sizing techniques also work well with LyteNyte Grid. Choose the approach that best fits your layout requirements.

Next Steps

Headless Component Parts: Learn about the component parts that make up LyteNyte Grid.
Grid Events: Learn how to handle events fired by LyteNyte Grid and different approaches to event handling.
Grid Atoms & Reactivity: Learn how to manage reactivity and state changes in LyteNyte Grid.

Responsive ContainerCopy Page