mantine-datatable-extended 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -97
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,24 @@
|
|
|
1
1
|
# Mantine DataTable Extended
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A compound component library for [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/), providing powerful and easy-to-use features for building data tables in React applications.
|
|
4
4
|
|
|
5
5
|
## Why this library?
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Production-ready with easy-to-use concepts, including leverage some limitations of the original library:
|
|
8
8
|
|
|
9
|
-
- **Column toggling**:
|
|
10
|
-
- **Multi-column sorting**:
|
|
11
|
-
- **Search and Filter**:
|
|
12
|
-
- **Pagination**:
|
|
9
|
+
- **Column toggling**: Now supports multiple columns and dedicated component for managing column visibility
|
|
10
|
+
- **Multi-column sorting**: Now supports multiple columns and dedicated component for managing column sorting
|
|
11
|
+
- **Search and Filter**: Standardized and easy-to-use with dedicated component for managing column search and filter
|
|
12
|
+
- **Pagination**: Separated from table footer, no more blocked by async data loading
|
|
13
|
+
- **Server-side**: Easy setup for server-side rendering, data prefetching, query building
|
|
13
14
|
|
|
14
15
|
## Key Features
|
|
15
16
|
|
|
17
|
+
### Supported Frameworks
|
|
18
|
+
|
|
19
|
+
- Next.js (use with [Nuqs](https://nuqs.dev/))
|
|
20
|
+
- Tanstack Start (use with [Tanstack Router](https://tanstack.com/router))
|
|
21
|
+
|
|
16
22
|
### 🎯 Standardized Components
|
|
17
23
|
|
|
18
24
|
- **MDESearch**: Search with multi-column selection
|
|
@@ -23,16 +29,15 @@ Mantine and Mantine DataTable are excellent libraries, trusted and used by many
|
|
|
23
29
|
|
|
24
30
|
### 🔗 URL State Management
|
|
25
31
|
|
|
26
|
-
-
|
|
32
|
+
- Query states are stored in URL
|
|
27
33
|
- Shareable links - share URLs with filters/search/sort applied
|
|
28
34
|
- SEO-friendly with SSR support
|
|
29
35
|
- Easy integration with server-side rendering
|
|
30
36
|
|
|
31
37
|
### 🚀 Server-Side Integration
|
|
32
38
|
|
|
33
|
-
- Next.js App Router support
|
|
34
39
|
- Server-side data prefetching
|
|
35
|
-
- Hybrid fetching with
|
|
40
|
+
- Hybrid fetching with Tanstack Query
|
|
36
41
|
- Type-safe with TypeScript
|
|
37
42
|
|
|
38
43
|
### 🎨 Developer Experience
|
|
@@ -45,7 +50,7 @@ Mantine and Mantine DataTable are excellent libraries, trusted and used by many
|
|
|
45
50
|
## Installation
|
|
46
51
|
|
|
47
52
|
```bash
|
|
48
|
-
pnpm add mantine-datatable-extended
|
|
53
|
+
pnpm add mantine-datatable-extended
|
|
49
54
|
```
|
|
50
55
|
|
|
51
56
|
**Peer Dependencies:**
|
|
@@ -58,100 +63,19 @@ pnpm add mantine-datatable-extended mantine-datatable @mantine/dates dayjs nuqs
|
|
|
58
63
|
- `clsx` >= 2
|
|
59
64
|
- `dayjs` >= 1.11
|
|
60
65
|
- `mantine-datatable` >= 8.3
|
|
61
|
-
- `nuqs` >= 2.8
|
|
62
66
|
- `react` >= 19
|
|
63
67
|
- `react-dom` >= 19
|
|
64
68
|
- `zod` >= 4.1
|
|
69
|
+
- `nuqs` >= 2.8
|
|
70
|
+
- `tanstack-router` >= 1.43
|
|
65
71
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
This library uses Nuqs for managing query parameters. You need to wrap your app with Nuqs Adapter in your `app/layout.tsx` or `src/app/layout.tsx` file:
|
|
71
|
-
|
|
72
|
-
```tsx
|
|
73
|
-
import { NuqsAdapter } from "nuqs/adapters/next/app";
|
|
74
|
-
|
|
75
|
-
export default function RootLayout({ children }) {
|
|
76
|
-
return (
|
|
77
|
-
<html>
|
|
78
|
-
<body>
|
|
79
|
-
<NuqsAdapter>
|
|
80
|
-
<MantineProvider>{children}</MantineProvider>
|
|
81
|
-
</NuqsAdapter>
|
|
82
|
-
</body>
|
|
83
|
-
</html>
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### Step 2: Create Data Table
|
|
89
|
-
|
|
90
|
-
```tsx
|
|
91
|
-
"use client";
|
|
92
|
-
|
|
93
|
-
import {
|
|
94
|
-
MantineDatatableExtended,
|
|
95
|
-
MDEProvider,
|
|
96
|
-
MDESearch,
|
|
97
|
-
MDEFilter,
|
|
98
|
-
MDESortList,
|
|
99
|
-
MDEColumnsToggle,
|
|
100
|
-
MDEPagination,
|
|
101
|
-
type TMDEColumnProps,
|
|
102
|
-
} from "mantine-datatable-extended";
|
|
103
|
-
import { useDataTableColumns } from "mantine-datatable";
|
|
104
|
-
import { Group, Space } from "@mantine/core";
|
|
105
|
-
|
|
106
|
-
const columns: TMDEColumnProps[] = [
|
|
107
|
-
{
|
|
108
|
-
accessor: "name",
|
|
109
|
-
title: "Name",
|
|
110
|
-
extend: {
|
|
111
|
-
searchable: true,
|
|
112
|
-
sortable: true,
|
|
113
|
-
filterable: true,
|
|
114
|
-
filterVariant: "text",
|
|
115
|
-
},
|
|
116
|
-
},
|
|
117
|
-
// ... more columns
|
|
118
|
-
];
|
|
119
|
-
|
|
120
|
-
export default function MyTable() {
|
|
121
|
-
const originalUseDataTableColumnsResult = useDataTableColumns({
|
|
122
|
-
key: "my-table",
|
|
123
|
-
columns,
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
return (
|
|
127
|
-
<MDEProvider
|
|
128
|
-
columns={columns}
|
|
129
|
-
originalUseDataTableColumnsResult={originalUseDataTableColumnsResult}
|
|
130
|
-
storeColumnsKey="my-table"
|
|
131
|
-
>
|
|
132
|
-
<Group justify="space-between">
|
|
133
|
-
<Group>
|
|
134
|
-
<MDESearch />
|
|
135
|
-
<MDEFilter />
|
|
136
|
-
</Group>
|
|
137
|
-
<Group>
|
|
138
|
-
<MDESortList />
|
|
139
|
-
<MDEColumnsToggle />
|
|
140
|
-
</Group>
|
|
141
|
-
</Group>
|
|
142
|
-
|
|
143
|
-
<Space h="md" />
|
|
144
|
-
<MantineDatatableExtended records={data} />
|
|
145
|
-
<Space h="md" />
|
|
146
|
-
<MDEPagination />
|
|
147
|
-
</MDEProvider>
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
```
|
|
72
|
+
Note:
|
|
73
|
+
- If you use Next.js, you need to install `nuqs`
|
|
74
|
+
- If you use Tanstack Start, you need to install `tanstack-router`
|
|
151
75
|
|
|
152
76
|
## Documentation
|
|
153
77
|
|
|
154
|
-
For detailed documentation, examples, and API reference, please visit the [documentation website](https://
|
|
78
|
+
For detailed documentation, examples, and API reference, please visit the [documentation website](https://mantine-datatable-extended.hoaaq.dev/docs/).
|
|
155
79
|
|
|
156
80
|
## Important Note
|
|
157
81
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-datatable-extended",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.2",
|
|
5
5
|
"description": "An extension library for Mantine DataTable, providing powerful and easy-to-use features for building data tables in React applications.",
|
|
6
6
|
"tags": [
|
|
7
7
|
"mantine",
|