@canvas-components/react-list-table 0.2.6 → 0.3.1

package/README.md

@@ -2,6 +2,187 @@
 
 `@canvas-components/react-list-table` 是 `@canvas-components/list-table` 的 React 适配层，负责把原生 Canvas 表格接入 React 应用，并提供更接近业务开发习惯的组件化入口。
 
+## 示例效果
+
+![React List Table 基础示例](./assets/examples/basic.gif)
+
+### 完整示例图集
+
+<details>
+<summary>100w 数据渲染</summary>
+
+![100w 数据渲染](./assets/examples/million-rows.gif)
+
+</details>
+
+<details>
+<summary>行选择</summary>
+
+![行选择](./assets/examples/row-selection.gif)
+
+</details>
+
+<details>
+<summary>单元格内容</summary>
+
+![单元格内容](./assets/examples/cell-content.gif)
+
+</details>
+
+<details>
+<summary>斑马条纹</summary>
+
+![斑马条纹](./assets/examples/striped.gif)
+
+</details>
+
+<details>
+<summary>主题切换</summary>
+
+![主题切换](./assets/examples/theme.gif)
+
+</details>
+
+<details>
+<summary>高亮模式</summary>
+
+![高亮模式](./assets/examples/highlight-mode.gif)
+
+</details>
+
+<details>
+<summary>右键菜单</summary>
+
+![右键菜单](./assets/examples/context-menu.gif)
+
+</details>
+
+<details>
+<summary>数据格式</summary>
+
+![数据格式](./assets/examples/data-format.gif)
+
+</details>
+
+<details>
+<summary>省略提示</summary>
+
+![省略提示](./assets/examples/ellipsis-tooltip.gif)
+
+</details>
+
+<details>
+<summary>可展开行</summary>
+
+![可展开行](./assets/examples/expandable.gif)
+
+</details>
+
+<details>
+<summary>单元格编辑</summary>
+
+![单元格编辑](./assets/examples/editable-cell.gif)
+
+</details>
+
+<details>
+<summary>远程查询</summary>
+
+![远程查询](./assets/examples/remote-query.gif)
+
+</details>
+
+<details>
+<summary>表格分页</summary>
+
+![表格分页](./assets/examples/pagination.gif)
+
+</details>
+
+<details>
+<summary>空状态</summary>
+
+![空状态](./assets/examples/empty-state.gif)
+
+</details>
+
+<details>
+<summary>宽高配置</summary>
+
+![宽高配置](./assets/examples/sized.gif)
+
+</details>
+
+<details>
+<summary>表头排序、过滤、固定</summary>
+
+![表头排序、过滤、固定](./assets/examples/header-actions.gif)
+
+</details>
+
+<details>
+<summary>多级表头</summary>
+
+![多级表头](./assets/examples/multi-header.gif)
+
+</details>
+
+<details>
+<summary>汇总行</summary>
+
+![汇总行](./assets/examples/summary-row.gif)
+
+</details>
+
+<details>
+<summary>合并行列</summary>
+
+![合并行列](./assets/examples/merged-cells.gif)
+
+</details>
+
+<details>
+<summary>拖动改变列宽</summary>
+
+![拖动改变列宽](./assets/examples/resize.gif)
+
+</details>
+
+<details>
+<summary>轮播滚动</summary>
+
+![轮播滚动](./assets/examples/carousel-scroll.gif)
+
+</details>
+
+<details>
+<summary>缓存配置</summary>
+
+![缓存配置](./assets/examples/cached-columns.gif)
+
+</details>
+
+<details>
+<summary>拖拽表头排序</summary>
+
+![拖拽表头排序](./assets/examples/draggable.gif)
+
+</details>
+
+<details>
+<summary>跨表行拖拽</summary>
+
+![跨表行拖拽](./assets/examples/row-drag.gif)
+
+</details>
+
+<details>
+<summary>超级示例</summary>
+
+![超级示例](./assets/examples/super.gif)
+
+</details>
+
 ## 功能作用
 
 - 提供 `ReactListTable` 组件
@@ -93,20 +274,20 @@ export function DemoTable() {
 
 ### `ReactListTableToolbarOptions`
 
-| 属性                 | 类型                         | 说明                         |
-| -------------------- | ---------------------------- | ---------------------------- |
-| `showRefresh`        | `boolean`                    | 是否显示刷新按钮             |
-| `showFullscreen`     | `boolean`                    | 是否显示全屏按钮             |
-| `showDensity`        | `boolean`                    | 是否显示密度切换             |
-| `showColumnSetting`  | `boolean`                    | 是否显示列设置               |
-| `columnSettingWidth` | `number \| string`           | 列设置面板宽度               |
-| `columnSettingHeaderExtra` | `ReactNode`                | 列设置标题区中重置按钮前的扩展内容 |
-| `showExport`         | `boolean`                    | 是否显示导出按钮             |
-| `exportOptions`      | `ListTableExportXlsxOptions` | 默认导出的文件名和汇总行配置 |
-| `onRefresh`          | `() => void`                 | 点击刷新回调                 |
-| `onExport`           | `() => void`                 | 自定义导出回调               |
-| `getFullscreenNode`  | `() => HTMLElement \| null`  | 自定义全屏节点               |
-| `extra`              | `ReactNode`                  | 工具栏右侧额外内容           |
+| 属性                       | 类型                         | 说明                               |
+| -------------------------- | ---------------------------- | ---------------------------------- |
+| `showRefresh`              | `boolean`                    | 是否显示刷新按钮                   |
+| `showFullscreen`           | `boolean`                    | 是否显示全屏按钮                   |
+| `showDensity`              | `boolean`                    | 是否显示密度切换                   |
+| `showColumnSetting`        | `boolean`                    | 是否显示列设置                     |
+| `columnSettingWidth`       | `number \| string`           | 列设置面板宽度                     |
+| `columnSettingHeaderExtra` | `ReactNode`                  | 列设置标题区中重置按钮前的扩展内容 |
+| `showExport`               | `boolean`                    | 是否显示导出按钮                   |
+| `exportOptions`            | `ListTableExportXlsxOptions` | 默认导出的文件名和汇总行配置       |
+| `onRefresh`                | `() => void`                 | 点击刷新回调                       |
+| `onExport`                 | `() => void`                 | 自定义导出回调                     |
+| `getFullscreenNode`        | `() => HTMLElement \| null`  | 自定义全屏节点                     |
+| `extra`                    | `ReactNode`                  | 工具栏右侧额外内容                 |
 
 ## 方法说明
 

package/dist/index.cjs

@@ -588,6 +588,14 @@ function DensityMenu(props) {
           onClick: () => {
             onChange("compact");
           }
+        },
+        {
+          key: "density-auto",
+          label: "\u81EA\u9002\u5E94",
+          selected: value === "auto",
+          onClick: () => {
+            onChange("auto");
+          }
         }
       ]
     }
@@ -3354,7 +3362,7 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
 }
 
 // src/features/toolbar/style.css
-styleInject('.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n  content: "\\2713";\n  margin-left: 12px;\n  font-size: 12px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n  color: #1677ff;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 12px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n');
+styleInject('.react-list-table-shell {\n  background: #fff;\n}\n.react-list-table-titlebar {\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 0;\n  box-sizing: border-box;\n  background: #fff;\n}\n.react-list-table-shell-fullscreen {\n  width: 100% !important;\n  height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n  height: 100% !important;\n}\n.react-list-table-title {\n  min-width: 0;\n  color: #1f2937;\n  font-size: 14px;\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-tools {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  color: #475569;\n}\n.react-list-table-tool-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.react-list-table-tool {\n  width: 20px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  background: transparent;\n  font: 16px/24px sans-serif;\n  cursor: pointer;\n}\n.react-list-table-tool:hover {\n  color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n  position: absolute;\n  z-index: 120;\n  top: 28px;\n  right: 0;\n  min-width: 112px;\n  padding: 6px;\n  border: 1px solid #e5e7eb;\n  border-radius: 6px;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);\n}\n.react-list-table-tool-menu button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 6px 10px;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n  content: "\\2713";\n  margin-left: 12px;\n  font-size: 12px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n  color: #1677ff;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting {\n  width: 328px;\n  max-height: 360px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.react-list-table-column-setting-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n  border: 0;\n  color: #1677ff;\n  background: transparent;\n  cursor: pointer;\n}\n.react-list-table-column-setting-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n}\n.react-list-table-column-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  justify-content: space-between;\n  padding: 7px 6px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.react-list-table-column-main {\n  min-width: 0;\n}\n.react-list-table-column-actions {\n  flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n  flex: 0 0 96px;\n  width: 96px;\n  height: 24px;\n}\n.react-list-table-column-label {\n  min-width: 64px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n  height: 22px;\n  padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n  height: 22px;\n  padding-inline: 6px;\n  font-size: 12px;\n}\n.react-list-table-column-setting label.dragging {\n  opacity: 0.45;\n  background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n  opacity: 0.28;\n}\n.react-list-table-column-drag {\n  color: #94a3b8;\n  display: inline-flex;\n  font-size: 14px;\n  cursor: grab;\n  user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n  cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n  position: fixed;\n  z-index: 1400;\n  display: block;\n  padding: 0;\n  box-sizing: border-box;\n  color: #334155;\n  background: #fff;\n  border: 1px solid #91caff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n  pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n  width: 100%;\n  height: 100%;\n}\n');
 function ReactTableToolbar(props) {
   const { toolbar, title } = props;
   const [densityOpen, setDensityOpen] = react.useState(false);
@@ -3378,11 +3386,14 @@ function ReactTableToolbar(props) {
   react.useEffect(() => {
     const handleFullscreenChange = () => {
       const fullscreenNode = (typeof toolbar === "object" ? toolbar.getFullscreenNode?.() : null) ?? props.hostRef.current;
-      setIsFullscreen(document.fullscreenElement === fullscreenNode);
+      const nextIsFullscreen = document.fullscreenElement === fullscreenNode;
+      setIsFullscreen(nextIsFullscreen);
+      props.onFullscreenChange?.(nextIsFullscreen);
     };
+    handleFullscreenChange();
     document.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
-  }, [props.hostRef, toolbar]);
+  }, [props.hostRef, props.onFullscreenChange, toolbar]);
   if (!title && !hasToolbar) return null;
   const config = typeof toolbar === "object" ? toolbar : {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-titlebar", ref: rootRef, children: [
@@ -3714,6 +3725,12 @@ function useReactListTableState(options) {
 }
 
 // src/components/build-list-table-options.ts
+function resolveDensityLinkedHeight(densityOverride, configuredHeight) {
+  return typeof densityOverride === "number" ? densityOverride : configuredHeight;
+}
+function resolveFullscreenTableSize(width, height, isFullscreen) {
+  return isFullscreen ? { width: "100%", height: "100%" } : { width, height };
+}
 function buildListTableOptions(props) {
   const {
     width,
@@ -3728,6 +3745,7 @@ function buildListTableOptions(props) {
   return {
     type: "list",
     ...restProps,
+    rowHeight: restProps.rowHeight ?? 32,
     width: scroll?.x === true ? "100%" : scroll?.x ?? width,
     height: scroll?.y ?? height,
     emptyText: locale?.emptyText ?? emptyText,
@@ -3778,9 +3796,8 @@ function ReactListTableInner(props, ref) {
     toolbar
   } = props;
   const shellRef = react.useRef(null);
-  const [densityOverride, setDensityOverride] = react.useState(
-    null
-  );
+  const [isFullscreen, setIsFullscreen] = react.useState(false);
+  const [densityOverride, setDensityOverride] = react.useState(null);
   const [columnVisibility, setColumnVisibility] = react.useState(() => /* @__PURE__ */ new Map());
   const [columnOrders, setColumnOrders] = react.useState(
     () => /* @__PURE__ */ new Map()
@@ -3796,8 +3813,14 @@ function ReactListTableInner(props, ref) {
     [columns, columnVisibility, columnOrders, columnConfig]
   );
   const resolvedRowHeight = densityOverride ?? rowHeight;
-  const resolvedHeaderRowHeight = densityOverride ?? headerRowHeight;
-  const resolvedSummaryRowHeight = densityOverride ?? summaryRowHeight;
+  const resolvedHeaderRowHeight = resolveDensityLinkedHeight(
+    densityOverride,
+    headerRowHeight
+  );
+  const resolvedSummaryRowHeight = resolveDensityLinkedHeight(
+    densityOverride,
+    summaryRowHeight
+  );
   const options = react.useMemo(() => {
     const nextOptions = buildListTableOptions({
       width,
@@ -3834,8 +3857,14 @@ function ReactListTableInner(props, ref) {
       rowDrag,
       debug
     });
+    const fullscreenSize = resolveFullscreenTableSize(
+      nextOptions.width,
+      nextOptions.height,
+      isFullscreen
+    );
     return {
       ...nextOptions,
+      ...fullscreenSize,
       ui: {
         ...nextOptions.ui,
         onDensityChange: setDensityOverride
@@ -3874,7 +3903,8 @@ function ReactListTableInner(props, ref) {
     draggable,
     tableId,
     rowDrag,
-    debug
+    debug,
+    isFullscreen
   ]);
   const {
     containerRef,
@@ -3917,7 +3947,11 @@ function ReactListTableInner(props, ref) {
       "div",
       {
         ref: shellRef,
-        className,
+        className: [
+          "react-list-table-shell",
+          isFullscreen ? "react-list-table-shell-fullscreen" : "",
+          className
+        ].filter(Boolean).join(" "),
         style: {
           position: "relative",
           display: "flex",
@@ -3932,8 +3966,9 @@ function ReactListTableInner(props, ref) {
               title,
               toolbar,
               columns: resolvedColumns,
-              density: resolvedRowHeight === "auto" ? 32 : resolvedRowHeight ?? 32,
+              density: resolvedRowHeight ?? 32,
               hostRef: shellRef,
+              onFullscreenChange: setIsFullscreen,
               onExport: (options2) => tableRef.current?.exportXlsx(options2),
               onDensityChange: (density) => {
                 tableRef.current?.changeDensity(density);
@@ -3987,6 +4022,7 @@ function ReactListTableInner(props, ref) {
             "div",
             {
               ref: containerRef,
+              className: "react-list-table-host",
               style: { flex: 1, minWidth: 0, width: "100%", minHeight: 0 },
               children: /* @__PURE__ */ jsxRuntime.jsx(ReactTablePaginationView, { config: paginationConfig })
             }