Columns

Column Floating Header

The floating row in LyteNyte Grid is a specialized header row that appears below the main column headers. It allows custom components to be rendered for each column. While commonly used for implementing filtering interfaces, the floating row can accommodate any type of component.

To display the floating header row, set the floatingRowEnabled property to true in the grid's configuration. Once enabled, a row will appear below the column headers with cells for each column. The content of each floating cell is determined by the column's floatingCellRenderer property.

Column Floating Cell

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { 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 function FloatingHeader() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    floatingRowEnabled: true,
 
    columnBase: {
      floatingCellRenderer: (p) => {
        return (
          <div
            style={{
              width: "100%",
              height: "100%",
              boxSizing: "border-box",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              paddingInline: 8,
            }}
          >
            <button
              onClick={() =>
                p.api.columnUpdate(p.column, {
                  width: p.api.columnVisualWidth(p.column) - 10,
                })
              }
            >
              -
            </button>
            Width: {p.api.columnVisualWidth(p.column)}
            <button
              onClick={() =>
                p.api.columnUpdate(p.column, {
                  width: p.api.columnVisualWidth(p.column) + 10,
                })
              }
            >
              +
            </button>
          </div>
        );
      },
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

Floating Cell Components

A column's floatingCellRenderer property can accept either a React component or a string. When providing a string, it serves as a lookup key to retrieve the actual component from those registered in the grid's state. The floatingCellRenderers property on the grid allows you to register a set of floating cell renderers that can be referenced by columns.

Floating Cell Registered

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import {
  ColumnProReact,
  FloatingCellRendererParamsProReact,
} from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { 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" },
];
 
function WidthAdjuster(p: FloatingCellRendererParamsProReact) {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        boxSizing: "border-box",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        paddingInline: 8,
      }}
    >
      <button
        onClick={() =>
          p.api.columnUpdate(p.column, {
            width: p.api.columnVisualWidth(p.column) - 10,
          })
        }
      >
        -
      </button>
      Width: {p.api.columnVisualWidth(p.column)}
      <button
        onClick={() =>
          p.api.columnUpdate(p.column, {
            width: p.api.columnVisualWidth(p.column) + 10,
          })
        }
      >
        +
      </button>
    </div>
  );
}
 
export function FloatingHeaderRegistered() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    floatingRowEnabled: true,
    floatingCellRenderers: { "width-adjuster": WidthAdjuster },
 
    columnBase: {
      floatingCellRenderer: "width-adjuster",
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

We recommend registering floating cell renderers and referencing them from columns rather than providing React components directly. This approach keeps columns serializable and improves debugging capabilities.

Toggling the Floating Row Visibility

You can toggle the floating row's visibility by modifying the floatingRowEnabled state value on the grid. Here's a simple function that demonstrates this capability:

const toggleFloatingFilter = () =>
  grid.state.floatingRowEnabled.set((prev) => !prev);

PreviousColumn Spanning

Next Marker Column