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.
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>
);
}
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.
"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>
);
}
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.
"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;
}
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();