Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://icflorescu.github.io/mantine-datatable/examples/pagination below:

Examples › Pagination | Mantine DataTable

You can enable pagination by setting the following Mantine DataTable properties:

• page: number
  The current page number.
• onPageChange
  A callback that is executed when the user changes the current page.
• totalRecords: number
  The total number of records in the dataset.
• recordsPerPage: number
  The number of records per page.

If you’re not happy with the default pagination behavior, you can override it by setting these optional properties:

• loadingText: string
  A text to display while loading records.
• noRecordsText: string
  A text to display when no records are present.
• paginationText
  A callback receiving an object in the shape of { from: number; to: number; totalRecords: number } and returning a ReactNode representing the pagination text.
• paginationSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  The pagination size.
• paginationWrapBreakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}) | number
  A breakpoint below which the pagination footer content will wrap on multiple lines. Defaults to sm.
  You can also provide a string like '300px' or '20rem', or a number, in which case it will be interpreted as a pixel value and converted to rem value before being applied.
• paginationActiveTextColor: MantineColor | { light: MantineColor; dark: MantineColor }
  Color applied to active page button text.
  Can be a MantineColor (key of theme.colors or any valid CSS color string), or an object with light and dark keys and MantineColor values.
  Defaults to white.
• paginationActiveBackgroundColor: MantineColor | { light: MantineColor; dark: MantineColor }
  Color applied to active page button background.
  Can be a MantineColor (key of theme.colors or any valid CSS color string), or an object with light and dark keys and MantineColor values.
  Defaults to primary theme color.

Here is the code:

You can display a selector to let the user choose the page size by setting the following component properties:

• recordsPerPageOptions: number[]
  An array of page size numbers to display in the page size selector.
• onRecordsPerPageChange
  A callback that is executed when the user changes the page size. Receives the new page size as its argument.
• recordsPerPageLabel
  The page size selector label, defaulting to 'Records per page'.

You can provide additional props to pagination controls by using the getPaginationControlProps callback. For example, if you’re not happy with the default accessibility aria-labels, you can override them like so:

Head over to the next example to discover more features.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4