icflorescu/mantine-datatable 源代码: https://github.com/icflorescu/mantine-datatable

Mantine DataTable 发布 NPM 和部署文档工作流

轻量级 (https://bundlephobia.com/package/mantine-datatable)、无依赖、深色主题感知的表格组件，适用于您的 Mantine UI 数据密集型应用，支持异步数据加载、分页、直观的 Gmail 风格增量批量行选择、列排序、自定义单元格数据渲染、行展开、嵌套、上下文菜单等更多功能 (https://icflorescu.github.io/mantine-datatable/)。

Mantine DataTable (https://icflorescu.github.io/mantine-datatable/)

⚠️ Mantine DataTable V9.x 兼容 Mantine V9.x。

💡 如果您正在寻找与 Mantine V6 (https://v6.mantine.dev) 兼容的旧版本，请前往 Mantine DataTable V6 (https://icflorescu.github.io/mantine-datatable-v6)。

特性

• 轻量级 – 无外部依赖，无臃肿 (https://bundlephobia.com/package/mantine-datatable)
• 深色主题感知 – 自动适应当前 Mantine 配色方案 (https://mantine.dev/theming/color-schemes/)
• 完全可定制 (https://icflorescu.github.io/mantine-datatable/examples/overriding-the-default-styles) – 您可以自定义表格及其组件的外观和感觉
• 异步数据加载 (https://icflorescu.github.io/mantine-datatable/examples/asynchronous-data-loading) – 从远程 API 端点加载数据，并在等待响应时显示加载指示器
• 分页 (https://icflorescu.github.io/mantine-datatable/examples/pagination) – 将大型数据集拆分为多个页面
• 列排序 (https://icflorescu.github.io/mantine-datatable/examples/sorting) – 按一个或多个列对数据进行排序
• 自定义单元格数据渲染 (https://icflorescu.github.io/mantine-datatable/examples/column-properties-and-styling) – 使用自定义组件渲染单元格数据
• 行上下文菜单 (https://icflorescu.github.io/mantine-datatable/examples/using-with-mantine-contextmenu) – 右键单击行时显示上下文菜单
• 行展开 (https://icflorescu.github.io/mantine-datatable/examples/expanding-rows) – 展开行以显示更多详细信息
• 嵌套 (https://icflorescu.github.io/mantine-datatable/examples/nested-tables) – 嵌套表格以显示层次数据
• 增量批量行选择 (https://icflorescu.github.io/mantine-datatable/examples/records-selection) – 使用 Shift 键选择或取消选择行范围
• 自动滚动 (https://icflorescu.github.io/mantine-datatable/examples/scrollable-vs-auto-height) – 自动滚动或自动高度
• 支持 AutoAnimate (https://icflorescu.github.io/mantine-datatable/examples/using-with-auto-animate) – 动画化行排序、添加和移除
• 列重新排序、切换 (https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling) 和 大小调整 (https://icflorescu.github.io/mantine-datatable/examples/column-resizing) – 感谢 Giovambattista Fazioli (https://github.com/gfazioli) 的杰出工作
• 拖放支持 (https://icflorescu.github.io/mantine-datatable/examples/row-dragging) – 使用 @hello-pangea/dnd (https://github.com/hello-pangea/dnd) 实现，感谢 Mohd Ahmad (https://github.com/MohdAhmad1) 的杰出工作
• 全面的 RTL 支持 (https://icflorescu.github.io/mantine-datatable/examples/rtl-support) – 上下文菜单自动适应 Mantine DirectionProvider (https://mantine.dev/styles/rtl/) 的设置，感谢 Reem Assaf (https://github.com/ReemX) 的杰出工作
• 更多 – 查看完整文档 (https://icflorescu.github.io/mantine-datatable/)

受到全球数千名开发者和公司的信任

被微软 (https://www.microsoft.com/) 用于 Agent Lightning (https://github.com/microsoft/agent-lightning)。

Emil Sorensen (https://github.com/Emil-Sorensen) @ kapa.ai (https://kapa.ai/):

Mantine DataTable 是一个出色的组件，是我们 Web 应用的核心——它为我们节省了大量时间，并提供了开箱即用的出色样式和功能

Giovambattista Fazioli (https://github.com/gfazioli) @ Namecheap (https://www.namecheap.com/)（@gfazioli (https://github.com/gfazioli) 同时也是 Mantine DataTable 的重要贡献者）：

感谢您创造了这个出色、实用且美观的 DataTable，让我能够毫无问题地构建多个应用 👏

Mantine DataTable 被全球开发者和公司使用，从初创公司到标普 500 强企业，例如：微软 (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/) 等。

如果您在项目中使用 Mantine DataTable，请通过我在 GitHub 个人资料 (https://github.com/icflorescu) 中列出的电子邮件地址联系我，我将很高兴将其添加到列表和文档网站 (https://icflorescu.github.io/mantine-datatable/) 中。

完整文档和示例

访问 icflorescu.github.io/mantine-datatable (https://icflorescu.github.io/mantine-datatable/) 查看完整文档，并通过浏览全面的示例列表学习如何使用。

Mantine DataTable AI 机器人

Mantine DataTable AI 机器人 (https://codeparrot.ai/oracle?owner=icflorescu&repo=mantine-datatable) 由 CodeParrot.AI (https://codeparrot.ai) 友情提供，将帮助您更好地理解此仓库。您可以询问代码示例、安装指南、调试帮助等。

快速开始

使用 Mantine (https://mantine.dev/getting-started/) 创建一个新应用，确保已安装 clsx 对等依赖，然后使用 npm i mantine-datatable 或 yarn add mantine-datatable 安装包。

导入必要的 CSS 文件：

ts import '@mantine/core/styles.layer.css'; import 'mantine-datatable/styles.layer.css'; import './layout.css';

确保以正确的顺序应用样式 (https://mantine.dev/styles/mantine-styles/)：

css /* layout.css */ /* 👇 先应用 Mantine 核心样式，再应用 DataTable 样式 */ @layer mantine, mantine-datatable;

在代码中使用组件：

``ts ‘use client’; import { Box } from ‘@mantine/core’; import { showNotification } from ‘@mantine/notifications’; import { DataTable } from ‘mantine-datatable’;

export function GettingStartedExample() { return ( <DataTable columns={[ { accessor: ‘name’ }, { accessor: ‘party’, render: ({ record: { party } }) => ( <Box fw={700} c={party === ‘Democrat’ ? ‘blue’ : ‘red’}> {party.slice(0, 3).toUpperCase()} )}, { accessor: ‘bornIn’ }, ]} // 👇 单击行时执行此回调 onRowClick={({ record: { name, party, bornIn } }) => showNotification({ title: Clicked on ${name}, message: You clicked on ${name}, a ${party.toLowerCase()} president born in ${bornIn}, withBorder: true, }) } /> ); } ``

请务必浏览全面的使用示例列表 (https://icflorescu.github.io/mantine-datatable/examples/basic-usage)，以了解如何充分发挥 Mantine DataTable 的全部功能。

其他有用资源

Mantine DataTable 与 Mantine Context Menu (https://icflorescu.github.io/mantine-contextmenu/) 完美配合，该库由同一作者构建，使您能够使用轻量级但功能齐全、开箱即用且尊重 Mantine 配色方案的上下文菜单来增强 UI：Mantine ContextMenu (https://icflorescu.github.io/mantine-contextmenu/)

贡献

请参阅文档网站上的贡献指南 (https://icflorescu.github.io/mantine-datatable/contribute-and-support) 或仓库中的 CONTRIBUTING.md (https://github.com/icflorescu/mantine-datatable/blob/master/CONTRIBUTING.md) 文件以获取详细信息。

💡 最重要的是，请记得将您的 PR 提交到 next 分支。

以下是已为 Mantine DataTable 做出贡献的人员列表： 贡献者列表 (https://github.com/icflorescu/mantine-datatable/graphs/contributors)

想成为代码贡献者 (https://icflorescu.github.io/mantine-datatable/contribute-and-support) 吗？

支持项目

如果您觉得这个包有用，请考虑 ❤️ 赞助我的工作 (https://github.com/sponsors/icflorescu)。您的赞助将帮助我投入更多时间维护项目，并鼓励我添加新功能和修复现有错误。

如果您是一家在商业项目中使用 Mantine、Mantine DataTable 或 Mantine ContextMenu (https://icflorescu.github.io/mantine-contextmenu/) 的公司，也可以聘请我的服务 (https://github.com/icflorescu)。

其他支持方式

如果您无法赞助项目或聘请我的服务，还有其他方式可以支持我的工作：

• 🙏 给仓库点星；
• 💕 发推文 (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) 推荐；
• 👍 在 LinkedIn 上认可我 (https://www.linkedin.com/in/icflorescu)。

这个仓库获得的星标越多，它在 Mantine 用户社区中的可见度就越高。用户越多，就越有可能有用户成为活跃的代码贡献者，愿意投入精力实现新功能和/或修复错误。随着仓库知名度的提高，我获得基于 Mantine 项目工作机会的可能性也会增加，这反过来将有助于维持我对项目发展的兴趣。

聘请作者

如果您想聘请我的服务，请随时通过我在 GitHub 个人资料 (https://github.com/icflorescu) 中列出的电子邮件地址联系我。我目前收到大量联系，有些相关，有些则不太相关。在您的留言中提到“Mantine DataTable”将帮助我优先处理您的消息。

致谢

🙏 特别感谢 Ani Ravi (https://github.com/aniravi24) 成为第一个赞助我此项目的人！ 💕 另外感谢所有赞助商 (https://github.com/sponsors/icflorescu)！

许可证

MIT 许可证 (https://github.com/icflorescu/mantine-datatable/blob/master/LICENSE)。