icflorescu / icflorescu/mantine-datatable
Custom paginationIcon just like sortIcons
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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