es-grid-template 1.9.53 → 1.9.55

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import cx from 'classnames';
 import React from 'react';
-import { internals } from "./../internals";
+import { internals } from "../internals";
 import { Colgroup } from "./colgroup";
 import SpanManager from "./helpers/SpanManager";
 import { Classes } from "./styles";
@@ -9,6 +9,283 @@ 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));
+  }
+};
 export function HtmlTable({
   tbodyHtmlTag,
   getRowProps,
@@ -36,189 +313,54 @@ export function HtmlTable({
   const rightFlatCount = flat.right.length;
   const tbody = TableBody != null && tbodyHtmlTag === 'tbody' ? /*#__PURE__*/React.createElement(TableBody, {
     tbodyProps: {
-      children: data.map(renderRow)
+      children: data.map((row, i) => {
+        return /*#__PURE__*/React.createElement(RenderRow, {
+          key: row.rowid,
+          getRowProps: getRowProps,
+          hozInfo: hozInfo,
+          i: i,
+          primaryKey: primaryKey,
+          row: row,
+          spanManager: spanManager,
+          tbodyHtmlTag: tbodyHtmlTag,
+          verInfo: verInfo,
+          Row: Row,
+          fullFlatCount: fullFlatCount,
+          leftFlatCount: leftFlatCount,
+          rightFlatCount: rightFlatCount,
+          Cell: Cell,
+          hoz: hoz,
+          id: id,
+          originData: originData,
+          commandClick: commandClick,
+          format: format
+        });
+      })
     }
-  }) : ( /*#__PURE__*/React.createElement(tbodyHtmlTag, null, data.map(renderRow)));
+  }) : ( /*#__PURE__*/React.createElement(tbodyHtmlTag, null, data.map((row, i) => {
+    return /*#__PURE__*/React.createElement(RenderRow, {
+      key: row.rowid,
+      getRowProps: getRowProps,
+      hozInfo: hozInfo,
+      i: i,
+      primaryKey: primaryKey,
+      row: row,
+      spanManager: spanManager,
+      tbodyHtmlTag: tbodyHtmlTag,
+      verInfo: verInfo,
+      Row: Row,
+      fullFlatCount: fullFlatCount,
+      leftFlatCount: leftFlatCount,
+      rightFlatCount: rightFlatCount,
+      Cell: Cell,
+      hoz: hoz,
+      id: id,
+      originData: originData,
+      commandClick: commandClick,
+      format: format
+    });
+  })));
   return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(Colgroup, {
     descriptors: hozInfo.visible
   }), tbody);
-  function renderRow(row, i) {
-    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 trProps = {
-      ...rowProps,
-      className: rowClass,
-      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, descriptor.col, descriptor.colIndex);
-      })
-    };
-    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));
-    }
-  }
-  function renderBodyCell(row, rowIndex, column, colIndex) {
-    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 === '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
-      // children: () => {
-      //   return (
-      //     <span className='abcccc'>{cellContent}</span>
-      //   )
-      // },
-    };
-    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));
-    }
-  }
 }

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

@@ -39,6 +39,7 @@ export declare const Classes: {
     readonly loadingIndicatorWrapper: "ui-rc-grid-loading-indicator-wrapper";
     readonly loadingIndicator: "ui-rc-grid-loading-indicator";
     readonly filterDropdown: "ui-rc-grid-filter-dropdown";
+    readonly verticalScroll: "has-vertical-scroll";
 };
 export type BaseTableCSSVariables = Partial<{
     /** Table row height */

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

@@ -44,7 +44,8 @@ export const Classes = {
   loadingWrapper: `${prefix}loading-wrapper`,
   loadingIndicatorWrapper: `${prefix}loading-indicator-wrapper`,
   loadingIndicator: `${prefix}loading-indicator`,
-  filterDropdown: `${prefix}filter-dropdown`
+  filterDropdown: `${prefix}filter-dropdown`,
+  verticalScroll: `has-vertical-scroll`
 };
 const Z = {
   lock: 5,
@@ -54,11 +55,11 @@ const Z = {
   scrollItem: 30,
   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);.", "{border-left:0;border-right:0;border-top:0;}td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}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{border-top:var(--cell-border-vertical);}&.", "{&:has(.", ") thead tr.first th{border-top:0;}}"], Classes.tableWrapper, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableTop, Classes.gridNone, Classes.tableTop);
+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 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:var(--cell-border-vertical);&.has-footer{.", "{td{}}}}&.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{}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{}tr.first td{border-top: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{display:flex;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.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);
+})(["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{display:flex;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);
 
 // type StyleTableContainerProps = {
 
@@ -67,4 +68,4 @@ export const StyledArtTableWrapper = styled.div.withConfig({
 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{}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{}}}&.", "{.", "{border-top:0;td,th{border-bottom: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.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-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;}}}}&.", "{&.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);
+})(["--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/table.d.ts

@@ -47,6 +47,9 @@ 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 */
@@ -170,6 +173,7 @@ 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;