Pagination

import { createArraySource, createGrid, createSchema } from 'tally-core'

const schema = createSchema({
  key: 'id',
  columns: [{ id: 'account' }, { id: 'mrr', type: 'currency' }],
})

const rows = Array.from({ length: 500 }, (_, index) => ({
  id: index + 1,
  account: `Account ${index + 1}`,
  mrr: (index + 1) * 10,
}))

const source = createArraySource(rows, schema, { pagination: 'offset' })

export const grid = createGrid({ schema, source, pageSize: 50 })

await grid.load()
grid.setPage(2)

import type { ReactNode } from 'react'
import type { Grid } from 'tally-core'
import { useGridState } from 'tally-react'

export function PageInfo({ grid }: { grid: Grid }): ReactNode {
  const page = useGridState(grid, (state) => state.page)
  const matched = useGridState(grid, (state) => state.matched ?? state.total ?? 0)
  const pages = Math.max(1, Math.ceil(matched / page.size))
  return (
    <nav aria-label="Pages">
      <button
        type="button"
        disabled={page.index === 0}
        onClick={() => grid.setPage(page.index - 1)}
      >
        Previous
      </button>
      <span>
        {page.index + 1} / {pages}
      </span>
      <button
        type="button"
        disabled={page.index >= pages - 1}
        onClick={() => grid.setPage(page.index + 1)}
      >
        Next
      </button>
    </nav>
  )
}