@aloudata/aloudata-design 0.2.5 → 0.3.0-beta.1

package/es/Table/index.js

@@ -1,463 +1,2 @@
-var _excluded = ["style"],
-    _excluded2 = ["style"];
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-/* eslint-disable no-unneeded-ternary */
-/// <reference types ='./react-table-config' />
-import _ from 'lodash';
-import classnames from 'classnames';
-import Icon from '../Icon';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import usePrefixCls from '../_utils/hooks/usePrefixCls';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import Empty from '../Empty';
-import ResizeObserver from 'rc-resize-observer';
-import { useTable, useBlockLayout, useRowSelect, useSortBy, useResizeColumns } from 'react-table';
-var ARRAY_FIRST_INDEX = 0;
-var DEFAULT_ROW_WIDTH = 0;
-var DEFAULT_BODY_HEIGHT = 0;
-
-function Table(_ref, ref) {
-  var columns = _ref.columns,
-      data = _ref.data,
-      total = _ref.total,
-      renderHeaderLeft = _ref.renderHeaderLeft,
-      renderHeaderRight = _ref.renderHeaderRight,
-      onRowSelected = _ref.onRowSelected,
-      loadMore = _ref.loadMore,
-      loading = _ref.loading,
-      hasNextPage = _ref.hasNextPage,
-      _ref$sortable = _ref.sortable,
-      sortable = _ref$sortable === void 0 ? false : _ref$sortable,
-      defaultSort = _ref.defaultSort,
-      _ref$resizeColumn = _ref.resizeColumn,
-      resizeColumn = _ref$resizeColumn === void 0 ? false : _ref$resizeColumn,
-      allSortDirections = _ref.sortDirections,
-      _ref$showHeader = _ref.showHeader,
-      showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$innerScroll = _ref.innerScroll,
-      innerScroll = _ref$innerScroll === void 0 ? false : _ref$innerScroll,
-      _ref$scrollThreshold = _ref.scrollThreshold,
-      scrollThreshold = _ref$scrollThreshold === void 0 ? '150px' : _ref$scrollThreshold,
-      _ref$rowClassName = _ref.rowClassName,
-      rowClassName = _ref$rowClassName === void 0 ? '' : _ref$rowClassName,
-      _ref$ellipsis = _ref.ellipsis,
-      ellipsis = _ref$ellipsis === void 0 ? true : _ref$ellipsis,
-      renderEmpty = _ref.renderEmpty,
-      rowKey = _ref.rowKey;
-
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectedRowId = _React$useState2[0],
-      setSelectedRowId = _React$useState2[1];
-
-  var tableBodyListRef = useRef(null);
-  var tableRef = useRef(null);
-
-  var _useState = useState(DEFAULT_BODY_HEIGHT),
-      _useState2 = _slicedToArray(_useState, 2),
-      tableClientWidth = _useState2[0],
-      setTableClientWidth = _useState2[1];
-
-  var RANDOM_ID = "INNER_SCROLL_ID_".concat(Math.random());
-
-  var _useState3 = useState(DEFAULT_ROW_WIDTH),
-      _useState4 = _slicedToArray(_useState3, 2),
-      width = _useState4[0],
-      setWidth = _useState4[1]; // 如果页面整体宽度变化则重新计算
-
-
-  useEffect(function () {
-    if (tableRef.current) {
-      setTableClientWidth(tableRef.current.clientWidth);
-    }
-  }, [width]);
-  var initialColumnsWidthMap = useMemo(function () {
-    var map = new Map();
-
-    if (tableClientWidth !== DEFAULT_BODY_HEIGHT) {
-      var noGivenColumns = 0;
-      var givenColumnsTotalWidth = 0;
-      columns.forEach(function (column) {
-        if (column.width) {
-          map.set(column.dataIndex, column.width);
-          givenColumnsTotalWidth += column.width;
-        } else {
-          noGivenColumns += 1;
-        }
-      });
-      var averageWidth = (tableClientWidth - givenColumnsTotalWidth) / noGivenColumns;
-      return {
-        columnMap: map,
-        averageWidth: averageWidth
-      };
-    }
-
-    columns.forEach(function (column) {
-      if (column.width) {
-        map.set(column.dataIndex, column.width);
-      }
-    });
-    return {
-      columnMap: map,
-      averageWidth: DEFAULT_ROW_WIDTH
-    };
-  }, [columns, tableClientWidth]);
-  var newColumns = useMemo(function () {
-    return columns.map(function (column) {
-      return _objectSpread(_objectSpread({}, column), {}, {
-        width: initialColumnsWidthMap.columnMap.get(column.dataIndex) || initialColumnsWidthMap.averageWidth,
-        Header: column.title ? column.title : function () {
-          return null;
-        },
-        disableSortBy: !sortable || typeof column.sorter === 'boolean',
-        accessor: column.dataIndex,
-        Cell: function Cell(_ref2) {
-          var row = _ref2.row,
-              value = _ref2.value;
-          return typeof column.render === 'function' ? column.render(value, row.original, row.index) : value;
-        }
-      });
-    });
-  }, [columns, sortable, initialColumnsWidthMap]); // 默认排序的对象
-
-  var defaultSortObject = {
-    id: newColumns[ARRAY_FIRST_INDEX].accessor,
-    desc: newColumns[ARRAY_FIRST_INDEX].sortOrder && newColumns[ARRAY_FIRST_INDEX].sortOrder === 'descend' ? true : false
-  }; // 如果支持排序 但是没有默认排序 则默认按第一列倒叙排序
-
-  var getInitialSortDirection = function getInitialSortDirection() {
-    if (defaultSort && defaultSort.id) {
-      return defaultSort;
-    }
-
-    if (sortable) {
-      return defaultSortObject;
-    }
-
-    return {
-      id: '',
-      desc: false
-    };
-  };
-
-  var _React$useState3 = React.useState(getInitialSortDirection()),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      sortDirection = _React$useState4[0],
-      setSortDirection = _React$useState4[1];
-
-  var getInitSortBy = function getInitSortBy() {
-    if (!(sortDirection === null || sortDirection === void 0 ? void 0 : sortDirection.id)) {
-      return [];
-    }
-
-    var sortColumn = newColumns.find(function (column) {
-      return column.accessor === sortDirection.id;
-    });
-
-    if (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sorter) {
-      return [];
-    }
-
-    return [sortDirection];
-  };
-
-  var _useTable = useTable({
-    columns: newColumns,
-    data: data,
-    disableMultiSort: true,
-    disableSortBy: !sortable,
-    getRowId: rowKey,
-    initialState: {
-      sortBy: getInitSortBy()
-    }
-  }, useBlockLayout, useSortBy, useRowSelect, useResizeColumns),
-      getTableProps = _useTable.getTableProps,
-      getTableBodyProps = _useTable.getTableBodyProps,
-      headerGroups = _useTable.headerGroups,
-      rows = _useTable.rows,
-      prepareRow = _useTable.prepareRow,
-      setSortBy = _useTable.setSortBy,
-      totalColumnsWidth = _useTable.totalColumnsWidth;
-
-  var theadRowWidthRef = React.useRef(DEFAULT_ROW_WIDTH);
-  var prefixCls = usePrefixCls('block-table');
-  var onRowClick = useCallback(function (row) {
-    if (!onRowSelected) {
-      return;
-    }
-
-    setSelectedRowId(row.id);
-    onRowSelected(row.original);
-  }, [onRowSelected]);
-
-  var renderHeader = function renderHeader(len) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames("".concat(prefixCls, "-header"))
-    }, renderHeaderLeft ? renderHeaderLeft() : /*#__PURE__*/React.createElement("span", {
-      className: classnames("".concat(prefixCls, "-header-left"))
-    }, "\u5171\u8BA1", total || len, "\u6761"), /*#__PURE__*/React.createElement("div", {
-      className: classnames("".concat(prefixCls, "-header-right"))
-    }, renderHeaderRight ? renderHeaderRight() : null));
-  }; // 排序的方向 倒叙{ id: 'xx', desc: true }、正序{ id: 'xx', desc: false }、无序 { id: '', desc: undefined }
-  // 获取排序方向以及排序的id
-
-
-  var getSortBy = function getSortBy(id) {
-    var sortDirections = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['ascend', 'descend'];
-    var // 如果传了sortDirections，则使用传入的，否则使用默认的
-    sortOrder = arguments.length > 2 ? arguments[2] : undefined;
-    var res = {
-      id: id,
-      desc: undefined
-    };
-    var isSameCol = sortDirection.id === id;
-    var descMap = new Map([['ascend', false], ['descend', true]]);
-    var directions = allSortDirections || sortDirections; // 如果不是同一列 则返回默认排序 或者排序顺序的第一个
-
-    if (!isSameCol) {
-      if (sortOrder === 'ascend' || sortOrder === 'descend') {
-        res.desc = descMap.get(sortOrder);
-      } else {
-        res.desc = sortOrder ? sortOrder : descMap.get(directions[ARRAY_FIRST_INDEX]);
-      }
-
-      return res;
-    } // 如果是同一列
-    // 如果列给了默认的sortOrder则不在变化
-
-
-    if (sortOrder === 'ascend' || sortOrder === 'descend') {
-      res.desc = descMap.get(sortOrder);
-      return res;
-    } // 在所有方向上 往后取一个
-
-
-    var lastSortDirection = sortDirection.desc ? 'descend' : 'ascend';
-
-    var index = _.findIndex(directions, function (item) {
-      return item === lastSortDirection;
-    });
-
-    var nextIndex = index + 1;
-    res.desc = descMap.get(directions[nextIndex]); // 如果没有排序方向，则返回默认排序对象
-
-    if (res.desc === undefined) {
-      res.id = '';
-    }
-
-    return res;
-  };
-
-  var getHeaderProps = function getHeaderProps(column) {
-    // @ts-ignore
-    var id = column.id,
-        canSort = column.canSort,
-        sorter = column.sorter,
-        sortOrder = column.sortOrder,
-        sortDirections = column.sortDirections;
-    var toggleProps = column.getSortByToggleProps(); // 仅在Table设置sortable时,所有列的canSort为true,此时为前端排序
-
-    if (canSort) {
-      // client sort
-      return _objectSpread(_objectSpread({}, column.getHeaderProps(_objectSpread({}, toggleProps))), {}, {
-        onClick: function onClick(e) {
-          e.stopPropagation();
-
-          if (typeof toggleProps.onClick === 'function') {
-            var sortBy = getSortBy(id, sortDirections, sortOrder);
-            setSortBy(sortBy.desc === undefined ? [defaultSortObject] : [sortBy]); // 客户端排序时 需要重新设置排序
-
-            setSortDirection(sortBy);
-            onChange(sortBy);
-          }
-        }
-      });
-    } // 当列设置sorter属性时，则为服务端排序
-
-
-    if (sorter) {
-      // server sort
-      return _objectSpread(_objectSpread({}, column.getHeaderProps({
-        style: {
-          cursor: 'pointer'
-        }
-      })), {}, {
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          var sortBy = getSortBy(id, sortDirections, sortOrder);
-          setSortDirection(sortBy);
-          onChange(sortBy);
-        }
-      });
-    }
-
-    return column.getHeaderProps();
-  };
-
-  var SortIcons = function SortIcons(_ref3) {
-    var id = _ref3.id;
-    var currentSortId = sortDirection.id,
-        desc = sortDirection.desc;
-
-    if (id !== currentSortId || !sortable) {
-      return null;
-    }
-
-    return desc ? /*#__PURE__*/React.createElement(Icon, {
-      className: "".concat(prefixCls, "-sortIcon"),
-      type: "sort_descending",
-      size: 12
-    }) : /*#__PURE__*/React.createElement(Icon, {
-      className: "".concat(prefixCls, "-sortIcon"),
-      type: "sort_ascending",
-      size: 12
-    });
-  };
-
-  var scrollToTop = function scrollToTop() {
-    var INITIAL_OFFSET_TOP = 0;
-
-    if (tableBodyListRef && tableBodyListRef.current) {
-      tableBodyListRef.current.scrollTop = INITIAL_OFFSET_TOP;
-    }
-  };
-
-  React.useImperativeHandle(ref, function () {
-    return {
-      backToTop: function backToTop() {
-        scrollToTop();
-      }
-    };
-  });
-  var LoadingNode = /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-loading"))
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "waiting",
-    size: 16
-  }), "Loading");
-
-  var renderTableBody = function renderTableBody() {
-    if (loading && !rows.length) {
-      return LoadingNode;
-    }
-
-    if (!loading && !rows.length) {
-      return renderEmpty ? renderEmpty() : /*#__PURE__*/React.createElement(Empty, {
-        description: "\u5F53\u524D\u65E0\u6570\u636E"
-      });
-    }
-
-    var renderRowList = function renderRowList() {
-      return data.map(function (item, index) {
-        var _classnames;
-
-        var row = rows[index];
-        prepareRow(row);
-
-        var _row$getRowProps = row.getRowProps(),
-            rowStyle = _row$getRowProps.style,
-            rowProps = _objectWithoutProperties(_row$getRowProps, _excluded);
-
-        return /*#__PURE__*/React.createElement("div", Object.assign({}, rowProps, {
-          style: _objectSpread({}, rowStyle),
-          className: classnames("".concat(prefixCls, "-row"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefixCls, "-row-selected"), row.id === selectedRowId), _defineProperty(_classnames, rowClassName, rowClassName), _defineProperty(_classnames, "".concat(prefixCls, "-row-ellipsis"), ellipsis), _classnames)),
-          onClick: function onClick() {
-            return onRowClick(row);
-          },
-          key: row.id
-        }), row.cells.map(function (cell) {
-          return /*#__PURE__*/React.createElement("div", Object.assign({}, cell.getCellProps(), {
-            className: classnames("".concat(prefixCls, "-cell"))
-          }), cell.render('Cell'));
-        }));
-      });
-    };
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames("".concat(prefixCls, "-list"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
-      id: RANDOM_ID,
-      ref: tableBodyListRef
-    }, innerScroll ? /*#__PURE__*/React.createElement(InfiniteScroll, {
-      dataLength: rows.length,
-      next: loadMore,
-      hasMore: !!hasNextPage,
-      loader: LoadingNode,
-      scrollableTarget: RANDOM_ID,
-      scrollThreshold: scrollThreshold
-    }, renderRowList()) : renderRowList());
-  };
-
-  return /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref4) {
-      var domWidth = _ref4.width;
-      setWidth(domWidth);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls,
-    ref: tableRef
-  }, showHeader && renderHeader(data.length), /*#__PURE__*/React.createElement("div", Object.assign({}, getTableProps(), {
-    className: classnames("".concat(prefixCls, "-table-wrap"), _defineProperty({}, "".concat(prefixCls, "-column-resizable"), resizeColumn))
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-thead")
-  }, headerGroups.map(function (headerGroup) {
-    var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),
-        style = _headerGroup$getHeade.style,
-        headerGroupProps = _objectWithoutProperties(_headerGroup$getHeade, _excluded2);
-
-    theadRowWidthRef.current = (style === null || style === void 0 ? void 0 : style.width) || DEFAULT_ROW_WIDTH;
-    return /*#__PURE__*/React.createElement("div", Object.assign({}, headerGroupProps, {
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        width: resizeColumn ? style === null || style === void 0 ? void 0 : style.width : '100%'
-      }),
-      className: "".concat(prefixCls, "-row")
-    }), headerGroup.headers.map(function (column) {
-      var barPorps = resizeColumn ? column.getResizerProps() : {};
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(_defineProperty({}, "".concat(prefixCls, "-cell-sorting"), column.id === sortDirection.id), "".concat(prefixCls, "-cell")),
-        style: getHeaderProps(column).style,
-        key: column.id
-      }, /*#__PURE__*/React.createElement("div", Object.assign({
-        className: "".concat(prefixCls, "-cell-content")
-      }, getHeaderProps(column), {
-        style: {
-          width: '100%'
-        }
-      }), column.render('Header'), /*#__PURE__*/React.createElement(SortIcons, {
-        id: column.id
-      })), /*#__PURE__*/React.createElement("div", Object.assign({}, barPorps, {
-        className: classnames(_defineProperty({}, "".concat(prefixCls, "-dragBar"), resizeColumn), "".concat(prefixCls, "-bar"))
-      })));
-    }));
-  })), /*#__PURE__*/React.createElement("div", Object.assign({}, getTableBodyProps(), {
-    className: classnames("".concat(prefixCls, "-tbody"), _defineProperty({}, "".concat(prefixCls, "-innerScroll"), innerScroll)),
-    style: {
-      width: totalColumnsWidth
-    }
-  }), renderTableBody()))));
-}
-
-export default /*#__PURE__*/React.forwardRef(Table);
+import Table from './Table';
+export default Table;

package/es/Table/interface.d.ts

@@ -1,42 +1,38 @@
 /// <reference types="react" />
-import { Row, IdType } from 'react-table';
+import { IdType } from 'react-table';
 export declare type TSortOrder = 'ascend' | 'descend' | false;
 export interface ISort<T> {
     id: IdType<T>;
     desc?: boolean;
 }
-export interface IColumn<T extends object> {
+export interface IColumn<RecordType> {
     title: string | null;
     dataIndex: string;
-    render?: (value: any, row: any, index: number) => React.ReactNode;
+    render?: (value: any, row: RecordType, index: number) => React.ReactNode;
     width?: number;
     minWidth?: number;
-    sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric' | ((rowA: Row<T>, rowB: Row<T>, columnId: IdType<T>, desc?: boolean) => number);
+    sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric';
     sortOrder?: TSortOrder;
     sortDirections?: Array<'ascend' | 'descend'>;
     selected?: boolean;
 }
-export interface ITableProps<T extends object> {
-    columns: IColumn<T>[];
-    data: T[];
-    total?: number;
-    onRowSelected?: (row: T) => void;
+export interface ITableProps<RecordType> {
+    columns: IColumn<RecordType>[];
+    data: RecordType[];
+    onRowSelected?: (row: RecordType) => void;
     loadMore?: () => void | Promise<void>;
     hasNextPage?: boolean;
     loading?: boolean;
-    renderHeaderLeft?: () => React.ReactNode;
-    renderHeaderRight?: () => React.ReactNode;
     sortable?: boolean;
-    onChange?: (sort: ISort<T>) => void;
-    defaultSort?: ISort<T>;
+    onChange?: (sort: ISort<RecordType>) => void;
+    defaultSort?: ISort<RecordType>;
     sortDirections?: Array<'ascend' | 'descend'>;
     resizeColumn?: boolean;
     showHeader?: boolean;
     innerScroll?: boolean;
     ref?: React.RefObject<unknown>;
     scrollThreshold?: string | number;
-    rowKey?: (row: any) => string;
     rowClassName?: string;
     ellipsis?: boolean;
-    renderEmpty?: () => React.ReactNode;
+    rowKey?: string | ((row: RecordType) => string);
 }

package/es/Table/style/index.less

@@ -1,10 +1,9 @@
 @import '../../style/index.less';
 
-@ald-prefix: ant;
 @ald-iconfont-css-prefix: anticon;
-@table-row-height: 40px;
+@table-row-height: 48px;
 
-.ant-block-table {
+.ald-table {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -25,9 +24,7 @@
   &-cell {
     flex-grow: 1;
     height: unset;
-    padding: 12px;
     color: @NL0;
-    line-height: 16px;
     text-align: left;
     word-break: break-all;
     border-bottom: 1px solid @NL95;
@@ -39,10 +36,10 @@
 
   &-row {
     max-width: 100%;
-    height: 40px;
+    height: 48px;
 
     &-ellipsis {
-      .ant-block-table-cell {
+      .ald-table-cell {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -51,15 +48,24 @@
   }
 
   &-thead {
-    .ant-block-table-cell {
+    .ald-table-row {
+      height: 48px;
+    }
+
+    .ald-table-cell {
       position: relative;
+      padding: 14px 24px;
       color: @NL50;
+      line-height: 20px;
+      background-color: @BG97;
 
-      &-sorting {
-        color: @B40;
+      .ald-table-cell-content {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
-      .ant-block-table-bar {
+      .ald-table-bar {
         position: absolute;
         top: 50%;
         right: -12px;
@@ -80,7 +86,7 @@
       }
 
       &:last-child {
-        .ant-block-table-bar {
+        .ald-table-bar {
           display: none;
         }
       }
@@ -91,31 +97,48 @@
     flex: 1;
     overflow: hidden;
 
-    .ant-empty {
+    .ald-empty {
       display: flex;
       justify-content: center;
-      padding-top: 80px;
     }
 
-    .ant-block-table-row {
+    .ald-table-row {
+      height: 68px;
+
+      .ald-table-cell {
+        padding: 24px;
+        line-height: 20px;
+      }
+
       &:hover {
         background-color: @NL97;
       }
 
       &-selected {
-        background-color: @BBG97;
+        background-color: @B98;
 
         &:hover {
-          background-color: @BBG97;
+          background-color: @B98;
         }
       }
     }
   }
 
   &-loading {
+    height: 48px;
     color: @NL80;
     line-height: @table-row-height;
     text-align: center;
+
+    &-icon {
+      margin-right: 4px;
+    }
+  }
+
+  &-init-loading {
+    .ald-table-loading {
+      padding-top: 84px;
+    }
   }
 
   &-header {
@@ -175,10 +198,10 @@
   &-column-resizable {
     overflow: overlay;
 
-    .ant-block-table-thead,
-    .ant-block-table-tbody {
-      .ant-block-table-row {
-        .ant-block-table {
+    .ald-table-thead,
+    .ald-table-tbody {
+      .ald-table-row {
+        .ald-table {
           &-cell {
             flex: none;
           }