Unbalanced Rows (Tree Data)

Hierarchical data may include leaf rows at varying depths, which is especially common in NoSQL databases. LyteNyte Grid supports representing these unbalanced hierarchies and can load them from a server source on demand.

Display A Tree of Data

When using LyteNyte Grid's server data source, it's important to understand that the grid view reflects the rows received from the server, not the models defined in the grid state. For example, if the row group model defines four grouping levels, LyteNyte Grid does not enforce that each row must be expandable four times to reach a leaf node.

This means the server data source can display tree data of any depth, as long as the server's data representation is consistent with the responses sent to the client.

The example below demonstrates this by creating a tree with varying branch levels. It does so without using row groups, though the same logic and pattern apply.

Unbalanced Rows

"use client";

import { Grid, useServerDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { useId } from "react";
import { Server } from "./server";
import { GroupCellRenderer, LastModified, SizeRenderer, tw } from "./components";

const columns: Column<any>[] = [
  { id: "name", width: 200, widthFlex: 1, cellRenderer: GroupCellRenderer },
  { id: "size", cellRenderer: SizeRenderer },
  { id: "last_modified", name: "Modified", cellRenderer: LastModified },
  { id: "type", width: 100, name: "Ext" },
];

export default function BasicServerData() {
  const ds = useServerDataSource<any>({
    dataFetcher: (params) => {
      return Server(params.requests);
    },
    blockSize: 50,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    rowGroupExpansions: { Documents: true },
    columns,
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport style={{ overflowY: "scroll" }}>
          <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.id === "size" && "justify-end",
                        )}
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer
            className={ds.isLoading.useValue() ? "animate-pulse bg-gray-100" : ""}
          >
            <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>
  );
}

import { ChevronDownIcon, ChevronRightIcon } from "@1771technologies/lytenyte-pro/icons";
import type { CellRendererParams } from "@1771technologies/lytenyte-pro/types";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { format } from "date-fns";
import type { CSSProperties } from "react";
import { twMerge } from "tailwind-merge";

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

const formatter = new Intl.NumberFormat("en-Us", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
function formatKBtoMB(kb: number) {
  if (isNaN(kb) || kb < 0) return "0";

  const mb = kb / 1024;
  const formatted = formatter.format(mb);

  // Add commas for readability
  return `${Number(formatted).toLocaleString()}`;
}

export function LastModified({ column, row, grid }: CellRendererParams<any>) {
  if (!grid.api.rowIsLeaf(row)) return null;

  const value = grid.api.columnField(column, row);

  return (
    <div className="flex w-full items-baseline justify-end gap-1 tabular-nums">
      {format(value as string, "dd MMM yyyy hh:mm:ss")}
    </div>
  );
}

export function SizeRenderer({ column, row, grid }: CellRendererParams<any>) {
  if (!grid.api.rowIsLeaf(row)) return null;

  const value = grid.api.columnField(column, row);

  return (
    <div className="flex w-full items-baseline justify-end gap-1 tabular-nums">
      {formatKBtoMB(value as number)} <span className="text-xs">MB</span>
    </div>
  );
}

export function GroupCellRenderer({ row, grid }: CellRendererParams<any>) {
  if (grid.api.rowIsLeaf(row)) {
    return (
      <div
        style={
          {
            paddingLeft: row.data.depth * 16 + 26,
            "--before-offset": `${row.data.depth * 16 - 5}px`,
          } as CSSProperties
        }
        className={tw(
          "relative flex h-full w-full items-center gap-2 overflow-hidden text-nowrap font-bold",
          row.data.depth > 0 &&
            "before:border-ln-gray-30 before:absolute before:left-[var(--before-offset)] before:top-0 before:h-full before:border-r before:border-dashed",
        )}
      >
        {row.data.name}
      </div>
    );
  }

  const isExpanded = grid.api.rowGroupIsExpanded(row);

  return (
    <div
      style={
        {
          paddingLeft: row.depth * 16,
          "--before-offset": `${row.depth * 16 - 5}px`,
        } as CSSProperties
      }
      className={tw(
        "relative flex h-full w-full items-center gap-2 overflow-hidden text-nowrap",
        row.depth > 0 &&
          "before:border-ln-gray-30 before:absolute before:left-[var(--before-offset)] before:top-0 before:h-full before:border-r before:border-dashed",
      )}
    >
      {row.loadingGroup && (
        <div className="w-5">
          <LoadingSpinner />
        </div>
      )}
      {!row.loadingGroup && (
        <button
          className="hover:bg-ln-gray-10 w-5 cursor-pointer rounded transition-colors"
          onClick={() => {
            grid.api.rowGroupToggle(row);
          }}
        >
          <span className="sr-only">Toggle the row group</span>
          {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
        </button>
      )}
      <div className="w-full overflow-hidden text-ellipsis">{row.key || "(none)"}</div>
    </div>
  );
}

const LoadingSpinner = () => {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <svg
        className="h-4 w-4 animate-spin text-blue-500"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
      >
        <circle
          className="opacity-25"
          cx="12"
          cy="12"
          r="8"
          stroke="currentColor"
          strokeWidth="4"
        ></circle>
        <path
          className="opacity-75"
          fill="currentColor"
          d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
        ></path>
      </svg>
    </div>
  );
};

import type {
  DataRequest,
  DataResponse,
  DataResponseBranchItem,
  DataResponseLeafItem,
} from "@1771technologies/lytenyte-pro/types";

import { data } from "./data";

const sleep = () => new Promise((res) => setTimeout(res, 600));

export async function Server(reqs: DataRequest[]) {
  // Simulate latency and server work.
  await sleep();

  return reqs.map((c) => {
    let pathNode = data;
    for (const p of c.path) {
      pathNode = pathNode[p!];
    }

    const rows = Object.entries(pathNode);

    return {
      asOfTime: Date.now(),
      data: rows.map<DataResponseLeafItem | DataResponseBranchItem>(([name, file]) => {
        if ("kind" in file)
          return { kind: "leaf", id: name, data: { ...file, name, depth: c.path.length } };

        return {
          kind: "branch",
          childCount: Object.values(file).length,
          data: { name },
          id: name,
          key: name,
        };
      }),
      start: 0,
      end: rows.length,
      kind: "center",
      path: c.path,
      size: rows.length,
    } satisfies DataResponse;
  });
}

In this example, a file viewer is implemented without leveraging LyteNyte Grid's rowGroupModel. The grid still tracks expansions using the rowGroupExpansions state property.

This is just one example of handling unbalanced rows. Another common use case is collapsing row groups that contain only a single child. The key takeaway is that LyteNyte Grid respects the rows returned by the server over the grid's internal state. The server is responsible for interpreting state, and the grid simply renders what the server provides.

Considerations

LyteNyte Grid's server data source automatically responds to changes in the grid's models. When these models change, the data source resets itself. In the example above, groups are created without using the row group model, so if the group data changes, it's the developer's responsibility to reset the data source. This can be done using the reset method on the server data source:

const ds = useServerDataSource<any>({...});

// In an effect or whenever the view should reset
ds.reset()

Next Steps

Optimistic Loading: use optimistic loading to prefetch data and improve responsiveness.
Server Row Grouping and Aggregation: handle grouped data and load group slices.
Handling Load Failures: explore how to handle failed data requests.

Unbalanced Rows (Tree Data)Copy Page

Display A Tree of Data

Unbalanced Rows

Considerations

Next Steps

On this page