@meta-1/design 0.0.196 → 0.0.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "keywords": [
     "easykit",
     "design",

package/src/components/uix/data-table/index.tsx

@@ -463,54 +463,56 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
   };
 
   return (
-    <>
-      {showToolbar ? (
-        <div
-          className={cn(
-            "border-0 border-secondary border-b border-solid pb-2",
-            "flex items-end",
-            filter ? "justify-between" : "justify-end",
-          )}
-        >
-          {filter ? <Filters {...filter} load={load} loading={loading} /> : null}
-          {showVisibilityControl ? (
-            <Dropdown align="end" asChild={true} items={columnSettings}>
-              <Action className="!p-0 h-9 w-9">
-                <LayoutIcon className="h-[18px] w-[18px]" />
-              </Action>
-            </Dropdown>
-          ) : null}
-        </div>
-      ) : null}
-      <div className={cn("relative")}>
-        {maxHeight ? (
-          // 有高度限制时：直接渲染 table 元素，避免 Table 组件自带的 overflow-x-auto 包裹层
-          <div className={cn("overflow-x-auto", !mounted && "invisible")}>
+    <div className={cn("relative")}>
+      <div className={"flex flex-col gap-md"}>
+        <div>
+          {showToolbar ? (
             <div
-              className="overflow-y-auto"
-              style={{ maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight }}
+              className={cn(
+                "border-0 border-secondary border-b border-solid pb-2",
+                "flex items-end",
+                filter ? "justify-between" : "justify-end",
+              )}
             >
-              <table
-                className={classNames(
-                  "data-table data-table-sticky-header w-full caption-bottom text-sm",
-                  inCard ? "in-card" : null,
-                )}
-                data-slot="table"
+              {filter ? <Filters {...filter} load={load} loading={loading} /> : null}
+              {showVisibilityControl ? (
+                <Dropdown align="end" asChild={true} items={columnSettings}>
+                  <Action className="!p-0 h-9 w-9">
+                    <LayoutIcon className="h-[18px] w-[18px]" />
+                  </Action>
+                </Dropdown>
+              ) : null}
+            </div>
+          ) : null}
+          {maxHeight ? (
+            // 有高度限制时：直接渲染 table 元素，避免 Table 组件自带的 overflow-x-auto 包裹层
+            <div className={cn("overflow-x-auto", !mounted && "invisible")}>
+              <div
+                className="overflow-y-auto"
+                style={{ maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight }}
               >
-                {renderTableHeader()}
-                {renderTableBody()}
-              </table>
+                <table
+                  className={classNames(
+                    "data-table data-table-sticky-header w-full caption-bottom text-sm",
+                    inCard ? "in-card" : null,
+                  )}
+                  data-slot="table"
+                >
+                  {renderTableHeader()}
+                  {renderTableBody()}
+                </table>
+              </div>
             </div>
-          </div>
-        ) : (
-          // 无高度限制时，使用原有布局
-          <Table className={classNames("data-table", inCard ? "in-card" : null, !mounted && "invisible")}>
-            {renderTableHeader()}
-            {renderTableBody()}
-          </Table>
-        )}
+          ) : (
+            // 无高度限制时，使用原有布局
+            <Table className={classNames("data-table", inCard ? "in-card" : null, !mounted && "invisible")}>
+              {renderTableHeader()}
+              {renderTableBody()}
+            </Table>
+          )}
+        </div>
         {showPagination ? (
-          <div className={cn("py-4", !mounted && "invisible")}>
+          <div className={cn(!mounted && "invisible")}>
             <Pagination
               {...(pagination as PaginationProps)}
               onChange={(page: number) => {
@@ -522,12 +524,12 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
             />
           </div>
         ) : null}
-        {loading || !mounted ? (
-          <div className="dark:!bg-black/5 absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-white/50">
-            <Spin />
-          </div>
-        ) : null}
       </div>
-    </>
+      {loading || !mounted ? (
+        <div className="dark:!bg-black/5 absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-white/50">
+          <Spin />
+        </div>
+      ) : null}
+    </div>
   );
 }