icflorescu / icflorescu/mantine-datatable

Custom paginationIcon just like sortIcons

Open
#755 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.3k
Forks
102
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the DataTable pagination implementation or Pagination subcomponent and the existing sortIcons handling. Trace how the first, previous, next, and last controls render and where their aria-labels are assigned. Done means a paginationIcons API supports the requested React nodes without removing accessible labels.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.