@ 适应/ 曼汀
页:1 • 妇女 现场演示 • 妇女 开始吧 • 妇女 在 StackBlitz 中尝试
移动从曼汀数据表? 见 移徙指南。 。 。 .
这个 曼汀适配器 页:1 适应表 —— 说
a 包含电池的 React 数据表,包含排序、过滤、 URL- synced
状态, 选择 + 批量动作, RTL, 暗模式, 以及可选的入口
动画. 无头建筑 @adapttable/core 发动机.
pnpm add @adapttable/mantine @adapttable/core @mantine/core @mantine/hooks react react-dom
需要节点.js 22.12.0 或较新的;包装的释放在22.12和24号节点上进行测试.
快速启动
import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";
import {
DataTable,
useFrontendData,
type ColumnDef,
} from "@adapttable/mantine";
interface Person {
id: string;
name: string;
city: string;
}
const columns: ColumnDef<Person>[] = [
{ key: "name", header: "Name", accessor: (r) => r.name, sortable: true },
{ key: "city", header: "City", accessor: (r) => r.city },
];
export function People({ data }: { data: Person[] }) {
const source = useFrontendData({ data, columns });
return (
<MantineProvider>
<DataTable source={source} columns={columns} rowKey={(r) => r.id} />
</MantineProvider>
);
}
交换 useFrontendData 页:1 useQuerySource 从一个
服务器标签 useInfiniteQuery - 没有什么变化.
特征
- 自动移动卡 - 在移动断点下,每行都会变成曼汀
Card(相同的过滤器、搜索、选择和 URL 状态)和无限卷轴替换寻呼器;每列调制mobileLabel编号 :hideOnMobile,将布局标注在forceMobile。 。 。 . 看它翻动现场。 。 。 . - 客户端或服务器数据 通过一个
TableSource合同——同样道具也一样. - 全局搜索框 ——已解开;在客户端数据上匹配每行的可搜索文本,并在服务器级别上将术语交给后端. 把它关掉
searchable={false}。 。 。 . - URL 符号 搜索 / 排序 / 过滤 / 页面 – 可共享,可深链接的链接.
- 排序 通过无障碍头控制.
- 过滤 ——作曲
filters(...)(单位:千美元)Drawer或锁定Popover加上可移动芯片和触发计数。 嵌入和/或过滤树的使用 同一个面板. - 页眉过滤器 (单位:千美元)
headerFilters())——每个被过滤的列头中的漏斗会打开与"过滤器"面板相同的字段,绑同状态,URL参数和芯片. - 自定义过滤器类型 (单位:千美元)
filterTypes([...])——登记aFilterTypeSpec带有自己的部件、运算符和上游;它获得窗体字段、页眉漏斗、URL参数和芯片. - 选择+批量动作 使用曼汀语
Checkbox对,由bulkActions(...)。 。 。 . - 行动作 带有可选确认,
isHidden编号 :isDisabled每个行. - 列扩展 内部细节面板通过
rowDetail(...)。 。 。 . - 嵌入式表格 (单位:千美元)
nestedTable(...))——满分DataTable与自己的柱子, 排序和呼 在扩展行. - 内置单元格编辑 (单位:千美元)
editing(handler)+ 键editable——文本、编号和选择 编辑器; 输入承诺, 退出取消, Tab 移动开始 。 关闭操作器,没有打开的手机. - 行重排顺序 (单位:千美元)
rowReorder(handler)) ——拖动手柄,升空键盘,数据集相接指数. - 行指针 (单位:千美元)
rowPinning(...))——虚拟窗口外粘上下行. - 固定摘要行 (单位:千美元)
pinnedSummaryRows(...))——主机拥有的总数被卡在外排序,过滤,分组,平面和选择,包括在分组和树表上. - 横跨行和列 (单位:千美元)
cellSpan(...))——每行1个单元格列表;被覆盖的单元格被省略. - 全宽和分隔行 (单位:千美元)
extraRows(...))——由主机注入的插槽相接而成beforeRowId。 。 。 . - 行型和高度 (单位:千美元)
rowAppearance(...))——有条件的内线样式和一行高. - 键盘单元格导航 (单位:千美元)
cellNavigation()- 一个制表站,箭头键, ARIA网格语义和屏幕阅读器公告. 它也是大门 单元格范围选择、剪贴板复制/粘贴一个区域,以及填充手柄. - 行组 (单位:千美元)
grouping(...)或者说groupingPanel(...))——一列键或被命令要嵌入的列表,并附有每个组的集合. - 合计 - 一个脚印
summaryRow组合小计aggregatable列,以及内置或自定义aggregate()操作; 总计从被过滤行重算. - 关键表格 ——可选栏中各行、栏和措施的小计
@adapttable/core/pivot输入. - 树数据 (单位:千美元)
tree(...))——分级行有扩展/拼接,桌面上和牌上. - 栏管理 ——显示/隐藏,重排,接针(粘接)和再大小,外加相撞的列组.
- 火花线列 (单位:千美元)
@adapttable/react/sparkline)——作为内置SVG的栏,行和区. 底盘从不付钱. - PDF 导出和打印布局 (单位:千美元)
@adapttable/core/pdf——可选条目;pdfWriter()打开exportCsv, (中文(简体) ),printTable用于浏览器对话框. - 公式引擎 (单位:千美元)
@adapttable/core/formula——电子表格公式并列和汇总;循环参考报告#CYCLE!。 。 。 . - 特征构成 (单位:千美元)
features={[rowReorder(fn)]}从@adapttable/mantine/row-reorder- 风格的子路径——导入是开关,以及standardFeatures()编辑/preset条目是单导入路径。 主机插件共享相同setup(host)表面. - 已保存视图 指定过滤器/分包/分栏安排,并相互切换.
- CSV 导出 (单位:千美元)
exportCsv(...))——当前页面,被过滤的完整集,或 所选行; 选择列, 或将整行交给后端. - XLSX 导出 (单位:千美元)
@adapttable/core/xlsx——可选条目;xlsxWriter()打开exportCsv写一个真实的.xlsx没有额外依赖的工作簿. - 命令调色板和上下文菜单 (单位:千美元)
commandPalette(), (中文(简体) ),contextMenu()) —— Cmd/Ctrl+K 打开可搜索的表格动作列表;右键单击打开了页眉,行或单元格的菜单. - 查看控件 —— 说
densityChooser(), (中文(简体) ),fullscreen(), (中文(简体) ),print(...), (中文(简体) ),statusBar(), (中文(简体) ),selectionStats(), (中文(简体) ),sidePanel(...)财务报告和审定财务报表undoRedoButtons(),每个选项工具栏控制从自己的子路径. - 虚拟化 (单位:千美元)
virtualize(...))——选入行/入卡窗口,用于非常大的列表. - 倾斜 编号
Pagination,或无限滚动(通过设备自动). - SSR和服务器组件 ——在没有DOM的情况下使出;客户端边界已经在构建中了,因此它会直接被降入Next.js App路由器. 文档。 。 。 .
- 国家 —— 说
Skeleton装入、 重试出错以及空状态 . - 拉特 通过
dir· ; 阴暗模式 通过曼汀的彩色计划. - 自定义 —— 说
slots, (中文(简体) ),classNames,自定义toolbar可注入时confirm,可选入场动画(animate荣誉prefers-reduced-motion完整无头逃生舱通过@adapttable/react。 。 。 .
看它有用吗
每个片段都是真正的适配器,记录在现场演示中.
行组 ——以一行为一列,每行小计
内置单元格编辑 ——双击单元格;文本、数字和选择编辑器
过滤 键入绑定值,表格按键回答
栏管理 ——显示,隐藏,重排,接针和大小调整
RTL / 阿拉伯语 - 整个桌子的镜子,不只是文字
文档
开始 • 妇女 现场演示 • 妇女 比较与 ag-Grid → MUI X → TanStack
- 数据 —— 说 客户端对服务器级 • 妇女 无限卷轴( i) • 妇女 URL 符号状态
- 互动 —— 说 过滤 • 妇女 排序 • 妇女 选择大块动作( b) • 妇女 扩展行 • 妇女 内置单元格编辑
- 列数 —— 说 显示/隐藏 · 重排 · 接针 · 调整大小 • 妇女 行组和集合 • 妇女 CSV 导出
- 再来 —— 说 i18n 和 RTL • 妇女 虚拟化 • 妇女 定制 • 妇女 API 密码 • 妇女 财务问题