Skip to content

Commit ffbcf36

Browse files
icflorescuicflorescu
authored
Merge pull request #769 from icflorescu/next
Release 8.3.8
2 parents 0366bdc + 7bf6a75 commit ffbcf36

File tree

13 files changed

+727
-637
lines changed

13 files changed

+727
-637
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
The following is a list of notable changes to the Mantine DataTable component.
44
Minor versions that are not listed in the changelog are bug fixes and small improvements.
55

6+
## 8.3.8 (2025-11-17)
7+
8+
- Fix [#758](https://github.com/icflorescu/mantine-datatable/discussions/758) - implement `getPaginationItemProps`
9+
- Update deps to ensure compatibility with Mantine 8.3.8
10+
611
## 8.3.7 (2025-11-10)
712

813
- Fix [#763](https://github.com/icflorescu/mantine-datatable/issues/763) regression introduced in [#749](https://github.com/icflorescu/mantine-datatable/pull/749)

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ The [lightweight](https://bundlephobia.com/package/mantine-datatable), dependenc
3636
- **[Drag-and-drop support](https://icflorescu.github.io/mantine-datatable/examples/row-dragging)** - implemented using [@hello-pangea/dnd](https://github.com/hello-pangea/dnd) thanks to the outstanding work of [Mohd Ahmad](https://github.com/MohdAhmad1)
3737
- **More** - check out the [full documentation](https://icflorescu.github.io/mantine-datatable/)
3838

39-
## Trusted by the community
39+
## Trusted by thousands of developers and companies from around the world
40+
41+
Used by [Microsoft](https://www.microsoft.com/) in [Agent Lightning](https://github.com/microsoft/agent-lightning).
4042

4143
[Emil Sorensen](https://github.com/Emil-Sorensen) @ [kapa.ai](https://kapa.ai/):
4244

@@ -46,7 +48,7 @@ The [lightweight](https://bundlephobia.com/package/mantine-datatable), dependenc
4648

4749
> _Thank you for the wonderful, useful, and beautiful DataTable that has allowed me to create several applications without any problem 👏_
4850
49-
Mantine DataTable is used by developers and companies around the world, such as: [Namecheap](https://www.namecheap.com/), [EasyWP](https://www.easywp.com/), [CodeParrot.AI](https://codeparrot.ai), [OmicsStudio](https://omicsstudio.com), [SegmentX](https://segmentx.ai), [Aquarino](https://www.aquarino.com.br/), [Dera](https://getdera.com/), [kapa.ai](https://kapa.ai/), [exdatis.ai](https://exdatis.ai/), [teachfloor](https://www.teachfloor.com/), [MARKUP](https://www.getmarkup.com/), [BookieBase](https://bookiebase.ie/), [zipline](https://zipline.diced.tech/), [Pachtop](https://github.com/pacholoamit/pachtop), [Ganymede](https://github.com/Zibbp/ganymede), [COH3 Stats](https://coh3stats.com/), [Culver City Rental Registry](https://www.ccrentals.org/) and many more.
51+
Mantine DataTable is used by developers and companies around the world, from startups to S&P 500, such as: [Microsoft](https://www.microsoft.com/), [Namecheap](https://www.namecheap.com/), [EasyWP](https://www.easywp.com/), [CodeParrot.AI](https://codeparrot.ai), [OmicsStudio](https://omicsstudio.com), [SegmentX](https://segmentx.ai), [Aquarino](https://www.aquarino.com.br/), [Dera](https://getdera.com/), [kapa.ai](https://kapa.ai/), [exdatis.ai](https://exdatis.ai/), [teachfloor](https://www.teachfloor.com/), [MARKUP](https://www.getmarkup.com/), [BookieBase](https://bookiebase.ie/), [zipline](https://zipline.diced.tech/), [Pachtop](https://github.com/pacholoamit/pachtop), [Ganymede](https://github.com/Zibbp/ganymede), [COH3 Stats](https://coh3stats.com/), [Culver City Rental Registry](https://www.ccrentals.org/) and many more.
5052

5153
If you're using Mantine DataTable in your project, please drop me a line at the email address listed in my [GitHub profile](https://github.com/icflorescu) and I'll be happy to add it to the list and on the [documentation website](https://icflorescu.github.io/mantine-datatable/).
5254

‎app/(home)/HomePageSubtitle.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
height: auto;
66
}
77

8-
.iconTrust {
8+
.iconGreen {
99
color: var(--mantine-color-green-filled);
1010
}
1111

12-
.iconCompat {
12+
.iconBlue {
1313
color: var(--mantine-color-blue-filled);
1414
}
1515

16-
.iconOldVersion {
16+
.iconRed {
1717
color: var(--mantine-color-red-filled);
1818
}
1919

‎app/(home)/HomePageSubtitle.tsx‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import { Group, Stack, Text } from '@mantine/core';
2-
import { IconArrowDown, IconDiscountCheck, IconExternalLink, IconInfoCircle } from '@tabler/icons-react';
2+
import {
3+
IconArrowDown,
4+
IconDiscountCheck,
5+
IconExternalLink,
6+
IconHeartFilled,
7+
IconInfoCircle,
8+
IconScale,
9+
} from '@tabler/icons-react';
310
import clsx from 'clsx';
411
import {
12+
AUTHOR_LINK,
13+
LICENSE_LINK,
514
MANTINE_CONTEXTMENU_LINK,
615
MANTINE_CONTEXTMENU_PRODUCT_NAME,
716
MANTINE_LINK,
17+
REPO_LINK,
18+
SPONSORS_LINK,
819
V6_WEBSITE_LINK,
920
} from '~/app/config';
1021
import { ExternalLink } from '~/components/ExternalLink';
@@ -15,26 +26,39 @@ export function HomePageSubtitle() {
1526
return (
1627
<Stack gap={4}>
1728
<Group gap={8} align="flex-start" wrap="nowrap">
18-
<IconDiscountCheck className={clsx(classes.leftIcon, classes.iconTrust)} />
29+
<IconDiscountCheck className={clsx(classes.leftIcon, classes.iconGreen)} />
1930
<Text size="sm">
20-
trusted by{' '}
31+
used and trusted by{' '}
2132
<PackageUsersAnchor className="nowrap">
22-
awesome companies and developers{' '}
23-
<IconArrowDown className={clsx(classes.linkIcon, classes.scrollDownIcon)} />
33+
major companies <IconArrowDown className={clsx(classes.linkIcon, classes.scrollDownIcon)} />
2434
</PackageUsersAnchor>
2535
</Text>
2636
</Group>
2737
<Group gap={8} align="flex-start" wrap="nowrap">
28-
<IconDiscountCheck className={clsx(classes.leftIcon, classes.iconTrust)} />
38+
<IconDiscountCheck className={clsx(classes.leftIcon, classes.iconGreen)} />
2939
<Text size="sm">
30-
built by the creator of{' '}
40+
built by <ExternalLink to={AUTHOR_LINK}>the creator</ExternalLink> of{' '}
3141
<ExternalLink className="nowrap" to={MANTINE_CONTEXTMENU_LINK}>
3242
{MANTINE_CONTEXTMENU_PRODUCT_NAME} <IconExternalLink className={classes.linkIcon} />
33-
</ExternalLink>
43+
</ExternalLink>{' '}
44+
and these <ExternalLink to={`${REPO_LINK}/graphs/contributors`}>awesome people</ExternalLink>
45+
</Text>
46+
</Group>
47+
<Group gap={8} align="flex-start" wrap="nowrap">
48+
<IconScale className={clsx(classes.leftIcon, classes.iconGreen)} />
49+
<Text size="sm">
50+
open-source <ExternalLink to={REPO_LINK}>on GitHub</ExternalLink> with a{' '}
51+
<ExternalLink to={LICENSE_LINK}>permissive license</ExternalLink>
52+
</Text>
53+
</Group>
54+
<Group gap={8} align="flex-start" wrap="nowrap">
55+
<IconHeartFilled className={clsx(classes.leftIcon, classes.iconRed)} />
56+
<Text size="sm">
57+
supported by <ExternalLink to={SPONSORS_LINK}>generous people like you</ExternalLink>
3458
</Text>
3559
</Group>
3660
<Group gap={8} align="flex-start" wrap="nowrap">
37-
<IconDiscountCheck className={clsx(classes.leftIcon, classes.iconCompat)} />
61+
<IconDiscountCheck className={clsx(classes.leftIcon, classes.iconBlue)} />
3862
<Text size="sm">
3963
compatible with{' '}
4064
<ExternalLink className="nowrap" to={MANTINE_LINK}>
@@ -43,7 +67,7 @@ export function HomePageSubtitle() {
4367
</Text>
4468
</Group>
4569
<Group gap={8} align="flex-start" wrap="nowrap">
46-
<IconInfoCircle className={clsx(classes.leftIcon, classes.iconOldVersion)} />
70+
<IconInfoCircle className={clsx(classes.leftIcon, classes.iconRed)} />
4771
<Text size="sm">
4872
old version compatible with <ExternalLink to="https://v6.mantine.dev">Mantine V6</ExternalLink>{' '}
4973
<span className="nowrap">

‎app/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import type { Route } from 'next';
1414

1515
export const PRODUCT_NAME = 'Mantine DataTable';
1616
export const PRODUCT_DESCRIPTION =
17-
'A fully-featured data-table/data-grid React component for building data-rich applications with Mantine UI';
17+
'A fully-featured data-table/data-grid React component for building data-rich applications with Mantine UI, trusted by thousands of developers and companies around the world, from small startups to large enterprises like Microsoft';
1818

1919
export const WEB_ROOT = 'https://icflorescu.github.io';
2020
export const WEBSITE_LINK = `${WEB_ROOT}/${process.env.PACKAGE_NAME}`;

‎app/contribute-and-support/page.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,15 @@ export default function ContributeAndSupportPage() {
5555
useful and want to support thier future development, please consider{' '}
5656
<ExternalLink to="https://github.com/sponsors/icflorescu">sponsoring my work</ExternalLink> ❤️.
5757
</Txt>
58+
<Txt>
59+
Although DataTable is used by thousands of developers and companies around the world, from small startups to{' '}
60+
<strong>S&P 500</strong> enterprises such as{' '}
61+
<ExternalLink to="https://www.microsoft.com/">Microsoft</ExternalLink>, the monthly revenue generated by GitHub
62+
Sponsors is about $20 as of November 2025, which is far from covering even a fraction of the costs of my time
63+
and effort.
64+
<br />
65+
So, anything you can do to help me offset this is greatly appreciated.
66+
</Txt>
5867
<PageSubtitle value="Raise issues and discuss new features" />
5968
<Txt>
6069
If you find a bug please don’t hesitate to{' '}
@@ -89,6 +98,10 @@ export default function ContributeAndSupportPage() {
8998
</strong>
9099
. 🏅
91100
</Txt>
101+
<Txt>
102+
However, please refrain from spamming the repo with PRs implementing edge-case features that only cater to your
103+
specific needs and fall outside the scope of the project.
104+
</Txt>
92105
<Txt>Here’s the list of people who have already contributed to {PRODUCT_NAME}:</Txt>
93106
<Box my="sm">
94107
<ExternalLink to={`${REPO_LINK}/graphs/contributors`}>
@@ -102,14 +115,14 @@ export default function ContributeAndSupportPage() {
102115
The <ExternalLink to={REPO_LINK}>repository</ExternalLink> is holding the code for both {PRODUCT_NAME}{' '}
103116
package and the documentation website you’re looking at.
104117
<br />
105-
Since the repo root contains a <Code>yarn.lock</Code> file, <strong>it should be obvious</strong> that you
106-
have to use <ExternalLink to="https://yarnpkg.com/">Yarn</ExternalLink> to install dependencies and run
118+
Since the repo root contains a <Code>pnpm-lock.yaml</Code> file, <strong>it should be obvious</strong> that
119+
you have to use <ExternalLink to="https://pnpm.io/">pnpm</ExternalLink> to install dependencies and run
107120
scripts.
108121
<br />
109-
Use <Code>yarn dev</Code> to start the development server, <Code>yarn lint</Code> to check the code for
110-
linting errors, and <Code>yarn build</Code> to check that the code compiles.
122+
Use <Code>pnpm dev</Code> to start the development server, <Code>pnpm lint</Code> to check the code for
123+
linting errors, and <Code>pnpm build</Code> to check that the code compiles.
111124
<br />
112-
Running <Code>yarn format</Code> will automatically format your code with{' '}
125+
Running <Code>pnpm format</Code> will automatically format your code with{' '}
113126
<ExternalLink to="https://prettier.io/">Prettier</ExternalLink>, so that it adheres to the project’s coding
114127
style.
115128
<br />

‎components/TrustedBy.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ const ITEMS: {
1010
link: string;
1111
shift?: number;
1212
}[] = [
13+
{
14+
name: 'Microsoft',
15+
logo: { base: 'microsoft', ext: 'svg', shift: -3 },
16+
link: 'https://www.microsoft.com',
17+
},
1318
{
1419
name: 'Namecheap',
1520
logo: { base: 'namecheap', ext: 'svg', themed: true },

‎package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mantine-datatable",
3-
"version": "8.3.7",
3+
"version": "8.3.8",
44
"description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
55
"keywords": [
66
"mantine",
@@ -71,27 +71,27 @@
7171
"format": "prettier --write ."
7272
},
7373
"devDependencies": {
74-
"@docsearch/css": "^4.3.1",
75-
"@docsearch/react": "^4.3.1",
74+
"@docsearch/css": "^4.3.2",
75+
"@docsearch/react": "^4.3.2",
7676
"@eslint/eslintrc": "^3.3.1",
7777
"@faker-js/faker": "^10.1.0",
7878
"@formkit/auto-animate": "^0.9.0",
7979
"@hello-pangea/dnd": "^18.0.1",
80-
"@mantine/code-highlight": "^8.3.7",
81-
"@mantine/core": "^8.3.7",
82-
"@mantine/dates": "^8.3.7",
83-
"@mantine/hooks": "^8.3.7",
84-
"@mantine/modals": "^8.3.7",
85-
"@mantine/notifications": "^8.3.7",
80+
"@mantine/code-highlight": "^8.3.8",
81+
"@mantine/core": "^8.3.8",
82+
"@mantine/dates": "^8.3.8",
83+
"@mantine/hooks": "^8.3.8",
84+
"@mantine/modals": "^8.3.8",
85+
"@mantine/notifications": "^8.3.8",
8686
"@next/eslint-plugin-next": "^15.5.6",
8787
"@tabler/icons-react": "^3.35.0",
88-
"@tanstack/react-query": "^5.90.7",
88+
"@tanstack/react-query": "^5.90.10",
8989
"@types/lodash": "^4.17.20",
90-
"@types/node": "^24.10.0",
91-
"@types/react": "^19.2.2",
92-
"@types/react-dom": "^19.2.2",
93-
"@typescript-eslint/eslint-plugin": "^8.46.3",
94-
"@typescript-eslint/parser": "^8.46.3",
90+
"@types/node": "^24.10.1",
91+
"@types/react": "^19.2.5",
92+
"@types/react-dom": "^19.2.3",
93+
"@typescript-eslint/eslint-plugin": "^8.46.4",
94+
"@typescript-eslint/parser": "^8.46.4",
9595
"clsx": "^2.1.1",
9696
"cssnano": "^7.1.2",
9797
"dayjs": "^1.11.19",
@@ -100,7 +100,7 @@
100100
"eslint-config-prettier": "^10.1.8",
101101
"eslint-plugin-react-hooks": "^7.0.1",
102102
"lodash": "^4.17.21",
103-
"mantine-contextmenu": "^8.3.7",
103+
"mantine-contextmenu": "^8.3.8",
104104
"next": "^15.5.6",
105105
"postcss": "^8.5.6",
106106
"postcss-cli": "^11.0.1",
@@ -113,7 +113,7 @@
113113
"sharp": "^0.34.5",
114114
"shiki": "^3.15.0",
115115
"swr": "^2.3.6",
116-
"tsup": "^8.5.0",
116+
"tsup": "^8.5.1",
117117
"typescript": "^5.9.3"
118118
},
119119
"peerDependencies": {

‎package/DataTable.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export function DataTable<T>({
7777
}
7878
return {};
7979
},
80+
getPaginationItemProps,
8081
renderPagination,
8182
loaderBackgroundBlur,
8283
customLoader,
@@ -455,6 +456,7 @@ export function DataTable<T>({
455456
paginationText={paginationText}
456457
paginationWrapBreakpoint={paginationWrapBreakpoint}
457458
getPaginationControlProps={getPaginationControlProps}
459+
getPaginationItemProps={getPaginationItemProps}
458460
noRecordsText={noRecordsText}
459461
loadingText={loadingText}
460462
recordsLength={recordsLength}

‎package/DataTablePagination.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export function DataTablePagination({
4545
horizontalSpacing,
4646
paginationWrapBreakpoint,
4747
getPaginationControlProps,
48+
getPaginationItemProps,
4849
renderPagination,
4950
}: DataTablePaginationComponentProps) {
5051
let paginationTextValue: React.ReactNode;
@@ -118,6 +119,7 @@ export function DataTablePagination({
118119
size={paginationSize}
119120
total={totalPages}
120121
getControlProps={getPaginationControlProps}
122+
getItemProps={getPaginationItemProps}
121123
{...props}
122124
/>
123125
),

0 commit comments

Comments
 (0)