@wisdomgarden/mantine-datatable 8.3.1-3.1

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2022 โ€“ 2025 Ionuศ›-Cristian Florescu
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,210 @@
1
+ # Mantine DataTable
2
+
3
+ ![Publish NPM & deploy docs workflow](https://github.com/icflorescu/mantine-datatable/actions/workflows/publish-and-deploy.yml/badge.svg)
4
+ [![NPM version][npm-image]][npm-url]
5
+ [![License][license-image]][license-url]
6
+ [![Stars][stars-image]][stars-url]
7
+ [![Last commit][last-commit-image]][repo-url]
8
+ [![Closed issues][closed-issues-image]][closed-issues-url]
9
+ [![Downloads][downloads-image]][npm-url]
10
+ [![Language][language-image]][repo-url]
11
+ [![Sponsor the author][sponsor-image]][sponsor-url]
12
+
13
+ The [lightweight](https://bundlephobia.com/package/mantine-datatable), 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](https://icflorescu.github.io/mantine-datatable/).
14
+
15
+ [![Mantine DataTable](https://user-images.githubusercontent.com/581999/294180790-93289cec-4d73-47b5-988f-8c93dd3443fe.png)](https://icflorescu.github.io/mantine-datatable/)
16
+
17
+ **โš ๏ธ Mantine DataTable V8.x is compatible with Mantine V8.x.**
18
+ **๐Ÿ’ก If you're looking for the old version that works with [Mantine V6](https://v6.mantine.dev), head over to [Mantine DataTable V6](https://icflorescu.github.io/mantine-datatable-v6).**
19
+
20
+ ## Features
21
+
22
+ - **Lightweight** - no external dependencies, [no bloat](https://bundlephobia.com/package/mantine-datatable)
23
+ - **Dark-theme aware** - automatically adapts to the current [Mantine color scheme](https://mantine.dev/theming/color-schemes/)
24
+ - **[Fully customizable](https://icflorescu.github.io/mantine-datatable/examples/overriding-the-default-styles)** - you can customize the look and feel of the table and its components
25
+ - **[Asynchronous data loading](https://icflorescu.github.io/mantine-datatable/examples/asynchronous-data-loading)** - load data from a remote API endpoint and show a loading indicator while waiting for the response
26
+ - **[Pagination](https://icflorescu.github.io/mantine-datatable/examples/pagination)** - split large data sets into pages
27
+ - **[Column sorting](https://icflorescu.github.io/mantine-datatable/examples/sorting)** - sort data by one or more columns
28
+ - **[Custom cell data rendering](https://icflorescu.github.io/mantine-datatable/examples/column-properties-and-styling)** - render cell data using custom components
29
+ - **[Row context menu](https://icflorescu.github.io/mantine-datatable/examples/using-with-mantine-contextmenu)** - show a context menu when right-clicking on a row
30
+ - **[Row expansion](https://icflorescu.github.io/mantine-datatable/examples/expanding-rows)** - expand a row to show additional details
31
+ - **[Nesting](https://icflorescu.github.io/mantine-datatable/examples/nested-tables)** - nest tables to show hierarchical data
32
+ - **[Additive batch rows selection](https://icflorescu.github.io/mantine-datatable/examples/records-selection)** - select or deselect ranges of rows using the Shift key
33
+ - **[Automatically-scrollable](https://icflorescu.github.io/mantine-datatable/examples/scrollable-vs-auto-height)** - automatically scrollable or auto-height
34
+ - **[AutoAnimate support](https://icflorescu.github.io/mantine-datatable/examples/using-with-auto-animate)** - animate row sorting, addition and removal
35
+ - **[Column reordering, toggling](https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling)** and **[resizing](https://icflorescu.github.io/mantine-datatable/examples/column-resizing)** - thanks to the outstanding work of [Giovambattista Fazioli](https://github.com/gfazioli)
36
+ - **[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)
37
+ - **[Comprehensive RTL support](https://icflorescu.github.io/mantine-datatable/examples/rtl-support)** - the context menu adjusts automatically to [Mantine `DirectionProvider`](https://mantine.dev/styles/rtl/)'s settings, thanks to the outstanding work of [Reem Assaf](https://github.com/ReemX)
38
+ - **More** - check out the [full documentation](https://icflorescu.github.io/mantine-datatable/)
39
+
40
+ ## Trusted by thousands of developers and companies from around the world
41
+
42
+ Used by [Microsoft](https://www.microsoft.com/) in [Agent Lightning](https://github.com/microsoft/agent-lightning).
43
+
44
+ [Emil Sorensen](https://github.com/Emil-Sorensen) @ [kapa.ai](https://kapa.ai/):
45
+
46
+ > _Mantine DataTable is a great component thatโ€™s core to our web app - it saves us a ton of time and comes with great styling and features out of the box_
47
+
48
+ [Giovambattista Fazioli](https://github.com/gfazioli) @ [Namecheap](https://www.namecheap.com/) ([@gfazioli](https://github.com/gfazioli) is also a valuable Mantine DataTable contributor):
49
+
50
+ > _Thank you for the wonderful, useful, and beautiful DataTable that has allowed me to create several applications without any problem ๐Ÿ‘_
51
+
52
+ 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.
53
+
54
+ 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/).
55
+
56
+ ## Full documentation and examples
57
+
58
+ Visit [icflorescu.github.io/mantine-datatable](https://icflorescu.github.io/mantine-datatable/) to view the full documentation and learn how to use it by browsing a comprehensive list of examples.
59
+
60
+ ## Mantine DataTable AI Bot
61
+
62
+ [Mantine DataTable AI Bot](https://codeparrot.ai/oracle?owner=icflorescu&repo=mantine-datatable), kindly provided by [CodeParrot.AI](https://codeparrot.ai), will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
63
+
64
+ ## Quickstart
65
+
66
+ Create a new [application with Mantine](https://mantine.dev/getting-started/), make sure to have the `clsx` peer dependency installed,
67
+ then install the package with `npm i mantine-datatable` or `yarn add mantine-datatable`.
68
+
69
+ Import the necessary CSS files:
70
+
71
+ ```ts
72
+ import '@mantine/core/styles.layer.css';
73
+ import 'mantine-datatable/styles.layer.css';
74
+ import './layout.css';
75
+ ```
76
+
77
+ Make sure to [apply the styles in the correct order](https://mantine.dev/styles/mantine-styles/):
78
+
79
+ ```css
80
+ /* layout.css */
81
+ /* ๐Ÿ‘‡ Apply Mantine core styles first, DataTable styles second */
82
+ @layer mantine, mantine-datatable;
83
+ ```
84
+
85
+ Use the component in your code:
86
+
87
+ ```ts
88
+ 'use client';
89
+
90
+ import { Box } from '@mantine/core';
91
+ import { showNotification } from '@mantine/notifications';
92
+ import { DataTable } from 'mantine-datatable';
93
+
94
+ export function GettingStartedExample() {
95
+ return (
96
+ <DataTable
97
+ withTableBorder
98
+ borderRadius="sm"
99
+ withColumnBorders
100
+ striped
101
+ highlightOnHover
102
+ // ๐Ÿ‘‡ provide data
103
+ records={[
104
+ { id: 1, name: 'Joe Biden', bornIn: 1942, party: 'Democratic' },
105
+ // more records...
106
+ ]}
107
+ // ๐Ÿ‘‡ define columns
108
+ columns={[
109
+ {
110
+ accessor: 'id',
111
+ // ๐Ÿ‘‡ this column has a custom title
112
+ title: '#',
113
+ // ๐Ÿ‘‡ right-align column
114
+ textAlign: 'right',
115
+ },
116
+ { accessor: 'name' },
117
+ {
118
+ accessor: 'party',
119
+ // ๐Ÿ‘‡ this column has custom cell data rendering
120
+ render: ({ party }) => (
121
+ <Box fw={700} c={party === 'Democratic' ? 'blue' : 'red'}>
122
+ {party.slice(0, 3).toUpperCase()}
123
+ </Box>
124
+ ),
125
+ },
126
+ { accessor: 'bornIn' },
127
+ ]}
128
+ // ๐Ÿ‘‡ execute this callback when a row is clicked
129
+ onRowClick={({ record: { name, party, bornIn } }) =>
130
+ showNotification({
131
+ title: `Clicked on ${name}`,
132
+ message: `You clicked on ${name}, a ${party.toLowerCase()} president born in ${bornIn}`,
133
+ withBorder: true,
134
+ })
135
+ }
136
+ />
137
+ );
138
+ }
139
+ ```
140
+
141
+ Make sure to browse the comprehensive list of [usage examples](https://icflorescu.github.io/mantine-datatable/examples/basic-usage) to learn how to unleash the full power of Mantine DataTable.
142
+
143
+ ## Other useful resources
144
+
145
+ Mantine DataTable works perfectly with [Mantine Context Menu](https://icflorescu.github.io/mantine-contextmenu/), a library built by the same author that enables you to enhance your UIs with desktop-grade, lightweight yet fully-featured context menus that respect the Mantine color scheme out of the box:
146
+
147
+ [![Mantine ContextMenu](https://user-images.githubusercontent.com/581999/294179957-e5b07f1f-701b-49a9-a518-4e42afb8b70a.png)](https://icflorescu.github.io/mantine-contextmenu/)
148
+
149
+ ## Contributing
150
+
151
+ See the [contributing guide in the documentation website](https://icflorescu.github.io/mantine-datatable/contribute-and-support) or the repo [CONTRIBUTING.md](https://github.com/icflorescu/mantine-datatable/blob/master/CONTRIBUTING.md) file for details.
152
+
153
+ ๐Ÿ’ก Most importantly, remember to **make your PRs against the `next` branch.**
154
+
155
+ Here's the list of people who have already contributed to Mantine DataTable:
156
+
157
+ [![Contributors list](https://contrib.rocks/image?repo=icflorescu/mantine-datatable)](https://github.com/icflorescu/mantine-datatable/graphs/contributors)
158
+
159
+ Want to [become a code contributor](https://icflorescu.github.io/mantine-datatable/contribute-and-support)?
160
+
161
+ ## Support the project
162
+
163
+ If you find this package useful, please consider โค๏ธ [sponsoring my work](https://github.com/sponsors/icflorescu).
164
+ Your sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs.
165
+ If you're a company using Mantine, Mantine DataTable or [Mantine ContextMenu](https://icflorescu.github.io/mantine-contextmenu/) in a commercial project, you can also [hire my services](https://github.com/icflorescu).
166
+
167
+ ## Other means of support
168
+
169
+ If you can't afford to sponsor the project or hire my services, there are other ways you can support my work:
170
+
171
+ - ๐Ÿ™ star the repository;
172
+ - ๐Ÿ’• [tweet about it](http://twitter.com/share?text=Build%20data-rich%20React%20applications%20with%20Mantine%20DataTable&url=https%3A%2F%2Fgithub.com%2Ficflorescu%2Fmantine-datatable&hashtags=mantine%2Cdatatable%2Cdatagrid%2Creact&via=icflorescu);
173
+ - ๐Ÿ‘ [endorse me on LinkedIn](https://www.linkedin.com/in/icflorescu).
174
+
175
+ The more stars this repository gets, the more visibility it gains among the Mantine users community. The more
176
+ users it gets, the more chances that some of those users will become active code contributors willing to put
177
+ their effort into bringing new features to life and/or fixing bugs.
178
+
179
+ As the repository gain awareness, my chances of getting hired to work on Mantine-based projects will increase,
180
+ which in turn will help maintain my vested interest in keeping the project alive.
181
+
182
+ ## Hiring the author
183
+
184
+ If you want to hire my services, donโ€™t hesitate to drop me a line at the email address listed in my [GitHub profile](https://github.com/icflorescu).
185
+ Iโ€™m currently getting a constant flow of approaches, some of them relevant, others not so relevant.
186
+ Mentioning โ€œMantine DataTableโ€ in your text would help me prioritize your message.
187
+
188
+ ## Acknowledgements
189
+
190
+ ๐Ÿ™ Special thanks to [Ani Ravi](https://github.com/aniravi24) for being the first person to sponsor my work on this project!
191
+ ๐Ÿ’• Additional thanks to [all sponsors](https://github.com/sponsors/icflorescu)!
192
+
193
+ ## License
194
+
195
+ The [MIT License](https://github.com/icflorescu/mantine-datatable/blob/master/LICENSE).
196
+
197
+ [npm-url]: https://npmjs.org/package/mantine-datatable
198
+ [repo-url]: https://github.com/icflorescu/mantine-datatable
199
+ [stars-url]: https://github.com/icflorescu/mantine-datatable/stargazers
200
+ [closed-issues-url]: https://github.com/icflorescu/mantine-datatable/issues?q=is%3Aissue+is%3Aclosed
201
+ [license-url]: LICENSE
202
+ [npm-image]: https://img.shields.io/npm/v/mantine-datatable.svg?style=flat-square
203
+ [license-image]: http://img.shields.io/npm/l/mantine-datatable.svg?style=flat-square
204
+ [downloads-image]: http://img.shields.io/npm/dm/mantine-datatable.svg?style=flat-square
205
+ [stars-image]: https://img.shields.io/github/stars/icflorescu/mantine-datatable?style=flat-square
206
+ [last-commit-image]: https://img.shields.io/github/last-commit/icflorescu/mantine-datatable?style=flat-square
207
+ [closed-issues-image]: https://img.shields.io/github/issues-closed-raw/icflorescu/mantine-datatable?style=flat-square
208
+ [language-image]: https://img.shields.io/github/languages/top/icflorescu/mantine-datatable?style=flat-square
209
+ [sponsor-image]: https://img.shields.io/badge/sponsor-violet?style=flat-square
210
+ [sponsor-url]: https://github.com/sponsors/icflorescu