SelectablePagination#

@palmyralabs/rt-forms-mantine · grid/plugins/pagination/SelectablePagination.tsx

Overview#

Mantine Pagination plus a Select for page size. Delegates every action to the grid’s queryRef:

  • Page click → queryRef.current.gotoPage(n)
  • Page size change → queryRef.current.setPageSize(n) + re-query

Reads totals / current page / current limit from the same ref (getTotalRecords, getPageNo, getQueryLimit).

Signature#

const SelectablePagination = forwardRef(function pagination(
  o: DataGridPluginOptions,
  ref: RefObject<IPagination>,
): JSX.Element);

interface IPagination {
  refresh(): void;
}

Props — DataGridPluginOptions#

Injected by the parent grid. Consumed props:

Prop Type Purpose
queryRef RefObject<IPageQueryable> The grid’s query controller
pageSize number | number[]? Dropdown options (or a single fixed size)
ignoreSinglePage boolean? When true, hide pagination if totalPages ≤ 1

Example#

import { SelectablePagination } from '@palmyralabs/rt-forms-mantine';

<PalmyraGrid
  topic="manufacturer"
  columns={manufacturerColumns}
  endPoint="/mstManufacturer"
  pageSize={[15, 30, 45, 100]}
  plugins={{ Pagination: SelectablePagination }}
/>

Pass ignoreSinglePage through plugins options (or via a wrapper) to hide the pager on short result sets.

Backward FilterForm MUI Forward