@hi-ui/table 4.0.13 → 4.1.0-beta.1

package/lib/cjs/styles/index.scss.js

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;margin-top: 2px;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }";
+var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table--virtual {width: 100%;overflow: hidden; }.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;margin-top: 2px;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }";
 
 var __styleInject__ = require('inject-head-style')["default"];
 

package/lib/cjs/use-table.js

@@ -105,7 +105,8 @@ var useTable = function useTable(_a) {
       cellRender = _a.cellRender,
       _a$fieldKey = _a.fieldKey,
       fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
-      rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "fieldKey"]);
+      virtual = _a.virtual,
+      rootProps = tslib.__rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "fieldKey", "virtual"]);
   /**
    * 获取 key 字段值
    */
@@ -211,7 +212,8 @@ var useTable = function useTable(_a) {
   var _useColWidth = useColWidth.useColWidth({
     data: data,
     columns: columns,
-    resizable: resizable
+    resizable: resizable,
+    virtual: virtual
   }),
       measureRowElementRef = _useColWidth.measureRowElementRef,
       getColgroupProps = _useColWidth.getColgroupProps,

package/lib/esm/BaseTable.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useLocaleContext } from '@hi-ui/core';
@@ -61,7 +61,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       _a$fixedColumnTrigger = _a.fixedColumnTrigger,
       fixedColumnTrigger = _a$fixedColumnTrigger === void 0 ? 'auto' : _a$fixedColumnTrigger,
       emptyContent = _a.emptyContent,
-      rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent"]);
+      virtual = _a.virtual,
+      rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual"]);
 
   var _useEmbedExpand = useEmbedExpand({
     defaultExpandedEmbedRowKeys: defaultExpandedEmbedRowKeys,
@@ -81,7 +82,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
    */
 
 
-  var getEmbedPanelColumn = React.useCallback(function (embedExpandable) {
+  var getEmbedPanelColumn = React__default.useCallback(function (embedExpandable) {
     var embedPanelColumn = {
       dataKey: EMBED_DATA_KEY,
       title: '',
@@ -102,14 +103,14 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
           onSwitch: function onSwitch(shouldExpanded) {
             onExpandEmbedRowsChange(rowItem, shouldExpanded);
           },
-          expandedIcon: /*#__PURE__*/React.createElement(MinusSquareOutlined, null),
-          collapsedIcon: /*#__PURE__*/React.createElement(PlusSquareOutlined, null)
+          expandedIcon: /*#__PURE__*/React__default.createElement(MinusSquareOutlined, null),
+          collapsedIcon: /*#__PURE__*/React__default.createElement(PlusSquareOutlined, null)
         });
       }
     };
     return embedPanelColumn;
   }, [prefixCls, isExpandEmbedRows, onExpandEmbedRowsChange, isEmbedLoadingId]);
-  var mergedColumns = React.useMemo(function () {
+  var mergedColumns = React__default.useMemo(function () {
     if (embedExpandable) {
       var embedColumn = getEmbedPanelColumn(embedExpandable);
       return [embedColumn].concat(columns);
@@ -161,7 +162,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   });
   var providedValue = useTable(Object.assign(Object.assign({}, rest), {
     columns: mergedColumns,
-    data: data
+    data: data,
+    virtual: virtual
   }));
   var rootProps = providedValue.rootProps,
       bordered = providedValue.bordered,
@@ -175,14 +177,14 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   var extraHeader = extra && extra.header;
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
-  var cls = cx(prefixCls, className, hasBorder && prefixCls + "--bordered", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size);
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  var cls = cx(prefixCls, className, hasBorder && prefixCls + "--bordered", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size, virtual && prefixCls + "--virtual");
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: ref,
     role: role,
     className: cls
-  }, rootProps), /*#__PURE__*/React.createElement("div", {
+  }, rootProps), /*#__PURE__*/React__default.createElement("div", {
     className: prefixCls + "__wrapper"
-  }, /*#__PURE__*/React.createElement(TableProvider, {
+  }, /*#__PURE__*/React__default.createElement(TableProvider, {
     value: Object.assign(Object.assign({}, providedValue), {
       striped: striped,
       onRow: onRow,
@@ -195,11 +197,12 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       avgRow: avgRow,
       hasAvgColumn: hasAvgColumn,
       sumRow: sumRow,
-      hasSumColumn: hasSumColumn
+      hasSumColumn: hasSumColumn,
+      virtual: virtual
     })
-  }, /*#__PURE__*/React.createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React.createElement(TableHeader, {
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default.createElement(TableHeader, {
     prefixCls: prefixCls + "-header"
-  }), extraHeader ? /*#__PURE__*/React.createElement("div", {
+  }), extraHeader ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       right: 0,
@@ -207,20 +210,20 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       bottom: 0,
       top: 0
     }
-  }, extraHeader) : null), /*#__PURE__*/React.createElement(TableBody, {
+  }, extraHeader) : null), /*#__PURE__*/React__default.createElement(TableBody, {
     prefixCls: prefixCls,
     emptyContent: emptyContent
-  })), (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  })), (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
     style: {
       width: leftFixedColumnsWidth + 'px'
     }
-  }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
     style: {
       width: rightFixedColumnsWidth + 'px'
     }
-  }) : null), /*#__PURE__*/React.createElement("div", {
+  }) : null), /*#__PURE__*/React__default.createElement("div", {
     className: prefixCls + "-footer",
     style: stickyFooter ? {
       position: 'sticky',
@@ -243,19 +246,19 @@ var renderSwitcher = function renderSwitcher(_ref) {
       expandedIcon = _ref.expandedIcon,
       collapsedIcon = _ref.collapsedIcon;
 
-  if ( /*#__PURE__*/React.isValidElement(rowExpand)) {
+  if ( /*#__PURE__*/React__default.isValidElement(rowExpand)) {
     return rowExpand;
   }
 
   if (rowExpand === true) {
     if (loading) {
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return /*#__PURE__*/React__default.createElement(IconButton, {
         className: cx(prefixCls + "__switcher", prefixCls + "__switcher--loading"),
         icon: defaultLoadingIcon
       });
     }
 
-    return /*#__PURE__*/React.createElement(IconButton, {
+    return /*#__PURE__*/React__default.createElement(IconButton, {
       tabIndex: -1,
       className: cx(prefixCls + "__switcher", prefixCls + "__switcher--" + (expanded ? 'expanded' : 'collapse')),
       icon: expanded ? expandedIcon : collapsedIcon,

package/lib/esm/Table.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useCallback, useMemo, Fragment } from 'react';
+import React__default, { forwardRef, useCallback, useMemo, Fragment } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__, invariant } from '@hi-ui/env';
 import Pagination from '@hi-ui/pagination';
@@ -51,7 +51,7 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
       _a$standard = _a.standard,
       standard = _a$standard === void 0 ? false : _a$standard,
       _a$loading = _a.loading,
-      loading = _a$loading === void 0 ? false : _a$loading,
+      loadingProp = _a$loading === void 0 ? false : _a$loading,
       dataSource = _a.dataSource,
       paginationProp = _a.pagination,
       uniqueId = _a.uniqueId,
@@ -66,7 +66,8 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
       extra = _a.extra,
       _a$data = _a.data,
       data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
-      rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "rowSelection", "fieldKey", "extra", "data"]);
+      virtual = _a.virtual,
+      rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "rowSelection", "fieldKey", "extra", "data", "virtual"]);
 
   var tableProps = withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
 
@@ -118,15 +119,24 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
    */
 
   var _useTablePagination = useTablePagination({
+    loadingProp: loadingProp,
     pagination: pagination,
     data: data,
     dataSource: dataSource
   }),
+      loading = _useTablePagination.loading,
       mergedData = _useTablePagination.mergedData,
       currentPage = _useTablePagination.currentPage,
-      trySetCurrentPage = _useTablePagination.trySetCurrentPage; // 优化数据在第一页且数据一页内时，不展示 pagination 配置项
+      trySetCurrentPage = _useTablePagination.trySetCurrentPage,
+      pageSize = _useTablePagination.pageSize,
+      trySetPageSize = _useTablePagination.trySetPageSize,
+      total = _useTablePagination.total; // 可能是从 dataSource 中拿到的 total 值，在此更新该值
 
 
+  pagination = Object.assign(Object.assign({}, pagination), {
+    total: total
+  }); // 优化数据在第一页且数据一页内时，不展示 pagination 配置项
+
   var hiddenPagination = !paginationProp || pagination.autoHide && currentPage === 1 && typeof pagination.pageSize === 'number' && typeof pagination.total === 'number' && pagination.total <= pagination.pageSize && data.length <= pagination.pageSize; // 获取 key 字段值
 
   var getRowKeyField = useCallback(function (item) {
@@ -150,7 +160,7 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [mergedData, getRowKeyField]); // ************************ 行多选 ************************ //
   // 自定义设置 checkbox 列宽度
 
-  var checkboxColWidth = React.useMemo(function () {
+  var checkboxColWidth = React__default.useMemo(function () {
     return rowSelection && typeof rowSelection.checkboxColWidth === 'number' ? rowSelection.checkboxColWidth : 38;
   }, [rowSelection]); // 预处理 column 支持 多选渲染
 
@@ -167,13 +177,13 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
       checkRowIsDisabledCheckbox = _useTableCheck.checkRowIsDisabledCheckbox; // 表格列多选操作区
 
 
-  var getSelectionColumn = React.useCallback(function (rowSelection) {
+  var getSelectionColumn = React__default.useCallback(function (rowSelection) {
     var renderCell = function renderCell(_, rowItem, rowIndex) {
       var rowKey = getRowKeyField(rowItem);
       var checked = isCheckedRowKey(rowKey);
       var disabledCheckbox = checkRowIsDisabledCheckbox(rowItem);
       return {
-        node: /*#__PURE__*/React.createElement(Checkbox, {
+        node: /*#__PURE__*/React__default.createElement(Checkbox, {
           checked: isCheckedRowKey(rowKey),
           disabled: disabledCheckbox,
           onChange: function onChange(evt) {
@@ -208,7 +218,7 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
 
     var renderTitleCell = function renderTitleCell() {
       return {
-        node: /*#__PURE__*/React.createElement(Checkbox, {
+        node: /*#__PURE__*/React__default.createElement(Checkbox, {
           checked: checkedAll,
           indeterminate: semiChecked,
           onChange: tryCheckAllRow
@@ -228,7 +238,7 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
         }
 
         if (rowSelection.checkAllOptions.filterIcon) {
-          return /*#__PURE__*/React.createElement(React.Fragment, null, node, rowSelection.checkAllOptions.filterIcon);
+          return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, node, rowSelection.checkAllOptions.filterIcon);
         }
       }
 
@@ -245,7 +255,7 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     };
     return selectionColumn;
   }, [getRowKeyField, checkedAll, semiChecked, tryCheckAllRow, checkboxColWidth, isCheckedRowKey, onCheckedRowKeysChange, checkRowIsDisabledCheckbox, prefixCls]);
-  var mergedColumns = React.useMemo(function () {
+  var mergedColumns = React__default.useMemo(function () {
     if (rowSelection) {
       var selectionColumn = getSelectionColumn(rowSelection);
       return [selectionColumn].concat(visibleCols);
@@ -255,15 +265,16 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [rowSelection, getSelectionColumn, visibleCols]); // ************************ loading ************************ //
 
   var TableWrapper = loading ? Loading : Fragment;
-  return /*#__PURE__*/React.createElement(TableWrapper, null, /*#__PURE__*/React.createElement(BaseTable, Object.assign({
+  return /*#__PURE__*/React__default.createElement(TableWrapper, null, /*#__PURE__*/React__default.createElement(BaseTable, Object.assign({
     ref: ref
   }, baseTableProps, {
     prefixCls: prefixCls,
     columns: mergedColumns,
     data: mergedData,
     fieldKey: fieldKey,
+    virtual: virtual,
     extra: Object.assign({
-      header: setting ? /*#__PURE__*/React.createElement(TableSettingMenu, {
+      header: setting ? /*#__PURE__*/React__default.createElement(TableSettingMenu, {
         prefixCls: prefixCls + "-setting",
         // sort
         sortedCols: sortedCols,
@@ -276,12 +287,14 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
         cacheHiddenColKeys: cacheHiddenColKeys,
         setCacheHiddenColKeys: setCacheHiddenColKeys
       }) : null,
-      footer: hiddenPagination ? null : /*#__PURE__*/React.createElement(Pagination, Object.assign({
+      footer: dataSource || !hiddenPagination ? /*#__PURE__*/React__default.createElement(Pagination, Object.assign({
         className: cx(prefixCls + "-pagination", pagination.placement && prefixCls + "-pagination--placement-" + pagination.placement)
       }, pagination, {
         current: currentPage,
-        onChange: trySetCurrentPage
-      }))
+        onChange: trySetCurrentPage,
+        pageSize: pageSize,
+        onPageSizeChange: trySetPageSize
+      })) : null
     }, extra)
   })));
 });

package/lib/esm/TableAdvancedFilter.js

@@ -7,7 +7,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React__default from 'react';
 import { cx } from '@hi-ui/classname';
 import { useTableContext } from './context.js';
 import { TableColumnMenu } from './TableColumnMenu.js';
@@ -27,20 +27,20 @@ var renderFilter = function renderFilter(_ref) {
       sorter = _column$raw.sorter,
       filterIcon = _column$raw.filterIcon,
       selectFilters = _column$raw.selectFilters;
-  return [showColMenu && /*#__PURE__*/React.createElement(TableColumnMenu, {
+  return [showColMenu && /*#__PURE__*/React__default.createElement(TableColumnMenu, {
     prefixCls: prefixCls + "-dropdown",
     key: "0",
     column: column,
     onOpen: onOpen,
     onClose: onClose
-  }), sorter && !showColMenu && /*#__PURE__*/React.createElement(SorterMenu, {
+  }), sorter && !showColMenu && /*#__PURE__*/React__default.createElement(SorterMenu, {
     prefixCls: prefixCls + "-sorter",
     key: "1",
     column: column
-  }), selectFilters && /*#__PURE__*/React.createElement(Select, Object.assign({
+  }), selectFilters && /*#__PURE__*/React__default.createElement(Select, Object.assign({
     prefixCls: prefixCls + "-select",
     key: "2"
-  }, selectFilters)), filterIcon && /*#__PURE__*/React.createElement(FilterDropdown, {
+  }, selectFilters)), filterIcon && /*#__PURE__*/React__default.createElement(FilterDropdown, {
     prefixCls: prefixCls + "-custom",
     key: "3",
     column: column,
@@ -62,9 +62,9 @@ var SorterMenu = function SorterMenu(_ref2) {
       setActiveSorterColumn = _useTableContext.setActiveSorterColumn,
       setActiveSorterType = _useTableContext.setActiveSorterType;
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: prefixCls
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: cx(prefixCls + "__icon", (_cx = {}, _cx[prefixCls + "__icon--active"] = activeSorterType === 'ascend' && activeSorterColumn === columnKey, _cx)),
     onClick: function onClick(e) {
       if (activeSorterType === 'ascend' && activeSorterColumn === columnKey) {
@@ -75,7 +75,7 @@ var SorterMenu = function SorterMenu(_ref2) {
         setActiveSorterColumn(columnKey);
       }
     }
-  }, /*#__PURE__*/React.createElement(CaretUpFilled, null)), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement(CaretUpFilled, null)), /*#__PURE__*/React__default.createElement("span", {
     className: cx(prefixCls + "__icon", (_cx2 = {}, _cx2[prefixCls + "__icon--active"] = activeSorterType === 'descend' && activeSorterColumn === columnKey, _cx2)),
     onClick: function onClick(e) {
       if (activeSorterType === 'descend' && activeSorterColumn === columnKey) {
@@ -86,7 +86,7 @@ var SorterMenu = function SorterMenu(_ref2) {
         setActiveSorterColumn(columnKey);
       }
     }
-  }, /*#__PURE__*/React.createElement(CaretDownFilled, null)));
+  }, /*#__PURE__*/React__default.createElement(CaretDownFilled, null)));
 };
 
 var FilterDropdown = function FilterDropdown(_ref3) {
@@ -118,15 +118,15 @@ var FilterDropdown = function FilterDropdown(_ref3) {
       menuVisible = _useUncontrolledToggl[0],
       menuVisibleAction = _useUncontrolledToggl[1];
 
-  var _React$useState = React.useState(null),
+  var _React$useState = React__default.useState(null),
       menuTrigger = _React$useState[0],
       setMenuTrigger = _React$useState[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: prefixCls + "__trigger",
     ref: setMenuTrigger,
     onClick: menuVisibleAction.not
-  }, filterIcon), /*#__PURE__*/React.createElement(Popper, Object.assign({
+  }, filterIcon), /*#__PURE__*/React__default.createElement(Popper, Object.assign({
     className: prefixCls + "__popper",
     // @DesignToken zIndex: `overlay`
     zIndex: 1050
@@ -134,7 +134,7 @@ var FilterDropdown = function FilterDropdown(_ref3) {
     visible: menuVisible,
     attachEl: menuTrigger,
     onClose: menuVisibleAction.off
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: cx(prefixCls + "__content", filterDropdownClassName),
     style: {
       width: filterDropdownWidth

package/lib/esm/TableBody.js

@@ -7,7 +7,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef, useState, useMemo, useCallback } from 'react';
+import List from './node_modules/rc-virtual-list/es/List.js';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useLatestCallback } from '@hi-ui/use-latest';
@@ -44,7 +45,9 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       hasAvgColumn = _useTableContext.hasAvgColumn,
       avgRow = _useTableContext.avgRow,
       hasSumColumn = _useTableContext.hasSumColumn,
-      sumRow = _useTableContext.sumRow;
+      sumRow = _useTableContext.sumRow,
+      colWidths = _useTableContext.colWidths,
+      virtual = _useTableContext.virtual;
 
   var cls = cx(prefixCls + "-body");
   var getRequiredProps = useLatestCallback(function (id) {
@@ -57,9 +60,86 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       // focused: focusedId === id,
 
     };
-  }); // 外层增加 div 作为滚动容器
+  });
 
-  return /*#__PURE__*/React.createElement("div", {
+  var _useState = useState(0),
+      scrollLeft = _useState[0],
+      setScrollLeft = _useState[1]; // 是否使用虚拟滚动
+
+
+  var showVirtual = virtual && isArrayNonEmpty(transitionData);
+  var rowWidth = useMemo(function () {
+    var tmpWidth = 0;
+    colWidths.forEach(function (width) {
+      return tmpWidth += width;
+    });
+    return tmpWidth;
+  }, [colWidths]);
+  var onVirtualContainerScroll = useCallback(function (evt) {
+    var _a;
+
+    setScrollLeft(((_a = scrollBodyElementRef === null || scrollBodyElementRef === void 0 ? void 0 : scrollBodyElementRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) || 0);
+    onTableBodyScroll(evt);
+  }, [scrollBodyElementRef, onTableBodyScroll]);
+
+  if (showVirtual) {
+    // TODO： avg和summay row的逻辑
+    var vMaxHeight = maxHeight || 300;
+    return /*#__PURE__*/React__default.createElement("div", {
+      ref: scrollBodyElementRef,
+      className: cls,
+      onScroll: onVirtualContainerScroll,
+      style: {
+        maxHeight: maxHeight !== undefined ? maxHeight : undefined,
+        // maxHeight 小于 table 实际高度才出现纵向滚动条
+        overflowY: maxHeight !== undefined && bodyTableRef.current && bodyTableRef.current.clientHeight > maxHeight ? 'scroll' : undefined,
+        // 表格宽度大于div宽度才出现横向滚动条
+        overflowX: canScroll ? 'scroll' : undefined
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      ref: measureRowElementRef,
+      style: {
+        height: 1,
+        background: 'transparent'
+      }
+    }), /*#__PURE__*/React__default.createElement("div", {
+      ref: bodyTableRef,
+      style: {
+        height: 1,
+        background: 'transparent',
+        width: rowWidth
+      }
+    }), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        width: '100%',
+        position: 'sticky',
+        left: 0
+      }
+    }, /*#__PURE__*/React__default.createElement(List, {
+      data: transitionData,
+      height: vMaxHeight,
+      itemHeight: 10,
+      itemKey: "id",
+      children: function children(row, index) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          style: {
+            position: 'relative',
+            left: -scrollLeft
+          }
+        }, /*#__PURE__*/React__default.createElement(TableRow // key={depth + index}
+        , Object.assign({
+          // key={depth + index}
+          key: row.id,
+          // @ts-ignore
+          rowIndex: index,
+          rowData: row
+        }, getRequiredProps(row.id))));
+      }
+    })));
+  } // 外层增加 div 作为滚动容器
+
+
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: scrollBodyElementRef,
     className: cls,
     onScroll: onTableBodyScroll,
@@ -70,18 +150,18 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       // 表格宽度大于div宽度才出现横向滚动条
       overflowX: canScroll ? 'scroll' : undefined
     }
-  }, /*#__PURE__*/React.createElement("table", {
+  }, /*#__PURE__*/React__default.createElement("table", {
     ref: bodyTableRef,
     style: {
       width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
     }
-  }, /*#__PURE__*/React.createElement("colgroup", null, leafColumns.map(function (col, idx) {
-    return /*#__PURE__*/React.createElement("col", Object.assign({
+  }, /*#__PURE__*/React__default.createElement("colgroup", null, leafColumns.map(function (col, idx) {
+    return /*#__PURE__*/React__default.createElement("col", Object.assign({
       key: idx,
       className: prefixCls + "-col"
     }, getColgroupProps(col, idx)));
-  })), /*#__PURE__*/React.createElement("tbody", null, isArrayNonEmpty(transitionData) ? /*#__PURE__*/React.createElement(React.Fragment, null, transitionData.map(function (row, index) {
-    return /*#__PURE__*/React.createElement(TableRow, Object.assign({
+  })), /*#__PURE__*/React__default.createElement("tbody", null, isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, transitionData.map(function (row, index) {
+    return /*#__PURE__*/React__default.createElement(TableRow, Object.assign({
       ref: index === 0 ? measureRowElementRef : null,
       // key={depth + index}
       key: row.id,
@@ -89,12 +169,12 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       rowIndex: index,
       rowData: row
     }, getRequiredProps(row.id)));
-  }), hasSumColumn ? /*#__PURE__*/React.createElement(TableRow, {
+  }), hasSumColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
     key: sumRow.id,
     rowIndex: transitionData.length,
     rowData: sumRow,
     isSumRow: true
-  }) : null, hasAvgColumn ? /*#__PURE__*/React.createElement(TableRow, {
+  }) : null, hasAvgColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
     key: avgRow.id,
     rowIndex: transitionData.length + 1,
     rowData: avgRow,
@@ -122,18 +202,18 @@ var renderEmptyContent = function renderEmptyContent(_ref2) {
       colSpan = _ref2.colSpan,
       emptyContent = _ref2.emptyContent,
       scrollBodyWidth = _ref2.scrollBodyWidth;
-  return /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React__default.createElement("tr", {
     className: className
-  }, /*#__PURE__*/React.createElement("td", {
+  }, /*#__PURE__*/React__default.createElement("td", {
     colSpan: colSpan
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'sticky',
       left: 0,
       width: scrollBodyWidth !== null && scrollBodyWidth !== void 0 ? scrollBodyWidth : '100%',
       overflow: 'hidden'
     }
-  }, emptyContent || /*#__PURE__*/React.createElement(EmptyState, null))));
+  }, emptyContent || /*#__PURE__*/React__default.createElement(EmptyState, null))));
 };
 
 export { TableBody };