-
-
Notifications
You must be signed in to change notification settings - Fork 87
Open
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} />,
}}
/>victoria-petrone
Metadata
Metadata
Assignees
Labels
No labels