@sellmate/design-system 0.0.46 → 0.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button_12.cjs.entry.js +221 -44
- package/dist/collection/components/sd-table-backup/sd-table-backup.css +27 -7
- package/dist/collection/components/sd-table-backup/sd-table-backup.js +278 -53
- package/dist/collection/components/sd-table-backup/sd-table-backup.js.map +1 -1
- package/dist/components/sd-table-backup.js +230 -47
- package/dist/components/sd-table-backup.js.map +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-36f24993.entry.js → p-423025fa.entry.js} +2 -2
- package/dist/design-system/p-423025fa.entry.js.map +1 -0
- package/dist/design-system/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -1
- package/dist/esm/sd-button_12.entry.js +221 -44
- package/dist/types/components/sd-table-backup/sd-table-backup.d.ts +21 -3
- package/dist/types/components.d.ts +18 -8
- package/hydrate/index.js +229 -47
- package/hydrate/index.mjs +229 -47
- package/package.json +2 -2
- package/dist/design-system/p-36f24993.entry.js.map +0 -1
|
@@ -2798,7 +2798,7 @@ const SdSelectOption = class {
|
|
|
2798
2798
|
};
|
|
2799
2799
|
SdSelectOption.style = sdSelectOptionCss;
|
|
2800
2800
|
|
|
2801
|
-
const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true] td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100
|
|
2801
|
+
const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:var(--table-width, 100%);height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}";
|
|
2802
2802
|
|
|
2803
2803
|
const SdTable = class {
|
|
2804
2804
|
constructor(hostRef) {
|
|
@@ -2821,6 +2821,7 @@ const SdTable = class {
|
|
|
2821
2821
|
noDataLabel = '데이터가 없습니다.';
|
|
2822
2822
|
isLoading = false;
|
|
2823
2823
|
pagination;
|
|
2824
|
+
headerCellRenderer;
|
|
2824
2825
|
bodyCellRenderer;
|
|
2825
2826
|
useInternalPagination = false;
|
|
2826
2827
|
useRowsPerPageSelect = false;
|
|
@@ -2830,9 +2831,15 @@ const SdTable = class {
|
|
|
2830
2831
|
{ label: '50개씩 보기', value: 50 },
|
|
2831
2832
|
{ label: '100개씩 보기', value: 100 },
|
|
2832
2833
|
];
|
|
2833
|
-
useVirtualScroll =
|
|
2834
|
-
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
|
|
2835
|
-
|
|
2834
|
+
useVirtualScroll = {}; // 가상 스크롤 사용 여부
|
|
2835
|
+
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
|
|
2836
|
+
// 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
|
|
2837
|
+
// 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
|
|
2838
|
+
virtualColumnWidth = 120;
|
|
2839
|
+
virtualBufferSize = {
|
|
2840
|
+
vertical: 5,
|
|
2841
|
+
horizontal: 5,
|
|
2842
|
+
}; // 가상 스크롤 위아래 버퍼 크기
|
|
2836
2843
|
sdSelectChange;
|
|
2837
2844
|
sdPageChange;
|
|
2838
2845
|
sdRowsPerPageChange;
|
|
@@ -2842,17 +2849,34 @@ const SdTable = class {
|
|
|
2842
2849
|
columnWidths = [];
|
|
2843
2850
|
scrolledLeft = false;
|
|
2844
2851
|
scrolledRight = false;
|
|
2845
|
-
|
|
2846
|
-
|
|
2852
|
+
// 세로 가상 스크롤 상태값
|
|
2853
|
+
virtualStartIndex = 0;
|
|
2854
|
+
virtualEndIndex = 0;
|
|
2847
2855
|
scrollTopPosition = 0;
|
|
2856
|
+
// 가로 가상 스크롤 상태값
|
|
2857
|
+
virtualStartColIdx = 0;
|
|
2858
|
+
virtualEndColIdx = 0;
|
|
2859
|
+
scrollLeftPosition = 0;
|
|
2848
2860
|
scrollRequestAnimationFrame = null;
|
|
2849
2861
|
scrollContainer = null;
|
|
2850
2862
|
handleColumnsChange(newCols) {
|
|
2851
2863
|
this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
|
|
2864
|
+
if (this.useVirtualScroll.horizontal) {
|
|
2865
|
+
requestAnimationFrame(() => {
|
|
2866
|
+
this.calculateVisibleColumnRange();
|
|
2867
|
+
});
|
|
2868
|
+
}
|
|
2869
|
+
}
|
|
2870
|
+
handleColumnWidthsChange() {
|
|
2871
|
+
if (this.useVirtualScroll.horizontal) {
|
|
2872
|
+
requestAnimationFrame(() => {
|
|
2873
|
+
this.calculateVisibleColumnRange();
|
|
2874
|
+
});
|
|
2875
|
+
}
|
|
2852
2876
|
}
|
|
2853
2877
|
handleRowsChange(newRows) {
|
|
2854
2878
|
this.innerRows = [...newRows];
|
|
2855
|
-
if (this.useVirtualScroll) {
|
|
2879
|
+
if (this.useVirtualScroll.vertical) {
|
|
2856
2880
|
requestAnimationFrame(() => {
|
|
2857
2881
|
this.calculateVisibleRange();
|
|
2858
2882
|
});
|
|
@@ -2864,7 +2888,7 @@ const SdTable = class {
|
|
|
2864
2888
|
handlePaginationChange(newVal) {
|
|
2865
2889
|
if (newVal?.page && newVal.page !== this.currentPage) {
|
|
2866
2890
|
this.currentPage = newVal.page;
|
|
2867
|
-
if (this.useVirtualScroll && this.scrollContainer) {
|
|
2891
|
+
if (this.useVirtualScroll.vertical && this.scrollContainer) {
|
|
2868
2892
|
this.scrollContainer.scrollTop = 0;
|
|
2869
2893
|
this.scrollTopPosition = 0;
|
|
2870
2894
|
this.calculateVisibleRange();
|
|
@@ -2891,13 +2915,21 @@ const SdTable = class {
|
|
|
2891
2915
|
const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
|
|
2892
2916
|
this.scrolledLeft = scrollLeft > 0;
|
|
2893
2917
|
this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
|
|
2894
|
-
if (this.useVirtualScroll) {
|
|
2918
|
+
if (this.useVirtualScroll.vertical || this.useVirtualScroll.horizontal) {
|
|
2895
2919
|
if (this.scrollRequestAnimationFrame !== null) {
|
|
2896
2920
|
cancelAnimationFrame(this.scrollRequestAnimationFrame);
|
|
2897
2921
|
}
|
|
2898
2922
|
this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
|
|
2899
|
-
|
|
2900
|
-
this.
|
|
2923
|
+
// 세로 가상 스크롤 계산
|
|
2924
|
+
if (this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop) {
|
|
2925
|
+
this.scrollTopPosition = scrollTop;
|
|
2926
|
+
this.calculateVisibleRange();
|
|
2927
|
+
}
|
|
2928
|
+
// 가로 가상 스크롤 계산
|
|
2929
|
+
if (this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft) {
|
|
2930
|
+
this.scrollLeftPosition = scrollLeft;
|
|
2931
|
+
this.calculateVisibleColumnRange();
|
|
2932
|
+
}
|
|
2901
2933
|
this.scrollRequestAnimationFrame = null;
|
|
2902
2934
|
});
|
|
2903
2935
|
}
|
|
@@ -2922,7 +2954,7 @@ const SdTable = class {
|
|
|
2922
2954
|
return result;
|
|
2923
2955
|
}
|
|
2924
2956
|
get virtualRows() {
|
|
2925
|
-
if (!this.useVirtualScroll) {
|
|
2957
|
+
if (!this.useVirtualScroll.vertical) {
|
|
2926
2958
|
return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
|
|
2927
2959
|
}
|
|
2928
2960
|
return this.paginatedRows
|
|
@@ -2933,18 +2965,40 @@ const SdTable = class {
|
|
|
2933
2965
|
}));
|
|
2934
2966
|
}
|
|
2935
2967
|
get topSpacerHeight() {
|
|
2936
|
-
if (!this.useVirtualScroll || this.virtualStartIndex === 0)
|
|
2968
|
+
if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
|
|
2937
2969
|
return 0;
|
|
2938
2970
|
return this.virtualStartIndex * this.virtualRowHeight;
|
|
2939
2971
|
}
|
|
2940
2972
|
get bottomSpacerHeight() {
|
|
2941
|
-
if (!this.useVirtualScroll)
|
|
2973
|
+
if (!this.useVirtualScroll.vertical)
|
|
2942
2974
|
return 0;
|
|
2943
2975
|
const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
|
|
2944
2976
|
return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
|
|
2945
2977
|
}
|
|
2978
|
+
getHorizontalSpacerWidth(position) {
|
|
2979
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
2980
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
2981
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
2982
|
+
const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
|
|
2983
|
+
if (position === 'right' && remainingCols <= 0)
|
|
2984
|
+
return 0;
|
|
2985
|
+
const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
|
|
2986
|
+
return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
|
|
2987
|
+
}
|
|
2988
|
+
get leftSpacerWidth() {
|
|
2989
|
+
if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
|
|
2990
|
+
return 0;
|
|
2991
|
+
}
|
|
2992
|
+
return this.getHorizontalSpacerWidth('left');
|
|
2993
|
+
}
|
|
2994
|
+
get rightSpacerWidth() {
|
|
2995
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
2996
|
+
return 0;
|
|
2997
|
+
}
|
|
2998
|
+
return this.getHorizontalSpacerWidth('right');
|
|
2999
|
+
}
|
|
2946
3000
|
get totalVirtualHeight() {
|
|
2947
|
-
if (!this.useVirtualScroll)
|
|
3001
|
+
if (!this.useVirtualScroll.vertical)
|
|
2948
3002
|
return 0;
|
|
2949
3003
|
return this.paginatedRows.length * this.virtualRowHeight;
|
|
2950
3004
|
}
|
|
@@ -3003,8 +3057,9 @@ const SdTable = class {
|
|
|
3003
3057
|
return true; // 전부 선택됨
|
|
3004
3058
|
return null; // 일부만 선택됨
|
|
3005
3059
|
}
|
|
3060
|
+
// 세로 가상 스크롤 렌더링 계산
|
|
3006
3061
|
calculateVisibleRange() {
|
|
3007
|
-
if (!this.useVirtualScroll) {
|
|
3062
|
+
if (!this.useVirtualScroll.vertical) {
|
|
3008
3063
|
this.virtualStartIndex = 0;
|
|
3009
3064
|
this.virtualEndIndex = this.paginatedRows.length - 1;
|
|
3010
3065
|
return;
|
|
@@ -3014,8 +3069,60 @@ const SdTable = class {
|
|
|
3014
3069
|
const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
|
|
3015
3070
|
const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
|
|
3016
3071
|
const endIndex = startIndex + visibleCount;
|
|
3017
|
-
|
|
3018
|
-
this.
|
|
3072
|
+
const bufferSize = this.virtualBufferSize.vertical || 5;
|
|
3073
|
+
this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
|
|
3074
|
+
this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
|
|
3075
|
+
}
|
|
3076
|
+
// 가로 가상 스크롤 렌더링 계산
|
|
3077
|
+
calculateVisibleColumnRange() {
|
|
3078
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
3079
|
+
this.virtualStartColIdx = 0;
|
|
3080
|
+
this.virtualEndColIdx = this.visibleColumns.length - 1;
|
|
3081
|
+
return;
|
|
3082
|
+
}
|
|
3083
|
+
const scrollLeft = this.scrollLeftPosition;
|
|
3084
|
+
const containerWidth = this.scrollContainer?.clientWidth || 0;
|
|
3085
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
3086
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
3087
|
+
// 가상 스크롤 컬럼 - sticky column 제외
|
|
3088
|
+
const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
3089
|
+
if (virtualColumns.length === 0) {
|
|
3090
|
+
this.virtualStartColIdx = 0;
|
|
3091
|
+
this.virtualEndColIdx = 0;
|
|
3092
|
+
return;
|
|
3093
|
+
}
|
|
3094
|
+
const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
|
|
3095
|
+
(this.selectable ? 52 : 0);
|
|
3096
|
+
const stickyRightWidth = this.columnWidths
|
|
3097
|
+
.slice(this.visibleColumns.length - stickyRightCount)
|
|
3098
|
+
.reduce((sum, width) => sum + width, 0);
|
|
3099
|
+
// 가상 스크롤 영역의 너비 계산
|
|
3100
|
+
const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
|
|
3101
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
3102
|
+
const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
|
|
3103
|
+
const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
|
|
3104
|
+
acc.push((acc[idx - 1] || 0) + width);
|
|
3105
|
+
return acc;
|
|
3106
|
+
}, []);
|
|
3107
|
+
let startIdx = 0; // 가상 스크롤 시작 인덱스
|
|
3108
|
+
let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
|
|
3109
|
+
// sticky left 영역 제외한 스크롤 위치
|
|
3110
|
+
for (let i = 0; i < reducedVirtualWidth.length; i++) {
|
|
3111
|
+
if (reducedVirtualWidth[i] > virtualScrollLeft) {
|
|
3112
|
+
startIdx = Math.max(0, i);
|
|
3113
|
+
break;
|
|
3114
|
+
}
|
|
3115
|
+
}
|
|
3116
|
+
const scrollRight = virtualScrollLeft + virtualScrollableWidth;
|
|
3117
|
+
for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
|
|
3118
|
+
if (reducedVirtualWidth[i] >= scrollRight) {
|
|
3119
|
+
endIdx = Math.min(virtualColumns.length - 1, i);
|
|
3120
|
+
break;
|
|
3121
|
+
}
|
|
3122
|
+
}
|
|
3123
|
+
const bufferSize = this.virtualBufferSize.horizontal || 5;
|
|
3124
|
+
this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
|
|
3125
|
+
this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
|
|
3019
3126
|
}
|
|
3020
3127
|
// ----- Helpers -----
|
|
3021
3128
|
getStickyStyle(colIdx) {
|
|
@@ -3058,34 +3165,71 @@ const SdTable = class {
|
|
|
3058
3165
|
const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
3059
3166
|
return format ? format(value, row) : value;
|
|
3060
3167
|
}
|
|
3168
|
+
getColumnRenderedInOrder() {
|
|
3169
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
3170
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
3171
|
+
// Sticky left 컬럼들
|
|
3172
|
+
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
3173
|
+
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
3174
|
+
const middleCols = this.useVirtualScroll.horizontal
|
|
3175
|
+
? this.visibleColumns
|
|
3176
|
+
.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
|
|
3177
|
+
.slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
|
|
3178
|
+
: this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
3179
|
+
return {
|
|
3180
|
+
stickyLeftCount,
|
|
3181
|
+
stickyRightCount,
|
|
3182
|
+
stickyLeftCols,
|
|
3183
|
+
middleCols,
|
|
3184
|
+
stickyRightCols,
|
|
3185
|
+
};
|
|
3186
|
+
}
|
|
3061
3187
|
// ----- Render -----
|
|
3062
|
-
|
|
3188
|
+
renderHead() {
|
|
3189
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
3063
3190
|
return (index.h("thead", null, index.h("tr", null, this.selectable && (index.h("th", { class: {
|
|
3064
3191
|
'sd-th': true,
|
|
3065
3192
|
'sd-th--selected': true,
|
|
3066
3193
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
3067
3194
|
}, style: {
|
|
3068
3195
|
'--sticky-left-offset': '0px',
|
|
3069
|
-
} }, index.h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))),
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3196
|
+
} }, index.h("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
|
|
3197
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
3198
|
+
return (index.h("th", { key: col.name, class: {
|
|
3199
|
+
'sd-th': true,
|
|
3200
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
3201
|
+
'sticky-left': true,
|
|
3202
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
3203
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
|
|
3204
|
+
}), this.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
|
|
3205
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
3206
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
3207
|
+
return (index.h("th", { key: col.name, class: {
|
|
3208
|
+
'sd-th': true,
|
|
3209
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
3210
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
3211
|
+
}), this.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
|
|
3212
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
3213
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
3214
|
+
return (index.h("th", { key: col.name, class: {
|
|
3215
|
+
'sd-th': true,
|
|
3216
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
3217
|
+
'sticky-right': true,
|
|
3218
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
3219
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, index.h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, index.h("slot", { name: `header-cell-${col.name}` }, index.h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && index.h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (index.h("sd-tooltip", { ...col.tooltipOptions }, index.h("div", { slot: "content" }, col.tooltip.map(text => (index.h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (index.h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
3220
|
+
}))));
|
|
3078
3221
|
}
|
|
3079
3222
|
renderBody() {
|
|
3080
|
-
return (index.h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (index.h("div", { class: "sd-table__loading" }, index.h("sd-loading-spinner", null))), this.useVirtualScroll && this.topSpacerHeight > 0 && (index.h("tr", { key: "virtual-top-spacer", style: {
|
|
3223
|
+
return (index.h("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll.vertical ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (index.h("div", { class: "sd-table__loading" }, index.h("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && (index.h("tr", { key: "virtual-top-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
3081
3224
|
height: `${this.topSpacerHeight}px`,
|
|
3082
|
-
}, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
|
|
3083
|
-
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (index.h("tr", { key: "virtual-bottom-spacer", style: {
|
|
3225
|
+
}, "aria-hidden": "true" }, index.h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, index.h("div", { class: "sd-table__skeleton" })))), this.paginatedRows.length > 0 &&
|
|
3226
|
+
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical && this.bottomSpacerHeight > 0 && (index.h("tr", { key: "virtual-bottom-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
3084
3227
|
height: `${this.bottomSpacerHeight}px`,
|
|
3085
|
-
}, "aria-hidden": "true" }))));
|
|
3228
|
+
}, "aria-hidden": "true" }, index.h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, index.h("div", { class: "sd-table__skeleton" }))))));
|
|
3086
3229
|
}
|
|
3087
3230
|
renderRow(row, rowIdx) {
|
|
3088
|
-
|
|
3231
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
3232
|
+
return (index.h("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
|
|
3089
3233
|
? {
|
|
3090
3234
|
height: `${this.virtualRowHeight}px`,
|
|
3091
3235
|
}
|
|
@@ -3095,29 +3239,61 @@ const SdTable = class {
|
|
|
3095
3239
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
3096
3240
|
}, style: {
|
|
3097
3241
|
'--sticky-left-offset': '0px',
|
|
3098
|
-
} }, index.h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))),
|
|
3242
|
+
} }, index.h("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
|
|
3099
3243
|
const rendered = this.bodyCellRenderer?.(column, row);
|
|
3100
3244
|
return (index.h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
3101
3245
|
'sd-td': true,
|
|
3102
3246
|
[`sd-td--${column.align || 'left'}`]: true,
|
|
3103
|
-
'sticky-left':
|
|
3104
|
-
'sticky-
|
|
3105
|
-
'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
|
|
3106
|
-
'sticky-right-edge': Boolean(this.stickyColumn.right &&
|
|
3107
|
-
colIdx === this.visibleColumns.length - this.stickyColumn.right),
|
|
3247
|
+
'sticky-left': true,
|
|
3248
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
3108
3249
|
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
3109
|
-
}, style: this.getStickyStyle(
|
|
3250
|
+
}, style: this.getStickyStyle(idx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
3251
|
+
}), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
|
|
3252
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
3253
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
3254
|
+
return (index.h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
3255
|
+
'sd-td': true,
|
|
3256
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
3257
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
3258
|
+
}, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
3259
|
+
}), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
|
|
3260
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
3261
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
3262
|
+
return (index.h("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
3263
|
+
'sd-td': true,
|
|
3264
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
3265
|
+
'sticky-right': true,
|
|
3266
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
3267
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
3268
|
+
}, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (index.h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
3110
3269
|
})));
|
|
3111
3270
|
}
|
|
3271
|
+
renderSpacerTd(position, rowIdx) {
|
|
3272
|
+
const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
|
|
3273
|
+
const showSpacer = position === 'left'
|
|
3274
|
+
? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
|
|
3275
|
+
: this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
|
|
3276
|
+
if (!showSpacer)
|
|
3277
|
+
return null;
|
|
3278
|
+
return (index.h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
|
|
3279
|
+
width: `${spacerWidth}px`,
|
|
3280
|
+
minWidth: `${spacerWidth}px`,
|
|
3281
|
+
maxWidth: `${spacerWidth}px`,
|
|
3282
|
+
padding: '0',
|
|
3283
|
+
border: 'none',
|
|
3284
|
+
}, "aria-hidden": "true" }, index.h("div", { class: "sd-table__skeleton" })));
|
|
3285
|
+
}
|
|
3112
3286
|
render() {
|
|
3113
|
-
return (index.h(index.Host, { key: '
|
|
3287
|
+
return (index.h(index.Host, { key: '06caa893329f7de501804922dea824c01fc393bb' }, index.h("div", { key: '7b806f1fa25c60e11dd22cf67177c4856a576e76', class: "sd-table__wrapper", style: {
|
|
3114
3288
|
'--table-width': this.width,
|
|
3115
3289
|
'--table-height': this.height,
|
|
3116
|
-
} }, index.h("div", { key: '
|
|
3290
|
+
} }, index.h("div", { key: '6d24df1310c746fe7742dbeee3750d62bd286c25', class: "sd-table__container", style: {
|
|
3291
|
+
'--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
|
|
3292
|
+
} }, index.h("div", { key: 'de042c2e56baa207d1602b6d9cdcbe7d2c2780dd', class: {
|
|
3117
3293
|
'sd-table__middle': true,
|
|
3118
3294
|
'sd-table__middle--scrollable': this.paginatedRows.length > 0,
|
|
3119
3295
|
'sd-table__middle--loading': this.isLoading,
|
|
3120
|
-
} }, index.h("table", { key: '
|
|
3296
|
+
} }, index.h("table", { key: 'f392dbedf10677e704e0dd6fc1233dc931e2e017', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), index.h("div", { key: '99fa9cff08bd0599a63a34caba645e9893ea963d', class: "sd-table__bottom" }, !this.paginatedRows.length && (index.h("div", { key: '3e135dd33d5188abbe753b03c9a0c6c6f38210dc', class: "sd-table__no-data" }, index.h("slot", { key: '144d91b72af6ca2b966e7d3de783eb09f6880b20', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (index.h("div", { key: '0ce235dc30c09823f3bc37b47dfd4d1941d3dbd8', class: "sd-table__pagination" }, index.h("sd-pagination", { key: 'e68be3464a8e8c6e99290e6ec3308d22c4238738', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
|
|
3121
3297
|
if (!this.useInternalPagination) {
|
|
3122
3298
|
this.sdPageChange.emit(e.detail);
|
|
3123
3299
|
}
|
|
@@ -3125,7 +3301,7 @@ const SdTable = class {
|
|
|
3125
3301
|
this.currentPage = e.detail;
|
|
3126
3302
|
this.sdPageChange.emit(this.currentPage);
|
|
3127
3303
|
}
|
|
3128
|
-
} }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '
|
|
3304
|
+
} }), this.useRowsPerPageSelect && (index.h("sd-select", { key: 'ba48f26b761cd65c5f52f4b4734be6c2a55120f1', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
|
|
3129
3305
|
const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
|
|
3130
3306
|
if (!this.useInternalPagination) {
|
|
3131
3307
|
this.sdRowsPerPageChange.emit(changedRowsPerPage);
|
|
@@ -3149,6 +3325,7 @@ const SdTable = class {
|
|
|
3149
3325
|
}
|
|
3150
3326
|
static get watchers() { return {
|
|
3151
3327
|
"columns": ["handleColumnsChange"],
|
|
3328
|
+
"columnWidths": ["handleColumnWidthsChange"],
|
|
3152
3329
|
"rows": ["handleRowsChange"],
|
|
3153
3330
|
"selected": ["handleSelectedChange"],
|
|
3154
3331
|
"pagination": ["handlePaginationChange"]
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
.sd-table__wrapper .sd-table__container {
|
|
31
31
|
width: 100%;
|
|
32
|
-
height: var(--table-height, auto);
|
|
32
|
+
height: var(--table-container-height, auto);
|
|
33
33
|
position: relative;
|
|
34
34
|
border: 1px solid #e1e1e1;
|
|
35
35
|
border-radius: 8px;
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
will-change: scroll-position;
|
|
43
43
|
}
|
|
44
44
|
.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable {
|
|
45
|
-
height: var(--table-height, auto);
|
|
45
|
+
height: var(--table-container-height, auto);
|
|
46
46
|
}
|
|
47
47
|
.sd-table__wrapper .sd-table__container .sd-table__middle--loading {
|
|
48
48
|
overflow: hidden !important;
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
}
|
|
58
58
|
.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll {
|
|
59
59
|
position: relative;
|
|
60
|
-
height: var(--total-virtual-height, auto);
|
|
60
|
+
height: var(--total-virtual-height, --table-container-height, auto);
|
|
61
61
|
}
|
|
62
62
|
.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]) {
|
|
63
63
|
width: 100%;
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
padding: 0;
|
|
67
67
|
border: none;
|
|
68
68
|
}
|
|
69
|
-
.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true] td {
|
|
69
|
+
.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td {
|
|
70
70
|
display: none;
|
|
71
71
|
}
|
|
72
72
|
.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,
|
|
@@ -207,9 +207,9 @@
|
|
|
207
207
|
position: absolute;
|
|
208
208
|
top: 0;
|
|
209
209
|
left: 0;
|
|
210
|
-
width: 100
|
|
211
|
-
height: 100
|
|
212
|
-
min-height: 100
|
|
210
|
+
width: var(--table-width, 100%);
|
|
211
|
+
height: var(--table-container-height, 100%);
|
|
212
|
+
min-height: var(--table-container-height, 100%);
|
|
213
213
|
background: rgba(255, 255, 255, 0.6);
|
|
214
214
|
z-index: 200;
|
|
215
215
|
display: flex;
|
|
@@ -256,4 +256,24 @@
|
|
|
256
256
|
right: 10px;
|
|
257
257
|
top: 50%;
|
|
258
258
|
transform: translateY(-50%);
|
|
259
|
+
}
|
|
260
|
+
.sd-table__wrapper .sd-table__virtual-spacer,
|
|
261
|
+
.sd-table__wrapper .sd-table__virtual-row-spacer {
|
|
262
|
+
padding: 0;
|
|
263
|
+
}
|
|
264
|
+
.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,
|
|
265
|
+
.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton {
|
|
266
|
+
width: 100%;
|
|
267
|
+
height: 100%;
|
|
268
|
+
background: linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);
|
|
269
|
+
background-size: 200% 100%;
|
|
270
|
+
animation: skeleton-loading 1.5s ease-in-out infinite;
|
|
271
|
+
}
|
|
272
|
+
@keyframes skeleton-loading {
|
|
273
|
+
0% {
|
|
274
|
+
background-position: 200% 0;
|
|
275
|
+
}
|
|
276
|
+
100% {
|
|
277
|
+
background-position: -200% 0;
|
|
278
|
+
}
|
|
259
279
|
}
|