Rows

Row Pagination

LyteNyte Grid lets you split large datasets into pages, making them easier to navigate. Row pagination uses the useClientRowDataSourcePaginated row data source.

Use Row Pagination

Provide LyteNyte Grid with a data source created by useClientRowDataSourcePaginated to enable pagination. This data source adds page properties you can use to control the current page and set the page size.

Row Pagination

"use client";
 
import {
  Grid,
  useClientRowDataSourcePaginated,
} from "@1771technologies/lytenyte-pro";
import { Pagination } from "@ark-ui/react/pagination";
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>[] = [
  { 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 RowPagination() {
  const ds = useClientRowDataSourcePaginated({
    data: bankDataSmall,
    rowsPerPage: 20,
  });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  const view = grid.view.useValue();
  return (
    <div>
      <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>
      <div>
        <Pagination.Root
          className="flex gap-2 text-sm py-2 justify-end px-2"
          count={bankDataSmall.length}
          pageSize={20}
          siblingCount={2}
          page={ds.page.current.useValue() + 1}
          onPageChange={(d) => {
            ds.page.current.set(d.page - 1);
          }}
        >
          <Pagination.PrevTrigger className="border rounded px-2 py-1 border-gray-500/50">
            Previous Page
          </Pagination.PrevTrigger>
          <Pagination.Context>
            {(pagination) =>
              pagination.pages.map((page, index) =>
                page.type === "page" ? (
                  <Pagination.Item
                    key={index}
                    {...page}
                    className="border rounded px-2 py-1 border-gray-500/50 data-[selected]:bg-brand/40"
                  >
                    {page.value}
                  </Pagination.Item>
                ) : (
                  <Pagination.Ellipsis key={index} index={index}>
                    &#8230;
                  </Pagination.Ellipsis>
                )
              )
            }
          </Pagination.Context>
          <Pagination.NextTrigger className="border rounded px-2 py-1 border-gray-500/50">
            Next Page
          </Pagination.NextTrigger>
        </Pagination.Root>
      </div>
    </div>
  );
}

Set Page Size

Control how many rows appear per page with the perPage property on the data source. LyteNyte Grid uses this value and the total row count to calculate the total number of pages.

const ds = useClientRowDataSourcePaginated({
  data: bankDataSmall,
  rowsPerPage: 20,
});
 
ds.page.perPage.set(40);

Change the Current Page

Use the current property on ds.page to get or set the current page. As a grid state property, it can be used reactively in your application.

const ds = useClientRowDataSourcePaginated({
  data: bankDataSmall,
  rowsPerPage: 20,
});
 
ds.page.current.set(3);

PreviousRow Detail (Master Detail)

Next Row Full Width