āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/1771-technologies/lytenyte/(row)/row-pagination ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
LyteNyte Grid lets you split large datasets into pages, making them easier to navigate. Row
pagination uses the useClientRowDataSourcePaginated row data source.
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.
!demo:Row Pagination="./demos/row-pagination"
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);
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);
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā