Columns

Column Field

The field property in LyteNyte Grid determines the cell value for a given row in a specific column.

LyteNyte Grid supports four types of values for field:

String: When row data is an object. The string acts as a key to look up the value.
Number: When row data is an array. The number acts as the index in the array.
Function: A callback for custom calculations of a column's value.
Path object: { kind: "path"; path: string } to access nested values. kind must be "path", and path must specify the lookup.

field is optional. If omitted, LyteNyte Grid uses the column's id as a fallback.

Key Lookup Fields

When field is a string, the grid uses it as a key to access the value in object row data.

Key Lookup Fields

"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";
 
type BankData = (typeof bankDataSmall)[number];
 
const columns: Column<BankData>[] = [
  { field: "age", id: "age", type: "number" },
  { field: "job", id: "job" },
  { field: "balance", id: "balance", type: "number" },
  { field: "education", id: "education" },
  { field: "marital", id: "marital" },
];
 
export default function ColumnFieldKey() {
  const ds = useClientRowDataSource({ data: bankDataSmall });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    columnBase: {
      widthFlex: 1,
    },
  });
 
  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="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>
  );
}

If no field is set, the grid uses the column id. Because id must be a string, this fallback behaves like a key lookup.

Number Index Fields

When field is a number, row data should be an array. The number acts as the index for retrieving the value.

Number Index Fields

"use client";
 
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { stockData } from "@1771technologies/sample-data/stock-data-smaller";
import { useId } from "react";
 
type StockData = (typeof stockData)[number];
 
const columns: Column<StockData>[] = [
  { field: 0, id: "ticker" },
  { field: 1, id: "full", widthFlex: 1 },
  { field: 2, id: "analyst-rating" },
  { field: 3, id: "price", type: "number" },
  { field: 4, id: "currency" },
];
 
export default function ColumnFieldNumberIndex() {
  const ds = useClientRowDataSource({ data: stockData });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  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="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 text-nowrap overflow-hidden text-ellipsis"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Function Fields

Set field to a function for maximum flexibility. The function can compute values using other columns.

Function Fields

"use client";
 
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { stockData } from "@1771technologies/sample-data/stock-data-smaller";
import { useId } from "react";
 
type Stock = (typeof stockData)[number];
 
const columns: Column<Stock>[] = [
  { field: 0, id: "ticker" },
  { field: 1, id: "full", widthFlex: 1 },
  { field: 2, id: "analyst-rating" },
  {
    field: ({ data }) => {
      if (data.kind === "branch" || !data.data) return null;
 
      const value = data.data[3] as number;
      return `$${value}`;
    },
    id: "price",
  },
  {
    field: ({ data }) => {
      if (data.kind === "branch" || !data.data) return null;
 
      const value = data.data[3] as number;
      return `£${(value / 1.28).toFixed(2)}`;
    },
 
    id: "Price (GBP @ 1.28)",
  },
];
 
export default function ColumnFieldFunction() {
  const ds = useClientRowDataSource({ data: stockData });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  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="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 text-nowrap overflow-hidden text-ellipsis"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Path Fields

Set field to { kind: "path", path: string } to access nested object values.

Path Fields

"use client";
 
import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { performance } from "@1771technologies/sample-data/performance";
import { useId } from "react";
 
type PerformanceData = (typeof performance)[number];
 
const columns: Column<PerformanceData>[] = [
  { id: "name" },
  { id: "q1", field: { kind: "path", path: "performance.q1" } },
  { id: "q2", field: { kind: "path", path: "performance.q2" } },
  { id: "q3", field: { kind: "path", path: "performance.q3" } },
  { id: "q4", field: { kind: "path", path: "performance.q4" } },
  { id: "q1 revenue", field: { kind: "path", path: "revenue[0]" } },
  { id: "q2 revenue", field: { kind: "path", path: "revenue[1]" } },
  { id: "q3 revenue", field: { kind: "path", path: "revenue[2]" } },
  { id: "q4 revenue", field: { kind: "path", path: "revenue[3]" } },
];
 
export default function ColumnFieldPath() {
  const ds = useClientRowDataSource({ data: performance });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  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="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>
  );
}

The path syntax matches Lodash's get:

{ kind: 1, path: "alpha.beta[0]" };
{ kind: 1, path: "beta[0].alpha" };

Which Field Type to Use

Prefer string or number fields for simplicity. Number fields are compact and efficient. Function and path fields add complexity and may prevent serialization of column definitions.

PreviousColumn Visibility

Next Column Groups