naive-ui/styles/DataTable.scss

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

@include themes-mixin {
  @include b(data-table) {
    width: 100%;
    font-size: $table-font-size;
    padding-bottom: 8px;
    @include b(data-table-tables-wrapper) {
      position: relative;
      border: $--table-border;
      transition: border-color .3s $--n-ease-in-out-cubic-bezier;
      border-radius: 6px;
      overflow: hidden;
      @include b(data-table-table-wrapper) {
        @include m(left-fixed) {
          left: 0;
          border-right: 1px solid $--n-border-color;
          @include m(active) {
            transition: box-shadow 0.2s;
            box-shadow: $--table-fixed-column-box-shadow
          }
        }
        @include m(right-fixed) {
          right: 0;
          border-left: 1px solid $--n-border-color;
          @include m(active) {
            box-shadow: $--table-fixed-column-box-shadow
          }
        }
        @include m(left-fixed, right-fixed) {
          border-radius: 0;
          top: 0;
          bottom: 0;
          position: absolute;
          display: inline-block;
          overflow: hidden;
          transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
          @include b(data-table-base-table-wrapper) {
            position: relative;
            @include b(data-table-table) {
              width: unset;
            }
          }
        }
      }
    }
    @include b(data-table-table) {
      width: 100%;
      word-wrap: break-word;
      word-break: break-all;
      table-layout: fixed;
      background-color: $--table-body-background-color;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
      border-collapse: separate;
      border-spacing: 0;
      @include b(data-table-thead) {
        background-color: $--table-header-background-color;
        transition: background-color .3s $--n-ease-in-out-cubic-bezier;
      }
      @include b(data-table-tr) {
        box-sizing: border-box;
        transition: background-color 0.3s $--n-ease-in-out-cubic-bezier;
        &:last-child {
          @include b(data-table-td) {
            border-bottom: 0px solid $--data-table-border-color;
          }
        }
        &:hover {
          background-color: $--table-row-hover;
        }
        @include m(hover) {
          background-color: $--table-row-hover;
        }
      }
      @include b(data-table-td) {
        padding: 12px 12px 12px 18px;
        text-align: left;
        box-sizing: border-box;
        border: none;
        color: $--n-secondary-text-color;
        border-bottom: 1px solid $--data-table-border-color;
        transition: border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
        @include m(ellipsis) {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      @include b(data-table-th) {
        position: relative;
        padding: 12px 12px 12px 18px;
        text-align: left;
        font-weight: 500;
        box-sizing: border-box;
        color: $--table-header-text-color;
        transition: border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
        @include m(filterable) {
          padding-right: 36px;
        }
        @include m(sortable) {
          cursor: pointer;
          &:hover {
            background-color: $--overlay-8;
          }
        }
        @include m(ellipsis) {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    @include m(bordered) {
      @include b(data-table-table){
        @include b(data-table-th) {
          border-right: $--table-td-border-right;
          &:last-child {
            border-right: 0px solid $--n-divider-color;
          }
        }
        @include b(data-table-td) {
          border-right: $--table-td-border-right;
          &:last-child {
            border-right: 0px solid $--n-divider-color;
          }
        }
      }
    }
  }
  @include b(data-table) {
    @include once {
      @include e(loading) {
      }
      @include e(empty) {
      }
      @include e(pagination) {
        margin-top: 24px;
        display: flex;
        justify-content: flex-end;
      }
    }
    @include b(data-table-base-table-header) {
      overflow: scroll;
      border-bottom: 1px solid $--data-table-border-color;
      transition: border-color .3s $--n-ease-in-out-cubic-bezier;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      @include b(data-table-th) {
        @include b(data-table-sort-button) {
          height: 14px;
          width: 14px;
          margin-left: 4px;
          position: relative;
          display: inline-block;
          vertical-align: middle;
          @include m(asc) {
            @include e(asc-icon) {
              fill: $--n-primary-color;
            }
          }
          @include m(desc) {
            @include e(desc-icon) {
              fill: $--n-primary-color;
            }
          }
          @include e(asc-icon) {
            bottom: calc(50% - 2px);
            left: 0;
          }
          @include e(desc-icon) {
            top: calc(50% - 2px);
            left: 0;
          }
          @include e(asc-icon, desc-icon) {
            transition: fill .2s $--n-ease-in-out-cubic-bezier;
            fill: change-color($--n-secondary-text-color, $alpha: .3);
            position: absolute;
          }
        }
        @include b(data-table-filter-button) {
          position: absolute;
          right: 0;
          width: 36px;
          top: 0;
          bottom: 0;
          @include e(icon-wrapper) {
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: background-color .3s $--n-ease-in-out-cubic-bezier;
            &:hover {
              background-color: $--overlay-8;
            }
            @include b(icon) {
              fill: change-color($--n-secondary-text-color, $alpha: .2);
              transition: fill .2s $--n-ease-in-out-cubic-bezier;
              font-size: 14px;
            }
          }
          @include m(popover-visible) {
            @include e(icon-wrapper) {
              background-color: $--overlay-8;
            }
          }
          @include m(active) {
            @include e(icon-wrapper) {
              background-color: $--overlay-8;
              @include b(icon) {
                fill: $--n-primary-color;
              }
            }
          }
        }
      }
    }
  }
}