@wiajs/ui/dist/table/index.less

wia app ui packages

/* === Data Table === */
@import './vars.less';

.data-table {
  --f7-table-cell-padding-horizontal: 8px;
  --f7-table-label-cell-padding-horizontal: 8px;

  overflow-x: auto; // 允许表格左右滑动
  width: 100%;

  .overflow-auto {
    overflow: auto !important;
  }

  table,
  table& {
    table-layout: fixed; // 固定模式，效率更高，使用 <colgroup> 控制列宽;
    width: 100%;
    min-width: 100%;
    border: none;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    .ltr({ text-align: left; });
    .rtl({ text-align: right; });
  }

  // fix
  thead {
    th,
    td {
      font-size: var(--f7-table-head-font-size);
      font-weight: var(--f7-table-head-font-weight);
      line-height: 16px;
      height: var(--f7-table-head-cell-height);
      background-color: var(--f7-table-head-bg-color);
      &:not(.sortable-cell-active) {
        color: var(--f7-table-head-text-color);
      }
    }

    i.icon,
    i.f7-icons,
    i.material-icons {
      vertical-align: top;
      font-size: var(--f7-table-head-icon-size);
    }
  }

  tbody {
    font-size: var(--f7-table-body-font-size);
    th,
    td {
      height: var(--f7-table-body-cell-height);
    }
    tr.data-table-row-selected,
    .device-desktop & tr:hover {
      background: var(--f7-table-selected-row-bg-color);
    }
    td,
    th {
      .hairline(top, var(--f7-table-cell-border-color));
    }
  }

  th,
  td {
    --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
    --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
    padding-top: var(--f7-table-cell-padding-vertical);
    padding-bottom: var(--f7-table-cell-padding-vertical);
    padding-left: var(--f7-table-cell-padding-left);
    padding-right: var(--f7-table-cell-padding-right);
    position: relative;
    box-sizing: border-box;
    &:first-child {
      .ltr({
        --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
      });
      .rtl({
        --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
      });
    }
    &:last-child {
      .ltr({
        --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
      });
      .rtl({
        --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
      });
    }
    &.label-cell,
    &.link-cell {
      --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
      --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
    }
    &.numeric-cell {
      .ltr({ text-align: right; });
      .rtl({ text-align: left; });
    }
    &.checkbox-cell {
      overflow: visible;
      width: var(--f7-table-checkbox-cell-width);
      label + span {
        .ltr({ margin-left: 8px; });
        .rtl({ margin-right: 8px; });
      }
      &:first-child {
        .ltr({
          padding-right: calc(var(--f7-table-cell-padding-right) / 2);
          + td, + th {
            padding-left: calc(var(--f7-table-cell-padding-left) / 2);
          }
        });
        .rtl({
          padding-left: calc(var(--f7-table-cell-padding-left) / 2);
          + td, + th {
            padding-right: calc(var(--f7-table-cell-padding-right) / 2);
          }
        });
      }
      &:last-child {
        .ltr({
          padding-left: calc(var(--f7-table-cell-padding-left) / 2);
        });
        .rtl({
          padding-right: calc(var(--f7-table-cell-padding-right) / 2);
        });
      }
    }
    &.actions-cell {
      .ltr({ text-align: right; });
      .rtl({ text-align: left; });
      white-space: nowrap;
      a.link {
        color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
      }
    }
    a.icon-only,
    .card & a.icon-only,
    .card& a.icon-only {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      font-size: 0;
      min-width: 0;
      i {
        font-size: var(--f7-table-link-icon-only-icon-size);
        vertical-align: middle;
      }
    }
  }

  // Sortable
  .sortable-cell:not(.input-cell) {
    cursor: pointer;
    position: relative;
  }
  .sortable-cell.input-cell .table-head-label {
    cursor: pointer;
    position: relative;
  }
  .sortable-cell:not(.numeric-cell):not(.input-cell):after,
  .sortable-cell.numeric-cell:not(.input-cell):before,
  .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
  .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
    content: 'arrow_bottom_md';
    .core-icons-font();
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    color: var(--f7-table-sortable-icon-color);
    font-size: 13px;
    line-height: 16px;
    transition-duration: 300ms;
    transform: rotate(0);
    opacity: 0;
  }
  .device-desktop & {
    .sortable-cell:not(.sortable-cell-active):hover,
    .sortable-cell:not(.sortable-cell-active) .table-head-label:hover {
      &:after,
      &:before {
        opacity: 0.54;
      }
    }
  }
  .sortable-cell.sortable-cell-active,
  .sortable-cell.sortable-cell-active .table-head-label {
    &:after,
    &:before {
      opacity: 0.87 !important;
    }
  }
  .sortable-cell.sortable-asc {
  }
  .sortable-cell.sortable-desc,
  .sortable-cell.sortable-desc,
  .table-head-label {
    &:after,
    &:before {
      transform: rotate(180deg) !important;
    }
  }

  &.card,
  .card & {
    .card-header,
    .card-footer {
      padding-left: var(--f7-table-edge-cell-padding-horizontal);
      padding-right: var(--f7-table-edge-cell-padding-horizontal);
    }
    .card-header {
      min-height: var(--f7-table-card-header-height);
      background-color: var(--f7-table-card-header-bg-color);
    }
    .card-content {
      overflow-x: auto;
    }
    .card-footer {
      min-height: var(--f7-table-footer-height);
    }
  }

  .data-table-title {
    font-size: var(--f7-table-title-font-size);
    font-weight: var(--f7-table-title-font-weight);
  }
  .data-table-links,
  .data-table-actions {
    display: flex;
  }
  .data-table-links {
    .button {
      min-width: 64px;
    }
  }
  .data-table-actions {
    .ltr({ margin-left: auto; });
    .rtl({ margin-right: auto; });
    align-items: center;
    a.link {
      color: var(--f7-table-actions-link-color, var(--f7-theme-color));
      min-width: 0;
    }
    a.link.icon-only {
      line-height: 1;
      justify-content: center;
      padding: 0;
    }
  }
  .data-table-header,
  .data-table-header-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .card-header {
    > .data-table-header,
    > .data-table-header-selected {
      padding-top: var(--f7-card-header-padding-vertical);
      padding-bottom: var(--f7-card-header-padding-vertical);
      height: 100%;
      margin-top: calc(-1 * var(--f7-card-header-padding-vertical));
      margin-bottom: calc(-1 * var(--f7-card-header-padding-vertical));
      min-height: var(--f7-table-card-header-height);
      .ltr({
        padding-left: var(--f7-table-edge-cell-padding-horizontal);
        padding-right: var(--f7-table-edge-cell-padding-horizontal);
        margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
        margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
      });
      .rtl({
        padding-right: var(--f7-table-edge-cell-padding-horizontal);
        padding-left: var(--f7-table-edge-cell-padding-horizontal);
        margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
        margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
      });
    }
  }

  .data-table-header-selected {
    background: rgba(var(--f7-theme-color-rgb), 0.1);
    display: none;
  }

  &.data-table-has-checked {
    .data-table-header {
      display: none;
    }
    .data-table-header-selected {
      display: flex;
    }
  }
  .data-table-title-selected {
    font-size: 14px;
    color: var(--f7-theme-color);
  }

  // Footer
  .data-table-footer {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    font-size: var(--f7-table-footer-font-size);
    overflow: hidden;
    min-height: var(--f7-table-footer-height);
    color: var(--f7-table-footer-text-color);
    .hairline(top, var(--f7-table-cell-border-color));
    .ltr({
      justify-content: flex-end;
    });
    .rtl({
      justify-content: flex-start;
    });
  }
  .data-table-rows-select,
  .data-table-pagination {
    display: flex;
    align-items: center;
  }

  // Inputs
  .input-cell {
    padding-top: 8px;
    padding-bottom: 8px;
    height: auto;
    vertical-align: top;
    .table-head-label + .input {
      margin-top: 4px;
    }
    .input {
      height: var(--f7-table-input-height);
      input,
      textarea,
      select {
        height: var(--f7-table-input-height);
        color: var(--f7-table-input-text-color);
        font-size: var(--f7-table-input-font-size);
      }
    }
  }

  // Collapsible
  @media (max-width: 480px) and (orientation: portrait) {
    &.data-table-collapsible {
      thead {
        display: none;
      }
      tbody,
      tr,
      td {
        display: block;
      }
      tr {
        position: relative;
        .hairline(top, var(--f7-table-cell-border-color));
      }
      tr:hover {
        background-color: inherit;
      }
      td {
        --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
        --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
        .hairline-remove(top);
        height: auto;
        min-height: var(--f7-table-body-cell-height);
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        .ltr({
          text-align: left;
        });
        .rtl({
          text-align: right;
        });
      }
      td:not(.checkbox-cell) {
        &:before {
          width: 40%;
          display: block !important;
          content: attr(data-collapsible-title);
          position: relative;
          height: auto;
          background: none !important;
          transform: none !important;
          font-size: var(--f7-table-head-font-size);
          font-weight: var(--f7-table-head-font-weight);
          color: var(--f7-table-head-text-color);
          .ltr({ margin-right: 16px; });
          .rtl({ margin-left: 16px; });
          flex-shrink: 0;
        }
      }
      td.checkbox-cell {
        position: absolute;
        top: 0;
        .ltr({
          left: 0;
          + td {
            padding-left: 16px;
          }
          ~ td {
            margin-left: 16px + 16px;
          }
        });
        .rtl({
          right: 0;
          + td {
            padding-right: 16px;
          }
          ~ td {
            margin-right: 16px + 16px;
          }
        });
      }
    }
  }
  // Responsive queries
  each(@breakpoints, {
    .@{key}-only,
    .@{key}-landscape-only {
      display: none;
    }
    @media (min-width: @value) {
      .@{key}-only {
        display: table-cell;
      }
    }
    @media (min-width: @value) and (orientation:landscape) {
      .@{key}-landscape-only {
        display: table-cell;
      }
    }
  });

  // 新增样式，表头、表尾 固定
  // 超出列宽默认隐藏
  table {
    thead {
      th,
      td {
        // overflow: hidden;
        // white-space: nowrap;
        // text-overflow: ellipsis;
        // 新增，可换行
        white-space: normal; /* 允许换行（覆盖浏览器默认的 nowrap） */
        overflow-wrap: break-word; /* 更现代的属性，效果类似 */

        vertical-align: middle;
        text-align: center; /* 水平居中 */
        word-wrap: break-word; /* 允许单词断行 */
        // word-break: break-all; // 激进的长单词断行
        // display:  flex; /* 启用flex布局 */
        // justify-content: center; /* 内容水平居中 */
        // align-items: center; /* 内容垂直居中 */
        // height: 100%; /* 确保th有高度 */
        // padding: 8px 8px; /* 适当内边距 */

        // fix
        position: sticky;
        top: 0;
        z-index: 40;
        background-color: #fcfcfc; // #f2f2f2;  #f7f7f7

        // Sortable
        &.sortable-cell:not(.input-cell) {
          cursor: pointer;
          position: sticky;
        }
      }
    }

    tbody {
      td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 显示省略号 */
        min-width: 40px; // 最小列宽
        max-width: 160px; // 最大列宽
      }

      // 鼠标移动显示
      td:hover {
        overflow: visible;
        white-space: normal;
        // z-index: 1;
        position: relative;
        // background: white;
        // box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      }

      .data-table-group {
        .checkbox {
          margin-right: 8px;
        }
        // i.f7icon {
        //   margin-right: 8px;
        // }
      }
    }

    // fix
    tfoot {
      td {
        position: sticky;
        bottom: 0;
        z-index: 40;
        background-color: #f8f8f8;
      }
    }

    // 固定列
    &.fix-r1 {
      thead tr {
        th:last-of-type {
          right: 0;
          z-index: 50;
        }
      }

      tbody tr {
        td:last-of-type {
          position: sticky;
          right: 0;
          z-index: 30;
          background-color: #fcfcfc;
        }
      }

      tfoot tr {
        td:last-of-type {
          right: 0;
          z-index: 50;
        }
      }
    }

    &.fix-l1 {
      thead tr {
        th:first-of-type {
          left: 0;
          z-index: 50;
        }
      }

      tbody tr {
        td:first-of-type {
          position: sticky;
          left: 0;
          z-index: 30;
          background-color: #fcfcfc;
        }
      }

      tfoot tr {
        td:first-of-type {
          left: 0;
          z-index: 50;
        }
      }
    }

    &.fix-l2 {
      thead tr {
        th:nth-of-type(2) {
          left: var(--dt-col1-width);
          z-index: 50;
        }
      }

      tbody tr {
        td:nth-of-type(2) {
          position: sticky;
          left: var(--dt-col1-width);
          z-index: 30;
          background-color: #fcfcfc;
        }
      }

      tfoot tr {
        th:nth-of-type(2) {
          left: var(--dt-col1-width);
          z-index: 50;
        }
      }
    }

    &.fix-l3 {
      thead tr {
        th:nth-of-type(3) {
          left: calc(var(--dt-col1-width) + var(--dt-col2-width));
          z-index: 50;
        }
      }

      tbody tr {
        td:nth-of-type(3) {
          position: sticky;
          left: var(--col1-width);
          z-index: 30;
          background-color: #fcfcfc;
        }
        td:nth-of-type(3) {
          left: calc(var(--dt-col1-width) + var(--dt-col2-width));
        }
      }

      tfoot tr {
        td:first-of-type,
        td:nth-of-type(2),
        td:nth-of-type(3) {
          left: calc(var(--dt-col1-width) + var(--dt-col2-width));
          z-index: 50;
        }
      }
    }
  }
}

// wiajs .data-table-content
.data-table {
  --f7-card-header-padding-vertical: 0px;
  --f7-button-border-radius: 5px;
  --f7-table-card-header-height: 48px;
  --f7-table-head-cell-height: 40px;

  .data-table-footer {
    padding-right: 10px;
  }

  .dataTables_paginate {
    margin: 0;
    white-space: nowrap;
    text-align: right;
  }

  .pagination {
    display: flex;
    margin: 2px 0;
    white-space: nowrap;
    justify-content: flex-end;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;

    .page-item {
      .page-link {
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        margin-left: -1px;
        line-height: 1.25;
        color: #007bff;
        background-color: #fff;
        border: 1px solid #dee2e6;
      }

      &.active {
        .page-link {
          z-index: 3;
          color: #fff;
          background-color: #007bff;
          border-color: #007bff;
        }
      }

      &.disabled {
        .page-link {
          color: #6c757d;
          pointer-events: none;
          cursor: auto;
          background-color: #fff;
          border-color: #dee2e6;
        }
      }

      &:first-child {
        .page-link {
          margin-left: 0;
          border-top-left-radius: 0.25rem;
          border-bottom-left-radius: 0.25rem;
        }
      }

      &:last-child {
        .page-link {
          border-top-right-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
        }
      }
    }
  }
}

.if-ios-theme({
  @import './ios.less';
});
.if-md-theme({
  @import './md.less';
});
.if-pc-theme({
  @import './pc.less';
});