@sdata/web-vue 1.10.0 → 1.11.1

package/es/table/interface.d.ts

@@ -1,10 +1,11 @@
+import type { Simplify } from 'type-fest';
 import { CSSProperties, RenderFunction, Slots, VNodeChild } from 'vue';
 import { BaseType, ClassName, Data } from '../_utils/types';
 import { TriggerProps } from '../trigger';
 export declare const TABLE_PAGE_POSITION: readonly ["tl", "top", "tr", "bl", "bottom", "br"];
 export type TablePagePosition = (typeof TABLE_PAGE_POSITION)[number];
 export interface TableData {
-    key?: string;
+    key?: BaseType;
     expand?: string | RenderFunction;
     children?: TableData[];
     disabled?: boolean;
@@ -13,7 +14,7 @@ export interface TableData {
 }
 export interface TableDataWithRaw {
     raw: TableData;
-    key: string;
+    key: BaseType;
     disabled?: boolean;
     expand?: string | RenderFunction;
     children?: TableDataWithRaw[];
@@ -152,6 +153,24 @@ export interface TableProps {
     pagination?: boolean | Data;
     pagePosition?: string;
 }
+export type TableRowKey = string | ((record: TableData) => BaseType);
+export type TableSpanMethodContext = Simplify<{
+    record: TableData;
+    column: TableColumnData | TableOperationColumn;
+    rowIndex: number;
+    columnIndex: number;
+}>;
+export type TableSpanMethod = (data: TableSpanMethodContext) => {
+    rowspan?: number;
+    colspan?: number;
+} | void;
+export type TableLoadMore = (record: TableData, done: (children?: TableData[]) => void) => void;
+export type TableSummaryContext = Simplify<{
+    columns: TableColumnData[];
+    data: TableData[];
+}>;
+export type TableSummary = boolean | ((params: TableSummaryContext) => TableData[]);
+export type TableSummarySpanMethod = TableSpanMethod;
 export type Sorter = {
     field: string;
     direction: 'ascend' | 'descend';

package/es/table/style/index.css

@@ -65,11 +65,34 @@
   position: absolute;
   top: 0;
   right: -4px;
-  z-index: 1;
+  z-index: 2;
+  display: flex;
+  align-items: center;
   width: 8px;
   height: 100%;
   cursor: col-resize;
 }
+.sd-table-column-handle::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  width: 2px;
+  height: 0;
+  background-color: var(--color-neutral-3);
+  border-radius: 1px;
+  transform: translate(-50%, -50%);
+  transition: height 0.15s ease, background-color 0.15s ease;
+  content: "";
+}
+.sd-table-column-handle:hover::after {
+  height: 40%;
+  background-color: rgb(var(--primary-6));
+}
+.sd-table-th-resizing .sd-table-column-handle::after {
+  height: 100%;
+  background-color: rgb(var(--primary-6));
+}
 .sd-table .sd-spin {
   display: flex;
   flex-direction: column;
@@ -81,25 +104,47 @@
 .sd-table-footer {
   border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
 }
+.sd-table-append {
+  background-color: var(--color-bg-2);
+}
 .sd-table-scroll-position-right .sd-table-col-fixed-left-last::after, .sd-table-scroll-position-middle .sd-table-col-fixed-left-last::after {
   box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
 .sd-table-scroll-position-left .sd-table-col-fixed-right-first::after, .sd-table-scroll-position-middle .sd-table-col-fixed-right-first::after {
   box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
-.sd-table-layout-fixed .sd-table-element {
-  table-layout: fixed;
-}
 .sd-table .sd-table-element {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   min-width: 100%;
   margin: 0;
-  border-collapse: separate;
-  border-spacing: 0;
+}
+.sd-table-thead, .sd-table-tbody, .sd-table-tfoot-content {
+  display: grid;
+  grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+}
+.sd-table-tr, .sd-table-virtual-row {
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+}
+.sd-table-tbody > .sd-virtual-list, .sd-table-tbody > .sd-table-body {
+  grid-column: 1/-1;
+  width: 100%;
+}
+.sd-table-virtual-item {
+  display: grid;
+  grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+  width: 100%;
+}
+.sd-table-virtual-row-table {
+  background-color: var(--color-bg-2);
 }
 .sd-table-th {
   position: relative;
   box-sizing: border-box;
+  min-width: 0;
   color: rgb(var(--gray-10));
   font-weight: 500;
   line-height: 1.5715;
@@ -123,6 +168,7 @@
 }
 .sd-table-td {
   box-sizing: border-box;
+  min-width: 0;
   color: rgb(var(--gray-10));
   line-height: 1.5715;
   text-align: left;
@@ -142,6 +188,9 @@
 .sd-table-cell {
   display: flex;
   align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
 }
 .sd-table-cell-align-right {
   justify-content: flex-end;
@@ -230,6 +279,9 @@
 .sd-table-cell-expand-icon .sd-table-cell-inline-icon {
   display: inline-flex;
   margin-right: 4px;
+  padding: 0;
+  background: transparent;
+  border: 0;
 }
 .sd-table-cell-expand-icon .sd-table-cell-inline-icon .sd-icon-loading {
   color: rgb(var(--primary-6));
@@ -267,7 +319,6 @@
 .sd-table-th.sd-table-operation .sd-table-cell, .sd-table-td.sd-table-operation .sd-table-cell {
   display: flex;
   justify-content: center;
-  padding: 0;
 }
 .sd-table-radio, .sd-table-checkbox {
   justify-content: center;
@@ -296,6 +347,12 @@
 .sd-table-cell-with-sorter {
   display: flex;
   align-items: center;
+  width: 100%;
+  padding: 0;
+  color: inherit;
+  text-align: inherit;
+  background: transparent;
+  border: 0;
   cursor: pointer;
 }
 .sd-table-cell-with-sorter:hover {
@@ -437,10 +494,20 @@
   box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
 .sd-table-header {
+  width: 100%;
+  min-width: 100%;
   overflow: hidden;
   background-color: var(--color-neutral-2);
   scrollbar-color: transparent transparent;
 }
+.sd-table-header > .sd-table-element {
+  width: 100%;
+  background-color: inherit;
+}
+.sd-table-header .sd-table-thead {
+  width: 100%;
+  background-color: inherit;
+}
 .sd-table-header-sticky {
   position: sticky;
   top: 0;
@@ -468,12 +535,12 @@
   border-bottom: 1px solid var(--color-neutral-3);
 }
 .sd-table-border .sd-table-scroll-y .sd-table-body .sd-table-tr:last-of-type .sd-table-td,
-.sd-table-border .sd-table-scroll-y tfoot .sd-table-tr:last-of-type .sd-table-td {
+.sd-table-border .sd-table-scroll-y .sd-table-tfoot-content .sd-table-tr:last-of-type .sd-table-td {
   border-bottom: none;
 }
 .sd-table-border .sd-table-scroll-y .sd-table-body .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-left-last::after, .sd-table-border .sd-table-scroll-y .sd-table-body .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-right-first::after,
-.sd-table-border .sd-table-scroll-y tfoot .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-left-last::after,
-.sd-table-border .sd-table-scroll-y tfoot .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-right-first::after {
+.sd-table-border .sd-table-scroll-y .sd-table-tfoot-content .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-left-last::after,
+.sd-table-border .sd-table-scroll-y .sd-table-tfoot-content .sd-table-tr:last-of-type .sd-table-td.sd-table-col-fixed-right-first::after {
   bottom: 0;
 }
 .sd-table-border .sd-table-tr .sd-table-th {
@@ -502,7 +569,7 @@
 .sd-table-border-header-cell .sd-table-td-resizing:not(.sd-table-tr-expand) {
   border-right-color: rgb(var(--primary-6));
 }
-.sd-table-border.sd-table-border-header-cell thead .sd-table-tr:first-child .sd-table-th:last-child {
+.sd-table-border.sd-table-border-header-cell .sd-table-thead .sd-table-tr:first-child .sd-table-th:last-child {
   border-right: 0;
 }
 .sd-table-border-body-cell .sd-table-td:not(:last-child):not(.sd-table-tr-expand) {
@@ -525,9 +592,26 @@
   background-color: var(--color-fill-1);
   content: "";
 }
-.sd-table .sd-table-tr-draggable {
+.sd-table .sd-table-tr-draggable .sd-table-td {
   cursor: move;
 }
+.sd-table .sd-table-tr-drop-target .sd-table-td {
+  position: relative;
+}
+.sd-table .sd-table-tr-drop-target .sd-table-td::before {
+  position: absolute;
+  top: -1px;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background-color: rgb(var(--primary-6));
+  border-radius: 1px;
+  content: "";
+  pointer-events: none;
+}
+.sd-table-dragging .sd-table-td {
+  transition: background-color 0.2s ease;
+}
 .sd-table-hover:not(.sd-table-dragging) .sd-table-tr:not(.sd-table-tr-empty):not(.sd-table-tr-summary):hover .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right),
 .sd-table-hover .sd-table-tr-drag .sd-table-td:not(.sd-table-col-fixed-left):not(.sd-table-col-fixed-right) {
   background-color: var(--color-fill-1);
@@ -569,7 +653,7 @@
   height: 0;
   background-color: transparent;
 }
-.sd-table tfoot .sd-table-td {
+.sd-table .sd-table-tfoot-content .sd-table-td {
   background-color: var(--color-neutral-2);
 }
 .sd-table-tr-checked .sd-table-td {
@@ -647,15 +731,7 @@
 .sd-table-size-mini .sd-table-editable-row .sd-table-cell-wrap-value {
   padding: 2px 16px;
 }
-.sd-table-virtualized .sd-table-element {
-  table-layout: fixed;
-}
-.sd-table-virtualized div.sd-table-body div.sd-table-tr {
-  display: flex;
-}
 .sd-table-virtualized div.sd-table-body div.sd-table-td {
-  display: flex;
-  flex: 1;
   align-items: center;
 }
 

package/es/table/style/index.scss

@@ -2,8 +2,9 @@
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
 @use '@style/mixins/index.scss' as *;
+@use '@components/table/style/token.scss' as token;
 @use '@components/table/style/token.scss' as *;
 @use '@components/table/style/filters-popup.scss' as *;
 
@@ -14,98 +15,14 @@ $table-cls-tr: string.unquote('#{$table-prefix-cls}-tr');
 $table-cls-th: string.unquote('#{$table-prefix-cls}-th');
 $table-cls-td: string.unquote('#{$table-prefix-cls}-td');
 
-$__less-vars: (
-  'color-primary-6': global.$color-primary-6,
-  'line-height-base': theme.$line-height-base,
-  'prefix': theme.$prefix,
-  'sd-theme-tag': global.$sd-theme-tag,
-  'table-border-expand-icon-width': $table-border-expand-icon-width,
-  'table-border-radius': $table-border-radius,
-  'table-border-radius-expand-button': $table-border-radius-expand-button,
-  'table-border-style': $table-border-style,
-  'table-border-width': $table-border-width,
-  'table-color-bg-body-cell': $table-color-bg-body-cell,
-  'table-color-bg-body-row_active': $table-color-bg-body-row_active,
-  'table-color-bg-body-row_active_dark': $table-color-bg-body-row_active_dark,
-  'table-color-bg-body-row_hover': $table-color-bg-body-row_hover,
-  'table-color-bg-body-sorted-cell': $table-color-bg-body-sorted-cell,
-  'table-color-bg-body-stripe-row': $table-color-bg-body-stripe-row,
-  'table-color-bg-expand-content': $table-color-bg-expand-content,
-  'table-color-bg-expand-content_hover': $table-color-bg-expand-content_hover,
-  'table-color-bg-expand-icon': $table-color-bg-expand-icon,
-  'table-color-bg-expand-icon_hover': $table-color-bg-expand-icon_hover,
-  'table-color-bg-header-cell': $table-color-bg-header-cell,
-  'table-color-bg-header-filters-icon_hover': $table-color-bg-header-filters-icon_hover,
-  'table-color-bg-header-sorted-cell': $table-color-bg-header-sorted-cell,
-  'table-color-bg-header-sorted-cell_hover': $table-color-bg-header-sorted-cell_hover,
-  'table-color-bg-tfoot': $table-color-bg-tfoot,
-  'table-color-body-background': $table-color-body-background,
-  'table-color-border': $table-color-border,
-  'table-color-border_resizing': $table-color-border_resizing,
-  'table-color-editable-body-cell-border': $table-color-editable-body-cell-border,
-  'table-color-expand-icon': $table-color-expand-icon,
-  'table-color-expand-icon-border': $table-color-expand-icon-border,
-  'table-color-expand-icon-border_hover': $table-color-expand-icon-border_hover,
-  'table-color-expand-icon_hover': $table-color-expand-icon_hover,
-  'table-color-header-filters-icon': $table-color-header-filters-icon,
-  'table-color-header-filters-icon_active': $table-color-header-filters-icon_active,
-  'table-color-header-sorter-icon': $table-color-header-sorter-icon,
-  'table-color-header-sorter-icon_active': $table-color-header-sorter-icon_active,
-  'table-color-header-sorter-icon_next': $table-color-header-sorter-icon_next,
-  'table-color-text-body-cell': $table-color-text-body-cell,
-  'table-color-text-header-cell': $table-color-text-header-cell,
-  'table-filters-icon-bg_hover': $table-filters-icon-bg_hover,
-  'table-font-size-expand-button': $table-font-size-expand-button,
-  'table-font-size-filters-icon': $table-font-size-filters-icon,
-  'table-font-size-header-sorter-icon': $table-font-size-header-sorter-icon,
-  'table-font-weight-header-text': $table-font-weight-header-text,
-  'table-position-header-sorter-icon-down-top': $table-position-header-sorter-icon-down-top,
-  'table-position-header-sorter-icon-left': $table-position-header-sorter-icon-left,
-  'table-position-header-sorter-icon-up-top': $table-position-header-sorter-icon-up-top,
-  'table-shadow-left': $table-shadow-left,
-  'table-shadow-right': $table-shadow-right,
-  'table-size-body-min-width': $table-size-body-min-width,
-  'table-size-drag-handle-col-width': $table-size-drag-handle-col-width,
-  'table-size-expand-button': $table-size-expand-button,
-  'table-size-default-font-header-size': $table-size-default-font-header-size,
-  'table-size-default-font-size': $table-size-default-font-size,
-  'table-size-default-padding-horizontal': $table-size-default-padding-horizontal,
-  'table-size-default-padding-vertical': $table-size-default-padding-vertical,
-  'table-size-expand-icon-col-width': $table-size-expand-icon-col-width,
-  'table-size-filters-width': $table-size-filters-width,
-  'table-size-header-sorter-icon-height': $table-size-header-sorter-icon-height,
-  'table-size-header-sorter-icon-width': $table-size-header-sorter-icon-width,
-  'table-size-large-font-header-size': $table-size-large-font-header-size,
-  'table-size-large-font-size': $table-size-large-font-size,
-  'table-size-large-padding-horizontal': $table-size-large-padding-horizontal,
-  'table-size-large-padding-vertical': $table-size-large-padding-vertical,
-  'table-size-middle-font-header-size': $table-size-middle-font-header-size,
-  'table-size-middle-font-size': $table-size-middle-font-size,
-  'table-size-middle-padding-horizontal': $table-size-middle-padding-horizontal,
-  'table-size-middle-padding-vertical': $table-size-middle-padding-vertical,
-  'table-size-medium-font-header-size': $table-size-medium-font-header-size,
-  'table-size-medium-font-size': $table-size-medium-font-size,
-  'table-size-medium-padding-horizontal': $table-size-medium-padding-horizontal,
-  'table-size-medium-padding-vertical': $table-size-medium-padding-vertical,
-  'table-size-mini-font-header-size': $table-size-mini-font-header-size,
-  'table-size-mini-font-size': $table-size-mini-font-size,
-  'table-size-mini-padding-horizontal': $table-size-mini-padding-horizontal,
-  'table-size-mini-padding-vertical': $table-size-mini-padding-vertical,
-  'table-size-selection-col-width': $table-size-selection-col-width,
-  'table-size-small-font-header-size': $table-size-small-font-header-size,
-  'table-size-small-font-size': $table-size-small-font-size,
-  'table-size-small-padding-horizontal': $table-size-small-padding-horizontal,
-  'table-size-small-padding-vertical': $table-size-small-padding-vertical,
-  'table-size-shadow-wrapper-width': $table-size-shadow-wrapper-width,
-  'table-spacing-expand-button-margin-right': $table-spacing-expand-button-margin-right,
-  'table-spacing-header-sorter-icon-margin-left': $table-spacing-header-sorter-icon-margin-left,
-  'table-spacing-pagination-margin': $table-spacing-pagination-margin,
-  'transition-duration-1': theme.$transition-duration-1,
-  'transition-timing-function-linear': theme.$transition-timing-function-linear,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('token'), $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 @mixin expandBtn() {
@@ -134,29 +51,29 @@ $__less-vars: (
 
 @mixin table-size($size) {
   .#{$table-prefix-cls}-cell {
-    padding: less-var('table-size-#{$size}-padding-vertical')
-      less-var('table-size-#{$size}-padding-horizontal');
+    padding: token-var('table-size-#{$size}-padding-vertical')
+      token-var('table-size-#{$size}-padding-horizontal');
   }
 
   //.#{$table-prefix-cls}-col-has-sorter .#{$table-prefix-cls}-cell-with-sorter {
-  //  padding: less-var('table-size-#{$size}-padding-vertical') less-var('table-size-#{$size}-padding-horizontal');
+  //  padding: token-var('table-size-#{$size}-padding-vertical') token-var('table-size-#{$size}-padding-horizontal');
   //  cursor: pointer;
   //}
 
   //.#{$table-cls-td} {
-  //  padding: less-var('table-size-#{$size}-padding-vertical') less-var('table-size-#{$size}-padding-horizontal');
+  //  padding: token-var('table-size-#{$size}-padding-vertical') token-var('table-size-#{$size}-padding-horizontal');
   //}
 
   .#{$table-cls-th} {
-    font-size: less-var('table-size-#{$size}-font-header-size');
+    font-size: token-var('table-size-#{$size}-font-header-size');
   }
 
   .#{$table-cls-td} {
-    font-size: less-var('table-size-#{$size}-font-size');
+    font-size: token-var('table-size-#{$size}-font-size');
   }
 
-  $table-size-padding-vertical: less-var('table-size-#{$size}-padding-vertical');
-  $table-size-padding-horizontal: less-var('table-size-#{$size}-padding-horizontal');
+  $table-size-padding-vertical: token-var('table-size-#{$size}-padding-vertical');
+  $table-size-padding-horizontal: token-var('table-size-#{$size}-padding-horizontal');
 
   .#{$table-prefix-cls}-footer {
     padding: $table-size-padding-vertical $table-size-padding-horizontal;
@@ -184,10 +101,38 @@ $__less-vars: (
     position: absolute;
     top: 0;
     right: -4px;
-    z-index: 1;
+    z-index: 2;
+    display: flex;
+    align-items: center;
     width: 8px;
     height: 100%;
     cursor: col-resize;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      width: 2px;
+      height: 0;
+      background-color: $table-color-border;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      transition:
+        height 0.15s ease,
+        background-color 0.15s ease;
+      content: '';
+    }
+
+    &:hover::after {
+      height: 40%;
+      background-color: global.$color-primary-6;
+    }
+  }
+
+  &-th-resizing &-column-handle::after {
+    height: 100%;
+    background-color: global.$color-primary-6;
   }
 
   // spin
@@ -207,6 +152,10 @@ $__less-vars: (
     border-radius: 0 0 $table-border-radius $table-border-radius;
   }
 
+  &-append {
+    background-color: $table-color-body-background;
+  }
+
   // box-shadow of the fixed column on the left
   &-scroll-position-right &-col-fixed-left-last::after,
   &-scroll-position-middle &-col-fixed-left-last::after {
@@ -219,23 +168,48 @@ $__less-vars: (
     box-shadow: $table-shadow-right;
   }
 
-  &-layout-fixed {
-    .#{$table-cls-table} {
-      table-layout: fixed;
-    }
-  }
-
   .#{$table-cls-table} {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     min-width: 100%;
     margin: 0;
-    border-collapse: separate;
-    border-spacing: 0;
+  }
+
+  &-thead,
+  &-tbody,
+  &-tfoot-content {
+    display: grid;
+    grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+  }
+
+  &-tr,
+  &-virtual-row {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+  }
+
+  &-tbody > .#{theme.$prefix}-virtual-list,
+  &-tbody > .#{$table-prefix-cls}-body {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  &-virtual-item {
+    display: grid;
+    grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
+    width: 100%;
+  }
+
+  &-virtual-row-table {
+    background-color: $table-color-body-background;
   }
 
   &-th {
     position: relative;
     box-sizing: border-box;
+    min-width: 0;
     color: $table-color-text-header-cell;
     font-weight: $table-font-weight-header-text;
     line-height: theme.$line-height-base;
@@ -265,6 +239,7 @@ $__less-vars: (
 
   &-td {
     box-sizing: border-box;
+    min-width: 0;
     color: $table-color-text-body-cell;
     line-height: theme.$line-height-base;
     text-align: left;
@@ -288,6 +263,9 @@ $__less-vars: (
   &-cell {
     display: flex;
     align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
 
     &-align-right {
       justify-content: flex-end;
@@ -385,6 +363,9 @@ $__less-vars: (
   &-cell-expand-icon &-cell-inline-icon {
     display: inline-flex;
     margin-right: $table-spacing-expand-button-margin-right;
+    padding: 0;
+    background: transparent;
+    border: 0;
 
     .#{theme.$prefix}-icon-loading {
       color: global.$color-primary-6;
@@ -442,7 +423,6 @@ $__less-vars: (
   &-td#{&}-operation &-cell {
     display: flex;
     justify-content: center;
-    padding: 0;
   }
 
   &-radio,
@@ -477,6 +457,12 @@ $__less-vars: (
   &-cell-with-sorter {
     display: flex;
     align-items: center;
+    width: 100%;
+    padding: 0;
+    color: inherit;
+    text-align: inherit;
+    background: transparent;
+    border: 0;
     cursor: pointer;
 
     &:hover {
@@ -671,10 +657,22 @@ $__less-vars: (
   }
 
   &-header {
+    width: 100%;
+    min-width: 100%;
     overflow: hidden;
     background-color: $table-color-bg-header-cell;
     scrollbar-color: transparent transparent;
 
+    > .#{$table-cls-table} {
+      width: 100%;
+      background-color: inherit;
+    }
+
+    .#{$table-prefix-cls}-thead {
+      width: 100%;
+      background-color: inherit;
+    }
+
     &-sticky {
       position: sticky;
       top: 0;
@@ -722,7 +720,7 @@ $__less-vars: (
       border-bottom: $table-border-width $table-border-style $table-color-border;
 
       .#{$table-prefix-cls}-body .#{$table-cls-tr}:last-of-type .#{$table-cls-td},
-      tfoot .#{$table-cls-tr}:last-of-type .#{$table-cls-td} {
+      .#{$table-prefix-cls}-tfoot-content .#{$table-cls-tr}:last-of-type .#{$table-cls-td} {
         border-bottom: none;
 
         &.#{$table-prefix-cls}-col-fixed-left-last::after,
@@ -784,7 +782,7 @@ $__less-vars: (
   }
 
   &-border#{&}-border-header-cell {
-    thead {
+    .#{$table-prefix-cls}-thead {
       .#{$table-cls-tr}:first-child .#{$table-cls-th}:last-child {
         border-right: 0;
       }
@@ -826,10 +824,34 @@ $__less-vars: (
     }
   }
 
-  & .#{$table-cls-tr}-draggable {
+  & .#{$table-cls-tr}-draggable .#{$table-cls-td} {
     cursor: move;
   }
 
+  // Drop target indicator during row drag
+  & .#{$table-cls-tr}-drop-target {
+    .#{$table-cls-td} {
+      position: relative;
+    }
+
+    .#{$table-cls-td}::before {
+      position: absolute;
+      top: -1px;
+      right: 0;
+      left: 0;
+      height: 2px;
+      background-color: global.$color-primary-6;
+      border-radius: 1px;
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  // Row drag transition
+  &-dragging .#{$table-cls-td} {
+    transition: background-color 0.2s ease;
+  }
+
   &-hover {
     &:not(.#{$table-prefix-cls}-dragging)
       .#{$table-cls-tr}:not(.#{$table-prefix-cls}-tr-empty):not(
@@ -900,7 +922,7 @@ $__less-vars: (
     }
   }
 
-  & tfoot &-td {
+  & &-tfoot-content &-td {
     background-color: $table-color-bg-tfoot;
   }
 
@@ -925,17 +947,7 @@ $__less-vars: (
   }
 
   // virtualized
-  &-virtualized .#{$table-cls-table} {
-    table-layout: fixed;
-  }
-
-  &-virtualized div#{&}-body div#{&}-tr {
-    display: flex;
-  }
-
   &-virtualized div#{&}-body div#{&}-td {
-    display: flex;
-    flex: 1;
     align-items: center;
   }
 }