@dtjoy/dt-design 1.0.6 → 1.0.8

package/esm/table/interface.d.ts

@@ -0,0 +1,196 @@
+import type * as React from 'react';
+import type { Reference } from '@rc-component/table';
+import type { ExpandableConfig, FixedType, GetComponentProps, GetRowKey, ColumnType as RcColumnType, RenderedCell as RcRenderedCell } from '@rc-component/table/lib/interface';
+import type { CheckboxProps, DropdownProps, PaginationProps, TooltipProps } from 'antd';
+import type { Breakpoint } from 'antd/lib/_util/responsiveObserve';
+import type { INTERNAL_SELECTION_ITEM } from 'antd/lib/table/hooks/useSelection';
+import type { AnyObject } from '../_util/type';
+import type { InternalTableProps, TableProps } from './InternalTable';
+export type RefTable = <RecordType = AnyObject>(props: React.PropsWithChildren<TableProps<RecordType>> & React.RefAttributes<Reference>) => React.ReactElement;
+export type RefInternalTable = <RecordType = AnyObject>(props: React.PropsWithChildren<InternalTableProps<RecordType>> & React.RefAttributes<Reference>) => React.ReactElement;
+export type { ExpandableConfig, GetRowKey };
+export type Key = React.Key;
+export type SafeKey = Exclude<Key, bigint>;
+export type RowSelectionType = 'checkbox' | 'radio';
+export type SelectionItemSelectFn = (currentRowKeys: Key[]) => void;
+export type ExpandType = null | 'row' | 'nest';
+export interface TableLocale {
+    filterTitle?: string;
+    filterConfirm?: React.ReactNode;
+    filterReset?: React.ReactNode;
+    filterEmptyText?: React.ReactNode;
+    /**
+     * @deprecated Please use `filterCheckAll` instead.
+     */
+    filterCheckall?: React.ReactNode;
+    filterCheckAll?: React.ReactNode;
+    filterSearchPlaceholder?: string;
+    emptyText?: React.ReactNode | (() => React.ReactNode);
+    selectAll?: React.ReactNode;
+    selectNone?: React.ReactNode;
+    selectInvert?: React.ReactNode;
+    selectionAll?: React.ReactNode;
+    sortTitle?: string;
+    expand?: string;
+    collapse?: string;
+    triggerDesc?: string;
+    triggerAsc?: string;
+    cancelSort?: string;
+}
+export type SortOrder = 'descend' | 'ascend' | null;
+export type SorterTooltipTarget = 'full-header' | 'sorter-icon';
+export type SorterTooltipProps = TooltipProps & {
+    target?: SorterTooltipTarget;
+};
+declare const _TableActions: readonly ["paginate", "sort", "filter"];
+export type TableAction = (typeof _TableActions)[number];
+export type CompareFn<T = AnyObject> = (a: T, b: T, sortOrder?: SortOrder) => number;
+export interface ColumnFilterItem {
+    text: React.ReactNode;
+    value: React.Key | boolean;
+    children?: ColumnFilterItem[];
+}
+export interface ColumnTitleProps<RecordType = AnyObject> {
+    /** @deprecated Will be remove in v7, Please use `sorterColumns` instead. */
+    sortOrder?: SortOrder;
+    /** @deprecated Will be remove in v7, Please use `sorterColumns` instead. */
+    sortColumn?: ColumnType<RecordType>;
+    sortColumns?: {
+        column: ColumnType<RecordType>;
+        order: SortOrder;
+    }[];
+    filters?: Record<string, FilterValue>;
+}
+export type ColumnTitle<RecordType = AnyObject> = React.ReactNode | ((props: ColumnTitleProps<RecordType>) => React.ReactNode);
+export type FilterValue = (Key | boolean)[];
+export type FilterKey = (string | number)[] | null;
+export type FilterSearchType<RecordType = AnyObject> = boolean | ((input: string, record: RecordType) => boolean);
+export interface FilterConfirmProps {
+    closeDropdown: boolean;
+}
+export interface FilterRestProps {
+    confirm?: boolean;
+    closeDropdown?: boolean;
+}
+export interface FilterDropdownProps {
+    prefixCls: string;
+    setSelectedKeys: (selectedKeys: React.Key[]) => void;
+    selectedKeys: React.Key[];
+    /**
+     * Confirm filter value, if you want to close dropdown before commit, you can call with
+     * {closeDropdown: true}
+     */
+    confirm: (param?: FilterConfirmProps) => void;
+    clearFilters?: (param?: FilterRestProps) => void;
+    filters?: ColumnFilterItem[];
+    /** Only close filterDropdown */
+    close: () => void;
+    visible: boolean;
+}
+interface CoverableDropdownProps extends Omit<DropdownProps, 'onOpenChange' | 'overlay' | 'visible' | 'onVisibleChange'> {
+    onOpenChange?: (open: boolean) => void;
+}
+export interface ColumnType<RecordType = AnyObject> extends Omit<RcColumnType<RecordType>, 'title'> {
+    title?: ColumnTitle<RecordType>;
+    sorter?: boolean | CompareFn<RecordType> | {
+        compare?: CompareFn<RecordType>;
+        /** Config multiple sorter order priority */
+        multiple?: number;
+    };
+    sortOrder?: SortOrder;
+    defaultSortOrder?: SortOrder;
+    sortDirections?: SortOrder[];
+    sortIcon?: (props: {
+        sortOrder: SortOrder;
+    }) => React.ReactNode;
+    showSorterTooltip?: boolean | SorterTooltipProps;
+    filtered?: boolean;
+    filters?: ColumnFilterItem[];
+    filterDropdown?: React.ReactNode | ((props: FilterDropdownProps) => React.ReactNode);
+    filterOnClose?: boolean;
+    filterMultiple?: boolean;
+    filteredValue?: FilterValue | null;
+    defaultFilteredValue?: FilterValue | null;
+    filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
+    filterMode?: 'menu' | 'tree';
+    filterSearch?: FilterSearchType<ColumnFilterItem>;
+    onFilter?: (value: React.Key | boolean, record: RecordType) => boolean;
+    /**
+     * Can cover `<Dropdown>` props
+     * @since 5.22.0
+     */
+    filterDropdownProps?: CoverableDropdownProps;
+    filterResetToDefaultFilteredValue?: boolean;
+    responsive?: Breakpoint[];
+    /**
+     * @deprecated Please use `filterDropdownProps.open` instead.
+     * @since 4.23.0
+     */
+    filterDropdownOpen?: boolean;
+    /**
+     * @deprecated Please use `filterDropdownProps.onOpenChange` instead.
+     * @since 4.23.0
+     */
+    onFilterDropdownOpenChange?: (visible: boolean) => void;
+}
+export interface ColumnGroupType<RecordType = AnyObject> extends Omit<ColumnType<RecordType>, 'dataIndex'> {
+    children: ColumnsType<RecordType>;
+}
+export type ColumnsType<RecordType = AnyObject> = (ColumnGroupType<RecordType> | ColumnType<RecordType>)[];
+export interface SelectionItem {
+    key: string;
+    text: React.ReactNode;
+    onSelect?: SelectionItemSelectFn;
+}
+export type SelectionSelectFn<T = AnyObject> = (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
+export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
+export interface TableRowSelection<T = AnyObject> {
+    /** Keep the selection keys in list even the key not exist in `dataSource` anymore */
+    preserveSelectedRowKeys?: boolean;
+    type?: RowSelectionType;
+    selectedRowKeys?: Key[];
+    defaultSelectedRowKeys?: Key[];
+    onChange?: (selectedRowKeys: Key[], selectedRows: T[], info: {
+        type: RowSelectMethod;
+    }) => void;
+    getCheckboxProps?: (record: T) => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>>;
+    onSelect?: SelectionSelectFn<T>;
+    /** @deprecated This function will be remove in v7 and should use `onChange` instead */
+    onSelectMultiple?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
+    /** @deprecated This function will be remove in v7 and should use `onChange` instead */
+    onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
+    /** @deprecated This function will be remove in v7 and should use `onChange` instead */
+    onSelectInvert?: (selectedRowKeys: Key[]) => void;
+    /** @deprecated This function will be remove in v7 and should use `onChange` instead */
+    onSelectNone?: () => void;
+    selections?: INTERNAL_SELECTION_ITEM[] | boolean;
+    hideSelectAll?: boolean;
+    fixed?: FixedType;
+    columnWidth?: string | number;
+    columnTitle?: React.ReactNode | ((checkboxNode: React.ReactNode) => React.ReactNode);
+    checkStrictly?: boolean;
+    /** Set the alignment of the selection column */
+    align?: 'left' | 'center' | 'right';
+    renderCell?: (value: boolean, record: T, index: number, originNode: React.ReactNode) => React.ReactNode | RcRenderedCell<T>;
+    onCell?: GetComponentProps<T>;
+    getTitleCheckboxProps?: () => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>> & React.AriaAttributes;
+}
+export type TransformColumns<RecordType = AnyObject> = (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>;
+export interface TableCurrentDataSource<RecordType = AnyObject> {
+    currentDataSource: RecordType[];
+    action: TableAction;
+}
+export interface SorterResult<RecordType = AnyObject> {
+    column?: ColumnType<RecordType>;
+    order?: SortOrder;
+    field?: Key | readonly Key[];
+    columnKey?: Key;
+}
+export type GetPopupContainer = (triggerNode: HTMLElement) => HTMLElement;
+export type TablePaginationPlacement = 'topStart' | 'topCenter' | 'topEnd' | 'bottomStart' | 'bottomCenter' | 'bottomEnd' | 'none';
+export type TablePaginationPosition = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'none';
+export interface TablePaginationConfig extends PaginationProps {
+    placement?: TablePaginationPlacement[];
+    /** @deprecated please use `placement` instead */
+    position?: TablePaginationPosition[];
+}

package/esm/table/interface.js

@@ -0,0 +1,4 @@
+var _TableActions = ['paginate', 'sort', 'filter'];
+
+// 非必要请勿导出
+export {};

package/esm/table/style/bordered.less

@@ -0,0 +1,141 @@
+@import '../../style/themes/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+.@{table-prefix-cls}-wrapper {
+  .@{table-prefix-cls}.@{table-prefix-cls}-bordered {
+    // ============================ Title 标题 =============================
+    > .@{table-prefix-cls}-title {
+      border: @border-width-base @border-style-base @border-color-base;
+      border-bottom: 0;
+    }
+
+    // ============================ Content 内容容器 ============================
+    > .@{table-prefix-cls}-container {
+      border-left: @border-width-base @border-style-base @border-color-base;
+      border-top: @border-width-base @border-style-base @border-color-base;
+
+      > .@{table-prefix-cls}-content,
+      > .@{table-prefix-cls}-header,
+      > .@{table-prefix-cls}-body,
+      > .@{table-prefix-cls}-summary {
+        > table {
+          // ============================= Cell 单元格 =============================
+          > thead > tr > th,
+          > thead > tr > td,
+          > tbody > tr > th,
+          > tbody > tr > td,
+          > tfoot > tr > th,
+          > tfoot > tr > td {
+            border-right: @border-width-base @border-style-base @border-color-base;
+          }
+
+          // ============================ Header 表头 ============================
+          > thead {
+            > tr:not(:last-child) > th {
+              border-bottom: @border-width-base @border-style-base @border-color-base;
+            }
+
+            > tr > th::before {
+              background-color: transparent !important;
+            }
+          }
+
+          > thead > tr,
+          > tbody > tr,
+          > tfoot > tr {
+            > .@{table-prefix-cls}-cell-fix-right-first::after {
+              border-right: @border-width-base @border-style-base @border-color-base;
+            }
+          }
+
+          // ========================== Expandable 展开行 ==========================
+          > tbody > tr > th,
+          > tbody > tr > td {
+            > .@{table-prefix-cls}-expanded-row-fixed {
+              // margin: calc(-@table-cell-padding-vertical)
+              //     calc(-(@table-cell-padding-horizontal + @border-width-base));
+              &::after {
+                position: absolute;
+                top: 0;
+                right: @border-width-base;
+                bottom: 0;
+                border-right: @border-width-base @border-style-base @border-color-base;
+                content: '';
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // ============================ Scroll 水平滚动 ============================
+    &.@{table-prefix-cls}-scroll-horizontal {
+      > .@{table-prefix-cls}-container > .@{table-prefix-cls}-body {
+        > table > tbody {
+          > tr.@{table-prefix-cls}-expanded-row,
+          > tr.@{table-prefix-cls}-placeholder {
+            > th,
+            > td {
+              border-right: 0;
+            }
+          }
+        }
+      }
+    }
+
+    // ============================ Size 尺寸样式（middle/small） ============================
+    &.@{table-prefix-cls}-middle {
+      > .@{table-prefix-cls}-container {
+        > .@{table-prefix-cls}-content,
+        > .@{table-prefix-cls}-body {
+          > table > tbody > tr > th,
+          > table > tbody > tr > td {
+            > .@{table-prefix-cls}-expanded-row-fixed {
+              // margin: calc(-@table-cell-padding-vertical-middle)
+              //     calc(-(@table-cell-padding-horizontal-middle + @border-width-base));
+            }
+          }
+        }
+      }
+    }
+
+    // small尺寸（对应原getSizeBorderStyle('small')）
+    &.@{table-prefix-cls}-small {
+      > .@{table-prefix-cls}-container {
+        > .@{table-prefix-cls}-content,
+        > .@{table-prefix-cls}-body {
+          > table > tbody > tr > th,
+          > table > tbody > tr > td {
+            > .@{table-prefix-cls}-expanded-row-fixed {
+              // margin: calc(-@table-cell-padding-vertical-small)
+              //     calc(-(@table-cell-padding-horizontal-small + @border-width-base));
+            }
+          }
+        }
+      }
+    }
+
+    // ============================ Footer 页脚 ============================
+    > .@{table-prefix-cls}-footer {
+      border: @border-width-base @border-style-base @border-color-base;
+      border-top: 0;
+    }
+  }
+
+  // ============================ Nested 嵌套表格 ============================
+  .@{table-prefix-cls}-cell {
+    > .@{table-prefix-cls}-container:first-child {
+      border-top: 0;
+    }
+
+    &-scrollbar:not([rowspan]) {
+      // box-shadow: 0 @border-width-base 0 @border-width-base @table-header-background;
+    }
+  }
+
+  // 边框表格滚动条右侧边框
+  .@{table-prefix-cls}-bordered .@{table-prefix-cls}-cell-scrollbar {
+    border-right: @border-width-base @border-style-base @border-color-base;
+  }
+}

package/esm/table/style/fixed.less

@@ -0,0 +1,88 @@
+@import '../../style/themes/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+@cell-cls: ~'@{table-prefix-cls}-cell';
+@fix-cell-cls: ~'@{table-prefix-cls}-cell-fix';
+
+.shadow-left-style() {
+    box-shadow: inset 10px 0 8px -8px @border-color-split;
+}
+
+.shadow-right-style() {
+    box-shadow: inset -10px 0 8px -8px @border-color-split;
+}
+
+.shared-shadow-style() {
+    position: absolute;
+    top: 0;
+    bottom: calc(-@border-width-base);
+    width: 30px;
+    transition: box-shadow @motion-duration-slow;
+    content: '';
+    pointer-events: none;
+}
+
+.@{table-prefix-cls}-wrapper {
+    .@{cell-cls}.@{fix-cell-cls} {
+        position: sticky;
+    }
+
+    .@{fix-cell-cls} {
+        z-index: calc(var(--z-offset-reverse) + @zindex-table-fixed);
+        background: @table-bg;
+
+        &:after {
+            .shared-shadow-style();
+        }
+
+        &-start:after {
+            left: 100%;
+        }
+
+        &-end:after {
+            right: 100%;
+        }
+
+        &-start-shadow-show:after {
+            .shadow-left-style();
+        }
+
+        &-end-shadow-show:after {
+            .shadow-right-style();
+        }
+    }
+
+    .@{table-prefix-cls}-container {
+        position: relative;
+
+        &:before,
+        &:after {
+            .shared-shadow-style();
+            z-index: calc(var(--columns-count) * 2 + @zindex-table-fixed + 1);
+        }
+
+        &:before {
+            left: 0;
+        }
+
+        &:after {
+            right: 0;
+        }
+    }
+
+    .@{table-prefix-cls}-has-fix-start .@{table-prefix-cls}-container:before {
+        display: none;
+    }
+
+    .@{table-prefix-cls}-has-fix-end .@{table-prefix-cls}-container:after {
+        display: none;
+    }
+
+    .@{table-prefix-cls}-fix-start-shadow-show .@{table-prefix-cls}-container:before {
+        .shadow-left-style();
+    }
+
+    .@{table-prefix-cls}-fix-end-shadow-show .@{table-prefix-cls}-container:after {
+        .shadow-right-style();
+    }
+}

package/esm/table/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/esm/table/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.less";
+import "./index.less";

package/esm/table/style/index.less

@@ -0,0 +1,150 @@
+@import '../../style/themes/index.less';
+@import '~antd/es/style/mixins/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
+@table-expand-column-width: 48px;
+
+@import './bordered.less';
+@import './virtual.less';
+@import './sticky.less';
+@import './fixed.less';
+@import './selection.less';
+
+.@{table-prefix-cls}-wrapper {
+    clear: both;
+    max-width: 100%;
+    --rc-virtual-list-scrollbar-bg: @border-color-split;
+    .clearfix();
+
+    .@{table-prefix-cls} {
+        .reset-component();
+        font-size: @font-size-base;
+        border-radius: @border-radius-base @border-radius-base 0 0;
+        scrollbar-color: @table-sticky-scroll-bar-bg @border-color-split;
+    }
+
+    table {
+        width: 100%;
+        text-align: left;
+        border-radius: @border-radius-base @border-radius-base 0 0;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    // ============================= Cell ==============================
+    .@{table-prefix-cls}-cell,
+    .@{table-prefix-cls}-thead > tr > th,
+    .@{table-prefix-cls}-tbody > tr > th,
+    .@{table-prefix-cls}-tbody > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td {
+        position: relative;
+        padding: @table-padding-vertical @table-padding-horizontal;
+        overflow-wrap: break-word;
+    }
+
+    // ============================ Title 表格标题 =============================
+    .@{table-prefix-cls}-title {
+        padding: @table-padding-vertical @table-padding-horizontal;
+    }
+
+    // ============================ Header 表头 ============================
+    .@{table-prefix-cls}-thead {
+        > tr > th,
+        > tr > td {
+            position: relative;
+            color: @table-header-color;
+            font-weight: 500;
+            text-align: start;
+            background: @table-header-bg;
+            border-bottom: @border-width-base @border-style-base @border-color-base;
+            transition: background @motion-duration-mid ease;
+
+            // 跨列单元格居中对齐
+            &[colspan]:not([colspan='1']) {
+                text-align: center;
+            }
+
+            &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(
+                    .@{table-prefix-cls}-row-expand-icon-cell
+                ):not([colspan])::before {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                width: 1px;
+                height: 1.6em;
+                background-color: @border-color-base;
+                transform: translateY(-50%);
+                transition: background-color @motion-duration-mid;
+                content: '';
+            }
+        }
+
+        // 跨列表头去除底部边框（非最后一行）
+        > tr:not(:last-child) > th[colspan] {
+            border-bottom: 0;
+        }
+    }
+
+    // ============================ Body 表体 ============================
+    .@{table-prefix-cls}-tbody {
+        > tr {
+            > th,
+            > td {
+                transition: background @motion-duration-mid, border-color @motion-duration-mid;
+                border-bottom: @border-width-base @border-style-base @border-color-base;
+
+                // ========================= Nest Table 嵌套表格 ===========================
+                > .@{table-prefix-cls}-wrapper:only-child,
+                > .@{table-prefix-cls}-expanded-row-fixed
+                    > .@{table-prefix-cls}-wrapper:only-child {
+                    .@{table-prefix-cls} {
+                        margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical
+                            (@table-expand-column-width - @table-padding-horizontal);
+
+                        .@{table-prefix-cls}-tbody > tr:last-child > td {
+                            border-bottom-width: 0;
+                            &:first-child,
+                            &:last-child {
+                                border-radius: 0;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // 表体中的表头单元格样式（特殊场景）
+            > th {
+                position: relative;
+                color: @table-header-color;
+                font-weight: 500;
+                text-align: left;
+                background: @table-header-bg;
+                border-bottom: @border-width-base @border-style-base @table-border-color;
+                transition: background 0.3s ease;
+            }
+
+            // 测量单元格样式
+            & > .@{table-prefix-cls}-measure-cell {
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
+                border-top: 0 !important;
+                border-bottom: 0 !important;
+
+                .@{table-prefix-cls}-measure-cell-content {
+                    height: 0;
+                    overflow: hidden;
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    // ============================ Footer 表脚 ============================
+    .@{table-prefix-cls}-footer {
+        padding: @table-padding-vertical @table-padding-horizontal;
+        color: @table-footer-color;
+        background: @table-footer-bg;
+    }
+}

package/esm/table/style/selection.less

@@ -0,0 +1,90 @@
+@import '../../style/themes/index.less';
+@import '~antd/es/style/mixins/index.less';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
+@table-expand-icon-size: 17px;
+
+@{table-prefix-cls}-wrapper {
+  @{table-prefix-cls}-selection-col {
+    width: @table-selection-column-width;
+
+    &.@{table-prefix-cls}-selection-col-with-dropdown {
+      width: calc(@table-selection-column-width + @table-expand-icon-size + (@padding-md / 4));
+    }
+  }
+
+  @{table-prefix-cls}-bordered @{table-prefix-cls}-selection-col {
+    width: calc(@table-selection-column-width + (@padding-xs * 2));
+
+    &.@{table-prefix-cls}-selection-col-with-dropdown {
+      width: calc(
+        @table-selection-column-width + @table-expand-icon-size + (@padding-md / 4) +
+          (@padding-xs * 2)
+      );
+    }
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column,
+  table tr td.@{table-prefix-cls}-selection-column,
+  @{table-prefix-cls}-selection-column {
+    padding-right: @padding-xs;
+    padding-left: @padding-xs;
+    text-align: center;
+
+    .@{ant-prefix}-radio-wrapper {
+      margin-right: 0;
+    }
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column.@{table-prefix-cls}-cell-fix-left {
+    z-index: calc(@zindex-table-fixed + 1);
+  }
+
+  table tr th.@{table-prefix-cls}-selection-column::after {
+    background-color: transparent !important;
+  }
+
+  @{table-prefix-cls}-selection {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  @{table-prefix-cls}-selection-extra {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    cursor: pointer;
+    transition: all @motion-duration-slow;
+    margin-left: 100%;
+    padding-left: calc(@table-padding-horizontal / 4);
+
+    .@{iconfont-css-prefix} {
+      color: @table-header-bg;
+      font-size: @table-expand-icon-size;
+      vertical-align: baseline;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+
+  @{table-prefix-cls}-tbody {
+    @{table-prefix-cls}-row {
+      &.@{table-prefix-cls}-row-selected {
+        > @{table-prefix-cls}-cell {
+          background: @table-selected-row-bg;
+
+          &.@{table-prefix-cls}-cell-row-hover {
+            background: @table-selected-row-hover-bg;
+          }
+        }
+      }
+
+      > @{table-prefix-cls}-cell-row-hover {
+        background: @table-row-hover-bg;
+      }
+    }
+  }
+}