Row Data Source

Client Row Data Source

LyteNyte Grid's client data source is designed for scenarios where all grid data can be loaded into the browser. This data source operates with the assumption that the complete dataset is available on the client side. While it's the simplest of the available data sources, it's also the most feature-rich.

Creating a Client Data Source

The LyteNyte Grid package exports the useClientRowDataSource hook for creating a client data source. This hook accepts the initial row data and returns an object that implements the RowDataSourceEnterprise interface. For detailed information about this interface, please refer to the API Reference.

"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 RowDataSourceClient() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

Top and Bottom Data

You can provide the client data source with data for top and bottom pinned rows. These rows remain fixed at the top and bottom of the grid respectively, staying visible even as users scroll through the main dataset.

Pinned Top and Bottom

"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 RowDataSourceClientPinned() {
  const ds = useClientDataSource({
    data: bankDataSmall,
    topData: bankDataSmall.slice(0, 2),
    bottomData: bankDataSmall.slice(3, 5),
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

Filtering and Sorting Dates

The built-in filters and sort comparators in the client row data source work with native JavaScript Date objects when handling date columns. Since your column data is unlikely to already be Date objects, the client row data source accepts filterToDate and sortToDate parameters that convert values from a given column into proper Date objects.

To Date Functions

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { companiesWithPricePerf } from "@1771technologies/sample-data/companies-with-price-performance";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "Company" },
  {
    id: "YearEnd",
    headerName: "Year End",
    sortable: true,
    type: "date",
    uiHints: { sortButton: true },
  },
  { id: "Employee Cnt" },
  { id: "Country" },
  { id: "Price" },
];
 
export function RowDataSourceClientDate() {
  const ds = useClientDataSource({
    data: companiesWithPricePerf,
 
    sortToDate: (c) => {
      if (!c) return new Date();
 
      return parseMonthDay(c as string);
    },
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}
 
function parseMonthDay(
  dateString: string,
  year: number = new Date().getFullYear()
): Date {
  // Create a date from the string plus the current year
  const date = new Date(`${dateString}, ${year}`);
  console.log(date);
 
  // Check if the date is valid
  if (isNaN(date.getTime())) {
    throw new Error("Invalid date string format");
  }
 
  return date;
}

Getting the Grid Data

LyteNyte Grid's API doesn't provide a direct method to retrieve all data from the grid, as different data sources have different loading mechanisms and restrictions. However, the client row data source includes a data function that you can call to access all available data in the source.

const ds = useClientDataSource({
  data: companiesWithPricePerf,
});
 
// Grab all the row data
const rowData = ds.data();

PreviousIntroduction

Next Server Row Data Source