@canvas-components/list-table 0.3.15 → 0.3.17

package/README.md

@@ -26,14 +26,69 @@
 显式传入 `pagination.pageSize` 时以受控值为准。外部负责请求的封装（如 WWISuperTable）应在首次请求前读取缓存，初始化自己的分页状态，避免只改变显示值而请求条数不一致：
 
 ```ts
-import { getListTableStoredPageSize } from '@canvas-components/list-table';
+import { getListTableStoredPageSize } from "@canvas-components/list-table";
 
-const initialPageSize = explicitPageSize ?? getListTableStoredPageSize(storageKey) ?? 10;
+const initialPageSize =
+  explicitPageSize ?? getListTableStoredPageSize(storageKey) ?? 10;
 // 将 initialPageSize 用于首次请求和受控 pagination.pageSize。
 ```
 
 该读取方法也由 `@canvas-components/react-list-table` 导出。
 
+## 分区 CSS 样式
+
+原生 `ListTable` 和 `ReactListTable` 均支持 `styles`。Canvas 区域通过 CSS 属性映射到绘制参数，不创建单元格 DOM，不注入全局样式。
+
+```ts
+styles: {
+  cell: { fontSize: '14px', padding: '2px 12px', borderColor: '#d9e1ec' },
+  header: { backgroundColor: '#f0f9ff', color: '#075985', fontWeight: 700, textAlign: 'center' },
+  body: { color: '#334155' },
+  summary: { backgroundColor: '#f0fdf4', color: '#166534', textAlign: 'right' },
+  activeCell: { backgroundColor: '#fef3c7', borderColor: '#d97706', borderWidth: '2px' },
+  activeRow: { backgroundColor: '#e0e7ff', color: '#3730a3' },
+  scrollVertical: { width: '14px', color: '#94a3b8', backgroundColor: '#f1f5f9', borderRadius: 4 },
+  scrollHorizontal: { height: '12px', color: '#64748b', backgroundColor: '#f8fafc' },
+  pagination: {
+    root: { backgroundColor: '#f8fafc', color: '#334155', fontSize: '14px' },
+    total: { color: '#64748b' },
+    pageItem: { borderRadius: 4 },
+    activePageItem: { backgroundColor: '#1677ff', color: '#fff' },
+    sizeChanger: { width: 140 },
+    quickJumperInput: { width: 64 },
+  },
+}
+```
+
+- `cell` 是表头、表体和汇总单元格的通用默认值；分区覆盖通用值，列级 `headerStyle` / `cellStyle` / `summaryStyle` 优先。
+- Canvas 分区支持 `backgroundColor`、`color`、`fontSize`、`fontWeight`、`fontFamily`、`textAlign`、`verticalAlign`、`padding`、`paddingInline`、`paddingBlock`、`borderColor`、`borderWidth`。长度只支持非负数字或 `px`，`padding` 支持一值或“上下 左右”两值；不支持百分比、`em` 或 DOM 布局属性。
+- `activeCell` 支持背景、文字和边框，`activeRow` 支持背景与文字；仅改变已有选中状态的绘制，不改变选择模式。校验错误提示仍优先。
+- 滚动条 `color` 对应滑块、`backgroundColor` 对应槽色；纵轴 `width`、横轴 `height` 对应厚度。显式 `scrollbar.vertical/horizontal: false` 仍禁止对应轴显示。
+- `pagination` 按节点直接应用 DOM CSS，使用 camelCase 属性名，数字长度按 React DOM 规则处理；仅影响当前实例。通过原生 UI 回调自行渲染分页器时，从 `PaginationConfig.styles` 读取并应用样式。当前分页占位高度仍由表格密度决定，避免设置超出该高度的高度或纵向间距。
+
+分页器支持以下节点：
+
+| 节点                        | 作用                                                 |
+| --------------------------- | ---------------------------------------------------- |
+| `root`                      | 分页器根容器，颜色、字体等可向内部继承               |
+| `total`                     | 总条数文本                                           |
+| `pages`                     | 页码列表容器                                         |
+| `pageItem`                  | 普通页码按钮；简易模式下为页码文本                   |
+| `activePageItem`            | 当前页按钮，叠加并覆盖 `pageItem`                    |
+| `prevButton` / `nextButton` | 上一页 / 下一页按钮                                  |
+| `prevIcon` / `nextIcon`     | 上一页 / 下一页箭头，通过 `borderColor` 设置箭头颜色 |
+| `ellipsis`                  | 页码省略号                                           |
+| `sizeChanger`               | 分页尺寸选择控件，不包含弹出选项面板                 |
+| `quickJumper`               | 快速跳转区域容器                                     |
+| `quickJumperText`           | “跳至”和“页”文本                                     |
+| `quickJumperInput`          | 跳转输入控件外框，可设置宽度、背景与边框             |
+
+节点样式优先于默认样式；未配置节点保持原样。独立使用 `ReactPagination` 时也支持同名 `styles`，其中 `styles.root` 优先于 `style`。
+
+- 更新或移除 `styles` 后即时生效；不额外持久化 `styles` 对象，已有列配置缓存中的对齐设置仍优先。嵌套子表格的独立内容样式仍通过其列/内容配置指定。
+
+文档站“主题”示例增加了“启用分区 CSS 样式”开关，可切换验证。
+
 ## 安装方法
 
 ```bash

package/dist/index.cjs

@@ -71,6 +71,87 @@ var DebugManager = class {
     console.info(`[ListTable Debug] ${label}`, payload);
   }
 };
+
+// src/services/table-styles-service.ts
+function resolveStylePixels(value) {
+  if (typeof value === "string" && !/^\s*\d+(?:\.\d+)?(?:px)?\s*$/.test(value))
+    return void 0;
+  const number = typeof value === "string" ? parseFloat(value) : value;
+  return number != null && Number.isFinite(number) && number >= 0 ? number : void 0;
+}
+function resolveCanvasCellStyle(style) {
+  if (!style) return void 0;
+  const padding = typeof style.padding === "string" ? style.padding.trim().split(/\s+/) : [style.padding];
+  const result = {
+    backgroundColor: style.backgroundColor,
+    color: style.color,
+    fontSize: resolveStylePixels(style.fontSize),
+    fontWeight: style.fontWeight == null ? void 0 : String(style.fontWeight),
+    fontFamily: style.fontFamily,
+    textAlign: style.textAlign,
+    verticalAlign: style.verticalAlign,
+    paddingInline: resolveStylePixels(style.paddingInline) ?? (padding.length <= 2 ? resolveStylePixels(padding[1] ?? padding[0]) : void 0),
+    paddingBlock: resolveStylePixels(style.paddingBlock) ?? (padding.length <= 2 ? resolveStylePixels(padding[0]) : void 0),
+    borderColor: style.borderColor,
+    borderWidth: resolveStylePixels(style.borderWidth)
+  };
+  return Object.fromEntries(
+    Object.entries(result).filter(([, value]) => value !== void 0)
+  );
+}
+function resolveListTableStyleOptions(options) {
+  const styles = options.styles;
+  if (!styles) return options;
+  const cell = resolveCanvasCellStyle(styles.cell) ?? {};
+  const header = { ...cell, ...resolveCanvasCellStyle(styles.header) };
+  const body = { ...cell, ...resolveCanvasCellStyle(styles.body) };
+  const summary = { ...cell, ...resolveCanvasCellStyle(styles.summary) };
+  const mapColumns = (columns) => columns.map((column) => ({
+    ...column,
+    align: column.align ?? (column.cellStyle?.textAlign ?? body.textAlign),
+    headerAlign: column.headerAlign ?? (column.headerStyle?.textAlign ?? column.align ?? header.textAlign),
+    cellStyle: { ...body, ...column.cellStyle },
+    headerStyle: { ...header, ...column.headerStyle },
+    summaryStyle: { ...summary, ...column.summaryStyle },
+    children: column.children ? mapColumns(column.children) : void 0
+  }));
+  const scrollbar = { ...options.scrollbar };
+  for (const axis of ["vertical", "horizontal"]) {
+    const style = axis === "vertical" ? styles.scrollVertical : styles.scrollHorizontal;
+    if (!style || scrollbar[axis] === false) continue;
+    const mapped = {
+      thumbColor: style.color,
+      trackColor: style.backgroundColor,
+      thickness: resolveStylePixels(
+        axis === "vertical" ? style.width : style.height
+      ),
+      thumbRadius: resolveStylePixels(style.borderRadius)
+    };
+    scrollbar[axis] = {
+      ...scrollbar[axis],
+      ...Object.fromEntries(
+        Object.entries(mapped).filter(([, value]) => value !== void 0)
+      )
+    };
+  }
+  return {
+    ...options,
+    columns: mapColumns(options.columns),
+    scrollbar,
+    theme: {
+      ...options.theme,
+      ...cell.borderColor ? { borderColor: cell.borderColor } : {},
+      ...cell.fontSize != null ? { fontSize: cell.fontSize } : {},
+      ...cell.fontFamily ? { fontFamily: cell.fontFamily } : {},
+      ...body.color ? { textColor: body.color } : {},
+      ...header.backgroundColor ? { headerBackgroundColor: header.backgroundColor } : {},
+      ...header.color ? { headerTextColor: header.color } : {},
+      ...body.backgroundColor ? { backgroundColor: body.backgroundColor } : {},
+      activeCellStyle: resolveCanvasCellStyle(styles.activeCell),
+      activeRowStyle: resolveCanvasCellStyle(styles.activeRow)
+    }
+  };
+}
 function resolveColumnKey(column) {
   return column.key?.trim() || utils.stringifyDataIndex(column.dataIndex);
 }
@@ -585,15 +666,19 @@ function stretchColumnWidths(columns, containerWidth) {
   }
   const extra = containerWidth - totalWidth;
   const stretchableWidth = computeColumnWidths(stretchableColumns);
-  const ratio = stretchableWidth > 0 ? extra / stretchableWidth : 0;
-  for (const column of stretchableColumns) {
-    column.width = Math.round(column.width * (1 + ratio));
-  }
-  const adjustedTotal = computeColumnWidths(columns);
-  const remain = containerWidth - adjustedTotal;
-  if (remain > 0) {
-    stretchableColumns[stretchableColumns.length - 1].width += remain;
-  }
+  let accumulatedWidth = 0;
+  let allocatedExtra = 0;
+  stretchableColumns.forEach((column, index) => {
+    accumulatedWidth += column.width;
+    const targetExtra = index === stretchableColumns.length - 1 ? extra : Math.min(
+      extra,
+      Math.floor(
+        extra * (stretchableWidth > 0 ? accumulatedWidth / stretchableWidth : (index + 1) / stretchableColumns.length)
+      )
+    );
+    column.width += targetExtra - allocatedExtra;
+    allocatedExtra = targetExtra;
+  });
 }
 function shrinkColumnWidthsToFit(columns, containerWidth) {
   let remaining = Math.max(
@@ -693,6 +778,7 @@ function normalizeColumn(column, depth, parentKey) {
     moneyFormat: column.moneyFormat,
     dataFormat: column.dataFormat,
     headerStyle: column.headerStyle,
+    summaryStyle: column.summaryStyle,
     summary: column.summary,
     summaryTitle: column.summaryTitle,
     meta: column.meta,
@@ -7203,10 +7289,11 @@ function roundRectPath(ctx, x, y, width, height, radius) {
 }
 
 // src/rendering/primitives/draw-grid.ts
-function drawGridRect(ctx, rect, theme, borderColor = theme.borderColor) {
+function drawGridRect(ctx, rect, theme, borderColor = theme.borderColor, borderWidth = 1) {
+  if (borderWidth <= 0) return;
   ctx.save();
   ctx.strokeStyle = borderColor;
-  ctx.lineWidth = 1;
+  ctx.lineWidth = borderWidth;
   ctx.beginPath();
   const showTop = rect.y > 0;
   const showLeft = rect.x > 0;
@@ -7238,7 +7325,8 @@ function resolveHeaderTextLayout(params) {
     allowActions,
     hasFilter,
     contentInsetStart = 0,
-    contentInsetEnd = 0
+    contentInsetEnd = 0,
+    paddingInline = HEADER_TEXT_PADDING
   } = params;
   const contentRect = {
     x: rect.x + contentInsetStart,
@@ -7260,11 +7348,11 @@ function resolveHeaderTextLayout(params) {
     contentRect,
     contentVisibleRect,
     align,
-    HEADER_TEXT_PADDING
+    paddingInline
   );
   const baseLayout = {
     align,
-    maxWidth: Math.max(contentVisibleRect.width - HEADER_TEXT_PADDING * 2, 12),
+    maxWidth: Math.max(contentVisibleRect.width - paddingInline * 2, 12),
     x: baseX
   };
   if (!allowActions || !actionVisibilityState.visible || align === "left") {
@@ -7276,10 +7364,10 @@ function resolveHeaderTextLayout(params) {
     trailingInset: contentInsetEnd
   });
   const textRight = Math.min(
-    contentVisibleRect.x + contentVisibleRect.width - HEADER_TEXT_PADDING,
-    actionLayout.startX - HEADER_TEXT_PADDING
+    contentVisibleRect.x + contentVisibleRect.width - paddingInline,
+    actionLayout.startX - paddingInline
   );
-  const textLeft = contentVisibleRect.x + HEADER_TEXT_PADDING;
+  const textLeft = contentVisibleRect.x + paddingInline;
   if (align === "center") {
     const centeredWidth = Math.max(
       Math.min(baseX - textLeft, textRight - baseX) * 2,
@@ -7414,9 +7502,15 @@ function drawHeaderCell(params, cell, clipRect) {
   const isRangeSelected = isHeaderCellInRange(params.rangeHighlight, cell);
   ctx.fillStyle = isSelected || isRangeSelected ? theme.selectionBackgroundColor : cell.node.style?.backgroundColor ?? theme.headerBackgroundColor;
   ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  drawGridRect(ctx, rect, theme);
+  drawGridRect(
+    ctx,
+    rect,
+    theme,
+    cell.node.style?.borderColor,
+    cell.node.style?.borderWidth
+  );
   ctx.fillStyle = cell.node.style?.color ?? theme.headerTextColor;
-  ctx.font = `${theme.headerFontWeight} ${theme.fontSize}px ${theme.fontFamily}`;
+  ctx.font = `${cell.node.style?.fontWeight ?? theme.headerFontWeight} ${cell.node.style?.fontSize ?? theme.fontSize}px ${cell.node.style?.fontFamily ?? theme.fontFamily}`;
   ctx.textBaseline = "middle";
   const visibleRect = clipRect ? intersectRects(rect, clipRect) : rect;
   if (!visibleRect) {
@@ -7448,6 +7542,7 @@ function drawHeaderCell(params, cell, clipRect) {
     allowActions: cell.node.children.length === 0,
     hasFilter: params.filterableColumnKeys.has(cell.node.key),
     contentWidth: measureHeaderContentWidth(ctx, titleContent),
+    paddingInline: cell.node.style?.paddingInline,
     contentInsetStart: resolveHeaderContentInsetStart({
       columnKey: cell.node.key,
       hasChildren: cell.node.children.length > 0,
@@ -7459,7 +7554,7 @@ function drawHeaderCell(params, cell, clipRect) {
   const textY = resolveHeaderContentCenterY(
     rect,
     titleContent,
-    theme.fontSize,
+    cell.node.style?.fontSize ?? theme.fontSize,
     cell.node.style?.paddingBlock ?? params.defaultPaddingBlock ?? resolveDensityPaddingBlock(cell.height),
     cell.node.style?.verticalAlign
   );
@@ -8121,6 +8216,11 @@ function drawSummarySegment(params, columns, clipRect, defaultTitleColumnKey) {
 function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeaderKey, summarySelected, rangeHighlight, clipRect, descriptors, inlineContentInset, defaultTitleColumnKey, textSelection) {
   ctx.save();
   const cellClip = clipRect ? intersectRects2(rect, clipRect) : rect;
+  const style = column.summaryStyle;
+  const fontSize = style?.fontSize ?? theme.fontSize;
+  const paddingInline = style?.paddingInline ?? 12;
+  const paddingBlock = style?.paddingBlock ?? 0;
+  const textY = style?.verticalAlign === "top" ? rect.y + paddingBlock + fontSize / 2 : style?.verticalAlign === "bottom" ? rect.y + rect.height - paddingBlock - fontSize / 2 : rect.y + rect.height / 2;
   if (!cellClip) {
     ctx.restore();
     return;
@@ -8130,9 +8230,9 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
     column.leafIndex,
     (rangeHighlight ?? EMPTY_RANGE_HIGHLIGHT2).selectedColumnRange
   );
-  ctx.fillStyle = summarySelected || isHeaderColumnSelected || isColumnRangeSelected ? theme.selectionBackgroundColor : theme.headerBackgroundColor;
+  ctx.fillStyle = summarySelected || isHeaderColumnSelected || isColumnRangeSelected ? theme.selectionBackgroundColor : style?.backgroundColor ?? theme.headerBackgroundColor;
   ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  drawGridRect(ctx, rect, theme);
+  drawGridRect(ctx, rect, theme, style?.borderColor, style?.borderWidth);
   const resolvedDisplayValue = resolveSummaryCellDisplayValue(
     column,
     summaryValues?.get(column.key),
@@ -8143,10 +8243,10 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
     ctx.beginPath();
     ctx.rect(cellClip.x, cellClip.y, cellClip.width, cellClip.height);
     ctx.clip();
-    ctx.fillStyle = theme.headerTextColor;
-    ctx.font = `600 ${theme.fontSize}px ${theme.fontFamily}`;
+    ctx.fillStyle = style?.color ?? theme.headerTextColor;
+    ctx.font = `${style?.fontWeight ?? "600"} ${fontSize}px ${style?.fontFamily ?? theme.fontFamily}`;
     ctx.textBaseline = "middle";
-    const align = column.align ?? "left";
+    const align = style?.textAlign ?? column.align ?? "left";
     ctx.textAlign = align;
     const contentInsetStart = column.key === inlineContentInset?.columnKey ? inlineContentInset.width : 0;
     const contentRect = {
@@ -8159,16 +8259,16 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
       rect: contentRect,
       visibleRect,
       align,
-      padding: 12
+      padding: paddingInline
     });
     const displayText = resolveSummaryDisplayText(ctx, {
       text: resolvedDisplayValue,
       visibleRect,
-      padding: 12
+      padding: paddingInline
     });
     const textWidth = ctx.measureText(displayText).width;
     const textOriginX = textX - (align === "right" ? textWidth : align === "center" ? textWidth / 2 : 0);
-    const textTop = rect.y + (rect.height - theme.fontSize) / 2;
+    const textTop = textY - fontSize / 2;
     const fragmentKey = `summary:${column.key}`;
     drawSelectableTextSelectionBackground({
       ctx,
@@ -8176,14 +8276,14 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
       textSelection,
       textOriginX,
       textTop,
-      textHeight: theme.fontSize,
+      textHeight: fontSize,
       rowIndex: Number.MAX_SAFE_INTEGER,
       columnKey: column.key,
       contentIndex: 0,
       fragmentKey,
       color: theme.textSelectionBackgroundColor ?? "#99c2ff"
     });
-    ctx.fillText(displayText, textX, rect.y + rect.height / 2);
+    ctx.fillText(displayText, textX, textY);
     textDescriptor = {
       rowIndex: Number.MAX_SAFE_INTEGER,
       contentIndex: 0,
@@ -8196,7 +8296,7 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
           x: textOriginX,
           y: textTop,
           width: textWidth,
-          height: theme.fontSize
+          height: fontSize
         },
         cellClip
       ) ?? void 0,
@@ -10957,6 +11057,25 @@ function normalizeCellContents(contents) {
   }
   return [normalizeCellContentItem(contents)];
 }
+function applyCellTextStyle(contents, column) {
+  const { color, fontSize, fontWeight, fontFamily } = column.cellStyle ?? {};
+  if (color == null && fontSize == null && fontWeight == null && fontFamily == null)
+    return contents;
+  return contents.map((content) => ({
+    ...content,
+    style: {
+      ...color != null ? { color } : {},
+      ...fontSize != null ? { fontSize } : {},
+      ...fontWeight != null ? { fontWeight } : {},
+      ...fontFamily != null ? { fontFamily } : {},
+      ..."color" in content && content.color != null ? { color: content.color } : {},
+      ..."textColor" in content && content.textColor != null ? { color: content.textColor } : {},
+      ..."fontSize" in content && content.fontSize != null ? { fontSize: content.fontSize } : {},
+      ..."fontWeight" in content && content.fontWeight != null ? { fontWeight: content.fontWeight } : {},
+      ...content.style
+    }
+  }));
+}
 function normalizeDrawableCellContents(contents) {
   return contents.filter(
     (content) => content.visible !== false && content.style?.display !== "none"
@@ -11130,7 +11249,10 @@ function drawBodyCellContents(params) {
     skipNestedTableOuterBorders,
     defaultRowHeight
   } = params;
-  const contents = normalizeDrawableCellContents(params.contents);
+  const contents = applyCellTextStyle(
+    normalizeDrawableCellContents(params.contents),
+    column
+  );
   if (contents.length === 0) {
     return void 0;
   }
@@ -11365,7 +11487,10 @@ function appendClippedContentDescriptors(descriptors, itemDescriptors, visibleRe
 }
 function measureBodyCellContentsHeight(params) {
   const { ctx, column, theme } = params;
-  const contents = normalizeDrawableCellContents(params.contents);
+  const contents = applyCellTextStyle(
+    normalizeDrawableCellContents(params.contents),
+    column
+  );
   if (contents.length === 0) {
     return 0;
   }
@@ -11395,7 +11520,10 @@ function measureBodyCellContentsHeight(params) {
 }
 function measureBodyCellContentsWidth(params) {
   const { ctx, column, theme } = params;
-  const contents = normalizeDrawableCellContents(params.contents);
+  const contents = applyCellTextStyle(
+    normalizeDrawableCellContents(params.contents),
+    column
+  );
   if (contents.length === 0) {
     return 0;
   }
@@ -20324,7 +20452,9 @@ var ListTableEventController = class {
         event.clientX,
         event.clientY
       );
-      const result = this.host.resolvePointerHit(position.x, position.y);
+      const result = this.host.resolvePointerHit(position.x, position.y, {
+        excludeKinds: ["resize-handle"]
+      });
       const rawContextResult = typeof result.hitRowIndex === "number" ? { ...result, rowIndex: result.hitRowIndex } : result;
       const bodyRows = this.resolveBodyRows();
       const contextResult = hydrateBodyContentHitResult({
@@ -24286,13 +24416,22 @@ function drawSegmentRows(params, segment, columns, startRowIndex, endRowIndex, r
         collapseConfig: params.collapseConfig
       }) : [];
       const cellDescriptorStartIndex = params.descriptors.length;
+      const activeStyle = isSelected || isSelectedCellRange ? params.theme.activeCellStyle : isRangeHighlighted ? params.theme.activeRowStyle : void 0;
+      const styledColumn = activeStyle ? {
+        ...cell.column,
+        cellStyle: { ...cell.column.cellStyle, ...activeStyle }
+      } : cell.column;
+      const cellTheme = activeStyle?.backgroundColor ? {
+        ...params.theme,
+        selectionBackgroundColor: activeStyle.backgroundColor
+      } : params.theme;
       const cellTooltip = drawBodyCell(
         ctx,
         rect,
         cell.record,
         cell.sourceRowIndex,
-        cell.column,
-        params.theme,
+        styledColumn,
+        cellTheme,
         params.rowBackgroundColor,
         params.striped === true,
         isHovered,
@@ -24339,11 +24478,12 @@ function drawSegmentRows(params, segment, columns, startRowIndex, endRowIndex, r
   }
   ctx.restore();
 }
-function drawActiveCellBorder(ctx, rect) {
-  const inset = 0.5;
+function drawActiveCellBorder(ctx, rect, borderColor = ACTIVE_CELL_BORDER_COLOR, borderWidth = 1) {
+  if (borderWidth <= 0) return;
+  const inset = borderWidth / 2;
   ctx.save();
-  ctx.strokeStyle = ACTIVE_CELL_BORDER_COLOR;
-  ctx.lineWidth = 1;
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = borderWidth;
   ctx.strokeRect(
     rect.x + inset,
     rect.y + inset,
@@ -25011,7 +25151,13 @@ function drawBodyCell(ctx, rect, record, rowIndex, column, theme, rowBackgroundC
       validationMessage
     );
   }
-  drawGridRect(ctx, rect, theme, theme.borderColor);
+  drawGridRect(
+    ctx,
+    rect,
+    theme,
+    column.cellStyle?.borderColor ?? theme.borderColor,
+    column.cellStyle?.borderWidth
+  );
   ctx.restore();
   return validationMessage ? {
     text: validationMessage,
@@ -28524,6 +28670,7 @@ function renderListTablePagination(params) {
     return;
   }
   const paginationConfig = {
+    styles: options.styles?.pagination,
     mode: paginationOptions.mode,
     current: state.currentPage,
     total: getPaginationTotal(options, total),
@@ -29271,6 +29418,7 @@ function drawActiveCellOverlay(params) {
     return;
   }
   const { ctx, layout } = params;
+  if (params.borderWidth === 0) return;
   if (layout.rangeSegments?.length) {
     layout.rangeSegments.forEach((segment) => {
       ctx.save();
@@ -29282,8 +29430,8 @@ function drawActiveCellOverlay(params) {
         segment.clipRect.height
       );
       ctx.clip();
-      ctx.strokeStyle = "#1677ff";
-      ctx.lineWidth = 1;
+      ctx.strokeStyle = params.borderColor ?? "#1677ff";
+      ctx.lineWidth = params.borderWidth ?? 1;
       ctx.beginPath();
       ctx.moveTo(segment.startX, segment.startY);
       if (segment.controlX != null && segment.controlY != null) {
@@ -29305,7 +29453,13 @@ function drawActiveCellOverlay(params) {
       ctx.beginPath();
       ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
       ctx.clip();
-      drawRangeHighlightBorder(ctx, rect, { omitLeft, omitRight });
+      drawRangeHighlightBorder(
+        ctx,
+        rect,
+        { omitLeft, omitRight },
+        params.borderColor,
+        params.borderWidth
+      );
       ctx.restore();
     });
   }
@@ -29319,7 +29473,12 @@ function drawActiveCellOverlay(params) {
       layout.clipRect.height
     );
     ctx.clip();
-    drawActiveCellBorder(ctx, layout.rect);
+    drawActiveCellBorder(
+      ctx,
+      layout.rect,
+      params.borderColor,
+      params.borderWidth
+    );
     ctx.restore();
   }
 }
@@ -29417,10 +29576,7 @@ function removeRangeSegmentsAtSharedLayerBoundaries(segments, ranges) {
         return;
       }
       const top = Math.max(left.y, right.y);
-      const bottom = Math.min(
-        left.y + left.height,
-        right.y + right.height
-      );
+      const bottom = Math.min(left.y + left.height, right.y + right.height);
       if (bottom > top) {
         sharedBoundaries.push({ x: boundary, top, bottom });
       }
@@ -29610,10 +29766,10 @@ function subtractCoveredIntervals(start, end, coveredIntervals) {
     ([currentStart, currentEnd]) => currentEnd > currentStart
   );
 }
-function drawRangeHighlightBorder(ctx, rect, edges = {}) {
+function drawRangeHighlightBorder(ctx, rect, edges = {}, borderColor = "#1677ff", borderWidth = 1) {
   ctx.save();
-  ctx.strokeStyle = "#1677ff";
-  ctx.lineWidth = 1;
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = borderWidth;
   const left = rect.x + 0.5;
   const top = rect.y + 0.5;
   const right = rect.x + Math.max(rect.width - 0.5, 0);
@@ -29909,6 +30065,8 @@ function executeListTableRenderPipeline(params) {
   );
   drawActiveCellOverlay({
     ctx,
+    borderColor: theme.activeCellStyle?.borderColor,
+    borderWidth: theme.activeCellStyle?.borderWidth,
     layout: resolveActiveCellOverlayLayout({
       descriptors,
       selection,
@@ -30353,9 +30511,10 @@ var ListTableRenderController = class {
     const availableHeight = this.options.getContainerClientHeight() > 0 ? this.options.getContainerClientHeight() : hostSize.height;
     const zoom = this.resolveZoom();
     const layoutWidth = hostSize.width / zoom;
-    const layoutAvailableHeight = availableHeight / zoom;
-    const currentSnapshot = this.currentRenderSnapshot;
-    const measureSnapshot = currentSnapshot && currentSnapshot.width === layoutWidth && currentSnapshot.groupingBarHeight === (this.options.getGroupBarVisible?.() ? currentSnapshot.rowHeight : 0) && currentSnapshot.groupingColumns.map((column) => column.key).join("
") === (this.options.getGroupColumnKeys?.() ?? []).join("
") ? currentSnapshot : this.buildSnapshot(layoutWidth, layoutAvailableHeight, false);
+    const measureSnapshot = this.buildSnapshot(
+      layoutWidth,
+      hostSize.height / zoom
+    );
     if (!measureSnapshot) {
       this.options.setFittedHeight(null);
       return;
@@ -30374,10 +30533,13 @@ var ListTableRenderController = class {
       summaryHeight: measureSnapshot.bodyLayout.summaryHeight
     });
     const paginationElement = this.options.getPaginationElement();
+    const scrollbar = this.options.getOptions().scrollbar;
+    const horizontal = utils.resolveCanvasScrollbarAxis(scrollbar, "horizontal");
+    const horizontalReserve = horizontal.visible && measureSnapshot.columnMetrics.centerContentWidth - measureSnapshot.columnMetrics.availableCenterWidth > 1 ? horizontal.thickness + Math.max(scrollbar?.horizontalBottom ?? 0, 0) : 0;
     const paginationHeight = paginationElement && paginationElement.style.display !== "none" ? paginationElement.offsetHeight : 0;
     const fittedHeight = resolveFittedTableHeight({
       availableHeight,
-      contentHeight: contentHeight * zoom + paginationHeight
+      contentHeight: (contentHeight + horizontalReserve) * zoom + paginationHeight
     });
     this.options.setFittedHeight(
       fittedHeight == null ? null : fittedHeight + TABLE_CONTENT_BORDER_SIZE
@@ -30663,6 +30825,7 @@ function resolvePaginationSignature(params) {
     paginationConfig ? "enabled" : "disabled",
     paginationConfig?.mode ?? "",
     paginationConfig?.total ?? params.total,
+    JSON.stringify(params.options.styles?.pagination ?? null),
     params.total > 0 ? "nonempty" : "empty",
     params.currentPage,
     params.pageSize,
@@ -32568,6 +32731,7 @@ var ListTableCore = class {
     /** 由 assembleListTableCoreControllers 在构造阶段挂载。 */
     __publicField(this, "renderController");
     __publicField(this, "debugManager");
+    options = resolveListTableStyleOptions(options);
     this.container = container;
     this.options = options;
     applyInitialColumnVisibility(options.columns);
@@ -32622,6 +32786,7 @@ var ListTableCore = class {
    * @param options 新配置。
    */
   updateOptions(options) {
+    options = resolveListTableStyleOptions(options);
     this.animationController.stopCarouselScroll();
     const host = this.asAssemblyHost();
     const shouldResetColumnConfig = shouldPersistIncomingColumnConfig(