dishui 0.0.84 → 0.0.91

package/dist/components/pro/DataTable/components/TableBody.js

@@ -3,63 +3,63 @@ import { flexRender as t } from "../tanstack-table.js";
 import n from "react";
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/pro/DataTable/components/TableBody.tsx
-function o({ table: o, expandedRowsState: s, onRowClick: c, onRowDoubleClick: l, onRowMouseEnter: u, onRowMouseLeave: d, onCellClick: f, onCellDoubleClick: p, onCellMouseEnter: m, onCellMouseLeave: h, enableExpanding: g, indentSize: _, handleRowExpand: v, extensions: y = [], extensionApi: b, getRowId: x, onCellContextMenu: S }) {
-	let C = y.length > 0 && !!b;
+function o({ table: o, card: s = !1, fieldLabels: c, expandedRowsState: l, onRowClick: u, onRowDoubleClick: d, onRowMouseEnter: f, onRowMouseLeave: p, onCellClick: m, onCellDoubleClick: h, onCellMouseEnter: g, onCellMouseLeave: _, enableExpanding: v, indentSize: y, handleRowExpand: b, extensions: x = [], extensionApi: S, getRowId: C, onCellContextMenu: w }) {
+	let T = x.length > 0 && !!S;
 	return /* @__PURE__ */ i(e.Body, { children: o.getRowModel().rows.length === 0 ? /* @__PURE__ */ i(e.Row, { children: /* @__PURE__ */ i(e.Cell, {
 		colSpan: o.getAllColumns().length,
 		className: "text-center py-4",
 		children: "没有数据"
-	}) }) : o.getRowModel().rows.map((o, w) => {
-		let T = o.original, E = T.__depth || 0, D = T.__hasChildren || !1, O = T.__id, k = D && s[O] || !1, A = E > 0, j = T.__parentId, M = !j || s[j] || !1, N = `
+	}) }) : o.getRowModel().rows.map((o, E) => {
+		let D = o.depth, O = o.subRows.length > 0, k = o.id, A = O && l[k] || !1, j = `
             ${o.getIsSelected() ? "bg-primary/10" : ""}
-            ${D && k ? "tree-row-expanded" : ""}
-          `;
-		if (A && !M) return null;
-		let P = x ? x(o.original, w) : String(O ?? w), F = {
+            ${O && A ? "tree-row-expanded" : ""}
+          `, M = C ? C(o.original, E) : o.id, N = {
 			row: o.original,
-			rowId: P,
-			rowIndex: w,
+			rowId: M,
+			rowIndex: E,
 			selected: o.getIsSelected()
-		}, I = C ? y.reduce((e, t) => Object.assign(e, t.rowProps?.(F, b) ?? {}), {}) : {}, L = /* @__PURE__ */ i(e.Row, {
-			className: N,
-			onClick: c ? (e) => c(o.original, e) : void 0,
-			onDoubleClick: l ? (e) => l(o.original, e) : void 0,
-			onMouseEnter: u ? (e) => u(o.original, e) : void 0,
-			onMouseLeave: d ? (e) => d(o.original, e) : void 0,
-			...I,
-			children: o.getVisibleCells().map((n, s) => {
-				let c = s === 0, l;
-				if (C) {
+		}, P = T ? x.reduce((e, t) => Object.assign(e, t.rowProps?.(N, S) ?? {}), {}) : {}, F = /* @__PURE__ */ i(e.Row, {
+			selected: o.getIsSelected(),
+			className: j,
+			onClick: u ? (e) => u(o.original, e) : void 0,
+			onDoubleClick: d ? (e) => d(o.original, e) : void 0,
+			onMouseEnter: f ? (e) => f(o.original, e) : void 0,
+			onMouseLeave: p ? (e) => p(o.original, e) : void 0,
+			...P,
+			children: o.getVisibleCells().map((n, l) => {
+				let u = l === 0, d;
+				if (T) {
 					let e = {
 						value: n.getValue(),
 						row: o.original,
-						rowId: P,
-						rowIndex: w,
+						rowId: M,
+						rowIndex: E,
 						columnId: n.column.id
 					};
-					for (let t of y) {
-						let n = t.cell?.(e, b);
+					for (let t of x) {
+						let n = t.cell?.(e, S);
 						if (n !== void 0) {
-							l = n;
+							d = n;
 							break;
 						}
 					}
 				}
-				return l === void 0 && (l = t(n.column.columnDef.cell, n.getContext())), /* @__PURE__ */ i(e.Cell, {
-					onClick: f ? (e) => {
-						e.stopPropagation(), f(o.original, n.column, e);
+				return d === void 0 && (d = t(n.column.columnDef.cell, n.getContext())), /* @__PURE__ */ i(e.Cell, {
+					label: s ? c && Object.prototype.hasOwnProperty.call(c, n.column.id) ? c[n.column.id] : typeof n.column.columnDef.header == "string" ? n.column.columnDef.header : n.column.id : void 0,
+					onClick: m ? (e) => {
+						e.stopPropagation(), m(o.original, n.column, e);
 					} : void 0,
-					onDoubleClick: p ? (e) => {
-						e.stopPropagation(), p(o.original, n.column, e);
+					onDoubleClick: h ? (e) => {
+						e.stopPropagation(), h(o.original, n.column, e);
 					} : void 0,
-					onMouseEnter: m ? (e) => m(o.original, n.column, e) : void 0,
-					onMouseLeave: h ? (e) => h(o.original, n.column, e) : void 0,
+					onMouseEnter: g ? (e) => g(o.original, n.column, e) : void 0,
+					onMouseLeave: _ ? (e) => _(o.original, n.column, e) : void 0,
 					children: /* @__PURE__ */ a("div", {
 						className: "flex items-center",
-						onContextMenu: S ? (e) => S(e, o.original, n.column, w) : void 0,
-						children: [c && g && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { style: { width: `${E * _}px` } }), D ? /* @__PURE__ */ i("button", {
+						onContextMenu: w ? (e) => w(e, o.original, n.column, E) : void 0,
+						children: [u && v && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", { style: { width: `${D * y}px` } }), O ? /* @__PURE__ */ i("button", {
 							onClick: (e) => {
-								e.stopPropagation(), v(O, o.original);
+								e.stopPropagation(), b(k, o.original);
 							},
 							className: "mr-2 focus:outline-none",
 							children: /* @__PURE__ */ i("svg", {
@@ -70,7 +70,7 @@ function o({ table: o, expandedRowsState: s, onRowClick: c, onRowDoubleClick: l,
 								stroke: "currentColor",
 								style: {
 									transition: "transform 0.3s ease",
-									transform: k ? "rotate(90deg)" : "rotate(0deg)"
+									transform: A ? "rotate(90deg)" : "rotate(0deg)"
 								},
 								children: /* @__PURE__ */ i("path", {
 									strokeLinecap: "round",
@@ -79,16 +79,16 @@ function o({ table: o, expandedRowsState: s, onRowClick: c, onRowDoubleClick: l,
 									d: "M9 5l7 7-7 7"
 								})
 							})
-						}) : /* @__PURE__ */ i("div", { className: "w-6" })] }), l]
+						}) : /* @__PURE__ */ i("div", { className: "w-6" })] }), d]
 					})
 				}, n.id);
 			})
 		}, o.id);
-		if (C) {
-			let e = y.reduce((e, t) => t.wrapRow?.(e, F, b) ?? e, L);
-			if (e !== L) return /* @__PURE__ */ i(n.Fragment, { children: e }, o.id);
+		if (T) {
+			let e = x.reduce((e, t) => t.wrapRow?.(e, N, S) ?? e, F);
+			if (e !== F) return /* @__PURE__ */ i(n.Fragment, { children: e }, o.id);
 		}
-		return L;
+		return F;
 	}) });
 }
 //#endregion

package/dist/components/pro/DataTable/components/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":[],"sources":["../../../../../src/components/pro/DataTable/components/TableBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as TanStackTable, flexRender } from '../tanstack-table';\nimport Table from '../../../Table';\nimport { RowEventHandler, CellEventHandler } from '../types';\nimport type {\n    DataTableApi,\n    DataTableCellContext,\n    DataTableExtension,\n    DataTableRowContext,\n} from '../extension';\n\ninterface TableBodyProps<T extends object> {\n    table: TanStackTable<T>;\n    expandedRowsState: Record<string, boolean>;\n    onRowClick?: RowEventHandler;\n    onRowDoubleClick?: RowEventHandler;\n    onRowMouseEnter?: RowEventHandler;\n    onRowMouseLeave?: RowEventHandler;\n    onCellClick?: CellEventHandler;\n    onCellDoubleClick?: CellEventHandler;\n    onCellMouseEnter?: CellEventHandler;\n    onCellMouseLeave?: CellEventHandler;\n    enableExpanding: boolean;\n    indentSize: number;\n    handleRowExpand: (rowId: string, row: T) => void;\n    // 扩展系统\n    extensions?: DataTableExtension<T>[];\n    extensionApi?: DataTableApi<T>;\n    getRowId?: (row: T, index: number) => string;\n    onCellContextMenu?: (\n        e: React.MouseEvent,\n        row: T,\n        column: any,\n        rowIndex: number,\n    ) => void;\n}\n\nexport function TableBody<T extends object>({\n    table,\n    expandedRowsState,\n    onRowClick,\n    onRowDoubleClick,\n    onRowMouseEnter,\n    onRowMouseLeave,\n    onCellClick,\n    onCellDoubleClick,\n    onCellMouseEnter,\n    onCellMouseLeave,\n    enableExpanding,\n    indentSize,\n    handleRowExpand,\n    extensions = [],\n    extensionApi,\n    getRowId,\n    onCellContextMenu,\n}: TableBodyProps<T>) {\n    const hasExtensions = extensions.length > 0 && !!extensionApi;\n\n    return (\n        <Table.Body>\n            {table.getRowModel().rows.length === 0 ? (\n                <Table.Row>\n                    <Table.Cell colSpan={table.getAllColumns().length} className=\"text-center py-4\">\n                        没有数据\n                    </Table.Cell>\n                </Table.Row>\n            ) : (\n                table.getRowModel().rows.map((row, rowIndex) => {\n                    const rowData = row.original as any;\n                    const depth = rowData.__depth || 0;\n                    const hasChildren = rowData.__hasChildren || false;\n                    const rowId = rowData.__id;\n                    const isExpanded = hasChildren && expandedRowsState[rowId] || false;\n                    const isChildRow = depth > 0;\n                    const parentId = rowData.__parentId;\n                    const parentExpanded = parentId ? expandedRowsState[parentId] || false : true;\n\n                    // 根据层级和展开状态应用不同的CSS类\n                    const rowClassName = `\n            ${row.getIsSelected() ? 'bg-primary/10' : ''}\n            ${hasChildren ? (isExpanded ? 'tree-row-expanded' : '') : ''}\n          `;\n\n                    // 如果是子行且父行未展开，则不显示\n                    if (isChildRow && !parentExpanded) {\n                        return null;\n                    }\n\n                    // 扩展的行级上下文与注入属性\n                    const resolvedRowId = getRowId\n                        ? getRowId(row.original, rowIndex)\n                        : String(rowId ?? rowIndex);\n                    const rowCtx: DataTableRowContext<T> = {\n                        row: row.original,\n                        rowId: resolvedRowId,\n                        rowIndex,\n                        selected: row.getIsSelected(),\n                    };\n                    const extraRowProps = hasExtensions\n                        ? extensions.reduce<React.HTMLAttributes<HTMLTableRowElement>>(\n                              (acc, ext) =>\n                                  Object.assign(acc, ext.rowProps?.(rowCtx, extensionApi!) ?? {}),\n                              {},\n                          )\n                        : {};\n\n                    const rowElement = (\n                        <Table.Row\n                            key={row.id}\n                            className={rowClassName}\n                            onClick={onRowClick ? e => onRowClick(row.original, e) : undefined}\n                            onDoubleClick={onRowDoubleClick ? e => onRowDoubleClick(row.original, e) : undefined}\n                            onMouseEnter={onRowMouseEnter ? e => onRowMouseEnter(row.original, e) : undefined}\n                            onMouseLeave={onRowMouseLeave ? e => onRowMouseLeave(row.original, e) : undefined}\n                            {...(extraRowProps as any)}\n                        >\n                            {row.getVisibleCells().map((cell, cellIndex) => {\n                                // 为第一列添加缩进和展开/折叠控件\n                                const isFirstColumn = cellIndex === 0;\n\n                                // 扩展可覆写单元格渲染。\n                                let cellContent: React.ReactNode | undefined;\n                                if (hasExtensions) {\n                                    const cellCtx: DataTableCellContext<T> = {\n                                        value: cell.getValue(),\n                                        row: row.original,\n                                        rowId: resolvedRowId,\n                                        rowIndex,\n                                        columnId: cell.column.id,\n                                    };\n                                    for (const ext of extensions) {\n                                        const out = ext.cell?.(cellCtx, extensionApi!);\n                                        if (out !== undefined) {\n                                            cellContent = out;\n                                            break;\n                                        }\n                                    }\n                                }\n                                if (cellContent === undefined) {\n                                    cellContent = flexRender(\n                                        cell.column.columnDef.cell,\n                                        cell.getContext(),\n                                    );\n                                }\n\n                                return (\n                                    <Table.Cell\n                                        key={cell.id}\n                                        onClick={onCellClick ? e => {\n                                            e.stopPropagation(); // 防止触发行点击事件\n                                            onCellClick(row.original, cell.column, e);\n                                        } : undefined}\n                                        onDoubleClick={onCellDoubleClick ? e => {\n                                            e.stopPropagation(); // 防止触发行双击事件\n                                            onCellDoubleClick(row.original, cell.column, e);\n                                        } : undefined}\n                                        onMouseEnter={onCellMouseEnter ? e => onCellMouseEnter(row.original, cell.column, e) : undefined}\n                                        onMouseLeave={onCellMouseLeave ? e => onCellMouseLeave(row.original, cell.column, e) : undefined}\n                                    >\n                                        <div\n                                            className=\"flex items-center\"\n                                            onContextMenu={\n                                                onCellContextMenu\n                                                    ? e =>\n                                                          onCellContextMenu(\n                                                              e,\n                                                              row.original,\n                                                              cell.column,\n                                                              rowIndex,\n                                                          )\n                                                    : undefined\n                                            }\n                                        >\n                                            {isFirstColumn && enableExpanding && (\n                                                <>\n                                                    <div style={{ width: `${depth * indentSize}px` }} />\n                                                    {hasChildren ? (\n                                                        <button\n                                                            onClick={(e) => {\n                                                                e.stopPropagation();\n                                                                handleRowExpand(rowId, row.original);\n                                                            }}\n                                                            className=\"mr-2 focus:outline-none\"\n                                                        >\n                                                            {/* 完全重写箭头图标部分，使用内联样式控制方向 */}\n                                                            <svg\n                                                                xmlns=\"http://www.w3.org/2000/svg\"\n                                                                className=\"h-4 w-4\"\n                                                                fill=\"none\"\n                                                                viewBox=\"0 0 24 24\"\n                                                                stroke=\"currentColor\"\n                                                                style={{\n                                                                    transition: 'transform 0.3s ease',\n                                                                    transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)'\n                                                                }}\n                                                            >\n                                                                {/* 使用右箭头，通过旋转变为下箭头 */}\n                                                                <path\n                                                                    strokeLinecap=\"round\"\n                                                                    strokeLinejoin=\"round\"\n                                                                    strokeWidth=\"2\"\n                                                                    d=\"M9 5l7 7-7 7\"\n                                                                />\n                                                            </svg>\n                                                        </button>\n                                                    ) : (\n                                                        <div className=\"w-6\"></div>\n                                                    )}\n                                                </>\n                                            )}\n                                            {cellContent}\n                                        </div>\n                                    </Table.Cell>\n                                );\n                            })}\n                        </Table.Row>\n                    );\n\n                    // 让扩展包裹整行（如在行下方追加 detail 面板）。\n                    if (hasExtensions) {\n                        const wrapped = extensions.reduce<React.ReactNode>(\n                            (node, ext) => ext.wrapRow?.(node, rowCtx, extensionApi!) ?? node,\n                            rowElement,\n                        );\n                        if (wrapped !== rowElement) {\n                            return <React.Fragment key={row.id}>{wrapped}</React.Fragment>;\n                        }\n                    }\n\n                    return rowElement;\n                })\n            )}\n        </Table.Body>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TableBody.js","names":[],"sources":["../../../../../src/components/pro/DataTable/components/TableBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as TanStackTable, flexRender } from '../tanstack-table';\nimport Table from '../../../Table';\nimport { RowEventHandler, CellEventHandler } from '../types';\nimport type {\n    DataTableApi,\n    DataTableCellContext,\n    DataTableExtension,\n    DataTableRowContext,\n} from '../extension';\n\ninterface TableBodyProps<T extends object> {\n    table: TanStackTable<T>;\n    card?: boolean;\n    fieldLabels?: Record<string, React.ReactNode>;\n    expandedRowsState: Record<string, boolean>;\n    onRowClick?: RowEventHandler;\n    onRowDoubleClick?: RowEventHandler;\n    onRowMouseEnter?: RowEventHandler;\n    onRowMouseLeave?: RowEventHandler;\n    onCellClick?: CellEventHandler;\n    onCellDoubleClick?: CellEventHandler;\n    onCellMouseEnter?: CellEventHandler;\n    onCellMouseLeave?: CellEventHandler;\n    enableExpanding: boolean;\n    indentSize: number;\n    handleRowExpand: (rowId: string, row: T) => void;\n    // 扩展系统\n    extensions?: DataTableExtension<T>[];\n    extensionApi?: DataTableApi<T>;\n    getRowId?: (row: T, index: number) => string;\n    onCellContextMenu?: (\n        e: React.MouseEvent,\n        row: T,\n        column: any,\n        rowIndex: number,\n    ) => void;\n}\n\nexport function TableBody<T extends object>({\n    table,\n    card = false,\n    fieldLabels,\n    expandedRowsState,\n    onRowClick,\n    onRowDoubleClick,\n    onRowMouseEnter,\n    onRowMouseLeave,\n    onCellClick,\n    onCellDoubleClick,\n    onCellMouseEnter,\n    onCellMouseLeave,\n    enableExpanding,\n    indentSize,\n    handleRowExpand,\n    extensions = [],\n    extensionApi,\n    getRowId,\n    onCellContextMenu,\n}: TableBodyProps<T>) {\n    const hasExtensions = extensions.length > 0 && !!extensionApi;\n\n    return (\n        <Table.Body>\n            {table.getRowModel().rows.length === 0 ? (\n                <Table.Row>\n                    <Table.Cell colSpan={table.getAllColumns().length} className=\"text-center py-4\">\n                        没有数据\n                    </Table.Cell>\n                </Table.Row>\n            ) : (\n                table.getRowModel().rows.map((row, rowIndex) => {\n                    const depth = row.depth;\n                    const hasChildren = row.subRows.length > 0;\n                    const rowId = row.id;\n                    const isExpanded = hasChildren && expandedRowsState[rowId] || false;\n\n                    // 根据层级和展开状态应用不同的CSS类\n                    const rowClassName = `\n            ${row.getIsSelected() ? 'bg-primary/10' : ''}\n            ${hasChildren ? (isExpanded ? 'tree-row-expanded' : '') : ''}\n          `;\n\n\n                    // 扩展的行级上下文与注入属性\n                    const resolvedRowId = getRowId\n                        ? getRowId(row.original, rowIndex)\n                        : row.id;\n                    const rowCtx: DataTableRowContext<T> = {\n                        row: row.original,\n                        rowId: resolvedRowId,\n                        rowIndex,\n                        selected: row.getIsSelected(),\n                    };\n                    const extraRowProps = hasExtensions\n                        ? extensions.reduce<React.HTMLAttributes<HTMLTableRowElement>>(\n                              (acc, ext) =>\n                                  Object.assign(acc, ext.rowProps?.(rowCtx, extensionApi!) ?? {}),\n                              {},\n                          )\n                        : {};\n\n                    const rowElement = (\n                        <Table.Row\n                            key={row.id}\n                            selected={row.getIsSelected()}\n                            className={rowClassName}\n                            onClick={onRowClick ? e => onRowClick(row.original, e) : undefined}\n                            onDoubleClick={onRowDoubleClick ? e => onRowDoubleClick(row.original, e) : undefined}\n                            onMouseEnter={onRowMouseEnter ? e => onRowMouseEnter(row.original, e) : undefined}\n                            onMouseLeave={onRowMouseLeave ? e => onRowMouseLeave(row.original, e) : undefined}\n                            {...(extraRowProps as any)}\n                        >\n                            {row.getVisibleCells().map((cell, cellIndex) => {\n                                // 为第一列添加缩进和展开/折叠控件\n                                const isFirstColumn = cellIndex === 0;\n\n                                // 扩展可覆写单元格渲染。\n                                let cellContent: React.ReactNode | undefined;\n                                if (hasExtensions) {\n                                    const cellCtx: DataTableCellContext<T> = {\n                                        value: cell.getValue(),\n                                        row: row.original,\n                                        rowId: resolvedRowId,\n                                        rowIndex,\n                                        columnId: cell.column.id,\n                                    };\n                                    for (const ext of extensions) {\n                                        const out = ext.cell?.(cellCtx, extensionApi!);\n                                        if (out !== undefined) {\n                                            cellContent = out;\n                                            break;\n                                        }\n                                    }\n                                }\n                                if (cellContent === undefined) {\n                                    cellContent = flexRender(\n                                        cell.column.columnDef.cell,\n                                        cell.getContext(),\n                                    );\n                                }\n\n                                return (\n                                    <Table.Cell\n                                        key={cell.id}\n                                        label={card ? (\n                                            fieldLabels && Object.prototype.hasOwnProperty.call(fieldLabels, cell.column.id)\n                                                ? fieldLabels[cell.column.id]\n                                                : typeof cell.column.columnDef.header === 'string'\n                                                    ? cell.column.columnDef.header\n                                                    : cell.column.id\n                                        ) : undefined}\n                                        onClick={onCellClick ? e => {\n                                            e.stopPropagation(); // 防止触发行点击事件\n                                            onCellClick(row.original, cell.column, e);\n                                        } : undefined}\n                                        onDoubleClick={onCellDoubleClick ? e => {\n                                            e.stopPropagation(); // 防止触发行双击事件\n                                            onCellDoubleClick(row.original, cell.column, e);\n                                        } : undefined}\n                                        onMouseEnter={onCellMouseEnter ? e => onCellMouseEnter(row.original, cell.column, e) : undefined}\n                                        onMouseLeave={onCellMouseLeave ? e => onCellMouseLeave(row.original, cell.column, e) : undefined}\n                                    >\n                                        <div\n                                            className=\"flex items-center\"\n                                            onContextMenu={\n                                                onCellContextMenu\n                                                    ? e =>\n                                                          onCellContextMenu(\n                                                              e,\n                                                              row.original,\n                                                              cell.column,\n                                                              rowIndex,\n                                                          )\n                                                    : undefined\n                                            }\n                                        >\n                                            {isFirstColumn && enableExpanding && (\n                                                <>\n                                                    <div style={{ width: `${depth * indentSize}px` }} />\n                                                    {hasChildren ? (\n                                                        <button\n                                                            onClick={(e) => {\n                                                                e.stopPropagation();\n                                                                handleRowExpand(rowId, row.original);\n                                                            }}\n                                                            className=\"mr-2 focus:outline-none\"\n                                                        >\n                                                            {/* 完全重写箭头图标部分，使用内联样式控制方向 */}\n                                                            <svg\n                                                                xmlns=\"http://www.w3.org/2000/svg\"\n                                                                className=\"h-4 w-4\"\n                                                                fill=\"none\"\n                                                                viewBox=\"0 0 24 24\"\n                                                                stroke=\"currentColor\"\n                                                                style={{\n                                                                    transition: 'transform 0.3s ease',\n                                                                    transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)'\n                                                                }}\n                                                            >\n                                                                {/* 使用右箭头，通过旋转变为下箭头 */}\n                                                                <path\n                                                                    strokeLinecap=\"round\"\n                                                                    strokeLinejoin=\"round\"\n                                                                    strokeWidth=\"2\"\n                                                                    d=\"M9 5l7 7-7 7\"\n                                                                />\n                                                            </svg>\n                                                        </button>\n                                                    ) : (\n                                                        <div className=\"w-6\"></div>\n                                                    )}\n                                                </>\n                                            )}\n                                            {cellContent}\n                                        </div>\n                                    </Table.Cell>\n                                );\n                            })}\n                        </Table.Row>\n                    );\n\n                    // 让扩展包裹整行（如在行下方追加 detail 面板）。\n                    if (hasExtensions) {\n                        const wrapped = extensions.reduce<React.ReactNode>(\n                            (node, ext) => ext.wrapRow?.(node, rowCtx, extensionApi!) ?? node,\n                            rowElement,\n                        );\n                        if (wrapped !== rowElement) {\n                            return <React.Fragment key={row.id}>{wrapped}</React.Fragment>;\n                        }\n                    }\n\n                    return rowElement;\n                })\n            )}\n        </Table.Body>\n    );\n}\n"],"mappings":"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"}

package/dist/components/pro/DataTable/components/TablePagination.d.ts

@@ -1,15 +1,9 @@
 import React from 'react';
-import { Table as TanStackTable } from '../tanstack-table';
+import { Table as TanStackTable, PaginationState } from '../tanstack-table';
 interface TablePaginationProps<T extends object> {
     enablePagination: boolean;
     table: TanStackTable<T>;
-    internalPageIndex: number;
-    internalPageSize: number;
-    handlePageChange: (newPage: number) => void;
-    setInternalPageSize: (newSize: number) => void;
-    setInternalPageIndex: (page: number) => void;
-    onPageSizeChange?: (pageSize: number) => void;
-    onPageChange?: (page: number) => void;
+    onPaginationChange: (pagination: PaginationState) => void;
 }
-export declare function TablePagination<T extends object>({ enablePagination, table, internalPageIndex, internalPageSize, handlePageChange, setInternalPageSize, setInternalPageIndex, onPageSizeChange, onPageChange, }: TablePaginationProps<T>): React.JSX.Element | null;
+export declare function TablePagination<T extends object>({ enablePagination, table, onPaginationChange, }: TablePaginationProps<T>): React.JSX.Element | null;
 export {};

package/dist/components/pro/DataTable/components/TablePagination.js

@@ -1,9 +1,19 @@
 import "react";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/components/pro/DataTable/components/TablePagination.tsx
-function n({ enablePagination: n, table: r, internalPageIndex: i, internalPageSize: a, handlePageChange: o, setInternalPageSize: s, setInternalPageIndex: c, onPageSizeChange: l, onPageChange: u }) {
+function n({ enablePagination: n, table: r, onPaginationChange: i }) {
 	if (!n) return null;
-	let { pageIndex: d } = r.state.pagination, f = r.getPageCount();
+	let { pageIndex: a, pageSize: o } = r.state.pagination, s = r.getPageCount(), c = (e) => i({
+		pageIndex: e,
+		pageSize: o
+	}), l = [.../* @__PURE__ */ new Set([
+		5,
+		10,
+		15,
+		20,
+		25,
+		o
+	])].sort((e, t) => e - t);
 	return /* @__PURE__ */ t("div", {
 		className: "mt-4 flex justify-between items-center",
 		children: [
@@ -11,9 +21,9 @@ function n({ enablePagination: n, table: r, internalPageIndex: i, internalPageSi
 				className: "text-sm",
 				children: [
 					"第 ",
-					d + 1,
+					s === 0 ? 0 : a + 1,
 					" 页，共 ",
-					f,
+					s,
 					" 页"
 				]
 			}) }),
@@ -22,33 +32,33 @@ function n({ enablePagination: n, table: r, internalPageIndex: i, internalPageSi
 				children: [
 					/* @__PURE__ */ e("button", {
 						className: "join-item btn btn-sm",
-						onClick: () => o(0),
+						onClick: () => c(0),
 						disabled: !r.getCanPreviousPage(),
 						children: "<<"
 					}),
 					/* @__PURE__ */ e("button", {
 						className: "join-item btn btn-sm",
-						onClick: () => o(d - 1),
+						onClick: () => c(a - 1),
 						disabled: !r.getCanPreviousPage(),
 						children: "<"
 					}),
-					Array.from({ length: Math.min(5, f) }).map((t, n) => {
-						let r = d - 2 + n;
-						return r < 0 && (r = n), r >= f && (r = f - 5 + n), f <= 5 && (r = n), r < 0 || r >= f ? null : /* @__PURE__ */ e("button", {
-							className: `join-item btn btn-sm ${r === d ? "btn-active" : ""}`,
-							onClick: () => o(r),
+					Array.from({ length: Math.min(5, s) }).map((t, n) => {
+						let r = a - 2 + n;
+						return r < 0 && (r = n), r >= s && (r = s - 5 + n), s <= 5 && (r = n), r < 0 || r >= s ? null : /* @__PURE__ */ e("button", {
+							className: `join-item btn btn-sm ${r === a ? "btn-active" : ""}`,
+							onClick: () => c(r),
 							children: r + 1
 						}, r);
 					}),
 					/* @__PURE__ */ e("button", {
 						className: "join-item btn btn-sm",
-						onClick: () => o(d + 1),
+						onClick: () => c(a + 1),
 						disabled: !r.getCanNextPage(),
 						children: ">"
 					}),
 					/* @__PURE__ */ e("button", {
 						className: "join-item btn btn-sm",
-						onClick: () => o(f - 1),
+						onClick: () => c(s - 1),
 						disabled: !r.getCanNextPage(),
 						children: ">>"
 					})
@@ -56,18 +66,12 @@ function n({ enablePagination: n, table: r, internalPageIndex: i, internalPageSi
 			}),
 			/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("select", {
 				className: "select select-sm select-bordered",
-				value: a,
-				onChange: (e) => {
-					let t = Number(e.target.value);
-					s(t), l && l(t), c(0), u && u(0);
-				},
-				children: [
-					5,
-					10,
-					15,
-					20,
-					25
-				].map((e) => /* @__PURE__ */ t("option", {
+				value: o,
+				onChange: (e) => i({
+					pageIndex: 0,
+					pageSize: Number(e.target.value)
+				}),
+				children: l.map((e) => /* @__PURE__ */ t("option", {
 					value: e,
 					children: [e, " 条/页"]
 				}, e))

package/dist/components/pro/DataTable/components/TablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.js","names":[],"sources":["../../../../../src/components/pro/DataTable/components/TablePagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as TanStackTable } from '../tanstack-table';\n\ninterface TablePaginationProps<T extends object> {\n    enablePagination: boolean;\n    table: TanStackTable<T>;\n    internalPageIndex: number;\n    internalPageSize: number;\n    handlePageChange: (newPage: number) => void;\n    setInternalPageSize: (newSize: number) => void;\n    setInternalPageIndex: (page: number) => void;\n    onPageSizeChange?: (pageSize: number) => void;\n    onPageChange?: (page: number) => void;\n}\n\nexport function TablePagination<T extends object>({\n    enablePagination,\n    table,\n    internalPageIndex,\n    internalPageSize,\n    handlePageChange,\n    setInternalPageSize,\n    setInternalPageIndex,\n    onPageSizeChange,\n    onPageChange,\n}: TablePaginationProps<T>) {\n    if (!enablePagination) return null;\n\n    const { pageIndex } = table.state.pagination;\n    const pageCount = table.getPageCount();\n\n    return (\n        <div className=\"mt-4 flex justify-between items-center\">\n            <div>\n                <span className=\"text-sm\">\n                    第 {pageIndex + 1} 页，共 {pageCount} 页\n                </span>\n            </div>\n            <div className=\"join\">\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(0)}\n                    disabled={!table.getCanPreviousPage()}\n                >\n                    {'<<'}\n                </button>\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(pageIndex - 1)}\n                    disabled={!table.getCanPreviousPage()}\n                >\n                    {'<'}\n                </button>\n                {Array.from({ length: Math.min(5, pageCount) }).map((_, i) => {\n                    // 显示当前页前后两页\n                    let pageNum = pageIndex - 2 + i;\n\n                    // 确保页码在合法范围内\n                    if (pageNum < 0) pageNum = i;\n                    if (pageNum >= pageCount) pageNum = pageCount - 5 + i;\n\n                    // 如果总页数小于5，直接显示全部页码\n                    if (pageCount <= 5) {\n                        pageNum = i;\n                    }\n\n                    // 如果页码超出范围，不显示\n                    if (pageNum < 0 || pageNum >= pageCount) return null;\n\n                    return (\n                        <button\n                            key={pageNum}\n                            className={`join-item btn btn-sm ${pageNum === pageIndex ? 'btn-active' : ''}`}\n                            onClick={() => handlePageChange(pageNum)}\n                        >\n                            {pageNum + 1}\n                        </button>\n                    );\n                })}\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(pageIndex + 1)}\n                    disabled={!table.getCanNextPage()}\n                >\n                    {'>'}\n                </button>\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(pageCount - 1)}\n                    disabled={!table.getCanNextPage()}\n                >\n                    {'>>'}\n                </button>\n            </div>\n            <div>\n                <select\n                    className=\"select select-sm select-bordered\"\n                    value={internalPageSize}\n                    onChange={(e) => {\n                        const newSize = Number(e.target.value);\n\n                        // 更新内部页面大小\n                        setInternalPageSize(newSize);\n\n                        // 通知外部页面大小变更\n                        if (onPageSizeChange) {\n                            onPageSizeChange(newSize);\n                        }\n\n                        // 重置到第一页\n                        setInternalPageIndex(0);\n\n                        // 通知外部页码重置为0\n                        if (onPageChange) {\n                            onPageChange(0);\n                        }\n                    }}\n                >\n                    {[5, 10, 15, 20, 25].map((pageSize) => (\n                        <option key={pageSize} value={pageSize}>\n                            {pageSize} 条/页\n                        </option>\n                    ))}\n                </select>\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;AAeA,SAAgB,EAAkC,EAC9C,qBACA,UACA,sBACA,qBACA,qBACA,wBACA,yBACA,qBACA,mBACwB;CACxB,IAAI,CAAC,GAAkB,OAAO;CAE9B,IAAM,EAAE,iBAAc,EAAM,MAAM,YAC5B,IAAY,EAAM,aAAa;CAErC,OACI,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACI,kBAAC,OAAD,EAAA,UACI,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KAA0B;KACnB,IAAY;KAAE;KAAM;KAAU;IAC/B;GACL,CAAA,EAAA,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,CAAC;MACjC,UAAU,CAAC,EAAM,mBAAmB;MAEnC,UAAA;KACG,CAAA;KACR,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,IAAY,CAAC;MAC7C,UAAU,CAAC,EAAM,mBAAmB;MAEnC,UAAA;KACG,CAAA;KACP,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,CAAS,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM;MAE1D,IAAI,IAAU,IAAY,IAAI;MAc9B,OAXI,IAAU,MAAG,IAAU,IACvB,KAAW,MAAW,IAAU,IAAY,IAAI,IAGhD,KAAa,MACb,IAAU,IAIV,IAAU,KAAK,KAAW,IAAkB,OAG5C,kBAAC,UAAD;OAEI,WAAW,wBAAwB,MAAY,IAAY,eAAe;OAC1E,eAAe,EAAiB,CAAO;OAEtC,UAAA,IAAU;MACP,GALC,CAKD;KAEhB,CAAC;KACD,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,IAAY,CAAC;MAC7C,UAAU,CAAC,EAAM,eAAe;MAE/B,UAAA;KACG,CAAA;KACR,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,IAAY,CAAC;MAC7C,UAAU,CAAC,EAAM,eAAe;MAE/B,UAAA;KACG,CAAA;IACP;;GACL,kBAAC,OAAD,EAAA,UACI,kBAAC,UAAD;IACI,WAAU;IACV,OAAO;IACP,WAAW,MAAM;KACb,IAAM,IAAU,OAAO,EAAE,OAAO,KAAK;KAcrC,AAXA,EAAoB,CAAO,GAGvB,KACA,EAAiB,CAAO,GAI5B,EAAqB,CAAC,GAGlB,KACA,EAAa,CAAC;IAEtB;IAEC,UAAA;KAAC;KAAG;KAAI;KAAI;KAAI;IAAE,CAAC,CAAC,KAAK,MACtB,kBAAC,UAAD;KAAuB,OAAO;KAA9B,UAAA,CACK,GAAS,MACN;IAFK,GAAA,CAEL,CACX;GACG,CAAA,EACP,CAAA;EACJ;;AAEb"}
+{"version":3,"file":"TablePagination.js","names":[],"sources":["../../../../../src/components/pro/DataTable/components/TablePagination.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as TanStackTable, PaginationState } from '../tanstack-table';\n\ninterface TablePaginationProps<T extends object> {\n    enablePagination: boolean;\n    table: TanStackTable<T>;\n    onPaginationChange: (pagination: PaginationState) => void;\n}\n\nexport function TablePagination<T extends object>({\n    enablePagination,\n    table,\n    onPaginationChange,\n}: TablePaginationProps<T>) {\n    if (!enablePagination) return null;\n\n    const { pageIndex, pageSize } = table.state.pagination;\n    const pageCount = table.getPageCount();\n    const handlePageChange = (next: number) => onPaginationChange({ pageIndex: next, pageSize });\n    const pageSizes = [...new Set([5, 10, 15, 20, 25, pageSize])].sort((a, b) => a - b);\n\n    return (\n        <div className=\"mt-4 flex justify-between items-center\">\n            <div>\n                <span className=\"text-sm\">\n                    第 {pageCount === 0 ? 0 : pageIndex + 1} 页，共 {pageCount} 页\n                </span>\n            </div>\n            <div className=\"join\">\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(0)}\n                    disabled={!table.getCanPreviousPage()}\n                >\n                    {'<<'}\n                </button>\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(pageIndex - 1)}\n                    disabled={!table.getCanPreviousPage()}\n                >\n                    {'<'}\n                </button>\n                {Array.from({ length: Math.min(5, pageCount) }).map((_, i) => {\n                    // 显示当前页前后两页\n                    let pageNum = pageIndex - 2 + i;\n\n                    // 确保页码在合法范围内\n                    if (pageNum < 0) pageNum = i;\n                    if (pageNum >= pageCount) pageNum = pageCount - 5 + i;\n\n                    // 如果总页数小于5，直接显示全部页码\n                    if (pageCount <= 5) {\n                        pageNum = i;\n                    }\n\n                    // 如果页码超出范围，不显示\n                    if (pageNum < 0 || pageNum >= pageCount) return null;\n\n                    return (\n                        <button\n                            key={pageNum}\n                            className={`join-item btn btn-sm ${pageNum === pageIndex ? 'btn-active' : ''}`}\n                            onClick={() => handlePageChange(pageNum)}\n                        >\n                            {pageNum + 1}\n                        </button>\n                    );\n                })}\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(pageIndex + 1)}\n                    disabled={!table.getCanNextPage()}\n                >\n                    {'>'}\n                </button>\n                <button\n                    className=\"join-item btn btn-sm\"\n                    onClick={() => handlePageChange(pageCount - 1)}\n                    disabled={!table.getCanNextPage()}\n                >\n                    {'>>'}\n                </button>\n            </div>\n            <div>\n                <select\n                    className=\"select select-sm select-bordered\"\n                    value={pageSize}\n                    onChange={(e) => onPaginationChange({ pageIndex: 0, pageSize: Number(e.target.value) })}\n                >\n                    {pageSizes.map((pageSize) => (\n                        <option key={pageSize} value={pageSize}>\n                            {pageSize} 条/页\n                        </option>\n                    ))}\n                </select>\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;AASA,SAAgB,EAAkC,EAC9C,qBACA,UACA,yBACwB;CACxB,IAAI,CAAC,GAAkB,OAAO;CAE9B,IAAM,EAAE,cAAW,gBAAa,EAAM,MAAM,YACtC,IAAY,EAAM,aAAa,GAC/B,KAAoB,MAAiB,EAAmB;EAAE,WAAW;EAAM;CAAS,CAAC,GACrF,IAAY,CAAC,mBAAG,IAAI,IAAI;EAAC;EAAG;EAAI;EAAI;EAAI;EAAI;CAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CAElF,OACI,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACI,kBAAC,OAAD,EAAA,UACI,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA;KAA0B;KACnB,MAAc,IAAI,IAAI,IAAY;KAAE;KAAM;KAAU;IACrD;GACL,CAAA,EAAA,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,CAAC;MACjC,UAAU,CAAC,EAAM,mBAAmB;MAEnC,UAAA;KACG,CAAA;KACR,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,IAAY,CAAC;MAC7C,UAAU,CAAC,EAAM,mBAAmB;MAEnC,UAAA;KACG,CAAA;KACP,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,CAAS,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM;MAE1D,IAAI,IAAU,IAAY,IAAI;MAc9B,OAXI,IAAU,MAAG,IAAU,IACvB,KAAW,MAAW,IAAU,IAAY,IAAI,IAGhD,KAAa,MACb,IAAU,IAIV,IAAU,KAAK,KAAW,IAAkB,OAG5C,kBAAC,UAAD;OAEI,WAAW,wBAAwB,MAAY,IAAY,eAAe;OAC1E,eAAe,EAAiB,CAAO;OAEtC,UAAA,IAAU;MACP,GALC,CAKD;KAEhB,CAAC;KACD,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,IAAY,CAAC;MAC7C,UAAU,CAAC,EAAM,eAAe;MAE/B,UAAA;KACG,CAAA;KACR,kBAAC,UAAD;MACI,WAAU;MACV,eAAe,EAAiB,IAAY,CAAC;MAC7C,UAAU,CAAC,EAAM,eAAe;MAE/B,UAAA;KACG,CAAA;IACP;;GACL,kBAAC,OAAD,EAAA,UACI,kBAAC,UAAD;IACI,WAAU;IACV,OAAO;IACP,WAAW,MAAM,EAAmB;KAAE,WAAW;KAAG,UAAU,OAAO,EAAE,OAAO,KAAK;IAAE,CAAC;IAErF,UAAA,EAAU,KAAK,MACZ,kBAAC,UAAD;KAAuB,OAAO;KAA9B,UAAA,CACK,GAAS,MACN;IAFK,GAAA,CAEL,CACX;GACG,CAAA,EACP,CAAA;EACJ;;AAEb"}

package/dist/components/pro/DataTable/components/TableToolbar.d.ts

@@ -3,6 +3,7 @@ import { Table, VisibilityState, RowSelectionState } from '../tanstack-table';
 import { ToolbarOptions, CustomFilterPanelProps, DataTableProps } from '../types';
 interface TableToolbarProps<T extends object> {
     toolbar: ToolbarOptions;
+    viewSwitcher?: React.ReactNode;
     table: Table<T>;
     columns: DataTableProps<T>['columns'];
     columnOrderState: string[];
@@ -18,5 +19,5 @@ interface TableToolbarProps<T extends object> {
     enableColumnReordering: boolean;
     handleDrop: (e: React.DragEvent, targetColumnId: string) => void;
 }
-export declare function TableToolbar<T extends object>({ toolbar, table, columns, columnOrderState, visibilityState, activeFilter, setActiveFilter, customFilterPanel, draggedColumnId, handleDragStart, toggleColumnVisibility, rowSelection, data, enableColumnReordering, handleDrop, }: TableToolbarProps<T>): React.JSX.Element | null;
+export declare function TableToolbar<T extends object>({ toolbar, viewSwitcher, table, columns, columnOrderState, visibilityState, activeFilter, setActiveFilter, customFilterPanel, draggedColumnId, handleDragStart, toggleColumnVisibility, rowSelection, data, enableColumnReordering, handleDrop, }: TableToolbarProps<T>): React.JSX.Element | null;
 export {};

package/dist/components/pro/DataTable/components/TableToolbar.js

@@ -4,38 +4,44 @@ import { BulkActions as n } from "./BulkActions.js";
 import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/pro/DataTable/components/TableToolbar.tsx
-function a({ toolbar: a, table: o, columns: s, columnOrderState: c, visibilityState: l, activeFilter: u, setActiveFilter: d, customFilterPanel: f, draggedColumnId: p, handleDragStart: m, toggleColumnVisibility: h, rowSelection: g, data: _, enableColumnReordering: v, handleDrop: y }) {
+function a({ toolbar: a, viewSwitcher: o, table: s, columns: c, columnOrderState: l, visibilityState: u, activeFilter: d, setActiveFilter: f, customFilterPanel: p, draggedColumnId: m, handleDragStart: h, toggleColumnVisibility: g, rowSelection: _, data: v, enableColumnReordering: y, handleDrop: b }) {
 	return a.enabled ? /* @__PURE__ */ i("div", {
 		className: "flex flex-wrap justify-between gap-4 mb-4",
 		children: [/* @__PURE__ */ i("div", {
 			className: "flex flex-wrap gap-2 items-center",
 			children: [
 				a.enableColumnSelector && /* @__PURE__ */ r(e, {
-					table: o,
-					columns: s,
-					columnOrderState: c,
-					visibilityState: l,
-					toggleColumnVisibility: h,
-					enableColumnReordering: v,
-					handleDragStart: m,
-					handleDrop: y,
-					draggedColumnId: p
+					table: s,
+					columns: c,
+					columnOrderState: l,
+					visibilityState: u,
+					toggleColumnVisibility: g,
+					enableColumnReordering: y,
+					handleDragStart: h,
+					handleDrop: b,
+					draggedColumnId: m
 				}),
 				a.enableFiltering && /* @__PURE__ */ r(t, {
-					table: o,
-					columns: s,
-					activeFilter: u,
-					setActiveFilter: d,
-					customFilterPanel: f,
+					table: s,
+					columns: c,
+					activeFilter: d,
+					setActiveFilter: f,
+					customFilterPanel: p,
 					filterConfig: a.filterConfig
 				}),
 				a.customComponents
 			]
-		}), a.enableBulkActions && a.bulkActions && /* @__PURE__ */ r(n, {
-			bulkActions: a.bulkActions,
-			rowSelection: g,
-			data: _
+		}), /* @__PURE__ */ i("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [o, a.enableBulkActions && a.bulkActions && /* @__PURE__ */ r(n, {
+				bulkActions: a.bulkActions,
+				rowSelection: _,
+				data: v
+			})]
 		})]
+	}) : o ? /* @__PURE__ */ r("div", {
+		className: "flex justify-end mb-4",
+		children: o
 	}) : null;
 }
 //#endregion

package/dist/components/pro/DataTable/components/TableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.js","names":[],"sources":["../../../../../src/components/pro/DataTable/components/TableToolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table, VisibilityState, RowSelectionState } from '../tanstack-table';\nimport { ToolbarOptions, CustomFilterPanelProps, DataTableProps } from '../types';\nimport { ColumnSelector } from './ColumnSelector';\nimport { FilterBar } from './FilterBar';\nimport { BulkActions } from './BulkActions';\n\ninterface TableToolbarProps<T extends object> {\n    toolbar: ToolbarOptions;\n    table: Table<T>;\n    columns: DataTableProps<T>['columns'];\n    columnOrderState: string[];\n    visibilityState: VisibilityState;\n    activeFilter: string | null;\n    setActiveFilter: (filter: string | null) => void;\n    customFilterPanel?: React.ComponentType<CustomFilterPanelProps>;\n    draggedColumnId: string | null;\n    handleDragStart: (e: React.DragEvent, columnId: string) => void;\n    toggleColumnVisibility: (columnId: string) => void;\n    rowSelection: RowSelectionState;\n    data: T[];\n    enableColumnReordering: boolean;\n    handleDrop: (e: React.DragEvent, targetColumnId: string) => void;\n}\n\nexport function TableToolbar<T extends object>({\n    toolbar,\n    table,\n    columns,\n    columnOrderState,\n    visibilityState,\n    activeFilter,\n    setActiveFilter,\n    customFilterPanel,\n    draggedColumnId,\n    handleDragStart,\n    toggleColumnVisibility,\n    rowSelection,\n    data,\n    enableColumnReordering,\n    handleDrop,\n}: TableToolbarProps<T>) {\n    if (!toolbar.enabled) return null;\n\n    return (\n        <div className=\"flex flex-wrap justify-between gap-4 mb-4\">\n            <div className=\"flex flex-wrap gap-2 items-center\">\n                {toolbar.enableColumnSelector && (\n                    <ColumnSelector\n                        table={table}\n                        columns={columns}\n                        columnOrderState={columnOrderState}\n                        visibilityState={visibilityState}\n                        toggleColumnVisibility={toggleColumnVisibility}\n                        enableColumnReordering={enableColumnReordering}\n                        handleDragStart={handleDragStart}\n                        handleDrop={handleDrop}\n                        draggedColumnId={draggedColumnId}\n                    />\n                )}\n\n                {toolbar.enableFiltering && (\n                    <FilterBar\n                        table={table}\n                        columns={columns}\n                        activeFilter={activeFilter}\n                        setActiveFilter={setActiveFilter}\n                        customFilterPanel={customFilterPanel}\n                        filterConfig={toolbar.filterConfig}\n                    />\n                )}\n\n                {toolbar.customComponents}\n            </div>\n\n            {toolbar.enableBulkActions && toolbar.bulkActions && (\n                <BulkActions\n                    bulkActions={toolbar.bulkActions}\n                    rowSelection={rowSelection}\n                    data={data}\n                />\n            )}\n        </div>\n    );\n}\n\n"],"mappings":";;;;;;AAyBA,SAAgB,EAA+B,EAC3C,YACA,UACA,YACA,qBACA,oBACA,iBACA,oBACA,sBACA,oBACA,oBACA,2BACA,iBACA,SACA,2BACA,iBACqB;CAGrB,OAFK,EAAQ,UAGT,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACK,EAAQ,wBACL,kBAAC,GAAD;KACW;KACE;KACS;KACD;KACO;KACA;KACP;KACL;KACK;IACpB,CAAA;IAGJ,EAAQ,mBACL,kBAAC,GAAD;KACW;KACE;KACK;KACG;KACE;KACnB,cAAc,EAAQ;IACzB,CAAA;IAGJ,EAAQ;GACR;EAEJ,CAAA,GAAA,EAAQ,qBAAqB,EAAQ,eAClC,kBAAC,GAAD;GACI,aAAa,EAAQ;GACP;GACR;EACT,CAAA,CAEJ;MAxCoB;AA0CjC"}
+{"version":3,"file":"TableToolbar.js","names":[],"sources":["../../../../../src/components/pro/DataTable/components/TableToolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table, VisibilityState, RowSelectionState } from '../tanstack-table';\nimport { ToolbarOptions, CustomFilterPanelProps, DataTableProps } from '../types';\nimport { ColumnSelector } from './ColumnSelector';\nimport { FilterBar } from './FilterBar';\nimport { BulkActions } from './BulkActions';\n\ninterface TableToolbarProps<T extends object> {\n    toolbar: ToolbarOptions;\n    viewSwitcher?: React.ReactNode;\n    table: Table<T>;\n    columns: DataTableProps<T>['columns'];\n    columnOrderState: string[];\n    visibilityState: VisibilityState;\n    activeFilter: string | null;\n    setActiveFilter: (filter: string | null) => void;\n    customFilterPanel?: React.ComponentType<CustomFilterPanelProps>;\n    draggedColumnId: string | null;\n    handleDragStart: (e: React.DragEvent, columnId: string) => void;\n    toggleColumnVisibility: (columnId: string) => void;\n    rowSelection: RowSelectionState;\n    data: T[];\n    enableColumnReordering: boolean;\n    handleDrop: (e: React.DragEvent, targetColumnId: string) => void;\n}\n\nexport function TableToolbar<T extends object>({\n    toolbar,\n    viewSwitcher,\n    table,\n    columns,\n    columnOrderState,\n    visibilityState,\n    activeFilter,\n    setActiveFilter,\n    customFilterPanel,\n    draggedColumnId,\n    handleDragStart,\n    toggleColumnVisibility,\n    rowSelection,\n    data,\n    enableColumnReordering,\n    handleDrop,\n}: TableToolbarProps<T>) {\n    if (!toolbar.enabled) {\n        return viewSwitcher ? <div className=\"flex justify-end mb-4\">{viewSwitcher}</div> : null;\n    }\n\n    return (\n        <div className=\"flex flex-wrap justify-between gap-4 mb-4\">\n            <div className=\"flex flex-wrap gap-2 items-center\">\n                {toolbar.enableColumnSelector && (\n                    <ColumnSelector\n                        table={table}\n                        columns={columns}\n                        columnOrderState={columnOrderState}\n                        visibilityState={visibilityState}\n                        toggleColumnVisibility={toggleColumnVisibility}\n                        enableColumnReordering={enableColumnReordering}\n                        handleDragStart={handleDragStart}\n                        handleDrop={handleDrop}\n                        draggedColumnId={draggedColumnId}\n                    />\n                )}\n\n                {toolbar.enableFiltering && (\n                    <FilterBar\n                        table={table}\n                        columns={columns}\n                        activeFilter={activeFilter}\n                        setActiveFilter={setActiveFilter}\n                        customFilterPanel={customFilterPanel}\n                        filterConfig={toolbar.filterConfig}\n                    />\n                )}\n\n                {toolbar.customComponents}\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n                {viewSwitcher}\n                {toolbar.enableBulkActions && toolbar.bulkActions && (\n                    <BulkActions\n                        bulkActions={toolbar.bulkActions}\n                        rowSelection={rowSelection}\n                        data={data}\n                    />\n                )}\n            </div>\n        </div>\n    );\n}\n\n"],"mappings":";;;;;;AA0BA,SAAgB,EAA+B,EAC3C,YACA,iBACA,UACA,YACA,qBACA,oBACA,iBACA,oBACA,sBACA,oBACA,oBACA,2BACA,iBACA,SACA,2BACA,iBACqB;CAKrB,OAJK,EAAQ,UAKT,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACK,EAAQ,wBACL,kBAAC,GAAD;KACW;KACE;KACS;KACD;KACO;KACA;KACP;KACL;KACK;IACpB,CAAA;IAGJ,EAAQ,mBACL,kBAAC,GAAD;KACW;KACE;KACK;KACG;KACE;KACnB,cAAc,EAAQ;IACzB,CAAA;IAGJ,EAAQ;GACR;EAEL,CAAA,GAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACK,GACA,EAAQ,qBAAqB,EAAQ,eAClC,kBAAC,GAAD;IACI,aAAa,EAAQ;IACP;IACR;GACT,CAAA,CAEJ;EACJ,CAAA,CAAA;MA5CE,IAAe,kBAAC,OAAD;EAAK,WAAU;EAAyB,UAAA;CAAkB,CAAA,IAAI;AA8C5F"}

package/dist/components/pro/DataTable/index.d.ts

@@ -25,7 +25,7 @@ export { PivotPanel } from './PivotPanel';
 export type { PivotPanelProps } from './PivotPanel';
 export { computePivot } from './pivotEngine';
 export type { PivotAggFn, PivotConfig, PivotResult, PivotRowNode, } from './pivotEngine';
-export type { DataTableProps, CellEventHandler, RowEventHandler, ColumnEventHandler, TableEventHandler } from './DataTable';
+export type { DataTableProps, DataTableViewMode, DataTableCardOptions, CellEventHandler, RowEventHandler, ColumnEventHandler, TableEventHandler } from './DataTable';
 export type { FilterPanelProps, TextFilterProps, NumberFilterProps, SelectFilterProps, BooleanFilterProps, DateRangeFilterProps } from './Filters';
 export type { TreeDataRow } from './utils';
 export type { ColumnDef, ColumnFiltersState, SortingState, VisibilityState, RowSelectionState, PaginationState } from './tanstack-table';

package/dist/components/pro/DataTable/rowDetailExtension.js

@@ -6,7 +6,7 @@ function a({ render: a }) {
 	return e(() => ({
 		name: "row-detail",
 		wrapRow: (e, t) => o[t.rowId] ? /* @__PURE__ */ i(n, { children: [e, /* @__PURE__ */ r("tr", {
-			className: "table-row",
+			className: "table-row blade-table-card__detail",
 			children: /* @__PURE__ */ r("td", {
 				className: "table-cell p-0",
 				colSpan: 9999,

package/dist/components/pro/DataTable/rowDetailExtension.js.map

@@ -1 +1 @@
-{"version":3,"file":"rowDetailExtension.js","names":[],"sources":["../../../../src/components/pro/DataTable/rowDetailExtension.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { DataTableExtension, DataTableRowContext } from './extension';\n\nexport interface RowDetailOptions<T extends object> {\n    /** 渲染展开后的行详情面板。 */\n    render: (ctx: DataTableRowContext<T>) => React.ReactNode;\n}\n\n/**\n * 行详情（master/detail）扩展。\n *\n * 由于扩展是普通对象无法持有 React 状态，这里以 hook 工厂的形式返回一个绑定了\n * 展开状态的扩展。为每一行的第一列注入一个展开按钮（通过 `cell` 覆写），点击后\n * 在该行下方渲染一个详情面板（通过 `wrapRow`）。\n *\n * 使用方式：\n * ```tsx\n * const detail = useRowDetailExtension<Row>({\n *   render: ({ row }) => <pre>{JSON.stringify(row, null, 2)}</pre>,\n * });\n * <DataTable data={data} columns={columns} extensions={[detail]} />\n * ```\n */\nexport function useRowDetailExtension<T extends object>({\n    render,\n}: RowDetailOptions<T>): DataTableExtension<T> {\n    const [open, setOpen] = useState<Record<string, boolean>>({});\n\n    return useMemo<DataTableExtension<T>>(\n        () => ({\n            name: 'row-detail',\n            wrapRow: (children, ctx) => {\n                if (!open[ctx.rowId]) return children;\n                return (\n                    <>\n                        {children}\n                        <tr className=\"table-row\">\n                            <td className=\"table-cell p-0\" colSpan={9999}>\n                                <div className=\"bg-base-200/60 p-4 border-l-4 border-primary\">\n                                    {render(ctx)}\n                                </div>\n                            </td>\n                        </tr>\n                    </>\n                );\n            },\n            rowProps: (ctx) =>\n                ({\n                    'data-detail-open': open[ctx.rowId] ? 'true' : undefined,\n                }) as React.HTMLAttributes<HTMLTableRowElement>,\n            // 通过右键菜单切换详情面板，避免占用列布局。\n            contextMenu: (ctx) => [\n                {\n                    key: 'toggle-detail',\n                    label: open[ctx.rowId] ? '收起详情' : '展开详情',\n                    onSelect: () =>\n                        setOpen((s) => ({ ...s, [ctx.rowId]: !s[ctx.rowId] })),\n                },\n            ],\n        }),\n        [open, render],\n    );\n}\n"],"mappings":";;;AAuBA,SAAgB,EAAwC,EACpD,aAC2C;CAC3C,IAAM,CAAC,GAAM,KAAW,EAAkC,CAAC,CAAC;CAE5D,OAAO,SACI;EACH,MAAM;EACN,UAAU,GAAU,MACX,EAAK,EAAI,SAEV,kBAAA,GAAA,EAAA,UAAA,CACK,GACD,kBAAC,MAAD;GAAI,WAAU;GACV,UAAA,kBAAC,MAAD;IAAI,WAAU;IAAiB,SAAS;IACpC,UAAA,kBAAC,OAAD;KAAK,WAAU;KACV,UAAA,EAAO,CAAG;IACV,CAAA;GACL,CAAA;EACJ,CAAA,CACN,EAAA,CAAA,IAXuB;EAcjC,WAAW,OACN,EACG,oBAAoB,EAAK,EAAI,SAAS,SAAS,KAAA,EACnD;EAEJ,cAAc,MAAQ,CAClB;GACI,KAAK;GACL,OAAO,EAAK,EAAI,SAAS,SAAS;GAClC,gBACI,GAAS,OAAO;IAAE,GAAG;KAAI,EAAI,QAAQ,CAAC,EAAE,EAAI;GAAO,EAAE;EAC7D,CACJ;CACJ,IACA,CAAC,GAAM,CAAM,CACjB;AACJ"}
+{"version":3,"file":"rowDetailExtension.js","names":[],"sources":["../../../../src/components/pro/DataTable/rowDetailExtension.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { DataTableExtension, DataTableRowContext } from './extension';\n\nexport interface RowDetailOptions<T extends object> {\n    /** 渲染展开后的行详情面板。 */\n    render: (ctx: DataTableRowContext<T>) => React.ReactNode;\n}\n\n/**\n * 行详情（master/detail）扩展。\n *\n * 由于扩展是普通对象无法持有 React 状态，这里以 hook 工厂的形式返回一个绑定了\n * 展开状态的扩展。为每一行的第一列注入一个展开按钮（通过 `cell` 覆写），点击后\n * 在该行下方渲染一个详情面板（通过 `wrapRow`）。\n *\n * 使用方式：\n * ```tsx\n * const detail = useRowDetailExtension<Row>({\n *   render: ({ row }) => <pre>{JSON.stringify(row, null, 2)}</pre>,\n * });\n * <DataTable data={data} columns={columns} extensions={[detail]} />\n * ```\n */\nexport function useRowDetailExtension<T extends object>({\n    render,\n}: RowDetailOptions<T>): DataTableExtension<T> {\n    const [open, setOpen] = useState<Record<string, boolean>>({});\n\n    return useMemo<DataTableExtension<T>>(\n        () => ({\n            name: 'row-detail',\n            wrapRow: (children, ctx) => {\n                if (!open[ctx.rowId]) return children;\n                return (\n                    <>\n                        {children}\n                        <tr className=\"table-row blade-table-card__detail\">\n                            <td className=\"table-cell p-0\" colSpan={9999}>\n                                <div className=\"bg-base-200/60 p-4 border-l-4 border-primary\">\n                                    {render(ctx)}\n                                </div>\n                            </td>\n                        </tr>\n                    </>\n                );\n            },\n            rowProps: (ctx) =>\n                ({\n                    'data-detail-open': open[ctx.rowId] ? 'true' : undefined,\n                }) as React.HTMLAttributes<HTMLTableRowElement>,\n            // 通过右键菜单切换详情面板，避免占用列布局。\n            contextMenu: (ctx) => [\n                {\n                    key: 'toggle-detail',\n                    label: open[ctx.rowId] ? '收起详情' : '展开详情',\n                    onSelect: () =>\n                        setOpen((s) => ({ ...s, [ctx.rowId]: !s[ctx.rowId] })),\n                },\n            ],\n        }),\n        [open, render],\n    );\n}\n"],"mappings":";;;AAuBA,SAAgB,EAAwC,EACpD,aAC2C;CAC3C,IAAM,CAAC,GAAM,KAAW,EAAkC,CAAC,CAAC;CAE5D,OAAO,SACI;EACH,MAAM;EACN,UAAU,GAAU,MACX,EAAK,EAAI,SAEV,kBAAA,GAAA,EAAA,UAAA,CACK,GACD,kBAAC,MAAD;GAAI,WAAU;GACV,UAAA,kBAAC,MAAD;IAAI,WAAU;IAAiB,SAAS;IACpC,UAAA,kBAAC,OAAD;KAAK,WAAU;KACV,UAAA,EAAO,CAAG;IACV,CAAA;GACL,CAAA;EACJ,CAAA,CACN,EAAA,CAAA,IAXuB;EAcjC,WAAW,OACN,EACG,oBAAoB,EAAK,EAAI,SAAS,SAAS,KAAA,EACnD;EAEJ,cAAc,MAAQ,CAClB;GACI,KAAK;GACL,OAAO,EAAK,EAAI,SAAS,SAAS;GAClC,gBACI,GAAS,OAAO;IAAE,GAAG;KAAI,EAAI,QAAQ,CAAC,EAAE,EAAI;GAAO,EAAE;EAC7D,CACJ;CACJ,IACA,CAAC,GAAM,CAAM,CACjB;AACJ"}

package/dist/components/pro/DataTable/tanstack-table.d.ts

@@ -14,9 +14,9 @@
  * 组装细节。请始终从本模块导入表格相关类型与工具，而不要直接依赖
  * `@tanstack/react-table`。
  */
-import { useTable, flexRender, tableFeatures, type ReactTable, coreFeatures, columnFilteringFeature, columnOrderingFeature, columnVisibilityFeature, globalFilteringFeature, rowSortingFeature, rowPaginationFeature, rowSelectionFeature, rowExpandingFeature, createCoreRowModel, createFilteredRowModel, createSortedRowModel, createPaginatedRowModel, createExpandedRowModel } from '@tanstack/react-table';
+import { useTable, flexRender, sortFns as builtInSortFns, tableFeatures, type ReactTable, coreFeatures, columnFilteringFeature, columnOrderingFeature, columnVisibilityFeature, globalFilteringFeature, rowSortingFeature, rowPaginationFeature, rowSelectionFeature, rowExpandingFeature, createCoreRowModel, createFilteredRowModel, createSortedRowModel, createPaginatedRowModel, createExpandedRowModel } from '@tanstack/react-table';
 import type { RowData, OnChangeFn, Updater, CellContext as CoreCellContext, HeaderContext as CoreHeaderContext, SortingState, ColumnFiltersState, RowSelectionState, PaginationState, ColumnOrderState, ExpandedState, ColumnVisibilityState, StockFeatures, Column as CoreColumn, ColumnDef as CoreColumnDef, Row as CoreRow, Cell as CoreCell, Header as CoreHeader, HeaderGroup as CoreHeaderGroup, SortFnOption, SortFn as CoreSortFn, FilterFn as CoreFilterFn, ColumnMeta as CoreColumnMeta, TableOptions } from '@tanstack/react-table';
-export { flexRender, useTable, tableFeatures };
+export { flexRender, useTable, tableFeatures, builtInSortFns };
 export type DishUITableFeatures = StockFeatures;
 export { coreFeatures, columnFilteringFeature, columnOrderingFeature, columnVisibilityFeature, globalFilteringFeature, rowSortingFeature, rowPaginationFeature, rowSelectionFeature, rowExpandingFeature, createCoreRowModel, createFilteredRowModel, createSortedRowModel, createPaginatedRowModel, createExpandedRowModel, };
 export type Table<TData extends RowData> = ReactTable<DishUITableFeatures, TData>;

package/dist/components/pro/DataTable/tanstack-table.js

@@ -1,49 +1,57 @@
 import { useMemo as e } from "react";
-import { columnFilteringFeature as t, columnOrderingFeature as n, columnVisibilityFeature as r, coreFeatures as i, createCoreRowModel as a, createExpandedRowModel as o, createFilteredRowModel as s, createPaginatedRowModel as c, createSortedRowModel as l, flexRender as u, globalFilteringFeature as d, rowExpandingFeature as f, rowPaginationFeature as p, rowSelectionFeature as m, rowSortingFeature as h, tableFeatures as g, useTable as _ } from "@tanstack/react-table";
+import { columnFilteringFeature as t, columnOrderingFeature as n, columnVisibilityFeature as r, coreFeatures as i, createCoreRowModel as a, createExpandedRowModel as o, createFilteredRowModel as s, createPaginatedRowModel as c, createSortedRowModel as l, filterFns as u, flexRender as d, globalFilteringFeature as f, rowExpandingFeature as p, rowPaginationFeature as m, rowSelectionFeature as h, rowSortingFeature as g, sortFns as _, tableFeatures as v, useTable as y } from "@tanstack/react-table";
 //#region src/components/pro/DataTable/tanstack-table.ts
-var v = g({
+var b = v({
 	...i,
 	columnFilteringFeature: t,
 	columnOrderingFeature: n,
 	columnVisibilityFeature: r,
-	globalFilteringFeature: d,
-	rowSortingFeature: h,
-	rowPaginationFeature: p,
-	rowSelectionFeature: m,
-	rowExpandingFeature: f,
+	globalFilteringFeature: f,
+	rowSortingFeature: g,
+	rowPaginationFeature: m,
+	rowSelectionFeature: h,
+	rowExpandingFeature: p,
+	sortFns: _,
+	filterFns: u,
 	coreRowModel: a(),
 	filteredRowModel: s(),
 	sortedRowModel: l(),
 	paginatedRowModel: c(),
 	expandedRowModel: o()
 });
-function y(u) {
-	let { sortFns: y, filterFns: b, ...x } = u, S = e(() => {
-		if (!y && !b) return v;
+function x(d) {
+	let { sortFns: x, filterFns: S, ...C } = d, w = e(() => {
+		if (!x && !S) return b;
 		let e = {
 			...i,
 			columnFilteringFeature: t,
 			columnOrderingFeature: n,
 			columnVisibilityFeature: r,
-			globalFilteringFeature: d,
-			rowSortingFeature: h,
-			rowPaginationFeature: p,
-			rowSelectionFeature: m,
-			rowExpandingFeature: f,
+			globalFilteringFeature: f,
+			rowSortingFeature: g,
+			rowPaginationFeature: m,
+			rowSelectionFeature: h,
+			rowExpandingFeature: p,
 			coreRowModel: a(),
 			filteredRowModel: s(),
 			sortedRowModel: l(),
 			paginatedRowModel: c(),
 			expandedRowModel: o()
 		};
-		return y && (e.sortFns = y), b && (e.filterFns = b), g(e);
-	}, [y, b]);
-	return _({
-		features: S,
-		...x
+		return e.sortFns = {
+			..._,
+			...x
+		}, e.filterFns = {
+			...u,
+			...S
+		}, v(e);
+	}, [x, S]);
+	return y({
+		features: w,
+		...C
 	});
 }
 //#endregion
-export { t as columnFilteringFeature, n as columnOrderingFeature, r as columnVisibilityFeature, i as coreFeatures, a as createCoreRowModel, o as createExpandedRowModel, s as createFilteredRowModel, c as createPaginatedRowModel, l as createSortedRowModel, u as flexRender, d as globalFilteringFeature, f as rowExpandingFeature, p as rowPaginationFeature, m as rowSelectionFeature, h as rowSortingFeature, g as tableFeatures, y as useReactTable, _ as useTable };
+export { _ as builtInSortFns, t as columnFilteringFeature, n as columnOrderingFeature, r as columnVisibilityFeature, i as coreFeatures, a as createCoreRowModel, o as createExpandedRowModel, s as createFilteredRowModel, c as createPaginatedRowModel, l as createSortedRowModel, d as flexRender, f as globalFilteringFeature, p as rowExpandingFeature, m as rowPaginationFeature, h as rowSelectionFeature, g as rowSortingFeature, v as tableFeatures, x as useReactTable, y as useTable };
 
 //# sourceMappingURL=tanstack-table.js.map