@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/table.scss

@@ -1,36 +1,44 @@
-@use './mixins/config' as *;
-
 @use 'sass:map';
 
-.#{$namespace}-table {
-    --#{$namespace}-table-border-color: var(--#{$namespace}-border-color-lighter);
-    --#{$namespace}-table-border: 1px solid var(--#{$namespace}-table-border-color);
-    --#{$namespace}-table-text-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-table-header-text-color: var(--#{$namespace}-text-color-secondary);
-    --#{$namespace}-table-row-hover-bg-color: var(--#{$namespace}-fill-color-light);
-    --#{$namespace}-table-row-strip-bg-color: var(--#{$namespace}-fill-color-lighter);
-    --#{$namespace}-table-current-row-bg-color: var(--#{$namespace}-color-primary-light-9);
-    --#{$namespace}-table-header-bg-color: var(--#{$namespace}-bg-color);
-    --#{$namespace}-table-fixed-box-shadow: var(--#{$namespace}-box-shadow-light);
-    --#{$namespace}-table-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-table-tr-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-table-expanded-cell-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
-    --#{$namespace}-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
-    --#{$namespace}-table-min-height: 100px;
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(table) {
+    @include set-component-css-var('table', $table);
 }
 
-.#{$namespace}-table {
+@include b(table) {
     position: relative;
+    overflow: hidden;
     box-sizing: border-box;
+    height: fit-content;
     width: 100%;
     max-width: 100%;
-    min-height: var(--#{$namespace}-table-min-height);
-    height: fit-content;
-    overflow: hidden;
-    color: var(--#{$namespace}-table-text-color);
-    font-size: 14px;
-    background-color: var(--#{$namespace}-table-bg-color);
+    background-color: getCssVar('table-bg-color');
+    font-size: getCssVar('font-size', 'base');
+    color: getCssVar('table-text-color');
+
+    @include e(inner-wrapper) {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        // 表格底部伪 border，总是有的
+        &::before {
+            @include extend-rule(border-pseudo);
+            left: 0;
+            bottom: 0;
+            height: 1px;
+        }
+    }
+
+    tbody {
+        &:focus-visible {
+            outline: none;
+        }
+    }
 
     &.has-footer {
         &.#{$namespace}-table--scrollable-y,
@@ -41,67 +49,168 @@
         }
     }
 
+    // when data is empty
+    @include e(empty-block) {
+        position: sticky;
+        left: 0;
+        min-height: 60px;
+        text-align: center;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    @include e(empty-text) {
+        // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+        // set empty text line height up to contrainer min-height as workaround.
+        line-height: 60px;
+        width: 50%;
+        color: getCssVar('text-color', 'secondary');
+    }
+
+    // expand the row
+    @include e(expand-column) {
+        .cell {
+            padding: 0;
+            text-align: center;
+            user-select: none;
+        }
+    }
+
+    @include e(expand-icon) {
+        @include reset-button(-2px);
+
+        color: getCssVar('text-color', 'regular');
+        font-size: 12px;
+        line-height: 12px;
+        width: min(23px, 100%);
+        height: 23px;
+
+        @include m(expanded) {
+            transform: rotate(90deg);
+        }
+
+        > .#{$namespace}-icon {
+            font-size: 12px;
+        }
+    }
+
+    @include e(expanded-cell) {
+        background-color: getCssVar('table-expanded-cell-bg-color');
+
+        // increase the weight purely
+        &[class*='cell'] {
+            padding: 20px 50px;
+        }
+
+        &:hover {
+            background-color: transparent !important;
+        }
+    }
+
+    @include e(placeholder) {
+        display: inline-block;
+        width: 20px;
+    }
+
+    @include e(append-wrapper) {
+        // avoid overlapping margin https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+        overflow: hidden;
+    }
+
+    @include m(fit) {
+        border-right: 0;
+        border-bottom: 0;
+
+        .#{$namespace}-table__cell.gutter {
+            border-right-width: 1px;
+        }
+
+        @include e(inner-wrapper) {
+            &::before {
+                width: 100%;
+            }
+        }
+    }
+
     thead {
-        color: var(--#{$namespace}-table-header-text-color);
-        font-weight: 500;
+        color: getCssVar('table-header-text-color');
+
+        th {
+            font-weight: 600;
+        }
 
         &.is-group {
             th.#{$namespace}-table__cell {
-                background: var(--#{$namespace}-fill-color-light);
+                background: getCssVar('fill-color', 'light');
             }
         }
     }
 
     .#{$namespace}-table__cell {
-        position: relative;
-        z-index: 1;
-        box-sizing: border-box;
+        padding: map.get($table-padding, 'default');
         min-width: 0;
-        // padding: 8px 0;
-        text-align: left;
+        box-sizing: border-box;
         text-overflow: ellipsis;
         vertical-align: middle;
-        &.is-center {
+        position: relative;
+        text-align: left;
+        z-index: getCssVar('table-index');
+
+        @include when(center) {
             text-align: center;
         }
 
-        &.is-right {
+        @include when(right) {
             text-align: right;
         }
 
         &.gutter {
             width: 15px;
-            padding: 0;
             border-right-width: 0;
             border-bottom-width: 0;
+            padding: 0;
         }
 
         &.is-hidden {
-            & > * {
+            > * {
                 visibility: hidden;
             }
         }
     }
 
-    .#{$namespace}-table__cell-content {
+    .cell {
         box-sizing: border-box;
-        // height: 40px;
-        padding: 8px 12px;
         overflow: hidden;
-        line-height: 22px;
-        white-space: normal;
         text-overflow: ellipsis;
-        word-break: break-all;
-        /* padding: 8px 0; */
+        white-space: normal;
+        overflow-wrap: break-word;
+        line-height: 23px;
+        padding: 0 12px;
 
         &.#{$namespace}-tooltip {
-            min-width: 50px;
             white-space: nowrap;
+            min-width: 50px;
+        }
+    }
+
+    @each $size in (large, default, small) {
+        @include m($size) {
+            font-size: map.get($table-font-size, $size);
+
+            .#{$namespace}-table__cell {
+                padding: map.get($table-padding, $size);
+            }
+
+            .cell {
+                padding: map.get($table-cell-padding, $size);
+            }
         }
     }
 
     tr {
-        background-color: var(--#{$namespace}-table-tr-bg-color);
+        background-color: getCssVar('table-tr-bg-color');
 
         input[type='checkbox'] {
             margin: 0;
@@ -110,7 +219,7 @@
 
     th.#{$namespace}-table__cell.is-leaf,
     td.#{$namespace}-table__cell {
-        border-bottom: var(--#{$namespace}-table-border);
+        border-bottom: getCssVar('table-border');
     }
 
     th.#{$namespace}-table__cell.is-sortable {
@@ -118,22 +227,21 @@
     }
 
     th.#{$namespace}-table__cell {
-        background-color: var(--#{$namespace}-table-header-bg-color);
-        user-select: none;
+        background-color: getCssVar('table-header-bg-color');
 
-        > .#{$namespace}-table__cell-content.highlight {
-            color: var(--#{$namespace}-color-primary);
+        > .cell.highlight {
+            color: getCssVar('color-primary');
         }
 
         &.required > div::before {
             display: inline-block;
+            content: '';
             width: 8px;
             height: 8px;
+            border-radius: 50%;
+            background: #ff4d51;
             margin-right: 5px;
             vertical-align: middle;
-            background: #ff4d51;
-            border-radius: 50%;
-            content: '';
         }
     }
 
@@ -147,57 +255,232 @@
         }
     }
 
-    &.is-scrolling-left {
+    // 拥有多级表头
+    @include m((group, border)) {
+        @include share-rule(border-pseudo) {
+            content: '';
+            position: absolute;
+            background-color: getCssVar('table-border-color');
+            z-index: calc(getCssVar('table-index') + 2);
+        }
+    }
+
+    // table--border
+    @include m(border) {
+        @include e(inner-wrapper) {
+            &::after {
+                @include extend-rule(border-pseudo);
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 1px;
+                z-index: calc(getCssVar('table-index') + 2);
+            }
+        }
+
+        &::before {
+            @include extend-rule(border-pseudo);
+            top: -1px;
+            left: 0;
+            width: 1px;
+            height: 100%;
+        }
+
+        &::after {
+            @include extend-rule(border-pseudo);
+            top: -1px;
+            right: 0;
+            width: 1px;
+            height: 100%;
+        }
+
+        @include e(inner-wrapper) {
+            border-right: none;
+            border-bottom: none;
+        }
+
+        @include e(footer-wrapper) {
+            position: relative;
+            flex-shrink: 0;
+        }
+
+        .#{$namespace}-table__cell {
+            border-right: getCssVar('table-border');
+        }
+
+        th.#{$namespace}-table__cell.gutter:last-of-type {
+            border-bottom: getCssVar('table-border');
+            border-bottom-width: 1px;
+        }
+
+        & th.#{$namespace}-table__cell {
+            border-bottom: getCssVar('table-border');
+        }
+    }
+
+    @include m(hidden) {
+        visibility: hidden;
+    }
+
+    @include e((header-wrapper, body-wrapper, footer-wrapper)) {
+        width: 100%;
+
+        tr {
+            td,
+            th {
+                &.#{$namespace}-table-fixed-column--left,
+                &.#{$namespace}-table-fixed-column--right {
+                    position: sticky !important;
+                    background: inherit;
+                    z-index: calc(getCssVar('table-index') + 1);
+
+                    &.is-last-column,
+                    &.is-first-column {
+                        &::before {
+                            content: '';
+                            position: absolute;
+                            top: 0px;
+                            width: 10px;
+                            bottom: 0px;
+                            overflow-x: hidden;
+                            overflow-y: hidden;
+                            box-shadow: none;
+                            touch-action: none;
+                            pointer-events: none;
+                        }
+                    }
+
+                    &.is-first-column {
+                        &::before {
+                            left: -10px;
+                        }
+                    }
+
+                    &.is-last-column {
+                        &::before {
+                            right: -10px;
+                        }
+                    }
+                }
+
+                &.#{$namespace}-table__fixed-right-patch {
+                    position: sticky !important;
+                    z-index: calc(getCssVar('table-index') + 1);
+                    background: #fff;
+                    right: 0;
+                }
+            }
+        }
+    }
+
+    @include e(header-wrapper) {
+        flex-shrink: 0;
+
+        tr {
+            th {
+                &.#{$namespace}-table-fixed-column--left,
+                &.#{$namespace}-table-fixed-column--right {
+                    background-color: getCssVar('table-header-bg-color');
+                }
+            }
+        }
+    }
+
+    @include e((header, body, footer)) {
+        table-layout: fixed;
+        border-collapse: separate;
+    }
+
+    @include e((header-wrapper)) {
+        overflow: hidden;
+
+        & tbody td.#{$namespace}-table__cell {
+            background-color: getCssVar('table-row-hover-bg-color');
+            color: getCssVar('table-text-color');
+        }
+    }
+
+    @include e((footer-wrapper)) {
+        overflow: hidden;
+        flex-shrink: 0;
+
+        tfoot td.#{$namespace}-table__cell {
+            background-color: getCssVar('table-row-hover-bg-color');
+            color: getCssVar('table-text-color');
+        }
+    }
+
+    @include e((header-wrapper, body-wrapper)) {
+        .#{$namespace}-table-column--selection {
+            > .cell {
+                display: inline-flex;
+                align-items: center;
+                height: 23px;
+            }
+
+            .#{$namespace}-checkbox {
+                height: unset;
+            }
+        }
+    }
+
+    @include when(scrolling-left) {
         .#{$namespace}-table-fixed-column--right.is-first-column {
             &::before {
-                box-shadow: var(--#{$namespace}-table-fixed-right-column);
+                box-shadow: getCssVar('table-fixed-right-column');
             }
         }
+
         &.#{$namespace}-table--border {
             .#{$namespace}-table-fixed-column--left {
                 &.is-last-column {
                     &.#{$namespace}-table__cell {
-                        border-right: var(--#{$namespace}-table-border);
+                        border-right: getCssVar('table-border');
                     }
                 }
             }
         }
+
         th.#{$namespace}-table-fixed-column--left {
-            background-color: var(--#{$namespace}-table-header-bg-color);
+            background-color: getCssVar('table-header-bg-color');
         }
     }
 
-    &.is-scrolling-right {
+    @include when(scrolling-right) {
         .#{$namespace}-table-fixed-column--left.is-last-column {
             &::before {
-                box-shadow: var(--#{$namespace}-table-fixed-left-column);
+                box-shadow: getCssVar('table-fixed-left-column');
             }
         }
+
         .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
             border-right: none;
         }
+
         th.#{$namespace}-table-fixed-column--right {
-            background-color: var(--#{$namespace}-table-header-bg-color);
+            background-color: getCssVar('table-header-bg-color');
         }
     }
 
-    &.is-scrolling-middle {
+    @include when(scrolling-middle) {
         .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
             border-right: none;
         }
+
         .#{$namespace}-table-fixed-column--right.is-first-column {
             &::before {
-                box-shadow: var(--#{$namespace}-table-fixed-right-column);
+                box-shadow: getCssVar('table-fixed-right-column');
             }
         }
+
         .#{$namespace}-table-fixed-column--left.is-last-column {
             &::before {
-                box-shadow: var(--#{$namespace}-table-fixed-left-column);
+                box-shadow: getCssVar('table-fixed-left-column');
             }
         }
     }
 
-    &.is-scrolling-none {
+    @include when(scrolling-none) {
         .#{$namespace}-table-fixed-column--left,
         .#{$namespace}-table-fixed-column--right {
             &.is-first-column,
@@ -210,505 +493,201 @@
 
         th.#{$namespace}-table-fixed-column--left,
         th.#{$namespace}-table-fixed-column--right {
-            background-color: var(--#{$namespace}-table-header-bg-color);
+            background-color: getCssVar('table-header-bg-color');
         }
     }
 
-    .caret-wrapper {
+    @include e(body-wrapper) {
+        overflow: hidden;
         position: relative;
+        flex: 1;
+
+        .#{$namespace}-scrollbar__bar {
+            z-index: calc(getCssVar('table-index') + 2);
+        }
+    }
+
+    .caret-wrapper {
+        @include reset-button();
+
         display: inline-flex;
         flex-direction: column;
         align-items: center;
-        width: 24px;
         height: 14px;
-        overflow: initial;
+        width: 24px;
         vertical-align: middle;
-        cursor: pointer;
+        overflow: initial;
+        position: relative;
     }
 
     .sort-caret {
-        position: absolute;
-        left: 7px;
         width: 0;
         height: 0;
         border: solid 5px transparent;
+        position: absolute;
+        left: 7px;
 
         &.ascending {
+            border-bottom-color: getCssVar('text-color', 'placeholder');
             top: -5px;
-            border-bottom-color: var(--#{$namespace}-text-color-placeholder);
         }
 
         &.descending {
+            border-top-color: getCssVar('text-color', 'placeholder');
             bottom: -3px;
-            border-top-color: var(--#{$namespace}-text-color-placeholder);
         }
     }
 
     .ascending .sort-caret.ascending {
-        border-bottom-color: var(--#{$namespace}-color-primary);
+        border-bottom-color: getCssVar('color-primary');
     }
 
     .descending .sort-caret.descending {
-        border-top-color: var(--#{$namespace}-color-primary);
+        border-top-color: getCssVar('color-primary');
     }
 
     .hidden-columns {
+        visibility: hidden;
         position: absolute;
         z-index: -1;
-        visibility: hidden;
     }
 
-    [class*='#{$namespace}-table__row--level'] {
-        .#{$namespace}-table__expand-icon {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            margin-right: 8px;
-            line-height: 12px;
-            text-align: center;
-        }
-    }
+    @include m(striped) {
+        & .#{$namespace}-table__body {
+            & tr.#{$namespace}-table__row--striped {
+                td.#{$namespace}-table__cell {
+                    background: getCssVar('fill-color', 'lighter');
+                }
 
-    .#{$namespace}-table {
-        &.#{$namespace}-table--border {
-            .#{$namespace}-table__cell {
-                border-right: var(--#{$namespace}-table-border);
+                &.current-row td.#{$namespace}-table__cell {
+                    background-color: getCssVar('table-current-row-bg-color');
+                }
             }
         }
     }
 
-    &:not(.#{$namespace}-table--border) {
-        .#{$namespace}-table__cell {
-            border-right: none;
-        }
-
-        & > .#{$namespace}-table__inner-wrapper {
-            &::after {
-                content: none;
-            }
-        }
-
-        .#{$namespace}-table__inner-wrapper,
-        .#{$namespace}-table__footer-wrapper {
-            tr:first-child {
-                td,
-                th {
-                    &:first-child {
-                        border-left: none;
+    @include e(body) {
+        tr.hover-row {
+            &,
+            &.#{$namespace}-table__row--striped {
+                &,
+                &.current-row {
+                    > td.#{$namespace}-table__cell {
+                        background-color: getCssVar('table-row-hover-bg-color');
                     }
                 }
             }
         }
-    }
-}
-
-.#{$namespace}-table__inner-wrapper {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: var(--#{$namespace}-table-min-height);
-    // 表格底部伪 border，总是有的
-    &::before {
-        bottom: 0px;
-        left: 0;
-        z-index: 3;
-        width: 100%;
-        height: 1px;
-    }
-}
-
-// when data is empty
-.#{$namespace}-table__empty-block {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    min-height: 60px;
-    text-align: center;
-}
 
-.#{$namespace}-table__empty-text {
-    width: 50%;
-    color: var(--#{$namespace}-text-color-secondary);
-    // min-height doesn't work in IE10 and IE11 https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
-    // set empty text line height up to contrainer min-height as workaround.
-    line-height: 60px;
-}
-
-// expand the row
-.#{$namespace}-table__expand-column {
-    .#{$namespace}-table__cell-content {
-        padding: 0;
-        text-align: center;
-        user-select: none;
-    }
-}
-
-.#{$namespace}-table__expand-icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 20px;
-    color: var(--#{$namespace}-text-color-regular);
-    font-size: 12px;
-    cursor: pointer;
-    transition: transform 0.2s ease-in-out;
-
-    & > .#{$namespace}-icon {
-        font-size: 12px;
-    }
-}
-
-.#{$namespace}-table__expand-icon--expanded {
-    transform: rotate(90deg);
-}
-
-.#{$namespace}-table__expanded-cell {
-    background-color: var(--#{$namespace}-table-expanded-cell-bg-color);
-
-    // increase the weight purely
-    &[class*='#{$namespace}-table__cell-content'] {
-        padding: 20px 50px;
-    }
+        tr > td.hover-cell {
+            background-color: getCssVar('table-row-hover-bg-color');
+        }
 
-    &:hover {
-        background-color: transparent !important;
+        tr.current-row > td.#{$namespace}-table__cell {
+            background-color: getCssVar('table-current-row-bg-color');
+        }
     }
-}
 
-.#{$namespace}-table__placeholder {
-    display: inline-block;
-    width: 20px;
-}
-
-.#{$namespace}-table__append-wrapper {
-    // avoid overlapping margin https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
-    overflow: hidden;
-}
-
-.#{$namespace}-table--fit {
-    border-right: 0;
-    border-bottom: 0;
+    &.#{$namespace}-table--scrollable-y {
+        @include e(body-header) {
+            position: sticky;
+            top: 0;
+            z-index: calc(getCssVar('table-index') + 2);
+        }
 
-    .#{$namespace}-table__cell.gutter {
-        border-right-width: 1px;
+        @include e(body-footer) {
+            position: sticky;
+            bottom: 0;
+            z-index: calc(getCssVar('table-index') + 2);
+        }
     }
-}
 
-.#{$namespace}-table--large {
-    font-size: var(--#{$namespace}-font-size-base);
-    .#{$namespace}-table__cell {
-        padding: 12px 0;
-    }
-    .#{$namespace}-table__cell-content {
-        padding: 0 16px;
-    }
-}
-.#{$namespace}-table--small {
-    font-size: 12px;
-    .#{$namespace}-table__cell {
-        padding: 4px 0;
-    }
-    .#{$namespace}-table__cell-content {
-        padding: 0 8px;
+    @include e(column-resize-proxy) {
+        position: absolute;
+        left: 200px;
+        top: 0;
+        bottom: 0;
+        width: 0;
+        border-left: getCssVar('table-border');
+        z-index: calc(getCssVar('table-index') + 9);
     }
-}
-
-.#{$namespace}-table__footer-wrapper {
-    border-top: var(--#{$namespace}-table-border);
-}
 
-// 拥有多级表头
-.#{$namespace}-table--group,
-.#{$namespace}-table--border {
-    &__inner-wrapper,
-    &__footer-wrapper {
-        tr:first-child {
-            td,
-            th {
-                &:first-child {
-                    border-left: var(--#{$namespace}-table-border);
-                }
-            }
-        }
-    }
-}
+    @include e(column-filter-trigger) {
+        @include reset-button();
 
-.#{$namespace}-table--border .#{$namespace}-table__inner-wrapper::after,
-.#{$namespace}-table--border::after,
-.#{$namespace}-table--border::before,
-.#{$namespace}-table__inner-wrapper::before {
-    position: absolute;
-    z-index: 3;
-    background-color: var(--#{$namespace}-table-border-color);
-    content: '';
-}
+        display: inline-block;
 
-// table--border
-.#{$namespace}-table--border {
-    .#{$namespace}-table__inner-wrapper {
-        &::after {
-            top: 0;
-            left: 0;
-            z-index: 3;
-            width: 100%;
-            height: 1px;
+        & i {
+            color: getCssVar('color-info');
+            font-size: 14px;
+            vertical-align: middle;
         }
     }
 
-    &::before {
-        top: -1px;
+    @include e(border-left-patch) {
+        top: 0;
         left: 0;
-        z-index: 3;
         width: 1px;
         height: 100%;
+        z-index: calc(getCssVar('table-index') + 2);
+        position: absolute;
+        background-color: getCssVar('table-border-color');
     }
 
-    &::after {
-        top: -1px;
-        right: 0;
-        z-index: 3;
-        width: 1px;
-        height: 100%;
-    }
-
-    .#{$namespace}-table--border__inner-wrapper {
-        border-right: none;
-        border-bottom: none;
-    }
-
-    .#{$namespace}-table--border__footer-wrapper {
-        position: relative;
-        flex-shrink: 0;
-    }
-
-    .#{$namespace}-table__cell {
-        border-right: var(--#{$namespace}-table-border);
-    }
-
-    th.#{$namespace}-table__cell.gutter:last-of-type {
-        border-bottom: var(--#{$namespace}-table-border);
-        border-bottom-width: 1px;
+    @include e(border-bottom-patch) {
+        left: 0;
+        height: 1px;
+        z-index: calc(getCssVar('table-index') + 2);
+        position: absolute;
+        background-color: getCssVar('table-border-color');
     }
 
-    & th.#{$namespace}-table__cell {
-        border-bottom: var(--#{$namespace}-table-border);
+    @include e(border-right-patch) {
+        top: 0;
+        height: 100%;
+        width: 1px;
+        z-index: calc(getCssVar('table-index') + 2);
+        position: absolute;
+        background-color: getCssVar('table-border-color');
     }
-}
-
-.#{$namespace}-table--hidden {
-    visibility: hidden;
-}
 
-.#{$namespace}-table__header-wrapper,
-.#{$namespace}-table__body-wrapper,
-.#{$namespace}-table__footer-wrapper {
-    width: 100%;
-    tr {
-        td,
-        th {
-            &.#{$namespace}-table-fixed-column--left,
-            &.#{$namespace}-table-fixed-column--right {
-                position: sticky !important;
-                z-index: 2;
-                background: var(--#{$namespace}-bg-color);
-                &.is-last-column,
-                &.is-first-column {
-                    &::before {
-                        position: absolute;
-                        top: 0px;
-                        bottom: -1px;
-                        width: 10px;
-                        overflow-x: hidden;
-                        overflow-y: hidden;
-                        box-shadow: none;
-                        content: '';
-                        pointer-events: none;
-                        touch-action: none;
-                    }
-                }
-                &.is-first-column {
-                    &::before {
-                        left: -10px;
-                    }
-                }
-                &.is-last-column {
-                    &::before {
-                        right: -10px;
-                        box-shadow: none;
-                    }
-                }
-            }
-            &.#{$namespace}-table__fixed-right-patch {
-                position: sticky !important;
-                right: 0;
-                z-index: 2;
-                background: #fff;
-            }
+    @include m(enable-row-transition) {
+        .#{$namespace}-table__body td.#{$namespace}-table__cell {
+            transition: background-color 0.25s ease;
         }
     }
-}
 
-.#{$namespace}-table__header-wrapper {
-    flex-shrink: 0;
-    tr {
-        th {
-            &.#{$namespace}-table-fixed-column--left,
-            &.#{$namespace}-table-fixed-column--right {
-                background-color: var(--#{$namespace}-table-header-bg-color);
-            }
+    @include m(enable-row-hover) {
+        .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
+            background-color: getCssVar('table-row-hover-bg-color');
         }
     }
-}
-
-.#{$namespace}-table__header,
-.#{$namespace}-table__body,
-.#{$namespace}-table__footer {
-    table-layout: fixed;
-    border-collapse: separate;
-}
 
-.#{$namespace}-table__header-wrapper,
-.#{$namespace}-table__footer-wrapper {
-    overflow: hidden;
-
-    & tbody td.#{$namespace}-table__cell {
-        color: var(--#{$namespace}-table-text-color);
-        background-color: var(--#{$namespace}-table-row-hover-bg-color);
-    }
-}
-
-.#{$namespace}-table__header-wrapper,
-.#{$namespace}-table__body-wrapper {
-    .#{$namespace}-table-column--selection {
-        > .#{$namespace}-table__cell-content {
-            display: inline-flex;
-            align-items: center;
-            height: 23px;
-        }
-        .#{$namespace}-checkbox {
-            height: unset;
-            margin-right: 0;
+    [class*='#{$namespace}-table__row--level'] {
+        .#{$namespace}-table__expand-icon {
+            display: inline-block;
+            width: 20px;
+            text-align: center;
         }
     }
-}
-
-.#{$namespace}-table__body-wrapper {
-    position: relative;
-    flex: 1;
-    overflow: hidden;
-
-    .#{$namespace}-scrollbar__bar {
-        z-index: 2;
-    }
-}
 
-.#{$namespace}-table--striped {
-    & .#{$namespace}-table__body {
-        & tr.#{$namespace}-table__row--striped {
-            td.#{$namespace}-table__cell {
-                background: var(--#{$namespace}-table-row-strip-bg-color);
-            }
-
-            &.current-row td.#{$namespace}-table__cell {
-                background-color: var(--#{$namespace}-table-current-row-bg-color);
+    @include b(table) {
+        &.#{$namespace}-table--border {
+            .#{$namespace}-table__cell {
+                border-right: getCssVar('table-border');
             }
         }
     }
-}
 
-.#{$namespace}-table__body {
-    tr.hover-row {
-        &,
-        &.#{$namespace}-table__row--striped {
-            &,
-            &.current-row {
-                > td.#{$namespace}-table__cell {
-                    background-color: var(--#{$namespace}-table-row-hover-bg-color);
-                }
-            }
+    &:not(.#{$namespace}-table--border) {
+        .#{$namespace}-table__cell {
+            border-right: none;
         }
-    }
-
-    tr.current-row > td.#{$namespace}-table__cell {
-        background-color: var(--#{$namespace}-table-current-row-bg-color);
-    }
-}
-
-.#{$namespace}-table__column-resize-proxy {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 200px;
-    z-index: 10;
-    width: 0;
-    border-left: 1px solid var(--#{$namespace}-color-primary, var(--#{$namespace}-table-border-color));
-}
 
-.#{$namespace}-table__column-filter-trigger {
-    display: inline-block;
-    cursor: pointer;
-
-    & i {
-        color: var(--#{$namespace}-color-info);
-        font-size: 14px;
-        vertical-align: middle;
-    }
-}
-
-.#{$namespace}-table__border-left-patch {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 3;
-    width: 1px;
-    height: 100%;
-    background-color: var(--#{$namespace}-table-border-color);
-}
-
-.#{$namespace}-table__border-bottom-patch {
-    position: absolute;
-    left: 0;
-    z-index: 3;
-    height: 1px;
-    background-color: var(--#{$namespace}-table-border-color);
-}
-
-.#{$namespace}-table__border-right-patch {
-    position: absolute;
-    top: 0;
-    z-index: 3;
-    width: 1px;
-    height: 100%;
-    background-color: var(--#{$namespace}-table-border-color);
-}
-
-.#{$namespace}-table--enable-row-transition {
-    .#{$namespace}-table__body td.#{$namespace}-table__cell {
-        transition: background-color 0.25s ease;
-    }
-}
-
-.#{$namespace}-table--enable-row-hover {
-    .#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
-        background-color: var(--#{$namespace}-table-row-hover-bg-color);
+        > .#{$namespace}-table__inner-wrapper {
+            &::after {
+                content: none;
+            }
+        }
     }
 }
-
-.#{$namespace}-table--hidden-div {
-    position: absolute;
-    visibility: hidden;
-}
-
-.#{$namespace}-table__loading {
-    position: absolute;
-    top: 0;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
-}