es-grid-template 1.9.59 → 1.9.60

package/es/ali-table/base-table/header.js

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import React from 'react';
 import { getTreeDepth, isLeafNode } from "../utils";
 import { Classes } from "./styles";
+import { isNullOrUndefined } from "../../grid-component/hooks";
 function range(n) {
   const array = [];
   for (let i = 0; i < n; i++) {
@@ -192,6 +193,7 @@ export default function TableHeader({
         if (currentColIndex > colIndex) continue;
         const headerCellProps = col.headerCellProps ?? {};
         const actualColSpan = headerCellProps.colSpan ?? colSpan;
+        const actualRowSpan = headerCellProps.rowSpan;
         const positionStyle = {};
         if (colIndex < leftFlatCount) {
           positionStyle.position = 'sticky';
@@ -210,7 +212,7 @@ export default function TableHeader({
             'lock-right': colIndex >= fullFlatCount - rightFlatCount
           }),
           colSpan: actualColSpan,
-          rowSpan: isLeaf ? rowCount - level : undefined,
+          rowSpan: !isNullOrUndefined(actualRowSpan) ? actualRowSpan : isLeaf ? rowCount - level : undefined,
           style: {
             textAlign: col.textAlign,
             ...headerCellProps.style,

package/es/ali-table/base-table/html-table.d.ts

@@ -4,11 +4,9 @@ import type { BaseTableProps } from './table';
 import type { CommandClick, IFormat } from '../../grid-component/type';
 export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowProps' | 'primaryKey' | 'components'>> {
     tbodyHtmlTag: 'tbody' | 'tfoot';
+    id: string;
     data: any[];
     originData: any[];
-    format?: IFormat;
-    id: string;
-    commandClick?: (args: CommandClick<any>) => void;
     horizontalRenderInfo: Pick<RenderInfo, 'flat' | 'visible' | 'horizontalRenderRange' | 'stickyLeftMap' | 'stickyRightMap'>;
     verticalRenderInfo: {
         offset: number;
@@ -16,5 +14,7 @@ export interface HtmlTableProps extends Required<Pick<BaseTableProps, 'getRowPro
         last: number;
         limit: number;
     };
+    format?: IFormat;
+    commandClick?: (args: CommandClick<any>) => void;
 }
-export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, originData, format, commandClick, id, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, components: { Row, Cell, TableBody }, }: HtmlTableProps): JSX.Element;
+export declare function HtmlTable({ tbodyHtmlTag, getRowProps, primaryKey, data, originData, format, id, commandClick, verticalRenderInfo: verInfo, horizontalRenderInfo: hozInfo, components: { Row, Cell, TableBody }, }: HtmlTableProps): JSX.Element;

package/es/ali-table/base-table/html-table.js

@@ -1,291 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import cx from 'classnames';
 import React from 'react';
-import { internals } from "../internals";
 import { Colgroup } from "./colgroup";
 import SpanManager from "./helpers/SpanManager";
-import { Classes } from "./styles";
-import { nonActionColumn } from "../../grid-component/hooks";
-import { Space } from 'rc-master-ui';
-import Command from "../../table-component/components/command/Command";
-import { renderValueCell } from "../../table-component/hook/useColumns";
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { DragDrop } from 'becoxy-icons';
-const RowDragHandleCell = ({
-  rowId
-}) => {
-  const {
-    attributes,
-    listeners
-  } = useSortable({
-    id: rowId
-  });
-  return (
-    /*#__PURE__*/
-    // Alternatively, you could set these attributes on the rows themselves
-    React.createElement("span", _extends({}, attributes, listeners), /*#__PURE__*/React.createElement(DragDrop, {
-      fontSize: 14
-    }))
-  );
-};
-function renderBodyCell(args) {
-  const {
-    row,
-    rowIndex,
-    column,
-    colIndex,
-    spanManager,
-    format,
-    Cell,
-    commandClick,
-    originData,
-    id,
-    verInfo,
-    hozInfo,
-    hoz,
-    leftFlatCount,
-    fullFlatCount,
-    rightFlatCount,
-    tbodyHtmlTag
-  } = args;
-  if (spanManager.testSkip(rowIndex, colIndex)) {
-    return null;
-  }
-  const value = internals.safeGetValue(column, row, rowIndex);
-  const cellProps = column.getCellProps?.(value, row, rowIndex) ?? {};
-  const a = renderValueCell(column, value, row, rowIndex, colIndex, format, false);
-
-  // let cellContent: ReactNode = value
-  let cellContent = a;
-
-  // if (column.render) {
-  //   cellContent = column.render(value, row, rowIndex)
-  // }
-  // if (column.field === '#') {
-
-  //   cellContent = findItemPath(originData, row, primaryKey)
-  // }
-
-  if (column.field === 'drag-handle') {
-    cellContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RowDragHandleCell, {
-      rowId: row.rowId
-    }));
-  }
-  if (column.field === 'command') {
-    const commands = column.commandItems ? column.commandItems.map(it => {
-      return {
-        ...it,
-        visible: typeof it.visible === 'function' ? it.visible?.(row) : it.visible
-      };
-    }) : [];
-    cellContent = /*#__PURE__*/React.createElement("div", {
-      className: "ui-rc_cell-content"
-    }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
-      return /*#__PURE__*/React.createElement(Command, {
-        id: id,
-        key: item.id,
-        item: item,
-        record: row,
-        onClick: () => {
-          commandClick?.({
-            id: item.id,
-            // rowId: getRowKey(record, index) as any,
-            rowId: row.rowId,
-            rowData: row,
-            index: rowIndex,
-            rows: [...originData]
-          });
-        }
-      });
-    })));
-  }
-  if (column.template) {
-    cellContent = column.template({
-      value,
-      rowData: row,
-      index: rowIndex,
-      field: column.field ?? ''
-    });
-  }
-
-  // 
-
-  let colSpan = 1;
-  let rowSpan = 1;
-  if (column.getSpanRect) {
-    const spanRect = column.getSpanRect(value, row, rowIndex);
-    colSpan = spanRect == null ? 1 : spanRect.right - colIndex;
-    rowSpan = spanRect == null ? 1 : spanRect.bottom - rowIndex;
-  } else {
-    if (cellProps.colSpan != null) {
-      colSpan = cellProps.colSpan;
-    }
-    if (cellProps.rowSpan != null) {
-      rowSpan = cellProps.rowSpan;
-    }
-  }
-
-  // rowSpan/colSpan should not be too large to avoid affecting cells that are not rendered due to virtual scrolling
-  rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
-  colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex - colIndex);
-  const hasSpan = colSpan > 1 || rowSpan > 1;
-  if (hasSpan) {
-    spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
-  }
-  const positionStyle = {};
-  if (colIndex < leftFlatCount) {
-    positionStyle.position = 'sticky';
-    positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
-  } else if (colIndex >= fullFlatCount - rightFlatCount) {
-    positionStyle.position = 'sticky';
-    positionStyle.right = hozInfo.stickyRightMap.get(colIndex);
-  }
-  const tdProps = {
-    ...cellProps,
-    className: cx(Classes.tableCell, cellProps.className, {
-      first: colIndex === 0,
-      last: colIndex + colSpan === fullFlatCount,
-      'lock-left': colIndex < leftFlatCount,
-      'lock-right': colIndex >= fullFlatCount - rightFlatCount
-    }),
-    ...(hasSpan ? {
-      colSpan,
-      rowSpan
-    } : null),
-    style: {
-      textAlign: column.textAlign,
-      ...cellProps.style,
-      ...positionStyle
-    },
-    // children: <div className='ui-rc_cell-content'>{cellContent}</div>
-
-    children: cellContent
-  };
-  if (tbodyHtmlTag === 'tfoot') {
-    if (!nonActionColumn.includes(column.field) && column.isSummary !== false) {
-      return /*#__PURE__*/React.createElement("td", _extends({
-        key: colIndex
-      }, tdProps));
-    } else {
-      return /*#__PURE__*/React.createElement("td", _extends({
-        key: colIndex
-      }, tdProps), '');
-    }
-  }
-  if (Cell != null && tbodyHtmlTag === 'tbody') {
-    return /*#__PURE__*/React.createElement(Cell, {
-      key: colIndex,
-      tdProps: tdProps,
-      row: row,
-      rowIndex: rowIndex,
-      column: column,
-      colIndex: colIndex
-    });
-  } else {
-    return /*#__PURE__*/React.createElement("td", _extends({
-      key: colIndex
-    }, tdProps));
-  }
-}
-const RenderRow = props => {
-  const {
-    verInfo,
-    hozInfo,
-    spanManager,
-    getRowProps,
-    row,
-    i,
-    tbodyHtmlTag,
-    primaryKey,
-    Row,
-    fullFlatCount,
-    hoz,
-    leftFlatCount,
-    rightFlatCount,
-    id,
-    originData,
-    Cell,
-    commandClick,
-    format
-  } = props;
-  const {
-    transform,
-    transition,
-    setNodeRef,
-    isDragging
-  } = useSortable({
-    id: row.rowId
-  });
-  const rowIndex = verInfo.offset + i;
-  spanManager.stripUpwards(rowIndex);
-  const rowProps = getRowProps(row, rowIndex);
-  const rowClass = cx(Classes.tableRow, {
-    first: rowIndex === verInfo.first,
-    last: rowIndex === verInfo.last,
-    even: rowIndex % 2 === 0,
-    odd: rowIndex % 2 === 1
-  }, rowProps?.className);
-  const onContextMenu = rowProps?.onContextMenu;
-  const style = {
-    transform: CSS.Translate.toString(transform),
-    // translate instead of transform to avoid squishing
-    transition: transition,
-    opacity: isDragging ? 0.8 : 1,
-    zIndex: isDragging ? 1 : 0,
-    position: 'relative'
-  };
-  const trProps = {
-    ...rowProps,
-    ref: setNodeRef,
-    className: rowClass,
-    style: {
-      ...rowProps.style,
-      ...style
-    },
-    onContextMenu: tbodyHtmlTag === 'tbody' ? onContextMenu : undefined,
-    'data-rowindex': rowIndex,
-    children: hozInfo.visible.map(descriptor => {
-      if (descriptor.type === 'blank') {
-        return /*#__PURE__*/React.createElement("td", {
-          key: descriptor.blankSide
-        });
-      }
-      return renderBodyCell({
-        row,
-        rowIndex,
-        column: descriptor.col,
-        colIndex: descriptor.colIndex,
-        fullFlatCount,
-        hoz,
-        hozInfo,
-        id,
-        leftFlatCount,
-        rightFlatCount,
-        originData,
-        spanManager,
-        tbodyHtmlTag,
-        verInfo,
-        Cell,
-        commandClick,
-        format
-      });
-    })
-  };
-  const key = internals.safeGetRowKey(primaryKey, row, rowIndex);
-  if (Row != null && tbodyHtmlTag === 'tbody') {
-    return /*#__PURE__*/React.createElement(Row, {
-      key,
-      row,
-      rowIndex,
-      trProps
-    });
-  } else {
-    return /*#__PURE__*/React.createElement("tr", _extends({
-      key: key
-    }, trProps));
-  }
-};
+import RenderRow from "../t-body/RenderRow";
 export function HtmlTable({
   tbodyHtmlTag,
   getRowProps,
@@ -293,8 +9,8 @@ export function HtmlTable({
   data,
   originData,
   format,
-  commandClick,
   id,
+  commandClick,
   verticalRenderInfo: verInfo,
   horizontalRenderInfo: hozInfo,
   components: {
@@ -315,7 +31,7 @@ export function HtmlTable({
     tbodyProps: {
       children: data.map((row, i) => {
         return /*#__PURE__*/React.createElement(RenderRow, {
-          key: row.rowid,
+          key: row.rowId,
           getRowProps: getRowProps,
           hozInfo: hozInfo,
           i: i,
@@ -339,7 +55,7 @@ export function HtmlTable({
     }
   }) : ( /*#__PURE__*/React.createElement(tbodyHtmlTag, null, data.map((row, i) => {
     return /*#__PURE__*/React.createElement(RenderRow, {
-      key: row.rowid,
+      key: row.rowId,
       getRowProps: getRowProps,
       hozInfo: hozInfo,
       i: i,
@@ -356,7 +72,7 @@ export function HtmlTable({
       hoz: hoz,
       id: id,
       originData: originData,
-      commandClick: commandClick,
+      commandClick: undefined,
       format: format
     });
   })));

package/es/ali-table/base-table/styles.d.ts

@@ -19,6 +19,7 @@ export declare const Classes: {
     /** Cell */
     readonly tableCell: "ui-rc-grid-table-cell";
     readonly gridCell: "ui-rc-grid-cell";
+    readonly cellSelected: "ui-rc-grid-cell-selected";
     readonly cellEllipsis: "ui-rc-grid-cell-ellipsis";
     readonly cellWrap: "ui-rc-grid-cell-wrap";
     readonly cellTextCenter: "ui-rc-grid-cell-text-center";
@@ -91,5 +92,5 @@ export type BaseTableCSSVariables = Partial<{
     /** Header cell vertical border */
     '--header-cell-border-vertical': string;
 }>;
-export declare const StyledArtTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyleTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledArtTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/es/ali-table/base-table/styles.js

@@ -25,6 +25,7 @@ export const Classes = {
   /** Cell */
   tableCell: `${prefix}table-cell`,
   gridCell: `${prefix}cell`,
+  cellSelected: `${prefix}cell-selected`,
   cellEllipsis: `${prefix}cell-ellipsis`,
   cellWrap: `${prefix}cell-wrap`,
   cellTextCenter: `${prefix}cell-text-center`,
@@ -56,16 +57,15 @@ const Z = {
   loadingIndicator: 40
 };
 const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);&.auto-height{border-bottom:0;}&:has(.ui-rc-grid-bottom){border-bottom:var(--cell-border-horizontal);}.", "{border-left:0;border-right:0;border-top:0;border-bottom:0;&.has-title{border-top:var(--cell-border-horizontal);}&.has-vertical-scroll{.", "{tr.last{td{border-bottom:0;}}}&.has-footer{border-bottom:0;}}&.has-bottom{.", "{tr.last{td{border-bottom:var(--cell-border-horizontal);}}}}}td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}tr.last td{}thead tr.first th,tbody tr.first td{border-top:none;}.has-footer tfoot tr.last td{}.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}.has-footer tfoot tr td{background:var(--footer-bgcolor);&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}&.", "{&:has(.", ") thead tr.first th{border-top:0;}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableFooter, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableTop, Classes.gridNone, Classes.tableTop);
+export const StyleTableContainer = styled.div.withConfig({
+  displayName: "StyleTableContainer",
+  componentId: "es-grid-template__sc-ipj1ht-0"
+})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor,#f5f5f5);--hover-color:var(--body-hover-color);--highlight-bgcolor:#eee;--header-row-height:34px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--border-color-select:#eb4619;--cell-border:1px solid var(--border-color);--cell-border-select:1px solid var(--border-color-select);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),0px 0 0 0 var(--border-color);}}}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
 export const StyledArtTableWrapper = styled.div.withConfig({
   displayName: "StyledArtTableWrapper",
-  componentId: "es-grid-template__sc-ipj1ht-0"
-})(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}td.first{&.lock-left{border-bottom-width:1px;}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
+  componentId: "es-grid-template__sc-ipj1ht-1"
+})(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{}&::-webkit-scrollbar-track{}&::-webkit-scrollbar-thumb{}&::-webkit-scrollbar-thumb:hover{}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td.cell-edit{&.lock-left,&.lock-right{}}td.first{&.lock-left{border-bottom-width:1px;}}}tr.ui-rc-grid-table-row{td.cell-edit.cell-border-bottom{}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}textarea.ui-rc-input{line-height:1.8;max-height:calc(var(--header-row-height) - 1px) !important;min-height:calc(var(--header-row-height) - 1px) !important;}}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);outline:none;&.cell-edit{user-select:none;&:has(.dragging-point){position:relative;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:var(--border-color-select);bottom:0;right:0;}}&.disable{background-color:#f0f0f0;}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ui-rc-input{height:100% !important;&:focus-visible{outline:none;}}.ui-rc-color-picker-trigger{width:100%;border-radius:0;.ui-rc-color-picker-color-block{width:100%;}}textarea.ui-rc-input{line-height:1.8;max-height:calc(var(--row-height) - 1px) !important;min-height:calc(var(--row-height) - 1px) !important;}input.be-cell-editing,.ant-picker,.ui-rc-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.#{$prefix}-checkbox-wrapper{.#{$prefix}-checkbox{background-color:red;}.#{$prefix}-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker,.ui-rc-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.#{$prefix}-table-select-single .#{$prefix}-table-select-selector,.#{$prefix}-select-single .#{$prefix}-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.#{$prefix}-table-select-single:not( .#{$prefix}-table-select-customize-input ){.#{$prefix}-table-select-selector{.#{$prefix}-table-select-selection-search-input{height:auto;}}}}.abccccc{box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color),1px 0 0 0 var(--border-color);}&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{position:relative;&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Classes.cellSelected, Classes.cellSelected, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
 
 // type StyleTableContainerProps = {
 
-// }
-
-export const StyleTableContainer = styled.div.withConfig({
-  displayName: "StyleTableContainer",
-  componentId: "es-grid-template__sc-ipj1ht-1"
-})(["--row-height:38px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor,#f5f5f5);--hover-color:var(--body-hover-color);--highlight-bgcolor:#eee;--header-row-height:36px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
+// }

package/es/ali-table/base-table/styles.scss

@@ -17,37 +17,3 @@ $prefix: 'ui-rc' !default;
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
   overflow: hidden;
 }
-
-.ui-rc-grid-horizontal-scroll-container {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-
-  }
-  &::-webkit-scrollbar-track {
-    background: var(--bgcolor);
-
-  }
-
-    &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.4);
-    border-radius: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-  
-}
-.ui-rc-grid-table-wrapper.dark {
-
-  .ui-rc-grid-horizontal-scroll-container {
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.3);
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(255, 255, 255, 0.5);
-    }
-  }
- 
-}

package/es/ali-table/base-table/table.d.ts

@@ -27,14 +27,18 @@ export type ExpandableConfig<RecordType> = {
     rowExpandable?: (rowData: RecordType) => boolean;
 };
 export type BaseTableProps = {
-    id?: string;
-    commandClick?: (args: CommandClick<any>) => void;
     /** Primary key */
     primaryKey?: PrimaryKey;
     /** Data source for table body */
     dataSource: any[];
     originData?: any[];
+    id?: string;
     format?: IFormat;
+    commandClick?: (args: CommandClick<any>) => void;
+    dataRowIds?: any[];
+    theme?: IFTheme;
+    isBottom?: boolean;
+    isTitle?: boolean;
     /** Data source for table footer */
     footerDataSource?: any[];
     /** Column definitions */
@@ -47,9 +51,6 @@ export type BaseTableProps = {
     };
     /** Estimated height for each row when virtual scrolling is enabled */
     estimatedRowHeight?: number;
-    isBottom?: boolean;
-    isTitle?: boolean;
-    dataRowIds?: any[];
     /** Whether table header is sticky, default is true */
     isStickyHeader?: boolean;
     /** Distance from the top when header is sticky */
@@ -64,7 +65,6 @@ export type BaseTableProps = {
     style?: CSSProperties & BaseTableCSSVariables;
     /** Whether the table has a header */
     showHeader?: boolean;
-    theme?: IFTheme;
     /** Whether table has a horizontal sticky scrollbar */
     hasStickyScroll?: boolean;
     /** Height of the sticky horizontal scrollbar */
@@ -106,6 +106,11 @@ export type BaseTableProps = {
     };
     /** Default column width */
     defaultColumnWidth?: number;
+    /**
+     * @deprecated
+     * flowRoot is no longer required after v2.4, please remove this prop
+     * */
+    flowRoot?: never;
     /** Virtual scroll debug label (for internal debugging) */
     virtualDebugLabel?: string;
     columnResizeMode?: ColumnResizeMode;
@@ -146,7 +151,6 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
         components: {};
         getRowProps: typeof noop;
         dataSource: any[];
-        originData: any[];
     };
     private rowHeightManager;
     private artTableWrapperRef;
@@ -154,10 +158,10 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private rootSubscription;
     private lastInfo;
     private props$;
-    /** @deprecated `BaseTable.getDoms()` is deprecated. Please do not call it. */
+    /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
     getDoms(): TableDOMHelper;
     constructor(props: Readonly<BaseTableProps>);
-    /** Customize the scrollbar width to match the table width, ensuring the scrollbar thumb has the same width */
+    /** 自定义滚动条宽度为table宽度，使滚动条滑块宽度相同 */
     private updateStickyScroll;
     private renderTableHeader;
     private updateOffsetX;
@@ -173,7 +177,6 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<BaseTableProps>, prevState: Readonly<BaseTableState>): void;
     private didMountOrUpdate;
-    private updateVerticalScrollClass;
     private updateScrollLeftWhenLayoutChanged;
     private initSubscriptions;
     componentWillUnmount(): void;