naive-ui/styles/AdvancedTable.scss

@import "./mixins/mixins.scss";
@import "./themes/vars.scss";

@include themes-mixin {
  @include b(advance-table--col-border) {
    table {
      thead {
        tr {
          th {
            border-right: $--table-td-border-right;
          }
        }
      }
      tbody {
        tr {
          td {
            border-right: $--table-td-border-right;
          }
        }
      }
    }
  }
  @include b(advance-table) {
    @include fade-in-scale-up-transition(table-loading);
    .n-table {
      box-shadow: none;
    }
    .n-advance-table__fixed--active {
      transition: box-shadow 0.2s;
      &.n-advance-table__fixed--right {
        box-shadow: -10px 0 16px -5px rgba(0, 0, 0, 0.2);
        border-left: none;
      }
      &.n-advance-table__fixed--left {
        box-shadow: 10px 0 16px -5px rgba(0, 0, 0, 0.2);
        border-right: none;
      }
    }
    .n-advance-table__fixed--left {
      margin-right: -5px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: $--table-td-border-right;

      .n-advance-table__header {
        border-radius: 0;
        margin-right: -8px;
        overflow: hidden;
        margin-bottom: 0;
      }
    }
    .n-advance-table__fixed--right {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      // border-left: $--table-td-border-right;

      right: 0;
      top: 0;
      .n-advance-table__header {
        border-radius: 0;
      }
    }
    .n-advance-table__fixed {
      display: inline-block;
      position: absolute;
      z-index: 100;
      overflow: hidden;
      top: 0px;
      // box-shadow: 10px 0 16px 3px rgba(0, 0, 0, 0.2);
      .n-table.n-advance-table__body {
        width: auto;
        box-shadow: none;
        overflow-y: auto;
        border-radius: 0;
      }
      table {
        width: auto;
      }
    }
    .n-advance-table__td--fixed {
      visibility: hidden;
    }
    .n-advance-table--no-data {
      .n-advance-table__fixed--active {
        &.n-advance-table__fixed--right {
          .n-advance-table__header {
            box-shadow: -10px 0 16px -5px rgba(0, 0, 0, 0.2);
            th {
              border-right: none;
            }
          }
        }
        &.n-advance-table__fixed--left {
          .n-advance-table__header {
            box-shadow: 10px 0 16px -5px rgba(0, 0, 0, 0.2);
            th {
              border-right: none;
            }
          }
        }
      }
      td {
        border-right: none;
      }
      .n-advance-table__body {
        td {
          border: none;
        }
      }
      .n-advance-table__fixed {
        box-shadow: none;
        border: none;
        overflow: visible;
      }
      .n-advance-table__fixed--left {
        thead {
          th {
            border-right: $--table-td-border-right;
            border-top-right-radius: 0;
          }
        }
      }
    }
    @include b(table) {
      overflow: auto;
      padding-bottom: 0;
    }
    @include e(loading) {
      height: 100%;
      position: absolute;
      width: 100%;
      top: 0;
      background-color: $--table-loading-background;
      z-index: 200;
    }
    @include once {
      @include e(wrapper) {
        width: 100%;
      }
      @include e(tbody) {
        overflow: hidden;
        border-radius: 12px;
      }
      @include e(td-text) {
        span {
          cursor: text;
        }
        &-center {
          text-align: center;
        }
        &-left {
          text-align: left;
        }
        &-right {
          text-align: right;
        }
        @include m(ellipsis) {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      @include e(no-data-tip) {
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 8px;
        z-index: 300;
      }
      @include e(pagination) {
        margin-top: 27px;
        display: flex;
        justify-content: flex-end;
      }
      @include e(operation) {
        display: flex;
        justify-content: space-between;
        &--right,
        &--left {
          display: flex;
        }
      }
      @include e(sortable-column) {
        cursor: pointer;
      }
      @include b(table) {
        table {
          word-wrap: break-word;
          word-break: break-all;
          table-layout: fixed;
          tbody tr:hover {
            background-color: transparent;
          }
        }
        &::-webkit-scrollbar {
          width: 8px;
        }
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 2.5px;
        }
        // &::-webkit-scrollbar-thumb:hover {
        //   background: rgba(255, 255, 255, 0.3);
        // }
        &::-webkit-scrollbar-corner {
          background: transparent;
        }
        &::-webkit-scrollbar:horizontal {
          height: 8px;
        }
      }
    }

    @include e(tbody) {
      box-shadow: $--table-box-shadow;
      border: $--table-border;
      position: relative;
    }
    @include b(table) {
      &::-webkit-scrollbar-thumb {
        border-radius: 2.5px;
        background: $--table-scrollbar-color;
      }
      @include m(scroll-smooth) {
        scroll-behavior: smooth;
        color: red;
      }

      tr.n-table__tr--hover {
        background-color: $--table-row-hover;
      }
    }
    @include e(header) {
      overflow: scroll;
      margin-bottom: -8px;
      background-color: $--table-header-background-color;
      i {
        fill: $--table-header-icon-color;
      }
      th {
        box-sizing: border-box;
      }
    }
  }
}

// @include b(advance-table){
//   @include e(wrapper){
//     width: 100%;
//   }
//   @include e(tbody){
//     overflow: hidden;
//     border-radius: 12px;
//     box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
//   }
//   @include e(td-text){
//     &-center{
//       text-align: center;
//     }
//     &-left{
//       text-align: left;
//     }
//     &-right{
//       text-align: right;
//     }
//     @include m(ellipsis){
//       text-overflow: ellipsis;
//       overflow: hidden;
//       white-space: nowrap;
//       &>*{
//         text-overflow: ellipsis;
//         overflow: hidden;
//         white-space: nowrap;
//       }
//     }
//   }
//   @include e(no-data-tip){
//     padding: 5px;
//     text-align: center;
//     width: 100%;
//     display: table-cell;
//   }
//   @include e(pagination){
//     margin-top: 27px;
//     display: flex;
//     justify-content: flex-end;
//   }
//   @include e(operation){
//     display: flex;
//     justify-content:space-between;
//     &--right,&--left{
//       display: flex;
//     }

//   }

//   @include b(table) {
//     // background-color: #2b3147;
//     table {
//       word-wrap: break-word;
//       word-break: break-all;
//       table-layout: fixed;
//       // width: auto;
//     }
//     &::-webkit-scrollbar {
//       width: 5px;
//     }
//     &::-webkit-scrollbar-track {
//       background: transparent;
//     }
//     &::-webkit-scrollbar-thumb {
//       background: rgba(255, 255, 255, 0.2);
//       border-radius: 2.5px;
//     }
//     &::-webkit-scrollbar-thumb:hover {
//       background: rgba(255, 255, 255, 0.3);
//     }
//     &::-webkit-scrollbar-corner {
//       background: transparent;
//     }
//     &::-webkit-scrollbar:horizontal {
//       height: 5px;
//     }
//     table thead tr th:last-of-type {
//       padding-left: 32px;
//     }
//   }
// }