@aloudata/aloudata-design 2.5.2 → 2.6.1

package/dist/Table/components/Pagination/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { IPaginationProps } from '../../../Pagination/types';
 import { ITableProps } from '../../types';
-export default function TablePagination<TDataItem extends object>(props: IProps<TDataItem>): React.JSX.Element | undefined;
+export default function TablePagination<TDataItem extends object>(props: IProps<TDataItem>): React.JSX.Element;
 interface IProps<TDataItem extends object> {
-    pagination?: ITableProps<TDataItem>['pagination'];
+    pagination: IPaginationProps;
     scroll?: ITableProps<TDataItem>['scroll'];
     scrollToFirstRow: () => void;
 }

package/dist/Table/components/Pagination/index.js

@@ -18,7 +18,7 @@ export default function TablePagination(props) {
     }
     onChange(page);
   }, [scrollToFirstRow, scroll, pagination]);
-  return pagination && /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: prefixCls('pagination')
   }, /*#__PURE__*/React.createElement(Pagination, _extends({
     hideOnSinglePage: true

package/dist/Table/helper.d.ts

@@ -19,7 +19,7 @@ export declare function getTableColumns<TDataItem extends object>({ columns, tot
         render?: ((text: any, record: TDataItem, rowIndex: number) => import("react").ReactNode) | undefined;
         ellipsis?: boolean | undefined;
         noPadding?: boolean | undefined;
-        align?: "left" | "center" | "right" | undefined;
+        align?: "center" | "left" | "right" | undefined;
         fixed?: "left" | "right" | undefined;
     };
 }[];
@@ -39,3 +39,4 @@ export declare function getNumberFromPercentageStr(str: string): number;
  */
 export declare function isPercentage(str: string): boolean;
 export declare function prefixCls(className: string): string;
+export declare function getRowKey<TDataItem extends object>(row: TDataItem, rowKey: ITableProps<TDataItem>['rowKey'], defaultKey?: string | number): string;

package/dist/Table/helper.js

@@ -5,6 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import _ from 'lodash';
+import { getUUID } from "../_utils/hooks/useId";
 import Cell from "./components/Cell";
 import Header from "./components/Header";
 export function getTableColumns(_ref) {
@@ -142,4 +143,13 @@ export function isPercentage(str) {
 var ALD_PREFIX = 'ald-table';
 export function prefixCls(className) {
   return "".concat(ALD_PREFIX, "-").concat(className);
+}
+export function getRowKey(row, rowKey, defaultKey) {
+  var rowKeyStr = defaultKey || getUUID();
+  if (typeof rowKey === 'function') {
+    rowKeyStr = rowKey(row);
+  } else if (rowKey !== undefined) {
+    rowKeyStr = _.get(row, rowKey);
+  }
+  return _.toString(rowKeyStr);
 }

package/dist/Table/hooks/useExpandable.d.ts

@@ -0,0 +1,23 @@
+import { ITableProps } from '../types';
+export default function useExpandable<TDataItem extends object>(props: IProps<TDataItem>): IExpandableInfo<TDataItem>;
+export interface IExpandableInfo<TDataItem extends object> {
+    expandItemMap: IExpandItemMap;
+    onExpand: (record: TDataItem, isExpanded: boolean) => void;
+    isExpandable: boolean;
+    data: TDataItem[];
+}
+export interface IExpandItem {
+    isLeaf: boolean;
+    isExpanded?: boolean;
+    level: number;
+    rowKey: string;
+}
+interface IExpandItemMap {
+    [key: string]: IExpandItem;
+}
+interface IProps<TDataItem extends object> {
+    expandable: ITableProps<TDataItem>['expandable'];
+    data: ITableProps<TDataItem>['data'];
+    rowKey: ITableProps<TDataItem>['rowKey'];
+}
+export {};

package/dist/Table/hooks/useExpandable.js

@@ -0,0 +1,152 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import _ from 'lodash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getRowKey } from "../helper";
+export default function useExpandable(props) {
+  var propsExpandable = props.expandable,
+    data = props.data,
+    rowKey = props.rowKey;
+  var expandable = getExpandableConfig(propsExpandable);
+  if (!!propsExpandable && !rowKey) {
+    throw new Error('rowKey is necessary when expandable is enabled, but is missing');
+  }
+  var expandedRowKeys = expandable.expandedRowKeys,
+    propsOnExpand = expandable.onExpand,
+    _expandable$defaultEx = expandable.defaultExpandAllRows,
+    defaultExpandAllRows = _expandable$defaultEx === void 0 ? true : _expandable$defaultEx,
+    defaultExpandedRowKeys = expandable.defaultExpandedRowKeys,
+    childrenColumnName = expandable.childrenColumnName;
+  var columnName = getChildrenColumnName(childrenColumnName);
+  var flattenList = useMemo(function () {
+    return flattenChildren(data, columnName);
+  }, [columnName, data]);
+  var allCategoryRowKeys = useMemo(function () {
+    return getAllExpandRowKeys(flattenList, columnName, defaultExpandAllRows, rowKey);
+  }, [columnName, flattenList, defaultExpandAllRows, rowKey]);
+
+  // 考虑 defaultExpandAllRows 的情况
+  var _useState = useState(expandedRowKeys || defaultExpandedRowKeys || allCategoryRowKeys || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedKeys = _useState2[0],
+    setExpandedKeys = _useState2[1];
+  var expandItemMap = useMemo(function () {
+    var listData = data.map(function (dataItem) {
+      return getListItemsByTree(dataItem, expandedKeys, rowKey, childrenColumnName);
+    }).flat();
+    return _.keyBy(listData, function (dataItem) {
+      return dataItem.rowKey;
+    });
+  }, [childrenColumnName, data, expandedKeys, rowKey]);
+  useEffect(function () {
+    if (expandedRowKeys) {
+      // 展开收起完全受控的情况
+      setExpandedKeys(expandedRowKeys);
+    }
+  }, [expandedRowKeys]);
+  var onExpand = useCallback(function (dataItem, isExpanded) {
+    var key = getRowKey(dataItem, rowKey);
+    if (!expandedRowKeys) {
+      setExpandedKeys(function (prev) {
+        if (isExpanded) {
+          // 折叠
+          return prev.filter(function (expandedKey) {
+            return expandedKey !== key;
+          });
+        } else {
+          // 展开
+          return [].concat(_toConsumableArray(prev), [key]);
+        }
+      });
+    }
+    propsOnExpand === null || propsOnExpand === void 0 ? void 0 : propsOnExpand(dataItem, isExpanded);
+  }, [propsOnExpand, rowKey, expandedRowKeys]);
+  var visibleList = useMemo(function () {
+    return flattenList.filter(function (dataItem) {
+      var key = getRowKey(dataItem, rowKey);
+      // 不在 Map 中的行，即表示被折叠了
+      return !!expandItemMap[key];
+    });
+  }, [expandItemMap, flattenList, rowKey]);
+  if (!propsExpandable) {
+    return {
+      expandItemMap: {},
+      onExpand: function onExpand() {},
+      isExpandable: false,
+      data: data
+    };
+  }
+  return {
+    expandItemMap: expandItemMap,
+    onExpand: onExpand,
+    isExpandable: true,
+    data: visibleList
+  };
+}
+function getListItemsByTree(currNode, expandedKeys, getKey, childrenColumnName) {
+  var level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  var subNodes = _.get(currNode, getChildrenColumnName(childrenColumnName));
+  var isLeaf = !subNodes;
+  var rowKey = getRowKey(currNode, getKey);
+  if (isLeaf) {
+    return [{
+      isLeaf: true,
+      level: level,
+      rowKey: rowKey
+    }];
+  }
+  // 是目录的情况
+  var isExpanded = expandedKeys.includes(rowKey);
+  var curr = {
+    isLeaf: false,
+    level: level,
+    rowKey: rowKey
+  };
+  if (!isExpanded) {
+    curr.isExpanded = false;
+    return [curr];
+  }
+  curr.isExpanded = true;
+  // 子目录是展开的情况
+  var subItems = (subNodes === null || subNodes === void 0 ? void 0 : subNodes.map(function (child) {
+    return getListItemsByTree(child, expandedKeys, getKey, childrenColumnName, level + 1);
+  })) || [];
+  return [curr].concat(_toConsumableArray(_.flatten(subItems)));
+}
+function getExpandableConfig(expandable) {
+  if (typeof expandable === 'boolean') {
+    return {};
+  }
+  return expandable || {};
+}
+function getAllExpandRowKeys(list, childrenColumnName, defaultExpandAllRows, rowKey) {
+  if (!defaultExpandAllRows) {
+    return undefined;
+  }
+  var itemsWithChildrenProp = list.filter(function (item) {
+    return !!_.get(item, childrenColumnName);
+  });
+  return itemsWithChildrenProp.map(function (item) {
+    return getRowKey(item, rowKey);
+  });
+}
+function flattenChildren(nodes, childKey) {
+  return _.flatMapDeep(nodes, function (node) {
+    var children = node[childKey];
+    if (children && children.length > 0) {
+      return [node].concat(_toConsumableArray(flattenChildren(children, childKey)));
+    }
+    return [node];
+  });
+}
+function getChildrenColumnName(childrenColumnName) {
+  return childrenColumnName || 'children';
+}

package/dist/Table/index.d.ts

@@ -2,6 +2,6 @@ import React, { ForwardedRef } from 'react';
 import { ITableProps, ITableRef } from './types';
 declare function Table<TDataItem extends object>(props: ITableProps<TDataItem>, ref: ForwardedRef<ITableRef>): React.JSX.Element;
 declare const _default: <TDataItem extends object>(props: ITableProps<TDataItem> & {
-    ref?: React.ForwardedRef<HTMLUListElement> | undefined;
+    ref?: React.ForwardedRef<ITableRef> | undefined;
 }) => ReturnType<typeof Table>;
 export default _default;

package/dist/Table/index.js

@@ -16,13 +16,15 @@ import _ from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import { Empty, Spin } from '..';
+import ExpandCell from "./components/ExpandCell";
 import Pagination from "./components/Pagination";
-import { getTableColumns, prefixCls } from "./helper";
+import { getRowKey, getTableColumns, prefixCls } from "./helper";
+import useExpandable from "./hooks/useExpandable";
 import useFixed from "./hooks/useFixed";
 import useScroll from "./hooks/useScroll";
 var HEADER_HEIGHT = 41;
 function Table(props, ref) {
-  var _classnames, _classnames5;
+  var _classnames, _classnames6;
   var columns = props.columns,
     data = props.data,
     rowKey = props.rowKey,
@@ -38,7 +40,8 @@ function Table(props, ref) {
       return '';
     } : _props$rowClassName,
     onRowClick = props.onRowClick,
-    onError = props.onError;
+    onError = props.onError,
+    expandable = props.expandable;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     totalSize = _useState2[0],
@@ -66,6 +69,11 @@ function Table(props, ref) {
       scrollToFirstRow: scrollToFirstRow
     };
   });
+  var expandableInfo = useExpandable({
+    expandable: expandable,
+    data: data,
+    rowKey: rowKey
+  });
   var tableColumns = useMemo(function () {
     if (!totalSize || !realWidth) {
       return [];
@@ -83,16 +91,11 @@ function Table(props, ref) {
   });
   var tableInstance = useReactTable({
     columns: tableColumns,
-    data: data,
+    // 排除掉被折叠的行
+    data: expandableInfo.data,
     getCoreRowModel: getCoreRowModel(),
     getRowId: function getRowId(row, index) {
-      var rowKeyStr = index;
-      if (typeof rowKey === 'function') {
-        rowKeyStr = rowKey(row);
-      } else if (rowKey !== undefined) {
-        rowKeyStr = _.get(row, rowKey, index);
-      }
-      return _.toString(rowKeyStr);
+      return getRowKey(row, rowKey, index);
     },
     columnResizeMode: 'onChange'
   });
@@ -153,6 +156,11 @@ function Table(props, ref) {
       onRowClick(rowData, rowIndex);
     };
   }, [onRowClick]);
+  var isShowPagination = pagination && pagination.total > pagination.pageSize;
+
+  // 空态切换 size 的阈值
+  var EMPTY_SMALL_SIZE_HEIGHT = 288;
+  var isSmallEmpty = totalSize && totalSize.height < EMPTY_SMALL_SIZE_HEIGHT;
 
   // 渲染 body
   var bodyContent = /*#__PURE__*/React.createElement("div", {
@@ -161,25 +169,32 @@ function Table(props, ref) {
       width: realWidth
     }
   }, rows.length === 0 && !loading ? emptyComponent || /*#__PURE__*/React.createElement("div", {
-    className: prefixCls('empty')
+    className: classnames(prefixCls('empty'), _defineProperty({}, prefixCls('empty-small'), isSmallEmpty))
   }, /*#__PURE__*/React.createElement(Empty, {
-    image: Empty.PRESENTED_IMAGE_SEARCH
+    image: isSmallEmpty ? null : Empty.PRESENTED_IMAGE_SEARCH,
+    size: isSmallEmpty ? 'small' : undefined
   })) : _.map(rows, function (row, rowIndex) {
+    var _classnames4;
     return /*#__PURE__*/React.createElement("div", {
       key: row.id,
-      className: classnames(prefixCls('tr'), _defineProperty({}, prefixCls('row-hover'), typeof onRowClick === 'function'), rowClassName(row.original, rowIndex)),
+      className: classnames(prefixCls('tr'), (_classnames4 = {}, _defineProperty(_classnames4, prefixCls('row-hover'), typeof onRowClick === 'function'), _defineProperty(_classnames4, prefixCls('no-border-tr'), isShowPagination && rowIndex === rows.length - 1), _classnames4), rowClassName(row.original, rowIndex)),
       onClick: onClickRow(row.original, rowIndex)
     }, _.map(row.getVisibleCells(), function (cell, colIndex) {
       var _getColumnFixedInfo2 = getColumnFixedInfo(colIndex),
         fixedClassName = _getColumnFixedInfo2.className,
         fixedStyle = _getColumnFixedInfo2.style;
+      var tdContent = flexRender(cell.column.columnDef.cell, cell.getContext());
       return /*#__PURE__*/React.createElement("div", {
         className: classnames(prefixCls('td'), fixedClassName),
         key: cell.id,
         style: _objectSpread({
           width: cell.column.getSize()
         }, fixedStyle)
-      }, flexRender(cell.column.columnDef.cell, cell.getContext()));
+      }, colIndex === 0 ? /*#__PURE__*/React.createElement(ExpandCell, {
+        expandableInfo: expandableInfo,
+        data: row.original,
+        rowKey: rowKey
+      }, tdContent) : tdContent);
     }));
   }));
   var tableContent = /*#__PURE__*/React.createElement(Spin, {
@@ -211,8 +226,8 @@ function Table(props, ref) {
       });
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classnames(prefixCls('main'), (_classnames5 = {}, _defineProperty(_classnames5, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames5, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames5, prefixCls('ping-right'), isPingRight), _classnames5))
-  }, tableContent)), /*#__PURE__*/React.createElement(Pagination, {
+    className: classnames(prefixCls('main'), (_classnames6 = {}, _defineProperty(_classnames6, prefixCls('overflow-hidden'), !!y), _defineProperty(_classnames6, prefixCls('ping-left'), isPingLeft), _defineProperty(_classnames6, prefixCls('ping-right'), isPingRight), _classnames6))
+  }, tableContent)), isShowPagination && /*#__PURE__*/React.createElement(Pagination, {
     pagination: pagination,
     scroll: scroll,
     scrollToFirstRow: scrollToFirstRow

package/dist/Table/style/index.less

@@ -6,25 +6,27 @@
 
 @header-height: 40px;
 
-.ald-table-container {
+@ald: ~'ald-table-';
+
+.@{ald}container {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.ald-table-main {
+.@{ald}main {
   width: 100%;
   font-size: 13px;
   line-height: 20px;
   background: #fff;
   color: var(--alias-colors-text-subtle, #4b5563);
 
-  .ald-table-content {
+  .@{ald}content {
     display: flex;
     flex-direction: column;
     border-spacing: 0;
 
-    .ald-table-spin {
+    .@{ald}spin {
       position: absolute;
       top: 0;
       left: 0;
@@ -38,7 +40,7 @@
       }
     }
 
-    .ald-table-spin-mask {
+    .@{ald}spin-mask {
       position: absolute;
       top: 0;
       left: 0;
@@ -50,7 +52,7 @@
     }
   }
 
-  .ald-table-resizer {
+  .@{ald}resizer {
     position: absolute;
     right: 0;
     top: 0;
@@ -63,38 +65,51 @@
     &::after {
       content: '';
       display: block;
-      height: 20px;
-      width: 2px;
+      height: 100%;
+      width: 1px;
       position: absolute;
       top: 50%;
       right: -1px;
+      z-index: 1;
       transform: translateY(-50%);
-      background-color: var(--alias-colors-border-subtle, #f3f4f6);
+      background-color: var(--alias-colors-border-default, #e5e7eb);
     }
   }
 
-  .ald-table-overflow-x {
+  .@{ald}overflow-x {
     overflow-x: hidden;
   }
 
-  .ald-table-tr {
+  .@{ald}tr {
     display: flex;
   }
 
-  .ald-table-th,
-  .ald-table-td {
+  .@{ald}th,
+  .@{ald}td {
     position: relative;
     border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
     flex: 0 0 auto;
 
-    &.ald-table-fixed-left,
-    &.ald-table-fixed-right {
+    &.@{ald}fixed-left,
+    &.@{ald}fixed-right {
       position: sticky;
-      background-color: #fff;
       z-index: 2;
     }
   }
 
+  .@{ald}no-border-tr {
+    .@{ald}td {
+      border-bottom: none;
+    }
+  }
+
+  .@{ald}td {
+    &.@{ald}fixed-left,
+    &.@{ald}fixed-right {
+      background-color: #fff;
+    }
+  }
+
   .fixed-left-shadow {
     &::after {
       position: absolute;
@@ -125,37 +140,37 @@
     }
   }
 
-  &.ald-table-ping-left {
-    .ald-table-fixed-left {
+  &.@{ald}ping-left {
+    .@{ald}fixed-left {
       .fixed-left-shadow();
     }
   }
 
-  &.ald-table-ping-right {
-    .ald-table-fixed-right {
+  &.@{ald}ping-right {
+    .@{ald}fixed-right {
       .fixed-right-shadow();
     }
   }
 
-  .ald-table-th {
-    border-bottom: 1px solid var(--alias-colors-border-subtle, #f3f4f6);
-    background-color: #fff;
+  .@{ald}th {
+    background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
   }
 
-  .ald-table-th-default {
+  .@{ald}th-default {
     font-weight: 500;
     line-height: 16px;
-    padding-left: var(--alias-spacing-200, 16px);
+    padding: @td-padding-size;
     font-size: 12px;
     overflow: hidden;
     height: @header-height;
     display: flex;
     align-items: center;
+    color: var(--alias-colors-text-subtle, #4b5563);
   }
 
-  .ald-table-td-default {
+  .@{ald}td-default {
     line-height: 20px;
-    padding-left: var(--alias-spacing-200, 16px);
+    padding-left: @td-padding-size;
     display: flex;
     align-items: center;
     height: 100%;
@@ -164,27 +179,27 @@
     overflow: hidden;
   }
 
-  .ald-table-td-ellipsis-content {
+  .@{ald}td-ellipsis-content {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .ald-table-sticky {
+  .@{ald}sticky {
     position: sticky;
     top: 0;
     // 需要大于 Spin 的 z-index，Spin 的 z-index 为4
     z-index: 5;
   }
 
-  .ald-table-body {
+  .@{ald}body {
     min-height: 96px;
 
-    .ald-table-tr {
-      &.ald-table-row-hover:hover {
+    .@{ald}tr {
+      &.@{ald}row-hover:hover {
         cursor: pointer;
 
-        .ald-table-td {
+        .@{ald}td {
           background-color: var(
             --alias-colors-bg-interaction-hover,
             rgba(0, 0, 0, 0.05)
@@ -193,9 +208,40 @@
       }
     }
   }
+
+  @td-padding-size: 16px;
+
+  /** Tree Table **/
+  .@{ald}expandable-td {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding-left: @td-padding-size;
+
+    .@{ald}indent-list {
+      display: flex;
+    }
+
+    .@{ald}indent-item {
+      width: 10px;
+    }
+
+    .@{ald}expand-btn {
+      width: 16px;
+      cursor: pointer;
+      margin-right: 6px;
+      display: flex;
+      height: 100%;
+      align-items: center;
+    }
+
+    .@{ald}td-default {
+      padding-left: 0;
+    }
+  }
 }
 
-.ald-table-align {
+.@{ald}align {
   &-left {
     text-align: left;
     justify-content: left;
@@ -212,51 +258,56 @@
   }
 }
 
-.ald-table-pagination {
-  margin-top: 18px;
+.@{ald}pagination {
+  padding-top: 16px;
   display: flex;
   justify-content: end;
+  border-top: 1px solid var(--alias-colors-border-default, #e5e7eb);
 }
 
-.ald-table-loading {
+.@{ald}loading {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 
-  .ald-table-loading-inner {
+  .@{ald}loading-inner {
     width: 100%;
   }
 }
 
-.ald-table-overflow-hidden {
+.@{ald}overflow-hidden {
   overflow: hidden;
   height: 100%;
 }
 
-.ald-table-header {
+.@{ald}header {
   background-color: #fff;
 }
 
-.ald-table-header-scroll-placeholder {
+.@{ald}header-scroll-placeholder {
   height: @header-height;
   position: sticky;
   right: 0;
-  background-color: #fff;
+  background: var(--alias-colors-bg-skeleton-strong, #f3f4f6);
   z-index: 2;
   flex: 0 0 auto;
 }
 
-.ald-table-body-scroll {
+.@{ald}body-scroll {
   overflow: auto;
   height: 100%;
 
-  &.ald-table-scroll-y {
+  &.@{ald}scroll-y {
     overflow-y: scroll;
   }
 }
 
-.ald-table-empty {
+.@{ald}empty {
   margin-top: 80px;
   overflow: hidden;
+
+  &.@{ald}empty-small {
+    margin-top: 20px;
+  }
 }