Skip to content

Custom paginationIcon just like sortIcons #755

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} />,
  }}
/>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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