@canvas-components/react-list-table 0.2.5 → 0.2.7

package/dist/index.d.cts

@@ -37,7 +37,7 @@ interface ReactListTableToolbarOptions {
     exportOptions?: ListTableExportXlsxOptions;
     onRefresh?: () => void;
     /** 表格密度变化回调，依次对应紧凑、中等和宽松。 */
-    onDensityChange?: (density: 32 | 40 | 48) => void;
+    onDensityChange?: (density: 32 | 48 | 56) => void;
     /** 自定义导出行为；未配置时默认异步导出全量 XLSX 数据。 */
     onExport?: () => void;
     /** 自定义全屏节点，默认使用表格根容器。 */

package/dist/index.d.ts

@@ -37,7 +37,7 @@ interface ReactListTableToolbarOptions {
     exportOptions?: ListTableExportXlsxOptions;
     onRefresh?: () => void;
     /** 表格密度变化回调，依次对应紧凑、中等和宽松。 */
-    onDensityChange?: (density: 32 | 40 | 48) => void;
+    onDensityChange?: (density: 32 | 48 | 56) => void;
     /** 自定义导出行为；未配置时默认异步导出全量 XLSX 数据。 */
     onExport?: () => void;
     /** 自定义全屏节点，默认使用表格根容器。 */

package/dist/index.js

@@ -3435,7 +3435,7 @@ function ReactTableToolbar(props) {
             children: /* @__PURE__ */ jsx(ColumnHeightOutlined, {})
           }
         ),
-        densityOpen ? /* @__PURE__ */ jsx("div", { className: "react-list-table-tool-menu", children: [48, 40, 32].map((height) => /* @__PURE__ */ jsx(
+        densityOpen ? /* @__PURE__ */ jsx("div", { className: "react-list-table-tool-menu", children: [56, 48, 32].map((height) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -3444,7 +3444,7 @@ function ReactTableToolbar(props) {
               props.onDensityChange(height);
               setDensityOpen(false);
             },
-            children: height === 48 ? "\u5BBD\u677E" : height === 40 ? "\u4E2D\u7B49" : "\u7D27\u51D1"
+            children: height === 56 ? "\u5BBD\u677E" : height === 48 ? "\u4E2D\u7B49" : "\u7D27\u51D1"
           },
           height
         )) }) : null
@@ -3794,8 +3794,10 @@ function ReactListTableInner(props, ref) {
     [columns, columnVisibility, columnOrders, columnConfig]
   );
   const resolvedRowHeight = densityOverride ?? rowHeight;
-  const options = useMemo(
-    () => buildListTableOptions({
+  const resolvedHeaderRowHeight = densityOverride ?? headerRowHeight;
+  const resolvedSummaryRowHeight = densityOverride ?? summaryRowHeight;
+  const options = useMemo(() => {
+    const nextOptions = buildListTableOptions({
       width,
       height,
       emptyText,
@@ -3812,8 +3814,8 @@ function ReactListTableInner(props, ref) {
       contextMenu,
       grouping,
       rowHeight: resolvedRowHeight,
-      headerRowHeight,
-      summaryRowHeight,
+      headerRowHeight: resolvedHeaderRowHeight,
+      summaryRowHeight: resolvedSummaryRowHeight,
       overscanRowCount,
       query,
       rowSelector,
@@ -3829,43 +3831,49 @@ function ReactListTableInner(props, ref) {
       tableId,
       rowDrag,
       debug
-    }),
-    [
-      width,
-      height,
-      emptyText,
-      scroll,
-      locale,
-      onChange,
-      rowKey,
-      resolvedColumns,
-      dataSource,
-      onRow,
-      theme,
-      striped,
-      highlightMode,
-      contextMenu,
-      grouping,
-      resolvedRowHeight,
-      headerRowHeight,
-      summaryRowHeight,
-      overscanRowCount,
-      query,
-      rowSelector,
-      rowSelection,
-      expandable,
-      pagination,
-      scrollbar,
-      carouselScroll,
-      stretchColumns,
-      resizable,
-      storageKey,
-      draggable,
-      tableId,
-      rowDrag,
-      debug
-    ]
-  );
+    });
+    return {
+      ...nextOptions,
+      ui: {
+        ...nextOptions.ui,
+        onDensityChange: setDensityOverride
+      }
+    };
+  }, [
+    width,
+    height,
+    emptyText,
+    scroll,
+    locale,
+    onChange,
+    rowKey,
+    resolvedColumns,
+    dataSource,
+    onRow,
+    theme,
+    striped,
+    highlightMode,
+    contextMenu,
+    grouping,
+    resolvedRowHeight,
+    resolvedHeaderRowHeight,
+    resolvedSummaryRowHeight,
+    overscanRowCount,
+    query,
+    rowSelector,
+    rowSelection,
+    expandable,
+    pagination,
+    scrollbar,
+    carouselScroll,
+    stretchColumns,
+    resizable,
+    storageKey,
+    draggable,
+    tableId,
+    rowDrag,
+    debug
+  ]);
   const {
     containerRef,
     tableRef,
@@ -3922,10 +3930,11 @@ function ReactListTableInner(props, ref) {
               title,
               toolbar,
               columns: resolvedColumns,
-              density: resolvedRowHeight === "auto" ? 40 : resolvedRowHeight ?? 40,
+              density: resolvedRowHeight === "auto" ? 32 : resolvedRowHeight ?? 32,
               hostRef: shellRef,
               onExport: (options2) => tableRef.current?.exportXlsx(options2),
               onDensityChange: (density) => {
+                tableRef.current?.changeDensity(density);
                 setDensityOverride(density);
                 if (toolbar) {
                   toolbar.onDensityChange?.(density);