Skip to content

Custom paginationIcon just like sortIcons #755

@techdiary

Description

@techdiary

Is your feature request related to a problem? Please describe.
I want to change the left/right arrow icons used in the DataTable pagination but they are hard-coded in the current implementation. This prevents customizing icon sets (Tabler, Heroicons, custom SVGs) or switching to RTL-friendly arrows without a hack.

Describe the solution you’d like

  • Add an optional prop (e.g. paginationIcons) to DataTable (or the Pagination subcomponent) that accepts React nodes for pagination controls — similar to how sortIcons is provided. This should allow passing custom icons for: first, prev, next, last (and/or page if needed).
  • Keep aria-label attributes (e.g., “Go to previous page”, “Go to next page”) on the buttons regardless of icon override — the icon prop should not replace accessible labels.

Describe alternatives you’ve considered
No clean workaround found without forking the component. Exposing a prop is the cleanest API-consistent approach.

Proposed API (TypeScript)

type PaginationIcons = {
  first?: React.ReactNode;
  previous?: React.ReactNode;
  next?: React.ReactNode;
  last?: React.ReactNode;
};

interface DataTableProps<T> {
  // ...existing props
  paginationIcons?: PaginationIcons;
}

Example usage

import { DataTable } from 'mantine-datatable';
import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from '@tabler/icons-react';

<DataTable
  data={data}
  // other props...
  paginationIcons={{
    first: <IconChevronsLeft size={16} />,
    previous: <IconChevronLeft size={16} />,
    next: <IconChevronRight size={16} />,
    last: <IconChevronsRight size={16} />,
  }}
/>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions